Revert "New Theme Handling (#121)" (#123)

This reverts commit 1dd4eb8.
devkennyy · Jul 21, 2022 · 3f5ea2c · 3f5ea2c
1 parent e814ad4
commit 3f5ea2c
Show file tree

Hide file tree

Showing 12 changed files with 265 additions and 265 deletions.
diff --git a/index.html b/index.html
@@ -6,31 +6,29 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>🏃Rungeon</title>
-    <link rel="stylesheet" href="styles/themes.css" />
     <link rel="stylesheet" href="styles/style.css" />
+    <link
+      id="themeStylesheet"
+      rel="stylesheet"
+      href="styles/themes/default.css"
+    />
     <style>
       @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400&family=JetBrains+Mono&family=Roboto&display=swap");
     </style>
     <script
       src="https://kit.fontawesome.com/384a80988d.js"
       crossorigin="anonymous"
     ></script>
-    <script src="scripts/themes.js"></script>
   </head>
 
-  <body id="index" class="theme-default">
+  <body id="index">
     <div id="themePopup" style="display: none">
-      <div class="title theme-serika" onclick="setTheme('serika')">serika</div>
-      <div class="title theme-cobalt" onclick="setTheme('cobalt')">cobalt</div>
-      <div class="title theme-hedge" onclick="setTheme('hedge')">hedge</div>
-      <div class="title theme-passionfruit" onclick="setTheme('passionfruit')">
-        passionfruit
-      </div>
-      <div class="title theme-rgb" onclick="setTheme('rgb')">rgb</div>
-      <div class="title theme-dots" onclick="setTheme('dots')">dots</div>
-      <div class="title theme-default" onclick="setTheme('default')">
-        default
-      </div>
+      <div class="title" id="serika" onclick="setTheme(event)">serika</div>
+      <div class="title" id="cobalt" onclick="setTheme(event)">cobalt</div>
+      <div class="title" id="hedge" onclick="setTheme(event)">hedge</div>
+      <div class="title" id="passionfruit" onclick="setTheme(event)">passionfruit</div>
+      <div class="title" id="rgb" onclick="setTheme(event)">rgb</div>
+      <div class="title" id="dots" onclick="setTheme(event)">dots</div>
     </div>
     <div class="doors">
       <i
@@ -61,6 +59,6 @@
         <div class="text">Discord</div>
       </a>
     </div>
-    <script src="scripts/main.js"></script>
   </body>
 </html>
+<script src="scripts/main.js"></script>
diff --git a/scripts/main.js b/scripts/main.js
@@ -3,17 +3,17 @@ window.onload = runStageRequiredScripts();
 //themeToggler ensures that it needs two clicks on body to close the themePopup, given that a click on the button that opens the popup counts as a click on body as well
 var themeToggler = 0;
 document.addEventListener('click', function (event) {
-  themeToggler++;
-  if((themeToggler & 2) === 0) {
+  themeToggler = themeToggler += 1;
+  if(themeToggler%2 === 0) {
     document.getElementById("themePopup").style.display = "none";
     document.getElementById("doors_icon").style.visibility = "visible";
   }
+
 });
 
 //Global vars
 const totalStages = 4;
 var stage = 1;
-var theme;
 
 //Stage one vars
 var stageOne_ClickCount = 0;
@@ -22,12 +22,13 @@ var stageOne_BtnDisabled = false;
 
 //Stage two vars
 var stageTwo_hasCoin = false;
+
 // START OF GLOBAL FUNCTIONS
 
 //Some stages require an initial setup before the stage is loaded. This script is run as soon as the page is loaded.
 function runStageRequiredScripts() {
   // Fetch themes from local storage
-  theme = localStorage.getItem("theme");
+  getThemes();
 
   //Check if user is on index page
   if(window.location.pathname == '/' || window.location.pathname == '/index.html'){
@@ -151,6 +152,59 @@ function addPopupListener() {
   })
 }
 
+function setTheme(event) {
+  try {
+    let previousTheme = localStorage.getItem("theme");
+    document.getElementById(previousTheme).innerHTML = previousTheme; 
+  } catch (error) {
+    getThemes();
+  }
+
+  document.getElementById(
+    "themeStylesheet"
+  ).href = `styles/themes/${event.target.id}.css`;
+  localStorage.setItem("index_theme", `${event.target.id}`);
+  localStorage.setItem("theme", `${event.target.id}`);
+  document.getElementById(event.target.id).innerHTML +=
+    ' <i class="fa-solid fa-check"></i>';
+
+  //Only toggle the main theme popup when on index.html (the navbar dropdown has a close of its own)
+  if(window.location.pathname == '/' || window.location.pathname == '/index.html'){
+    toggleThemePopup();
+  }
+}
+
+
+function getThemes() {
+  // index.html theme check
+  var indexTheme = localStorage.getItem("index_theme");
+  if ((indexTheme) === null) {
+    document.getElementById(
+      "themeStylesheet"
+    ).href = `styles/themes/default.css`;
+  } else {
+    document.getElementById(
+      "themeStylesheet"
+    ).href = `styles/themes/${indexTheme}.css`;
+  }
+
+  // rungeon.html theme check
+  var storageTheme = localStorage.getItem("theme");
+  if (storageTheme === null) {
+    document.getElementById(
+      "themeStylesheet"
+    ).href = `styles/themes/default.css`;
+  } else {
+    console.log("Getting rungeon themes...");
+    let theme = storageTheme;
+    document.getElementById(
+      "themeStylesheet"
+    ).href = `styles/themes/${theme}.css`;
+    document.getElementById(theme).innerHTML +=
+      ' <i class="fa-solid fa-check"></i>';
+  }
+}
+
 function updateTitleProgress() {
   let val = stage / (totalStages + 2);
   switch (true) {

diff --git a/scripts/themes.js b/scripts/themes.js
diff --git a/styles/style.css b/styles/style.css
@@ -142,7 +142,7 @@ body
 #themePopup
 {
   z-index: 10;
-  /* height: 384px; */
+  height: 384px;
   margin-bottom: 150px;
   border-radius: 5px;
   background-color: var(--text-color);
@@ -166,12 +166,6 @@ body
 
 /* THEMES TAKEN FROM MONKEYTYPE */
 
-#themePopup #default
-{
-  background-color: #202124;
-  color: #adacad;
-}
-
 #themePopup #serika
 {
   background-color: #323437;
@@ -208,6 +202,40 @@ body
   color: #fff;
 }
 
+
+@keyframes rgb
+{
+  0%
+  {
+    color: #4cae4c;
+  }
+
+  20%
+  {
+    color: #409eb5;
+  }
+
+  40%
+  {
+    color: #8134f4;
+  }
+
+  60%
+  {
+    color: #f10e19;
+  }
+
+  80%
+  {
+    color: #ffc505;
+  }
+
+  to
+  {
+    color: #4cae4c;
+  }
+}
+
 .nav-link
 {
   color: var(--nav_icon-color) !important;