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

Finished "hide tree" functionality and back button, a few other fixes

Browse source
This commit is contained in:
Acamaeda 2020-10-31 23:05:50 -04:00
parent e8fee8a57d
commit e248e10b99
5 changed files with 42 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
demo.html
View file

@ -47,6 +47,7 @@
<div id="treeOverlay" v-if="!(gameEnded && !player.keepGoing)" class="treeOverlay" onscroll="resizeCanvas()" v-bind:class="{ fullWidth: (player.tab == 'none' || player.navTab == 'none'), col: (player.tab !== 'none' && player.navTab !== 'none'), left: (player.tab !== 'none' && player.navTab !== 'none')}"> <div id="treeOverlay" v-if="!(gameEnded && !player.keepGoing)" class="treeOverlay" onscroll="resizeCanvas()" v-bind:class="{ fullWidth: (player.tab == 'none' || player.navTab == 'none'), col: (player.tab !== 'none' && player.navTab !== 'none'), left: (player.tab !== 'none' && player.navTab !== 'none')}">
<div id="version" class="overlayThing" style="margin-right: 13px">{{VERSION.withoutName}}</div> <div id="version" class="overlayThing" style="margin-right: 13px">{{VERSION.withoutName}}</div>
<button v-if= "player.navTab == 'none' && (tmp[player.tab].row == 'side' || tmp[player.tab].row == 'otherside')" class="other-back overlayThing" onclick="goBack()">←</button>
<img id="optionWheel" class="overlayThing" v-if="player.tab!='options-tab'" src="options_wheel.png" onclick="showTab('options-tab')"></img> <img id="optionWheel" class="overlayThing" v-if="player.tab!='options-tab'" src="options_wheel.png" onclick="showTab('options-tab')"></img>
<div id="info" v-if="player.tab!='info-tab'" class="overlayThing" onclick="showTab('info-tab')"><br>i</div> <div id="info" v-if="player.tab!='info-tab'" class="overlayThing" onclick="showTab('info-tab')"><br>i</div>
<div id="discord" class="overlayThing"> <div id="discord" class="overlayThing">
@ -69,7 +70,7 @@
<overlay-head id="fakeHead" style="visibility: hidden;"> <overlay-head id="fakeHead" style="visibility: hidden;">
</overlay-head> </overlay-head>
<layer-tab :layer="player.navTab == 'none' ? player.tab : player.navTab" :back="(player.navTab == 'none' && tmp[player.tab].layer == 'side' || tmp[player.tab] == 'otherside') ? 'big' : 'none'"></layer-tab> <layer-tab :layer="player.navTab == 'none' ? player.tab : player.navTab" ></layer-tab>
</div> </div>
<div v-if="player.navTab !== 'none' && !(gameEnded && !player.keepGoing)" v-bind:class="{ fullWidth: player.navTab == 'none', col: player.navTab != 'none', right: player.navTab != 'none', fast: true, tab: true}"> <div v-if="player.navTab !== 'none' && !(gameEnded && !player.keepGoing)" v-bind:class="{ fullWidth: player.navTab == 'none', col: player.navTab != 'none', right: player.navTab != 'none', fast: true, tab: true}">

129
index.html
View file

