made basic ui

you are going to have to overwrite this with css some day
Spentine · Jun 15, 2024 · ef91542 · ef91542
1 parent aedda68
commit ef91542
Show file tree

Hide file tree

Showing 4 changed files with 540 additions and 36 deletions.
diff --git a/init.html b/init.html
@@ -15,12 +15,56 @@
 
 <canvas id="render"></canvas>
 
-<div class="ui centeredText" id="homepage"> 
+<div class="ui page" id="homepage"> 
   <h1 class="ui" id="UI-homepageTitle"> Spentris </h1>
-  <button class="ui Button1" id="UI-start"> Start </button>
+  <button class="ui Button1" id="UI-play"> Play </button>
   <button class="ui Button1" id="UI-settings"> Settings </button>
-  <button class="ui Button1" id="UI-credits"> Credits </button>
-  <button class="ui Button1" id="UI-source"> Source </button>
+  <button class="ui Button1 unfinished" id="UI-credits"> Credits </button>
+  <button class="ui Button1 unfinished" id="UI-source"> Source </button>
+</div>
+
+<div class="ui page" id="playMenu">
+  <button class="ui Button1" id="UI-gamemodes"> Game Modes </button>
+  <button class="ui Button1 unfinished" id="UI-learn"> Learn </button>
+  <button class="ui Button1 unfinished" id="UI-train"> Train </button>
+  <button class="ui Button1" id="UI-playMenu-back"> Back </button>
+</div>
+
+<div class="ui page" id="gamemodesMenu">
+  <button class="ui Button1" id="UI-marathon"> Marathon </button>
+  <button class="ui Button1 unfinished" id="UI-fourtyLines"> 40 Lines </button>
+  <button class="ui Button1 unfinished" id="UI-blitz"> Blitz </button>
+  <button class="ui Button1 unfinished" id="UI-zen"> Zen </button>
+  <button class="ui Button1" id="UI-gamemodesMenu-back"> Back </button>
+</div>
+
+<div class="ui page" id="settingsMenu">
+  <button class="ui Button1 unfinished" id="UI-keybinds"> Keybinds </button>
+  <button class="ui Button1" id="UI-handling"> Handling </button>
+  <button class="ui Button1 unfinished" id="UI-graphics"> Graphics </button>
+  <button class="ui Button1 unfinished" id="UI-audio"> Audio </button>
+  <button class="ui Button1" id="UI-settingsMenu-back"> Back </button>
+</div>
+
+<div class="ui page" id="keybindsMenu">
+  <p class="ui keybindsText" id="UI-keybindsLeftText"> Left </p>
+  <p class="ui keybindsText" id="UI-keybindsRightText"> Right </p>
+  <p class="ui keybindsText" id="UI-keybindsCWText"> Clockwise </p>
+  <p class="ui keybindsText" id="UI-keybindsCCWText"> Counterclockwise </p>
+  <p class="ui keybindsText" id="UI-keybinds180Text"> 180 Rotation </p>
+  <p class="ui keybindsText" id="UI-keybindsSoftDropText"> Soft Drop </p>
+  <p class="ui keybindsText" id="UI-keybindsHardDropText"> Hard Drop </p>
+  <p class="ui keybindsText" id="UI-keybindsHoldText"> Hold </p>
+  <p class="ui keybindsText" id="UI-keybindsResetText"> Reset </p>
+
+  <div class="ui" id="UI-keyButtonsContainer">
+  </div>
+
+  <button class="ui Button1" id="UI-keybindsMenu-back"> Back </button>
+</div>
+
+<div class="ui page" id="handlingMenu">
+  <button class="ui Button1" id="UI-handlingMenu-back"> Back </button>
 </div>
 
 </body>

