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 2025-01-18 03:31:30 +00:00
Code Issues Releases Activity Actions

The points display and other gui elements stay at the top of the screen when the tree scrolls.

Browse source
This commit is contained in:
Acamaeda 2020-10-14 19:06:45 -04:00
parent 9590b09c13
commit 082fd913f7
3 changed files with 54 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
changelog.md
View file

@ -4,6 +4,7 @@
Added progress bars, which are highly customizable and can be horizontal or vertical!
Added clickables, a more generalized variant of buyables.
Support for multiple completions of challenges.
The points display and other gui elements stay at the top of the screen when the tree scrolls.
Added getter/setter functions for buyable amount and such
Moved modInfo to game.js, added a spot for a Discord link, changelog link, and a separate mod version from the TMT version
Tree structure is based on layer data, no index.html needed.

63
index.html
View file

@ -89,27 +89,50 @@
</tr>
</table>
</div>
<div id="treeTab" v-if="player.tab!='gameEnded'" onscroll="resizeCanvas()" v-bind:class="{ fullWidth: player.tab == 'tree', col: player.tab != 'tree', left: player.tab != 'tree'}">
<div id="version" onclick="showTab('changelog')">{{VERSION.withoutName}}</div>
<img id="optionWheel" v-if="player.tab!='options'" src="options_wheel.png" onclick="showTab('options')"></img>
<div id="info" v-if="player.tab!='info'" onclick="showTab('info')"><br>i</div>
<img id="discord" onclick="window.open('https://discord.gg/wwQfgPa','mywindow')" src="discord.png" target="_blank"></img>
<span v-if="player.devSpeed && player.devSpeed != 1">
<br>Dev Speed: {{format(player.devSpeed)}}x<br>
</span>
<span v-if="player.offTime !== undefined">
<br>Offline Time: {{formatTime(player.offTime.remain)}}<br>
</span>
<span v-if="false && !player.keepGoing">
<br>Reach {{formatWhole(ENDGAME)}} to beat the game!<br>
</span>
<br>
<span v-if="player.points.lt('1e1000')">You have </span>
<h2 id="points">{{format(player.points)}}</h2>
<span v-if="player.points.lt('1e1e6')"> {{modInfo.pointsName}}</span>
<br>
<span v-if="canGenPoints()">({{format(getPointGen())}}/sec)</span>
<div id="treeOverlay" class="treeOverlay" v-if="player.tab!='gameEnded'" onscroll="resizeCanvas()" v-bind:class="{ fullWidth: player.tab == 'tree', col: player.tab != 'tree', left: player.tab != 'tree'}">
<div id="version" class="overlayThing" style="margin-right: 13px" onclick="showTab('changelog')">{{VERSION.withoutName}}</div>
<img id="optionWheel" class="overlayThing" v-if="player.tab!='options'" src="options_wheel.png" onclick="showTab('options')"></img>
<div id="info" v-if="player.tab!='info'" class="overlayThing" onclick="showTab('info')"><br>i</div>
<img id="discord" class="overlayThing" onclick="window.open((modInfo.discordLink ? modInfo.discordLink : 'https://discord.gg/F3xveHV'),'mywindow')" src="discord.png" target="_blank"></img>
<div class="overlayThing" style="padding-bottom:7px; width: 90%">
<span v-if="player.devSpeed && player.devSpeed != 1" class="overlayThing">
<br>Dev Speed: {{format(player.devSpeed)}}x<br>
</span>
<span v-if="player.offTime !== undefined" class="overlayThing">
<br>Offline Time: {{formatTime(player.offTime.remain)}}<br>
</span>
<span v-if="false && !player.keepGoing" class="overlayThing">
<br>Reach {{formatWhole(ENDGAME)}} to beat the game!<br>
</span>
<br>
<span v-if="player.points.lt('1e1000')" class="overlayThing">You have </span>
<h2 class="overlayThing" id="points">{{format(player.points)}}</h2>
<span v-if="player.points.lt('1e1e6')" class="overlayThing"> {{modInfo.pointsName}}</span>
<br>
<span v-if="canGenPoints()" class="overlayThing">({{format(getPointGen())}}/sec)</span>
</div>
</div>
<div id="treeTab" style="z-index: 0" v-if="player.tab!='gameEnded'" onscroll="resizeCanvas()" v-bind:class="{ fullWidth: player.tab == 'tree', col: player.tab != 'tree', left: player.tab != 'tree'}">
<br><br><br><br>
<div id="fakeHead" style="visibility: hidden;">
<span v-if="player.devSpeed && player.devSpeed != 1">
<br>12<br>
</span>
<span v-if="player.offTime !== undefined">
<br>12<br>
</span>
<span v-if="false && !player.keepGoing">
<br>12<br>
</span>
<br>
<span v-if="player.points.lt('1e1000')">a</span>
<h2 id="points">12345</h2>
<span v-if="player.points.lt('1e1e6')"> 1</span>
<br>
<span v-if="canGenPoints()">1</span>
</div>
<span v-for="row in TREE_LAYERS"><table>
<td v-if="player.tab=='tree'&& someLayerUnlocked(row) && row != 0" class="left"><br><br><img class="remove" src="remove.png" onclick="resetRow(row)"></img></td>
<td v-for="node in row"><layer-node :layer='node.layer' :abb='layers[node.layer].symbol'></layer-node></td>

10
style.css
View file

@ -523,3 +523,13 @@ ul {
flex-direction: column;
justify-content: center;
}
.treeOverlay {
z-index: 200000;
pointer-events:none;
}
.overlayThing {
pointer-events:auto;
background-color: var(--background);
}