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-28 02:51:55 +00:00
Code Issues Releases Activity Actions

Added lore component

Browse source
This commit is contained in:
thepaperpilot 2020-10-24 11:40:56 -05:00
parent 38391cac2a
commit 2ad2a6768b
4 changed files with 21 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -91,6 +91,7 @@
</tr> </tr>
<tr> <tr>
<td><button class="opt" onclick="toggleOpt('hideChallenges')">Completed Challenges: {{ player.hideChallenges?"HIDDEN":"SHOWN" }}</button></td> <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>--> <!-- <td><button class="opt" onclick="toggleOpt('oldStyle')">Style: {{ player.oldStyle?"v1.0":"NEW" }}</button></td>-->
</tr> </tr>
</table> </table>
@ -162,6 +163,7 @@
<div v-if="player.tab==layer" v-bind:class="'col right fast tab'" v-bind:style="[tmp[layer].style ? tmp[layer].style : {}, (layers[layer].tabFormat && !Array.isArray(tmp[layer].tabFormat)) ? tmp[layer].tabFormat[player.subtabs[layer].mainTabs].style : {}]"> <div v-if="player.tab==layer" v-bind:class="'col right fast tab'" v-bind:style="[tmp[layer].style ? tmp[layer].style : {}, (layers[layer].tabFormat && !Array.isArray(tmp[layer].tabFormat)) ? tmp[layer].tabFormat[player.subtabs[layer].mainTabs].style : {}]">
<button class="back" onclick="showTab('tree')">←</button><br><br><br> <button class="back" onclick="showTab('tree')">←</button><br><br><br>
<div v-if="!layers[layer].tabFormat"> <div v-if="!layers[layer].tabFormat">
<lore v-if="tmp[layer].lore" :layer="layer"></lore>
<main-display v-bind:style="tmp[layer].componentStyles['main-display']" :layer="layer"></main-display> <main-display v-bind:style="tmp[layer].componentStyles['main-display']" :layer="layer"></main-display>
<div v-if="tmp[layer].type !== 'none'"> <div v-if="tmp[layer].type !== 'none'">
<prestige-button v-bind:style="tmp[layer].componentStyles['prestige-button']" :layer="layer"></prestige-button> <prestige-button v-bind:style="tmp[layer].componentStyles['prestige-button']" :layer="layer"></prestige-button>

1
js/utils.js
View file

@ -90,6 +90,7 @@ function startPlayerBase() {
keepGoing: false, keepGoing: false,
hasNaN: false, hasNaN: false,
hideChallenges: false, hideChallenges: false,
showStory: true,
points: modInfo.initialStartPoints, points: modInfo.initialStartPoints,
subtabs: {}, subtabs: {},
} }

10
js/v.js
View file

@ -69,6 +69,16 @@ 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>
`
})
// Data = width in px, by default fills the full area // Data = width in px, by default fills the full area
Vue.component('h-line', { Vue.component('h-line', {

7
style.css
View file

@ -597,3 +597,10 @@ button > * {
.ghost { .ghost {
visibility: hidden visibility: hidden
} }
.story {
max-width: 600px;
border: solid 5px;
padding: 8px;
margin-bottom: 8px;
}