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

It's a work in progress

Browse source
This commit is contained in:
Acamaeda 2020-10-30 19:40:48 -04:00
parent 66494e4ce2
commit e8fee8a57d
10 changed files with 111 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
2.0-format-changes.md → Old Code/2.0-format-changes.md
View file

76
demo.html
View file

@ -19,13 +19,13 @@
</head>
<body onload="load()">
<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">
<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 class="vl" v-if="player.navTab!= 'none' &&player.tab!='none'&&!player.gameEnded"></div>
<div v-if="player.gameEnded" class="fullWidth">
<div class="vl" v-if="player.navTab!= 'none' &&player.tab!='none'&&!(gameEnded && !player.keepGoing)"></div>
<div v-if="(gameEnded && !player.keepGoing)" class="fullWidth">
<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>
@ -44,65 +44,11 @@
<h1>Oh, you are still reading this?</h1>
<br>
</div>
<div v-if="player.tab=='changelog'" class="col right">
<button class="back" onclick="showTab('none')">←</button><br><br><br>
</div>
<div v-if="player.tab=='info'" class="col right">
<button class="back" onclick="showTab('none')">←</button><br>
<h2>{{modInfo.name}}</h2>
<br>
<h3>{{VERSION.withName}}</h3>
<span v-if="modInfo.author">
<br>
Made by {{modInfo.author}}
</span>
<br>
The Modding Tree {{TMT_VERSION.tmtNum}} by Acamaeda
<br>
The Prestige Tree made by Jacorb and Aarex
<br>
Original idea by papyrus (on discord)
<br><br>
<a v-bind:href="modInfo.changelogLink" target="_blank" class="link" >Changelog</a><br>
<span v-if="modInfo.discordLink"><a class="link" v-bind:href="modInfo.discordLink" target="_blank">{{modInfo.discordName}}</a><br></span>
<a class="link" href="https://discord.gg/F3xveHV" target="_blank" v-bind:style="modInfo.discordLink ? {'font-size': '16px'} : {}">The Modding Tree Discord</a><br>
<a class="link" href="http://discord.gg/wwQfgPa" target="_blank" v-bind:style="{'font-size': '16px'}">Main Prestige Tree server</a><br>
<br>
Note by Jacorb: If anyone wishes to make a mod of this game, that is perfectly fine with me, just make sure to name it something different (ex: Prestige Tree NG+) and to let me know on <a href="https://discord.gg/wwQfgPa" target="_blank">my discord</a>.
<br><br>
Time Played: {{ formatTime(player.timePlayed) }}<br><br>
<h3>Hotkeys</h3><br>
<span v-for="key in hotkeys" v-if="player[key.layer].unlocked"><br>{{key.description}}</span>
</div>
<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="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>
<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="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">
<img onclick="window.open((modInfo.discordLink ? modInfo.discordLink : 'https://discord.gg/F3xveHV'),'mywindow')" src="discord.png" target="_blank"></img>
<ul id="discord-links">
@ -111,22 +57,22 @@
<li><a class="link" href="http://discord.gg/wwQfgPa" target="_blank" v-bind:style="{'font-size': '16px'}">Main Prestige Tree server</a></li>
</ul>
</div>
<overlay-head v-if="!player.gameEnded && !(player.navTab == 'none' && (player.tab=='options' || player.tab=='info'))"></overlay-head>
<overlay-head v-if="!(gameEnded && !player.keepGoing)"></overlay-head>
<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>
</div>
<div v-if="player.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>
<overlay-head id="fakeHead" style="visibility: hidden;">
</overlay-head>
<layer-tab :layer="player.navTab == 'none' ? player.tab : player.navTab"></layer-tab>
<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>
</div>
<div v-if="player.navTab !== 'none'" 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}">
<div v-for="layer in LAYERS" >
<div v-if="player.tab==layer" >
<layer-tab :layer="layer" :back="'none'" :spacing="'50px'"></layer-tab>

25
index.html
View file

@ -44,31 +44,6 @@
<br>
</div>
<div v-if="player.tab=='info'" class="col right">
<button class="back" onclick="showTab('none')">←</button><br>
<h2>{{modInfo.name}}</h2>
<br>
<h3>{{VERSION.withName}}</h3>
<span v-if="modInfo.author">
<br>
Made by {{modInfo.author}}
</span>
<br>
The Modding Tree {{TMT_VERSION.tmtNum}} by Acamaeda
<br>
The Prestige Tree made by Jacorb and Aarex
<br>
Original idea by papyrus (on discord)
<br><br>
<a v-bind:href="modInfo.changelogLink" target="_blank" class="link" >Changelog</a><br>
<span v-if="modInfo.discordLink"><a class="link" v-bind:href="modInfo.discordLink" target="_blank">{{modInfo.discordName}}</a><br></span>
<a class="link" href="https://discord.gg/F3xveHV" target="_blank" v-bind:style="modInfo.discordLink ? {'font-size': '16px'} : {}">The Modding Tree Discord</a><br>
<a class="link" href="http://discord.gg/wwQfgPa" target="_blank" v-bind:style="{'font-size': '16px'}">Main Prestige Tree server</a><br>
<br>
Note by Jacorb: If anyone wishes to make a mod of this game, that is perfectly fine with me, just make sure to name it something different (ex: Prestige Tree NG+) and to let me know on <a href="https://discord.gg/wwQfgPa" target="_blank">my discord</a>.
<br><br>
Time Played: {{ formatTime(player.timePlayed) }}<br><br>
<h3>Hotkeys</h3><br>
<span v-for="key in hotkeys" v-if="player[key.layer].unlocked"><br>{{key.description}}</span>
</div>
<div v-if="player.tab=='options'" class="col right">
<button class="back" onclick="showTab('none')">←</button><br>

