Added small screen support and OOM display

changelog.md

@@ -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.

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()"
+		<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')}">
+			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,8 +89,8 @@
 				</div>
 			</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)"
+		<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}">
-			onscroll="resizeCanvas()"
-			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'" :key="'left'"></layer-tab>

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()"
+		<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')}">
+			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
@@ -84,8 +88,8 @@
 				</div>
 			</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)"
+		<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}">
-			onscroll="resizeCanvas()"
-			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'" :key="'left'"></layer-tab>

js/game.js

@@ -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) 

js/technical/systemComponents.js

@@ -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>
 	`

js/technical/temp.js

@@ -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) {
@@ -206,4 +212,40 @@ 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,
+	}
 }

js/utils.js

@@ -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()
 	}

js/utils/save.js

@@ -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() {