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-22 00:21:32 +00:00
Code Issues Releases Activity Actions

Added CSS styling for layer tabs

Browse source
This commit is contained in:
Acamaeda 2020-09-29 21:47:26 -04:00
parent 0b50935be1
commit b353693c89
3 changed files with 26 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
index.html
View file

@ -130,8 +130,9 @@
<canvas id="treeCanvas" class="canvas"></canvas> <canvas id="treeCanvas" class="canvas"></canvas>
</div> </div>
<div v-for="layer in LAYERS"> <div v-for="layer in LAYERS">
<div v-if="player.tab==layer && !layers[layer].tabFormat" class="col right"> <div v-if="player.tab==layer" v-bind:class="'col right'" v-bind:style="layers[layer].style ? layers[layer].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">
<main-display :layer="layer"></main-display> <main-display :layer="layer"></main-display>
<prestige-button :layer="layer"></prestige-button> <prestige-button :layer="layer"></prestige-button>
<span v-if="layers[layer].type=='normal' && tmp.resetGain[layer].lt(100) && player[layer].points.lt(1e3)"><br>You have {{formatWhole(tmp.layerAmt[layer])}} {{layers[layer].baseResource}}</span> <span v-if="layers[layer].type=='normal' && tmp.resetGain[layer].lt(100) && player[layer].points.lt(1e3)"><br>You have {{formatWhole(tmp.layerAmt[layer])}} {{layers[layer].baseResource}}</span>
@ -144,14 +145,12 @@
<challs :layer="layer"></challs> <challs :layer="layer"></challs>
<br><br> <br><br>
</div> </div>
<div v-if="player.tab==layer && layers[layer].tabFormat" class="col right"> <div v-if="layers[layer].tabFormat">
<button class="back" onclick="showTab('tree')">←</button><br><br><br>
<div v-for="data in layers[layer].tabFormat"> <div v-for="data in layers[layer].tabFormat">
<div v-if="!Array.isArray(data)" v-bind:is="data" :layer= "layer"></div> <div v-if="!Array.isArray(data)" v-bind:is="data" :layer= "layer"></div>
<div v-else-if="data.length==3" v-bind:is="data[0]" :layer= "layer" :data= "data[1]" :data2="data[2]"></div> <div v-else-if="data.length==3" v-bind:is="data[0]" :layer= "layer" :data= "data[1]" :data2="data[2]"></div>
<div v-else-if="data.length==2" v-bind:is="data[0]" :layer= "layer" :data= "data[1]"></div> <div v-else-if="data.length==2" v-bind:is="data[0]" :layer= "layer" :data= "data[1]"></div>
</divs>
</div>
</div> </div>
</div> </div>
</div> </div>

5
js/layers.js
View file

@ -107,7 +107,10 @@ var layers = {
{"color": "red", "font-size": "32px", "font-family": "Comic Sans MS"}], {"color": "red", "font-size": "32px", "font-family": "Comic Sans MS"}],
"blank", "blank",
["toggle", ["c", "beep"]], ["toggle", ["c", "beep"]],
"milestones", "blank", "blank", "upgrades"] "milestones", "blank", "blank", "upgrades"],
style: {
'background-color': 'blue'
},
}, },
f: { f: {

6
sampleLayers.js
View file

@ -133,7 +133,11 @@ var layers = {
{"color": "red", "font-size": "32px", "font-family": "Comic Sans MS"}], {"color": "red", "font-size": "32px", "font-family": "Comic Sans MS"}],
"blank", "blank",
["toggle", ["c", "beep"]], ["toggle", ["c", "beep"]],
"milestones", "blank", "blank", "upgrades"] }, "milestones", "blank", "blank", "upgrades"] ,
style: {
'background-color': 'blue'
},
},
f: { // This layer contains a more minimal set of things, besides a branch and "boop" f: { // This layer contains a more minimal set of things, besides a branch and "boop"
startData() { return { startData() { return {
unl: false, unl: false,