feat & style: add a sidebar and respective dropdowns

EternoSeeker · Mar 1, 2024 · 2e32d6b · 2e32d6b
1 parent b94a9ec
commit 2e32d6b
Show file tree

Hide file tree

Showing 3 changed files with 207 additions and 25 deletions.
diff --git a/app.js b/app.js
@@ -39,6 +39,7 @@ document.addEventListener("DOMContentLoaded", function () {
   // set grid container size according to ratio
   gridContainer.style.minHeight = "30vw";
   gridContainer.style.minWidth = "60vw";
+  handleDropdowns();
   addEventListenersToCells();
   drawCells();
 });
@@ -172,7 +173,7 @@ function clearGrid() {
     drawCells();
   }
   isStarted = false;
-  if(areEventListenersremoved){
+  if (areEventListenersremoved) {
     addEventListenersToCells();
     areEventListenersremoved = false;
   }
@@ -217,3 +218,31 @@ function animate() {
     }
   }, animationSpeed);
 }
+
+//* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
+function handleDropdowns() {
+  var themesDropdown = document.getElementsByClassName("color-themes");
+  var presetsDropdown = document.getElementsByClassName("presets");
+  for (let i = 0; i < themesDropdown.length; i++) {
+    themesDropdown[i].addEventListener("click", function () {
+      this.classList.toggle("active");
+      var dropdownContent = this.nextElementSibling;
+      if (dropdownContent.style.display === "block") {
+        dropdownContent.style.display = "none";
+      } else {
+        dropdownContent.style.display = "block";
+      }
+    });
+  }
+  for (let i = 0; i < presetsDropdown.length; i++) {
+    presetsDropdown[i].addEventListener("click", function () {
+      this.classList.toggle("active");
+      var dropdownContent = this.nextElementSibling;
+      if (dropdownContent.style.display === "block") {
+        dropdownContent.style.display = "none";
+      } else {
+        dropdownContent.style.display = "block";
+      }
+    });
+  }
+}
diff --git a/index.html b/index.html
@@ -27,38 +27,115 @@
     ></script>
   </head>
   <body>
-    <div class="heading">Conway's Game of Life</div>
+    <div class="game-settings">
+      <div class="sidenav">
+        <div class="other-settings">Settings</div>
+        <div class="other-settings-container">
+          <div class="grid-toggle">
+            <input
+              type="checkbox"
+              checked
+              id="grid-toggle"
+              class="grid-checkbox"
+              onclick="toggleGrid()"
+            />
+            <label for="grid-toggle">Grid</label>
+          </div>
+          <div class="warp-on-edges">
+            <input
+              type="checkbox"
+              id="warp-on-edges"
+              class="warp-checkbox"
+              onclick="toggleWarp()"
+            />
+            <label for="warp-on-edges">Warp on Edges</label>
+          </div>
+        </div>
+        <div class="color-themes has-dropdown">Themes</div>
+        <div class="themes-container">
+          <div>
+            <input
+              type="radio"
+              id="red-theme"
+              name="theme"
+              onclick="selectTheme('red')"
+            />
+            <label for="red-theme">Red</label>
+          </div>
+          <div>
+            <input
+              type="radio"
+              id="green-theme"
+              name="theme"
+              onclick="selectTheme('green')"
+            />
+            <label for="green-theme">Green</label>
+          </div>
+          <div>
+            <input
+              type="radio"
+              id="blue-theme"
+              name="theme"
+              onclick="selectTheme('blue')"
+            />
+            <label for="blue-theme">Blue</label>
+          </div>
+        </div>
+        <div class="presets has-dropdown">Presets</div>
+        <div class="presets-container">
+          <button class="themes-list">Gosper Glider Gun</button>
+        </div>
+        <div class="history">History</div>
+      </div>
+    </div>
     <div class="game">
+      <div class="heading">Conway's Game of Life</div>
       <div class="grid-container">
         <div id="main-grid" class="main-grid"></div>
       </div>
       <div class="controls">
-        <button class="clear-button" id="clear-button" onclick="clearGrid()">Clear</button>
-        <button class="control-button" id="fast-reverse-button" onclick="decreaseSpeed()">
+        <button class="clear-button" id="clear-button" onclick="clearGrid()">
+          Clear
+        </button>
+        <button
+          class="control-button"
+          id="fast-reverse-button"
+          onclick="decreaseSpeed()"
+        >
           <img
             class="icon"
             id="fast-reverse-icon"
             src="./images/Microsoft-Fluentui-Emoji-Mono-Fast-Reverse-Button.svg"
             alt="Play"
           />
         </button>
-        <button class="control-button" id="play-pause-button" onclick="startAnimation()">
+        <button
+          class="control-button"
+          id="play-pause-button"
+          onclick="startAnimation()"
+        >
           <img
             class="icon"
             id="play-pause-icon"
             src="./images/Microsoft-Fluentui-Emoji-Mono-Play-Button.svg"
             alt="Slow"
           />
         </button>