diff --git a/main.js b/main.js
@@ -92,14 +92,96 @@ if (blockStackerStorage) {
 const game = new Stacker(settings);
 const inputHandler = new InputHandler(keyMappings);
 const renderer = new GameRenderer();
+var scene = "homeMenu";
 
 function DOMLoaded(event) {
   const cRender = document.getElementById('render');
   renderer.useCanvas(cRender);
+  renderer.useKeyMappings(keyMappings);
+  renderer.getUiElements();
+  renderer.updateScene(scene);
+
+  const UIStartElement = document.getElementById('UI-play');
+  UIStartElement.addEventListener("click", () => {
+    scene = "playMenu";
+    renderer.updateScene(scene);
+  });
+
+  const UIStartMenuBackElement = document.getElementById('UI-playMenu-back');
+  UIStartMenuBackElement.addEventListener("click", () => {
+    scene = "homeMenu";
+    renderer.updateScene(scene);
+  });
+
+  const UIGamemodesElement = document.getElementById('UI-gamemodes');
+  UIGamemodesElement.addEventListener("click", () => {
+    scene = "gamemodesMenu";
+    renderer.updateScene(scene);
+  });
+
+  const UIGamemodesMenuBackElement = document.getElementById('UI-gamemodesMenu-back');
+  UIGamemodesMenuBackElement.addEventListener("click", () => {
+    scene = "playMenu";
+    renderer.updateScene(scene);
+  });
+
+  const UIMarathonElement = document.getElementById('UI-marathon');
+  UIMarathonElement.addEventListener("click", () => {
+    scene = "game";
+    startGame();
+    renderer.updateScene(scene);
+  });
+
+  const UISettingsElement = document.getElementById('UI-settings');
+  UISettingsElement.addEventListener("click", () => {
+    scene = "settingsMenu";
+    startGame();
+    renderer.updateScene(scene);
+  });
+
+  const UISettingsMenuBackElement = document.getElementById('UI-settingsMenu-back');
+  UISettingsMenuBackElement.addEventListener("click", () => {
+    scene = "homeMenu";
+    renderer.updateScene(scene);
+  });
+
+  const UIKeybindsElement = document.getElementById('UI-keybinds');
+  UIKeybindsElement.addEventListener("click", () => {
+    scene = "keybindsMenu";
+    startGame();
+    renderer.updateKeybindButtons();
+    renderer.updateScene(scene);
+  });
+
+  const UIKeybindsMenuBackElement = document.getElementById('UI-keybindsMenu-back');
+  UIKeybindsMenuBackElement.addEventListener("click", () => {
+    scene = "settingsMenu";
+    renderer.updateScene(scene);
+  });
+
+  const UIHandlingElement = document.getElementById('UI-handling');
+  UIHandlingElement.addEventListener("click", () => {
+    scene = "handlingMenu";
+    startGame();
+    renderer.updateScene(scene);
+  });
+
+  const UIHandlingMenuBackElement = document.getElementById('UI-handlingMenu-back');
+  UIHandlingMenuBackElement.addEventListener("click", () => {
+    scene = "settingsMenu";
+    renderer.updateScene(scene);
+  });
 }
 
-var lastFrame = Date.now();
-var lastInputs = inputHandler.getInputs();
+var lastFrame;
+var lastInputs;
+
+function startGame() {
+
+  lastFrame = Date.now();
+  lastInputs = inputHandler.getInputs();
+
+}
 
 function tickFrameGame() {
   const inputs = inputHandler.getInputs();
@@ -126,17 +208,18 @@ function tickFrameGame() {
 }
 
 function tickFrame() {
-  /*
-  renderer.renderScreen({
-    "type": "ui",
-    "data": {
-      "scene": "home",
-      "frameTime": Date.now() - lastFrame,
-    }
-  });
-  */
 
-  tickFrameGame();
+  if (scene === "game") {
+    tickFrameGame();
+  } else {
+    renderer.renderScreen({
+      "type": "ui",
+      "data": {
+        "scene": scene,
+        "frameTime": Date.now() - lastFrame,
+      }
+    });
+  }
 
   window.requestAnimationFrame(tickFrame);
 }