@ -4,27 +4,28 @@
<link rel="stylesheet" type="text/css" href="style.css" /> <link rel="stylesheet" type="text/css" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script type="text/javascript" src="js/break_eternity.js"></script> <script type="text/javascript" src="js/technical/break_eternity.js"></script>
<script type="text/javascript" src="js/layerSupport.js"></script> <script type="text/javascript" src="js/technical/layerSupport.js"></script>
<script type="text/javascript" src="js/tree.js"></script> <script type="text/javascript" src="js/tree.js"></script>
<script type="text/javascript" src="js/layers.js"></script> <script type="text/javascript" src="js/layers.js"></script>
<script type="text/javascript" src="js/mod.js"></script> <script type="text/javascript" src="js/mod.js"></script>
<script type="text/javascript" src="js/temp.js"></script> <script type="text/javascript" src="js/technical/temp.js"></script>
<script type="text/javascript" src="js/game.js"></script> <script type="text/javascript" src="js/game.js"></script>
<script type="text/javascript" src="js/utils.js"></script> <script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/v.js"></script> <script type="text/javascript" src="js/technical/systemComponents.js"></script>
<script type="text/javascript" src="js/canvas.js"></script> <script type="text/javascript" src="js/components.js"></script>
<script type="text/javascript" src="js/technical/canvas.js"></script>
</head> </head>
<body onload="load()"> <body onload="load()">
<div id="app"> <div id="app">
<canvas id="treeCanvas" class="canvas"></canvas> <canvas id="treeCanvas" class="canvas" v-if ="!(gameEnded && !player.keepGoing)"></canvas>
<div v-if="false" id="loadingSection" class="fullWidth"> <div v-if="false" id="loadingSection" class="fullWidth">
<h1>Loading... (If this takes too long it means there was a serious error!)</h1> <h1>Loading... (If this takes too long it means there was a serious error!)←</h1>
</div> </div>
<div class="vl" v-if="player.navTab!= 'none' &&player.tab!='none'&&player.tab!='gameEnded'"></div> <div class="vl" v-if="player.navTab!= 'none' &&player.tab!='none'&&!(gameEnded && !player.keepGoing)"></div>
<div v-if="player.tab=='gameEnded'" class="fullWidth"> <div v-if="(gameEnded && !player.keepGoing)" class="fullWidth">
<br> <br>
<h2>{{modInfo.name}} {{VERSION.withoutName}}</h2><br><br> <h2>{{modInfo.name}} {{VERSION.withoutName}}</h2><br><br>
<h3>Congratulations! You have reached the end and beaten this game, but for now...</h3><br> <h3>Congratulations! You have reached the end and beaten this game, but for now...</h3><br>
@ -42,37 +43,13 @@
<br><br><br> <br><br><br>
<h1>Oh, you are still reading this?</h1> <h1>Oh, you are still reading this?</h1>
<br> <br>
</div> </div>
<div v-if="player.tab=='info'" class="col right">
</div> <div id="treeOverlay" v-if="!(gameEnded && !player.keepGoing)" class="treeOverlay" onscroll="resizeCanvas()" v-bind:class="{ fullWidth: (player.tab == 'none' || player.navTab == 'none'), col: (player.tab !== 'none' && player.navTab !== 'none'), left: (player.tab !== 'none' && player.navTab !== 'none')}">
<div v-if="player.tab=='options'" class="col right">
<button class="back" onclick="showTab('none')">←</button><br>
<table>
<tr>
<td><button class="opt" onclick="save()">Save</button></td>
<td><button class="opt" onclick="toggleOpt('autosave')">Autosave: {{ player.autosave?"ON":"OFF" }}</button></td>
<td><button class="opt" onclick="hardReset()">HARD RESET</button></td>
</tr>
<tr>
<td><button class="opt" onclick="exportSave()">Export to clipboard</button></td>
<td><button class="opt" onclick="importSave()">Import</button></td>
<td><button class="opt" onclick="toggleOpt('offlineProd')">Offline Prod: {{ player.offlineProd?"ON":"OFF" }}</button></td>
</tr>
<tr>
<td><button class="opt" onclick="switchTheme()">Theme: {{ getThemeName() }}</button></td>
<td><button class="opt" onclick="adjustMSDisp()">Show Milestones: {{ player.msDisplay.toUpperCase() }}</button></td>
<td><button class="opt" onclick="toggleOpt('hqTree')">High-Quality Tree: {{ player.hqTree?"ON":"OFF" }}</button></td>
</tr>
<tr>
<td><button class="opt" onclick="toggleOpt('hideChallenges')">Completed Challenges: {{ player.hideChallenges?"HIDDEN":"SHOWN" }}</button></td>
<!-- <td><button class="opt" onclick="toggleOpt('oldStyle')">Style: {{ player.oldStyle?"v1.0":"NEW" }}</button></td>-->
</tr>
</table>
</div>
<div id="treeOverlay" class="treeOverlay" onscroll="resizeCanvas()" v-bind:class="{ fullWidth: (player.tab == 'none' || player.navTab == 'none'), col: (player.tab !== 'none' && player.navTab !== 'none'), left: (player.tab !== 'none' && player.navTab !== 'none')}">
<div id="version" class="overlayThing" style="margin-right: 13px">{{VERSION.withoutName}}</div> <div id="version" class="overlayThing" style="margin-right: 13px">{{VERSION.withoutName}}</div>
<img id="optionWheel" class="overlayThing" v-if="player.tab!='options'" src="options_wheel.png" onclick="showTab('options')"></img> <button v-if= "player.navTab == 'none' && (tmp[player.tab].row == 'side' || tmp[player.tab].row == 'otherside')" class="other-back overlayThing" onclick="goBack()">←</button>
<div id="info" v-if="player.tab!='info'" class="overlayThing" onclick="showTab('info')"><br>i</div> <img id="optionWheel" class="overlayThing" v-if="player.tab!='options-tab'" src="options_wheel.png" onclick="showTab('options-tab')"></img>
<div id="info" v-if="player.tab!='info-tab'" class="overlayThing" onclick="showTab('info-tab')"><br>i</div>
<div id="discord" class="overlayThing"> <div id="discord" class="overlayThing">
<img onclick="window.open((modInfo.discordLink ? modInfo.discordLink : 'https://discord.gg/F3xveHV'),'mywindow')" src="discord.png" target="_blank"></img> <img onclick="window.open((modInfo.discordLink ? modInfo.discordLink : 'https://discord.gg/F3xveHV'),'mywindow')" src="discord.png" target="_blank"></img>
<ul id="discord-links"> <ul id="discord-links">
@ -81,74 +58,26 @@
<li><a class="link" href="http://discord.gg/wwQfgPa" target="_blank" v-bind:style="{'font-size': '16px'}">Main Prestige Tree server</a></li> <li><a class="link" href="http://discord.gg/wwQfgPa" target="_blank" v-bind:style="{'font-size': '16px'}">Main Prestige Tree server</a></li>
</ul> </ul>
</div> </div>
<div class="overlayThing" v-if="player.tab!='gameEnded' && !(player.navTab == 'none' && (player.tab=='options' || player.tab=='info'))" style="padding-bottom:7px; width: 90%"> <overlay-head v-if="!(gameEnded && !player.keepGoing)"></overlay-head>
<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 v-for="thing in tmp.displayThings" class="overlayThing"><span v-if="thing" v-html="thing"></span></div>
</div>
<div class="sideLayers" > <div class="sideLayers" >
<div v-for="node in OTHER_LAYERS['side']"><layer-node :layer='node' :abb='tmp[node].symbol' :size="'small'"></layer-node></div> <div v-for="node in OTHER_LAYERS['side']"><layer-node :layer='node' :abb='tmp[node].symbol' :size="'small'"></layer-node></div>
</div> </div>
</div> </div>
<div v-if="player.navTab == 'tree' && player.tab!='gameEnded'" id="treeTab" style="z-index: 0" onscroll="resizeCanvas()" v-bind:class= "{ fullWidth: player.tab == 'none', col: player.tab != 'none', left: player.tab != 'none'}"> <div v-if="!(gameEnded && !player.keepGoing)" id="treeTab" style="z-index: 0" onscroll="resizeCanvas()" v-bind:class="{ fullWidth: (player.tab == 'none' || player.navTab == 'none'), col: (player.tab !== 'none' && player.navTab !== 'none'), left: (player.tab !== 'none' && player.navTab !== 'none')}">
<br><br><br><br> <br><br><br><br>
<div id="fakeHead" style="visibility: hidden;"> <overlay-head id="fakeHead" style="visibility: hidden;">
<span v-if="player.devSpeed && player.devSpeed != 1" class="overlayThing"> </overlay-head>
<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 v-for="thing in tmp.displayThings" class="overlayThing"><span v-if="thing" v-html="thing"></span></div>
</div>
<tree :data="(layoutInfo.treeLayout ? layoutInfo.treeLayout : TREE_LAYERS)"></tree>
</div>
<div v-for="layer in LAYERS" >
<div v-if="player.navTab == 'none'" id="fakeHead" style="visibility: hidden;">
<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 v-for="thing in tmp.displayThings" class="overlayThing"><span v-if="thing" v-html="thing"></span></div>
</div>
<div v-if="player.tab==layer" v-bind:class="{ fullWidth: player.navTab == 'none', col: player.navTab != 'none', right: player.navTab != 'none', fast: true, tab: true}"> <layer-tab :layer="player.navTab == 'none' ? player.tab : player.navTab" ></layer-tab>
<layer-tab :layer="layer" :back="'none'"></layer-tab>
</div>
<div v-if="player.navTab !== 'none' && !(gameEnded && !player.keepGoing)" v-bind:class="{ fullWidth: player.navTab == 'none', col: player.navTab != 'none', right: player.navTab != 'none', fast: true, tab: true}">
<div v-for="layer in LAYERS" >
<div v-if="player.tab==layer" >
<layer-tab :layer="layer" :back="'none'" :spacing="'50px'"></layer-tab>
</div>
</div> </div>
</div> </div>
</div> </div>

