i added this stuff 4 months ago i dont remember what crap i added

i think i improved navigation
telnettrauma · Nov 24, 2021 · 23f809a · 23f809a
1 parent 82b012d
commit 23f809a
Show file tree

Hide file tree

Showing 3 changed files with 143 additions and 81 deletions.
diff --git a/css.css b/css.css
@@ -2,7 +2,10 @@
     font-family: 'Arvo', serif;
     src: url(https://fonts.googleapis.com/css2?family=Arvo&display=swap);
 }
-body {font-family: 'Lato', sans-serif;}
+body {
+    font-family: 'Lato', sans-serif;
+    margin: 0;
+}
 h1 {
     text-align: center;
     font-family: 'Arvo', serif;
@@ -43,13 +46,12 @@ button:active {border-radius: 20px;}
 }
 .tooltip:hover .tooltiptext {visibility: visible;}
 .tablink {
-    background-color: rgb(53, 53, 53);
+    background-color: rgb(0, 0, 0);
     color: white;
-    float: left;
-    border: none;
-    outline: none;
     cursor: pointer;
-    width: 50%;
+    width: 49%;
+    display: inline-block;
+    margin: 0px;
 }
 .dropbtn {
     background-color: black;
@@ -66,7 +68,9 @@ button:active {border-radius: 20px;}
     height: 30px;
     overflow: hidden;
     position: relative;
+    width: 100%;
     background-color: black;
+    transition-duration: 0.5s;
 }
 .alertbar p {
     position: absolute;
@@ -116,28 +120,6 @@ button:active {border-radius: 20px;}
     display: block;
     width: 100%;
 }
-@media only screen and (min-width: 950px) {
-    .tablink {
-        visibility: visible;
-        background-color: rgb(0, 0, 0);
-        color: white;
-        float: left;
-        border: none;
-        outline: none;
-        cursor: pointer;
-        padding: 8px 16px;
-        font-size: 17px;
-        width: 50%;
-        border-radius: 15px;
-        display: block;
-        margin-bottom: 10px;
-    }
-    #upspage .shopcolumn {
-        display: inline-table;
-        width: 32%;
-        margin: 5px;
-    }
-}
 .explaintext {display: none;}
 .tablink:hover {
     background-color: rgb(39, 39, 39);
@@ -261,7 +243,6 @@ button:active {border-radius: 20px;}
     margin-left: 3px;
 }
 .specialdescription {margin: 2px;}
-#thealertbar {display: none;}
 #score {
     text-align: center;
     font-size: 25px;
@@ -286,10 +267,8 @@ button:active {border-radius: 20px;}
     border-radius: 10px;
     transition-duration: 0.4s;
     margin: auto;
-    width: 100%;
-    overflow: hidden;
-    position: relative;
     transition-timing-function: ease;
+    width: 100%;
 }
 #singlebytebutton:active {background-color: rgb(0, 255, 166);}
 #darkmodebutton {
@@ -376,6 +355,10 @@ button:active {border-radius: 20px;}
     display: none;
     text-align: center;
 }
+#topmenu {
+    padding-left: 5px;
+    padding-right: 5px;
+}
 @keyframes textscroll {
     0%   { 
         -moz-transform: translateX(100%);
@@ -421,6 +404,59 @@ button:active {border-radius: 20px;}
     from {bottom: 30px; opacity: 1;} 
     to {bottom: 0; opacity: 0;}
 }
+/* desktop settings */
+@media only screen and (min-width: 950px) {
+    .tablink {
+        background-color: rgb(0, 0, 0);
+        color: white;
+        cursor: pointer;
+        font-size: 17px;
+        width: 100%;
+        height: 38px;
+        border-radius: 15px;
+        display: block;
+    }
+    #upspage .shopcolumn {
+        display: inline-table;
+        width: 32%;
+        margin: 5px;
+    }
+    #singlebytebutton {
+        background-color: rgb(0, 255, 64);
+        color: black;
+        padding: 20px 35px;
+        text-align: center;
+        font-size: 30px;
+        border-radius: 10px;
+        transition-duration: 0.4s;
+        width: 89.5%;
+        display: inline-block;
+    }
+    #desktopnav {
+        display: inline-table;
+        width: 10%;
+        vertical-align: bottom;
+    }
+    #stanav {border-radius: 10px 10px 0px 0px;}
+    #stanav:hover {border-radius: 25px 25px 0px 0px;}
+    #setnav {border-radius: 0px 0px 10px 10px;}
+    #setnav:hover {border-radius: 0px 0px 25px 25px;}
+    #bpcounter {
+        text-align: left;
+        display: inline;
+    }
+    #score {
+        display: inline;
+    }
+    #bpscounter {
+        display: inline;
+    }
+    #scorebox {
+        width:100%;
+        margin:0 auto;
+        text-align: center;
+    }
+}
 /* mobile mode */
 .mobile-mode .explaintext{display: inline-block;}
 /* dark mode */