2
js/Demo/demoTree.js
View file

@ -1,6 +1,6 @@
// treeLayout will override the default tree's layout if used
var layoutInfo = {
startTab: "none",
startTab: "c",
showTree: true,
//treeLayout: ""

2
js/components.js
View file

@ -403,6 +403,8 @@ function loadVue() {
Vue.component('layer-node', systemComponents['layer-node'])
Vue.component('layer-tab', systemComponents['layer-tab'])
Vue.component('overlay-head', systemComponents['overlay-head'])
Vue.component('info-tab', systemComponents['info-tab'])
Vue.component('options-tab', systemComponents['options-tab'])
app = new Vue({

4
js/game.js
View file

@ -349,7 +349,9 @@ var interval = setInterval(function() {
}
if (player.devSpeed) diff *= player.devSpeed
player.time = now
if (needCanvasUpdate) resizeCanvas();
if (needCanvasUpdate){ resizeCanvas();
needCanvasUpdate = false;
}
updateTemp();
gameLoop(diff)
fixNaNs()

11
js/technical/layerSupport.js
View file

@ -197,3 +197,14 @@ const UP = 0
const DOWN = 1
const LEFT = 2
const RIGHT = 3
addLayer("info-tab", {
tabFormat: ["info-tab"],
row: "otherside"
})
addLayer("options-tab", {
tabFormat: ["options-tab"],
row: "otherside"
})

61
js/technical/systemComponents.js
View file

@ -71,7 +71,7 @@ var systemComponents = {
'layer-tab': {
props: ['layer', 'back', 'spacing'],
template: `<div v-bind:style="[tmp[layer].style ? tmp[layer].style : {}, (tmp[layer].tabFormat && !Array.isArray(tmp[layer].tabFormat)) ? tmp[layer].tabFormat[player.subtabs[layer].mainTabs].style : {}]">
<div v-if="back"><button class="back" v-on:click="showTab(back)">←</button></div>
<div v-if="back"><button v-bind:class="back == 'big' ? 'other-back' : 'back'" v-on:click="goBack()">←</button></div>
<div v-if="!tmp[layer].tabFormat">
<div v-if="spacing" v-bind:style="{'height': spacing}"></div>
<info-box v-if="tmp[layer].infoboxes" :layer="layer" :data="Object.keys(tmp[layer].infoboxes)[0]"></info-box>
@ -127,4 +127,63 @@ var systemComponents = {
</div>
`
},
'info-tab': {
template: `
<div>
<h2>{{modInfo.name}}</h2>
<br>
<h3>{{VERSION.withName}}</h3>
<span v-if="modInfo.author">
<br>
Made by {{modInfo.author}}
</span>
<br>
The Modding Tree {{TMT_VERSION.tmtNum}} by Acamaeda
<br>
The Prestige Tree made by Jacorb and Aarex
<br>
Original idea by papyrus (on discord)
<br><br>
<a v-bind:href="modInfo.changelogLink" target="_blank" class="link" >Changelog</a><br>
<span v-if="modInfo.discordLink"><a class="link" v-bind:href="modInfo.discordLink" target="_blank">{{modInfo.discordName}}</a><br></span>
<a class="link" href="https://discord.gg/F3xveHV" target="_blank" v-bind:style="modInfo.discordLink ? {'font-size': '16px'} : {}">The Modding Tree Discord</a><br>
<a class="link" href="http://discord.gg/wwQfgPa" target="_blank" v-bind:style="{'font-size': '16px'}">Main Prestige Tree server</a><br>
<br><br>
Time Played: {{ formatTime(player.timePlayed) }}<br><br>
<h3>Hotkeys</h3><br>
<span v-for="key in hotkeys" v-if="player[key.layer].unlocked"><br>{{key.description}}</span></div>
`
},
'options-tab': {
template: `
<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>`
},
'back-button': {
template: `
<button v-bind:class="back" onclick="goBack()">←</button>
`
}
}

12
js/utils.js
View file

@ -84,7 +84,7 @@ function save() {
function startPlayerBase() {
return {
tab: layoutInfo.startTab,
navTab: (layoutInfo.showTree ? "tree" : "none"),
navTab: (layoutInfo.showTree ? "tree-tab" : "none"),
time: Date.now(),
autosave: true,
notify: {},
@ -100,7 +100,6 @@ function startPlayerBase() {
showStory: true,
points: modInfo.initialStartPoints,
subtabs: {},
gameEnded:false
}
}
@ -118,6 +117,7 @@ function getStartPlayer() {
playerdata[layer] = {}
if (layers[layer].startData)
playerdata[layer] = layers[layer].startData()
else playerdata[layer].unlocked = true
playerdata[layer].buyables = getStartBuyables(layer)
if(playerdata[layer].clickables == undefined) playerdata[layer].clickables = getStartClickables(layer)
playerdata[layer].spentOnBuyables = new Decimal(0)
@ -603,6 +603,12 @@ function showTab(name) {
player.tab = name
delete player.notify[name]
needCanvasUpdate = true
}
function goBack() {
if (player.navTab !== "none") showTab("none")
else showTab(layoutInfo.startTab)
}
function notifyLayer(name) {
@ -636,7 +642,7 @@ function layerunlocked(layer) {
function keepGoing() {
player.keepGoing = true;
showTab("tree")
needCanvasUpdate = true;
}
function toNumber(x) {

12
style.css
View file

@ -154,6 +154,18 @@ h1, h2, h3, b, input {
cursor: pointer;
}
.other-back {
position: absolute;
top: 10px;
left: 60px;
background-color: transparent;
border: 1px solid transparent;
color: var(--color);
font-size: 60px;
cursor: pointer;
}
.back:hover {
transform: scale(1.1, 1.1);
text-shadow: 0px 0px 7px var(--color);