3
js/tree.js
View file

@ -14,6 +14,7 @@ addNode("spook", {
}, },
) )
addLayer("tree-tab", { addLayer("tree-tab", {
tabFormat: ["tree", function() {layoutInfo.treeLayout ? layoutInfo.treeLayout : TREE_LAYERS}] tabFormat: [["tree", function() {return (layoutInfo.treeLayout ? layoutInfo.treeLayout : TREE_LAYERS)}]]
}) })

5
js/utils.js
View file

@ -100,6 +100,7 @@ function startPlayerBase() {
showStory: true, showStory: true,
points: modInfo.initialStartPoints, points: modInfo.initialStartPoints,
subtabs: {}, subtabs: {},
lastSafeTab: (layoutInfo.showTree ? "none" : "layoutInfo.startTab")
} }
} }
@ -601,14 +602,14 @@ function showTab(name) {
var toTreeTab = name == "none" var toTreeTab = name == "none"
player.tab = name player.tab = name
if (player.navTab == "none" && (tmp[name].row !== "side") && (tmp[name].row !== "otherside")) player.lastSafeTab = name
delete player.notify[name] delete player.notify[name]
needCanvasUpdate = true needCanvasUpdate = true
} }
function goBack() { function goBack() {
if (player.navTab !== "none") showTab("none") if (player.navTab !== "none") showTab("none")
else showTab(layoutInfo.startTab) else showTab(player.lastSafeTab)
} }
function notifyLayer(name) { function notifyLayer(name) {

7
style.css
View file

@ -74,6 +74,7 @@ h1, h2, h3, b, input {
font-family: "Lucida Console", "Courier New", monospace; font-family: "Lucida Console", "Courier New", monospace;
color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5);
text-shadow: var(--hqProperty3); text-shadow: var(--hqProperty3);
padding: 0;
} }
@ -88,6 +89,8 @@ h1, h2, h3, b, input {
font-family: "Lucida Console", "Courier New", monospace; font-family: "Lucida Console", "Courier New", monospace;
color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5);
text-shadow: var(--hqProperty3); text-shadow: var(--hqProperty3);
padding: 0;
} }
.smallNode { .smallNode {
@ -101,6 +104,8 @@ h1, h2, h3, b, input {
font-family: "Lucida Console", "Courier New", monospace; font-family: "Lucida Console", "Courier New", monospace;
color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5);
text-shadow: var(--hqProperty3); text-shadow: var(--hqProperty3);
padding: 0;
} }
@ -156,7 +161,7 @@ h1, h2, h3, b, input {
.other-back { .other-back {
position: absolute; position: absolute;
top: 10px; top: 0px;
left: 60px; left: 60px;
background-color: transparent; background-color: transparent;
border: 1px solid transparent; border: 1px solid transparent;