@@ -465,4 +501,6 @@ button:active {border-radius: 20px;}
 .dark-mode .lockedup {
     background-color: rgb(44, 44, 44);
     color: white;
-}
+}
+.dark-mode .alertbar {background-color: white;}
+.dark-mode .alertbar p {color: black;}
diff --git a/index.html b/index.html
@@ -25,7 +25,6 @@
     <link href="https://fonts.googleapis.com/css2?family=Arvo&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <noscript>Sorry, but you cannot play this game because you either have JavaScript disabled or your browser dosen't support JavaScript.</noscript>
 </head>
 <body>
@@ -42,22 +41,23 @@
     <a id="ontopspc" style="float: right; font-size: small; vertical-align: middle; display: none; color: black;">0 bytes per click</a>
 </div>
 <!-- Information displayed at the top of the screen -->
-<p id="score">0 bytes</p>
-<p id="bpscounter">0 bytes per second</p>
-<p id="bpcounter">0 bytes per click</p>
+<div id="scorebox">
+    <p id="bpcounter">0 bytes per click</p>
+    <p id="score">0 bytes</p>
+    <p id="bpscounter">0 bytes per second</p>
+</div>
 <!-- Alert bar (not currently in use) -->
 <div class="alertbar" id="thealertbar">
-    <p id="alertbartext">you probably should not be seeing this message</p>
+    <p id="alertbartext">sub to me im ayden williams gamer spread the word</p>
 </div>
-<!-- type button -->
-<button id="singlebytebutton" onclick="oneByte()">Type</button>
-<!-- navigation menu (desktop) -->
-<div id="desktopnav" style="padding-top: 10px;">
-    <button class="tablink" id="stanav" onclick="openStatsPage()">Statistics</button>
-    <span class="material-icons-two-tone">
-    settings
-    </span>
-    <button class="tablink" id="setnav" onclick="openPage('settings')">Settings</button>
+<div id="topmenu">
+    <!-- navigation menu (desktop) -->
+    <div id="desktopnav" style="padding-top: 10px;">
+        <button class="tablink" id="stanav" onclick="openStatsPage()">Statistics</button>
+        <button class="tablink" id="setnav" onclick="openPage('settings')">Settings</button>
+    </div>
+    <!-- type button -->
+    <button id="singlebytebutton" onclick="oneByte()">Type</button>
 </div>
 <hr>
 
@@ -88,10 +88,6 @@ <h2>Loading</h2>
 
 <!-- shop -->
 <div id="upspage" class="tabcontent">
-    <!-- shop header -->
-    <h1 style="margin: 3px;">Shop</h1>
-    <p style="text-align: center; margin: 3px;">Purchase upgrades and other stuff.</p>
-    <hr>
 
     <!-- Automatic Upgrades -->
     <div id="autoupgrades" class="shopcolumn">
@@ -117,10 +113,18 @@ <h2 style="margin: 3px;">Automatic Upgrades</h2>
     <div id="clickupgrades" class="shopcolumn">
         <h2 id="clickuphead" style="margin: 3px;">Clicking Upgrades</h2>
         <p style="text-align: center; margin: 3px;" id="clickuptext">These upgrades increase your file size even more per click</p>
+        <!-- extra finger -->
         <button id="fingerpurchase" class="upgradebutton" onclick="buyFinger()">Extra Finger (250 bytes, +1 byte per click)</button>
+        <button id="lockedfinger" class="lockedup">locked</button>
+        <!-- extra keyboard -->
         <button id="keyboardpurchase" class="upgradebutton" onclick="buyKeyboard()">Extra Keyboard (10 KB, +40 bytes per click)</button>
+        <button id="lockedkeyboard" class="lockedup">locked</button>
+        <!-- macro button -->
         <button id="macrobutpurchase" class="upgradebutton" onclick="buyMacroButton()">Macro Button (150 KB, +500 bytes per click)</button>
