incremental-social/The-Modding-Tree
incremental-social/The-Modding-Tree
Template
1
0
Fork 0
mirror of https://github.com/Acamaeda/The-Modding-Tree.git synced 2024-11-24 09:21:46 +00:00
Code Issues Releases Activity Actions

Redesigned lore component to be minimized individually rather than disabled globally

Browse source
This commit is contained in:
thepaperpilot 2020-10-24 19:06:28 -05:00
parent 31e069dd2f
commit 46c9aadbbd
4 changed files with 38 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
index.html
View file

@ -91,7 +91,6 @@
</tr>
<tr>
<td><button class="opt" onclick="toggleOpt('hideChallenges')">Completed Challenges: {{ player.hideChallenges?"HIDDEN":"SHOWN" }}</button></td>
<td><button class="opt" onclick="toggleOpt('showStory')">Story: {{ player.showStory?"SHOWN":"HIDDEN" }}</button></td>
<!-- <td><button class="opt" onclick="toggleOpt('oldStyle')">Style: {{ player.oldStyle?"v1.0":"NEW" }}</button></td>-->
</tr>
</table>

1
js/utils.js
View file

@ -122,6 +122,7 @@ function getStartPlayer() {
for (item in layers[layer].microtabs)
playerdata.subtabs[layer][item] = Object.keys(layers[layer].microtabs[item])[0]
}
playerdata[layer].loreHidden = false
}
return playerdata
}

12
js/v.js
View file

@ -72,9 +72,15 @@ function loadVue() {
Vue.component('lore', {
props: ['layer', 'data'],
template: `
<div v-if="player.showStory"
v-bind:class="{ story: true }"
v-html="layers[layer].lore">
<div class="story" v-bind:style="{'border-color': tmp[layer].color}">
<button class="story-title" v-bind:style="{'background-color': tmp[layer].color}"
v-on:click="player[layer].loreHidden = player[layer].loreHidden !== true">
<span class="story-toggle">{{player[layer].loreHidden === true ? "+" : "-"}}</span>
{{layers[layer].name}}
</button>
<div v-if="player[layer].loreHidden !== true" class="story-text">
<span v-html="data ? data : layers[layer].lore"></span>
</div>
</div>
`
})

31
style.css
View file

@ -599,8 +599,33 @@ button > * {
}
.story {
max-width: 600px;
border: solid 5px;
padding: 8px;
width: 600px;
max-width: 95%;
border: solid 4px;
border-radius: 8px;
margin-bottom: 8px;
}
.story-title {
text-align: left;
font-size: 24px;
color: black;
cursor: pointer;
border: none;
width: 100%;
padding: 2px;
}
.story-toggle {
border: none;
background: black;
color: white;
font-size: 20px;
pointer-events: none;
width: 1em;
display: inline-block;
}
.story-text {
padding: 2px;
}