diff --git a/index.html b/index.html index 160cd73..cccccf4 100644 --- a/index.html +++ b/index.html @@ -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> diff --git a/js/utils.js b/js/utils.js index ad7e64b..5929000 100644 --- a/js/utils.js +++ b/js/utils.js @@ -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 } diff --git a/js/v.js b/js/v.js index 75c5b23..07888b4 100644 --- a/js/v.js +++ b/js/v.js @@ -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> ` }) diff --git a/style.css b/style.css index 44a2b36..0f710dd 100644 --- a/style.css +++ b/style.css @@ -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; +}