#10 added some of the menu functionality

The user can now resume, reset and enter a mock settings menu
Avokadoen · Feb 21, 2020 · 71d875b · 71d875b
1 parent 5ae87bb
commit 71d875b
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 20 deletions.
diff --git a/www/index.html b/www/index.html
@@ -3,6 +3,9 @@
   <head>
     <meta charset="utf-8">
     <title>Hello wasm-pack!</title>
+    <!-- source: 
+          button group: https://www.w3schools.com/howto/howto_css_button_group_vertical.asp
+    -->
     <style>
       body {
         position: absolute;
@@ -15,19 +18,46 @@
         align-items: center;
         justify-content: center;
       }
+
+      .btn-group button {
+        background: rgb(189, 188, 188);
+        background-color: rgba(90, 90, 90, 1);
+        border: 1px solid rgba(77, 76, 76, 0.8); /* Green border */
+        color: white; /* White text */
+        padding: 10px 24px; /* Some padding */
+        margin: 2% 10% 2% 10%;
+        cursor: pointer; /* Pointer/hand icon */
+        display: block; /* Make the buttons appear below each other */
+        width: 80%;
+      }
 
-      #menu {
-        position: absolute;
-        background-color: rgba(180, 180, 180, 0.3);
+      .btn-group button:not(:last-child) {
+        border-bottom: none; /* Prevent double borders */
+      }
+
+      .btn-group button:first-child {
+        margin: 15% 10% 2% 10%;
+      }
+
+      /* Add a background color on hover */
+      .btn-group button:hover {
+        background-color: rgb(150, 150, 150);
+      }
+
+      .btn-group button:active {
+        background-color: rgb(129, 121, 121);
       }
     </style>
   </head>
   <body>
-    <div id="menu" style="display: none">
-      <button>Resume</button>
-      <button>Reset</button>
-      <button>Game settings </button>
-      <button>Quit</button>
+    <div id="mainMenu" class="btn-group" style="display: none">
+      <button id="resume">Resume</button>
+      <button id="reset">Reset</button>
+      <button id="settings">Settings</button>
+      <button id="quit">Quit</button>
+    </div>
+    <div id="settingsMenu" class="btn-group" style="display: none">
+      <button>settings menu works!</button>
     </div>
     <canvas id="tetris-canvas"></canvas>
     <script src='./bootstrap.js'></script>

diff --git a/www/index.js b/www/index.js
@@ -1,7 +1,20 @@
 import { Board, TileType } from "tetris-wasm";
-import { toggleMenu, initializeMenu } from './src/menu';
+import { 
+  toggleMainMenu, 
+  addResumeClickCallback, 
+  addResetClickCallback,
+  addSettingsClickCallback,
+  toggleSettingsMenu 
+} from './src/menu';
 import { memory } from "tetris-wasm/tetris_wasm_bg";
 
+// TODO: move functions out of this file
+
+/* For any potensial reader:
+  Sorry for the messy js, buti wanted to try and use some js and avoid libraries for the fun of it
+  I only have familiarity with ts and angular 6+ :P
+*/
+
 const TILE_SIZE     = 15; // px
 const GRID_COLOR    = "#CCCCCC";
 const TILE_COLOR    = "#000000";
@@ -140,6 +153,10 @@ const gameLoop = () => {
   prevFrameTime = thisFrameTime;
 };
 
+const toggleMenu = () => {
+  paused = toggleMainMenu(canvas);
+};
+
 // source: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
 document.addEventListener('keydown', (event) => {
   if (event.defaultPrevented) {
@@ -159,8 +176,7 @@ document.addEventListener('keydown', (event) => {
       updateRate = 50
       break;
     case 'Escape':
-      toggleMenu(canvas.width, canvas.height);
-      paused = !paused;
+      toggleMenu();
       break;
 
     default:
@@ -186,6 +202,20 @@ document.addEventListener('keyup', (event) => {
   event.preventDefault();
 }, true);
 
+addResumeClickCallback(() => {
+  toggleMenu();
+});
+
+addResetClickCallback(() => {
+  board.reset();
+  toggleMenu();
+});
+
+addSettingsClickCallback(() => {
+  toggleSettingsMenu(canvas);
+});
+
+
 drawGrid();
 drawTiles();
 gameLoop(); 

diff --git a/www/src/menu.js b/www/src/menu.js
@@ -1,14 +1,45 @@
 
-const menu = document.getElementById('menu');
-
-const tetrisCanvas = document.getElementById('tetris-canvas');
+const mainMenu = document.getElementById('mainMenu');
+const settingsMenu = document.getElementById('settingsMenu');
+export function toggleMainMenu(canvas) {
+    settingsMenu.style.display = 'none';
+    if (mainMenu.style.display !== 'none') {
+        mainMenu.style.display = 'none';
+        canvas.style.display = 'block'
+        return false;
+    } else {
+        mainMenu.style.width    = canvas.width + 'px';
+        mainMenu.style.height   = canvas.height + 'px';
+        mainMenu.style.display  = 'block';
+        canvas.style.display    = 'none';
+        return true;
+    }
+}
 
-export function toggleMenu(width, height) {
-    if (menu.style.display !== "none") {
-        menu.style.display = "none";
+export function toggleSettingsMenu(canvas) {
+    if (settingsMenu.style.display !== 'none') {
+        settingsMenu.style.display = 'none';
+        mainMenu.style.display     = 'block';
     } else {
-        menu.style.width = width + 'px';
-        menu.style.height = height + 'px';
-        menu.style.display = "block";
+        mainMenu.style.display      = 'none';
+        settingsMenu.style.width    = canvas.width + 'px';
+        settingsMenu.style.height   = canvas.height + 'px';
+        settingsMenu.style.display  = 'block';
     }
 }
+
+
+export function addResumeClickCallback(callback) {
+    const resumeButton = document.getElementById('resume');
+    resumeButton.addEventListener('click', callback);
+}
+
+export function addResetClickCallback(callback) {
+    const resetButton = document.getElementById('reset');
+    resetButton.addEventListener('click', callback);
+}
+
+export function addSettingsClickCallback(callback) {
+    const settingsButton = document.getElementById('settings');
+    settingsButton.addEventListener('click', callback);
+}