+        <button id="lockedmacrobut" class="lockedup">locked</button>
+        <!-- copy paste -->
         <button id="copypastepurchase" class="upgradebutton" onclick="buyCopyPaste()">Copy Paste (10 MB, +30 KB per click)</button>
+        <button id="lockedcopypaste" class="lockedup">locked</button>
     </div>
 
     <!-- More Upgrades -->
@@ -198,9 +202,14 @@ <h3>Appearance</h3>
     <p class="explaintext">Uses a monospaced font to reduce motion.</p>
     <div class="tooltip">
         <button id="showbpcbut" style="background-color: red;" onclick="toggleBytesPerClick()">Enable Bytes Per Click Counter</button>
-        <span class="tooltiptext">Shows bytes per click under bytes per second</span>
+        <span class="tooltiptext">Shows bytes per click under bytes per second. This has no effect on larger screens</span>
+    </div>
+    <p class="explaintext">Shows bytes per click under bytes per second. This has no effect on larger screens.</p>
+    <div class="tooltip">
+        <button id="togglealbarbut" style="background-color: greenyellow; color: black;" onclick="toggleAlertBar()">hide alert bar</button>
+        <span class="tooltiptext">shows the scrolling alert bar at the top of the screen</span>
     </div>
-    <p class="explaintext">Shows bytes per click under bytes per second</p>
+    <p class="explaintext">shows the scrolling alert bar at the top of the screen</p>
     <h3>Other</h3>
     <button id="defaultOpen" onclick="openPage('tutorial')" style="background-color: cyan; color: black;">View tutorial</button>
     <button id="expphase1" onclick="confirmExper()">Enable Experimental Features</button>