-        <button class="control-button" id="fast-forward-button" onclick="increaseSpeed()">
+        <button
+          class="control-button"
+          id="fast-forward-button"
+          onclick="increaseSpeed()"
+        >
           <img
             class="icon"
             id="fast-forward-icon"
             src="./images/Microsoft-Fluentui-Emoji-Mono-Fast-Forward-Button.svg"
             alt="Fast"
           />
         </button>
-        <button class="random-button" id="random-button" onclick="randomGrid()">Random</button>
+        <button class="random-button" id="random-button" onclick="randomGrid()">
+          Random
+        </button>
       </div>
     </div>
   </body>

diff --git a/style.css b/style.css
@@ -1,11 +1,13 @@
 * {
   box-sizing: border-box;
   margin: 0;
-  background-color: var(--background-col);
 }
 
-:root{
+:root {
   --primary-color: #0f045a;
+  --theme-color1: #7582b2;
+  --theme-color2: #8b8f9c;
+  --theme-color3: #036c96;
   --shadow-color1: #352a7e;
   --shadow-color2: #101536;
   --border-color1: #080126;
@@ -14,13 +16,12 @@
   --background-col: #c6cede;
 }
 
-
 .heading {
   text-align: center;
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
   margin-top: 0.5rem;
-  font-family: 'Courier New', Courier, monospace;
+  font-family: Courier, monospace;
   font-size: 2rem;
   font-weight: bold;
   color: var(--primary-color);
@@ -30,7 +31,9 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: center;
+  margin-left: 20vw;
+  background-color: var(--background-col);
 }
 
 .grid-container {
@@ -41,7 +44,6 @@
   border: solid 0.2rem #000;
   max-width: 62vw;
   max-height: 31vw;
-  margin: auto;
 }
 
 .main-grid {
@@ -67,7 +69,8 @@
   height: 5rem;
   justify-content: center;
   align-items: center;
-  margin: 1rem;
+  margin-top: 1rem;
+  margin-bottom: 1.7rem;
 }
 
 .control-button {
@@ -78,43 +81,116 @@
   outline: none;
 }
 
-.icon{
-  width: calc((30vw)/8);
-  height: calc((30vw)/8);
+.icon {
+  width: calc((30vw) / 8);
+  height: calc((30vw) / 8);
 }
 
-.clear-button, .random-button{
+.clear-button,
+.random-button {
   border: solid 0.1rem #000000;
   border-radius: 0.6rem;
-  height: calc((100%)/1.8);
+  height: calc((100%) / 1.8);
   width: auto;
   text-align: center;
   padding: 0.5rem;
   border-color: var(--border-color1);
-  font-family: 'Courier New', Courier, monospace;
+  font-family: "Courier New", Courier, monospace;
   font-weight: bold;
   font-size: 1.1rem;
   color: var(--primary-color);
 }
 
-.clear-button{
+.clear-button {
   margin-right: 1rem;
 }
 
-.random-button{
+.random-button {
   margin-left: 1rem;
 }
 
-.clear-button:hover, .random-button:hover {
+.clear-button:hover,
+.random-button:hover {
   box-shadow: 0.1rem 0.1rem var(--shadow-color1);
 }
 
-.clear-button:active, .random-button:active{
+.clear-button:active,
+.random-button:active {
   box-shadow: 0.1rem 0.1rem var(--shadow-color2);
   transform: translateY(0.1rem);
 }
 
-.icon:active{
+.icon:active {
   transform: translateY(0.1rem);
 }
 
+/* Fixed sidenav, full height */
+.sidenav {
+  height: 100%;
+  width: 20vw;
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  background-color: var(--border-color1);
+  overflow-x: hidden;
+  padding-top: 2rem;
+}
+
+/* Style the sidenav links and the dropdown button */
+.sidenav button,
+.other-settings,
+.other-settings-container div,
+.presets-container div,
+.color-themes,
+.themes-container div,
+.presets,
+.history {
+  padding: 0.8rem 1rem 0.8rem 2rem;
+  text-decoration: none;
+  font-size: 1rem;
+  color: #818181;
+  font-family: "Courier New", Courier, monospace;
+  display: block;
+  border: none;
+  background: none;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  outline: none;
+}
+
+/* On mouse-over exclude .other-settings*/
+.has-dropdown:hover {
+  color: #fff;
+}
+
+/* Add an active class to the active dropdown button */
+.active {
+  background-color: var(--theme-color3);
+  color: white;
+}
+
+.other-settings,
+.color-themes,
+.presets,
+.history {
+  font-size: 1.2rem;
+}
+
+.other-settings {
+  font-weight: bold;
+  color: var(--theme-color1);
+}
+
+.other-settings-container {
+  background-color: var(--shadow-color2);
+}
+
+/* Dropdown container (hidden by default) */
+.themes-container,
+.presets-container {
+  display: none;
+  background-color: var(--shadow-color2);
+  padding-left: 0.2rem;
+}