mirror of
https://github.com/Acamaeda/The-Modding-Tree.git
synced 2024-11-24 09:21:46 +00:00
Added small screen support and OOM display
This commit is contained in:
parent
5ed897bd7b
commit
cbb303c21b
8 changed files with 70 additions and 21 deletions
|
@ -2,6 +2,8 @@
|
|||
|
||||
# v2.4.2 (beta)
|
||||
- Optimizations, hopefully a significant amount.
|
||||
- Added OOM/s point gen display at high values (thanks to Ducdat!)
|
||||
- Only one tab will display if the window is not wide enough (also thanks to Ducdat!)
|
||||
- Layer nodes will be highlighted even if the player is on the same tab.
|
||||
- Added buyable purchaseLimit.
|
||||
- Amount is automatically supplied to buyable cost and effect functions.
|
||||
|
|
16
demo.html
16
demo.html
|
@ -35,7 +35,7 @@
|
|||
<div v-if="false" id="loadingSection" class="fullWidth">
|
||||
<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'&&!(gameEnded && !player.keepGoing)"></div>
|
||||
<div class="vl" v-if="player.navTab !== 'none' && tmp.other.splitScreen && player.tab!='none' && !(gameEnded && !player.keepGoing)"></div>
|
||||
<div v-if="(gameEnded && !player.keepGoing)" class="fullWidth">
|
||||
<br>
|
||||
<h2>{{modInfo.name}} {{VERSION.withoutName}}</h2><br><br>
|
||||
|
@ -55,8 +55,12 @@
|
|||
<br><br>
|
||||
</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 id="treeOverlay" v-if="!(gameEnded && !player.keepGoing) && (player.tab === 'none' || tmp.other.splitScreen || !readData(layoutInfo.showTree))" 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')}"
|
||||
:style="{'margin-top': !readData(layoutInfo.showTree) && player.tab == 'info-tab' ? '50px' : ''}">
|
||||
<div id="version" onclick="showTab('changelog-tab')" class="overlayThing" style="margin-right: 13px">
|
||||
{{VERSION.withoutName}}</div>
|
||||
<button
|
||||
|
@ -86,7 +90,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!(gameEnded && !player.keepGoing)" id="treeTab" v-bind:style="{'z-index': (tmp.scrolled ? '1' : '5000')}" onscroll="resizeCanvas()"
|
||||
<div v-if="!(gameEnded && !player.keepGoing) && (player.tab === 'none' || tmp.other.splitScreen)" 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;">
|
||||
|
@ -107,9 +111,7 @@
|
|||
</transition-group>
|
||||
</div>
|
||||
|
||||
<div v-if="player.navTab !== 'none' && player.tab !== 'none' && !(gameEnded && !player.keepGoing)"
|
||||
onscroll="resizeCanvas()"
|
||||
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' && player.tab !== 'none' && !(gameEnded && !player.keepGoing)" onscroll="resizeCanvas()" style="background-color:var(--background)" v-bind:class="{ fullWidth: player.navTab == 'none' || !tmp.other.splitScreen || !readData(layoutInfo.showTree), 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'" :key="'left'"></layer-tab>
|
||||
|
|
16
index.html
16
index.html
|
@ -34,7 +34,7 @@
|
|||
<div v-if="false" id="loadingSection" class="fullWidth">
|
||||
<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'&&!(gameEnded && !player.keepGoing)"></div>
|
||||
<div class="vl" v-if="player.navTab !== 'none' && tmp.other.splitScreen && player.tab!='none' && !(gameEnded && !player.keepGoing)"></div>
|
||||
<div v-if="(gameEnded && !player.keepGoing)" class="fullWidth">
|
||||
<br>
|
||||
<h2>{{modInfo.name}} {{VERSION.withoutName}}</h2><br><br>
|
||||
|
@ -54,8 +54,12 @@
|
|||
<br><br>
|
||||
</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 id="treeOverlay" v-if="!(gameEnded && !player.keepGoing) && (player.tab === 'none' || tmp.other.splitScreen || !readData(layoutInfo.showTree))" 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')}"
|
||||
:style="{'margin-top': !readData(layoutInfo.showTree) && player.tab == 'info-tab' ? '50px' : ''}">
|
||||
<div id="version" onclick="showTab('changelog-tab')" class="overlayThing" style="margin-right: 13px">
|
||||
{{VERSION.withoutName}}</div>
|
||||
<button
|
||||
|
@ -85,7 +89,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!(gameEnded && !player.keepGoing)" id="treeTab" v-bind:style="{'z-index': (tmp.scrolled ? '1' : '5000')}" onscroll="resizeCanvas()"
|
||||
<div v-if="!(gameEnded && !player.keepGoing) && (player.tab === 'none' || tmp.other.splitScreen)" 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;">
|
||||
|
@ -106,9 +110,7 @@
|
|||
</transition-group>
|
||||
</div>
|
||||
|
||||
<div v-if="player.navTab !== 'none' && player.tab !== 'none' && !(gameEnded && !player.keepGoing)"
|
||||
onscroll="resizeCanvas()"
|
||||
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' && player.tab !== 'none' && !(gameEnded && !player.keepGoing)" onscroll="resizeCanvas()" style="background-color:var(--background)" v-bind:class="{ fullWidth: player.navTab == 'none' || !tmp.other.splitScreen || !readData(layoutInfo.showTree), 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'" :key="'left'"></layer-tab>
|
||||
|
|
|
@ -407,8 +407,9 @@ var interval = setInterval(function() {
|
|||
if (needCanvasUpdate){ resizeCanvas();
|
||||
needCanvasUpdate = false;
|
||||
}
|
||||
tmp.scrolled = document.getElementById('treeTab').scrollTop > 30
|
||||
tmp.scrolled = document.getElementById('treeTab') && document.getElementById('treeTab').scrollTop > 30
|
||||
updateTemp();
|
||||
updateOther(diff);
|
||||
gameLoop(diff)
|
||||
fixNaNs()
|
||||
adjustPopupTime(0.05)
|
||||
|
|
|
@ -106,7 +106,7 @@ var systemComponents = {
|
|||
<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>
|
||||
<span v-if="canGenPoints()" class="overlayThing">({{tmp.other.oompsMag != 0 ? format(tmp.other.oomps) + " OOM" + (tmp.other.oompsMag < 0 ? "^OOM" : tmp.other.oompsMag > 1 ? "^" + tmp.other.oompsMag : "") + "s" : format(getPointGen())}}/sec)</span>
|
||||
<div v-for="thing in tmp.displayThings" class="overlayThing"><span v-if="thing" v-html="thing"></span></div>
|
||||
</div>
|
||||
`
|
||||
|
|
|
@ -38,6 +38,13 @@ function setupTemp() {
|
|||
setupBarStyles(layer)
|
||||
setupBuyables(layer)
|
||||
}
|
||||
|
||||
tmp.other = {
|
||||
screenWidth: window.innerWidth,
|
||||
lastPoints: player.points || new Decimal(0),
|
||||
oomps: new Decimal(0),
|
||||
}
|
||||
|
||||
temp = tmp
|
||||
}
|
||||
|
||||
|
@ -94,7 +101,6 @@ function updateTemp() {
|
|||
if (isFunction(text)) text = text()
|
||||
tmp.displayThings.push(text)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function updateTempData(layerData, tmpData, funcsData) {
|
||||
|
@ -207,3 +213,39 @@ function setupBuyables(layer) {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateOther(diff) {
|
||||
tmp.other.oompsMag = 0
|
||||
if (player.points.lte(new Decimal(1e100))) return
|
||||
|
||||
var pp = new Decimal(player.points);
|
||||
var lp = tmp.other.lastPoints || new Decimal(0);
|
||||
if (pp.gt(lp)) {
|
||||
if (pp.gte("10^^8")) {
|
||||
pp = pp.slog(1e10)
|
||||
lp = lp.slog(1e10)
|
||||
tmp.other.oomps = pp.sub(lp).div(diff)
|
||||
tmp.other.oompsMag = -1;
|
||||
} else {
|
||||
while (pp.div(lp).log(10).div(diff).gte("100") && tmp.other.oompsMag <= 5 && lp.gt(0)) {
|
||||
pp = pp.log(10)
|
||||
lp = lp.log(10)
|
||||
tmp.other.oomps = pp.sub(lp).div(diff)
|
||||
tmp.other.oompsMag++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var screenWidth = window.innerWidth
|
||||
var splitScreen = screenWidth >= 1024
|
||||
if (player.splitMode === "disabled") splitScreen = false
|
||||
if (player.splitMode === "enabled") splitScreen = true
|
||||
|
||||
tmp.other = {
|
||||
screenWidth: screenWidth,
|
||||
splitScreen: splitScreen,
|
||||
lastPoints: player.points,
|
||||
oomps: tmp.other.oomps,
|
||||
oompsMag: tmp.other.oompsMag,
|
||||
}
|
||||
}
|
|
@ -283,6 +283,7 @@ function layerunlocked(layer) {
|
|||
function keepGoing() {
|
||||
player.keepGoing = true;
|
||||
needCanvasUpdate = true;
|
||||
goBack()
|
||||
}
|
||||
|
||||
function toNumber(x) {
|
||||
|
@ -348,7 +349,6 @@ document.onkeydown = function (e) {
|
|||
if (ctrlDown && hotkeys[key]) e.preventDefault()
|
||||
if (hotkeys[key]) {
|
||||
let k = hotkeys[key]
|
||||
console.log(tmp[k.layer].hotkeys)
|
||||
if (player[k.layer].unlocked && tmp[k.layer].hotkeys[k.id].unlocked)
|
||||
k.onPress()
|
||||
}
|
||||
|
|
|
@ -21,7 +21,7 @@ function startPlayerBase() {
|
|||
showStory: true,
|
||||
points: modInfo.initialStartPoints,
|
||||
subtabs: {},
|
||||
lastSafeTab: (layoutInfo.showTree ? "none" : layoutInfo.startTab)
|
||||
lastSafeTab: (readData(layoutInfo.showTree) ? "none" : layoutInfo.startTab)
|
||||
};
|
||||
}
|
||||
function getStartPlayer() {
|
||||
|
|
Loading…
Reference in a new issue