diff --git a/java.js b/java.js
@@ -161,6 +161,17 @@ function addCommasToNumber(addingVariable) {return addingVariable.toString().rep
 
 // * Displays *
 
+let alertbarmessages = [ "sub to me im ayden williams gamer spread the word", "click install baby girl!", "key fact: waze is made in the world's most beautiful world.", "whats poppin samantha?"];
+// updates the alert bar every 15 seconds
+async function updateAlertBar() {
+	const throwaway1 = -10;
+	const throwaway2 = 10;
+	while (throwaway1 < throwaway2) {
+		const selectedMessage = alertbarmessages[Math.floor(Math.random() * alertbarmessages.length)];
+		document.getElementById("alertbartext").innerHTML = selectedMessage;
+		await sleep(15000);
+	}
+}
 let doRoundDisplay = 1;
 // Updates the size counter and title of the page
 function refreshSize() {
@@ -600,11 +611,11 @@ function buttonColor(objectId, varnumber, specialReq, specialVar) {
 	if (specialReq === 'n') {
 		// used when there is no special variable
 		if (size >= varnumber) {changeObjectColor(objectId, "greenyellow", "black");}
-		else {changeObjectColor(objectId, "red", "black");}
+		else {changeObjectColor(objectId, "red", "white");}
 	} else if (specialVar >= specialReq) {
 		// used when there is a special variable
 		if (size >= varnumber) {changeObjectColor(objectId, "greenyellow", "black");}
-		else {changeObjectColor(objectId, "red", "black");}
+		else {changeObjectColor(objectId, "red", "white");}
 	}
 	else if (isDarkModeEnabled === 0) {changeObjectColor(objectId, "black", "white");}
 	else {changeObjectColor(objectId, "white", "black");}
@@ -627,7 +638,7 @@ function updateAllDisplays() {
 	roundSizeDisp(spscost, 'n', 1);
 	document.getElementById("keypresser").innerHTML = "Keypresser (" + newdisp + ", +1 byte per second)";
 	ifGreaterThanShow(boughtpressers, "catbuy", "lockedcat");
-	ifGreaterThanShow(boughtpressers, "fingerpurchase");
+	ifGreaterThanShow(boughtpressers, "fingerpurchase", "lockedfinger");
 	roundSizeDisp(catcost, 'n', 1);
 	document.getElementById("catbuy").innerHTML = "Cat (" + newdisp + ", +5 bytes per second)";
 	ifGreaterThanShow(boughtcats, "holdbuy", "lockedhold");
@@ -641,13 +652,13 @@ function updateAllDisplays() {
 	document.getElementById("collabuy").innerHTML = "Collab Document (" + newdisp + ", +5 KB per second)";
 	roundSizeDisp(fingercost, 'n', 1);
 	document.getElementById("fingerpurchase").innerHTML = "Extra Finger (" + newdisp + ", +1 byte per click)";
-	ifGreaterThanShow(boughtfingers, "keyboardpurchase");
+	ifGreaterThanShow(boughtfingers, "keyboardpurchase", "lockedkeyboard");
 	roundSizeDisp(keycost, 'n', 1);
 	document.getElementById("keyboardpurchase").innerHTML = `Extra Keyboard (${newdisp}, +40 bytes per click)`;
-	ifGreaterThanShow(boughtkeys, "macrobutpurchase");
+	ifGreaterThanShow(boughtkeys, "macrobutpurchase", "lockedmacrobut");
 	roundSizeDisp(macrobuttoncost, 'n', 1);
 	document.getElementById("macrobutpurchase").innerHTML = `Macro Button (${newdisp}, +500 bytes per click)`;
-	ifGreaterThanShow(boughtmacrobuts, "copypastepurchase");
+	ifGreaterThanShow(boughtmacrobuts, "copypastepurchase", "lockedcopypaste");
 	roundSizeDisp(copypastecost, 'n', 1);
 	document.getElementById("copypastepurchase").innerHTML = `Copy Paste (${newdisp}, +10 KB per click)`;
 }
@@ -864,24 +875,6 @@ function thisIsTheSecret(secretKey) {
 		document.write('<iframe src="https://embed.waze.com/iframe?zoom=13&lat=40.78247&lon=-73.97105&pin=1" width="100%" height="520"></iframe>');
 	} else {console.log("haha noob you dont have da secret key so u cant use da secret page");}
 }
-// Gives the tutorial a typing effect
-async function welcomeTypingEffect() {
-	document.getElementById("welcometext").innerHTML = "";
-	document.getElementById("clickonbuttontext").innerHTML = "";
-	document.getElementById("howtospendtext").innerHTML = "";
-	document.getElementById("viewupgradestext").innerHTML = "";
-	document.getElementById("changesettingstext").innerHTML = "";
-	document.getElementById("viewtutorialagaintext").innerHTML = "";
-	document.getElementById("havefuntext").innerHTML = "";
-	await typingEffect("Welcome to Idle File!", 50, "welcometext");
-	await typingEffect("Click on the large \"Type\" button to get bytes.", 10, "clickonbuttontext");
-	await typingEffect("You can spend your bytes on different upgrades to help you earn bytes faster.", 10, "howtospendtext");
-	await typingEffect("You can view different upgrade types by using the menus.", 10, "viewupgradestext");
-	await typingEffect("Change your settings in the settings menu to customize your experience.", 10, 
-	"changesettingstext");
-	await typingEffect("You can view this tutorial again from the settings menu.", 10, "viewtutorialagaintext");
-	await typingEffect("Have fun playing!", 25, "havefuntext");
-}
 // Used to close the pop-up warning about cookies, as well as prevents it from showing again
 function closeCookiesPopup() {
 	document.getElementById("cookiespopup").style.visibility = "hidden";
@@ -989,10 +982,31 @@ async function pageFakeLoad() {
 	await sleep(randomloadtime);
 	// Works on starting the actual game
 	isloading = 0;
-	openPage('tutorial');
-	welcomeTypingEffect();
+	openPage('upspage');
+}
+// toggles the scrolling bar at the top of the screen
+function toggleAlertBar() {
+	const alertaBar = document.getElementById("thealertbar");
+	const toggleButThing = document.getElementById("togglealbarbut");
+	if (alertaBar.style.display === "none") {
+		alertaBar.style.display = "block";
+		toggleButThing.style.backgroundColor = "greenyellow";
+		toggleButThing.innerHTML = "hide alart bar";
+	} else {
+		alertaBar.style.display = "none";
+		toggleButThing.style.backgroundColor = "red";
+		toggleButThing.innerHTML = "show alert bar";
+	}
+}
+// runs things when a key on the keyboard is pressed
+window.onload = function(){
+    window.onkeydown= function(pressedkey){
+		// toggles dark theme
+        if(pressedkey.keyCode === 68){
+			toggleDarkMode();
+		};
+	}
 }
-
 // * Saving and Loading *
 
 // Used to save the game to the browsers cookies
@@ -1100,4 +1114,5 @@ loadCookiesPopup();
 pageFakeLoad();
 loadDarkTheme();
 autoLoadSaveData();
-autoSaveGame();
+autoSaveGame();
+updateAlertBar();