many small updates and fixes

game/js/game-app.js

@@ -11,6 +11,7 @@ import {
   NiceColor,
   NiceEasing,
   NiceGame,
+  NiceInputTools,
   NiceMath,
   NiceVector2d,
 } from 'dtp-nice-game';
@@ -28,10 +29,9 @@ export default class GameApp extends NiceGame {
   constructor ( ) {
     super(DTP_COMPONENT_NAME);
 
-    this.startButton = document.getElementById('start-button');
-    this.startButton.addEventListener('click', this.onStartGame.bind(this));
+    this.initMenuOverlays();
 
-    this.mode = 'loading';
+    this.mode = 'starting';
 
     this.eggs = [ ];
 
@@ -48,14 +48,38 @@ export default class GameApp extends NiceGame {
     };
   }
 
-  async run ( ) {
+  initMenuOverlays ( ) {
     /*
-     * Initialize NiceGame engine resources
+     * Attach to each expected menu overlay
      */
+    this.overlays = {
+      systemMenu: document.querySelector('.menu-overlay#system-menu'),
+      mainMenu: document.querySelector('.menu-overlay#main-menu'),
+      gameControls: document.querySelector('.menu-overlay#game-controls'),
+    };
+
+    this.startButton = this.overlays.mainMenu.querySelector('button#start-button');
+    this.startButton.onclick = this.onStartGame.bind(this);
+
+    this.bootButton = this.overlays.systemMenu.querySelector('button#boot-button');
+    this.bootButton.onclick = this.bootGameCartridge.bind(this);
+
+    this.gameDisplay.removeChild(this.overlays.mainMenu);
+    this.gameDisplay.removeChild(this.overlays.gameControls);
+  }
+
+  async run ( ) {
     await this.startGameEngine(
       this.onGameUpdate.bind(this),
       this.onGameRender.bind(this),
     );
+  }
+
+  async bootGameCartridge (event) {
+    NiceInputTools.cancelEvent(event);
+
+    this.gameDisplay.removeChild(this.overlays.systemMenu);
+    this.gameDisplay.appendChild(this.overlays.mainMenu);
 
     /*
      * Initialize the inputs this game needs
@@ -65,9 +89,12 @@ export default class GameApp extends NiceGame {
     this.input.addKey('moveRight', 'ArrowRight');
     this.input.addKey('throwEgg', 'Space');
 
-    this.input.addButton('moveLeft', 'btn-move-left');
-    this.input.addButton('moveRight', 'btn-move-right');
-    this.input.addButton('throwEgg', 'btn-throw-egg');
+    this.input.addButton('moveLeft', '#btn-move-left');
+    this.input.addButton('moveRight', '#btn-move-right');
+    this.input.addButton('throwEgg', '#btn-throw-egg');
+
+    this.audio.start();
+    this.startMusicStream('/dist/assets/audio/music/blueberries');
 
     await this.loadGameAssets();
 
@@ -77,11 +104,13 @@ export default class GameApp extends NiceGame {
     this.startUpdateLoop();
   }
 
-  async onStartGame (/* event */) {
+  async onStartGame (event) {
+    NiceInputTools.cancelEvent(event);
     this.mode = 'loading';
-    this.startButton.setAttribute('hidden', '');
 
-    this.audio.start();
+    this.gameDisplay.removeChild(this.overlays.mainMenu);
+    this.gameDisplay.appendChild(this.overlays.gameControls);
+
     this.startMusicStream('/dist/assets/audio/music/idra');
     this.loadAudio();
 

game/less/lib/button.less

@@ -20,6 +20,10 @@ button.direction-button {
   font-weight: bold;
   font-family: apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol;
 
+  &[hidden] {
+    display: none;
+  }
+
   &.active {
     background: var(--direction-btn-color-80pct);
   }
@@ -34,9 +38,13 @@ button.direction-button {
 button.action-button {
   background-color: var(--brand-color-50pct);
   color: white;
-  font-size: 3em;
+  font-size: 2em;
   font-family: apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol;
 
+  &[hidden] {
+    display: none;
+  }
+
   &.active {
     background-color: var(--brand-color-80pct);
   }

game/less/lib/game-view.less

@@ -28,18 +28,47 @@
     border-radius: 8px;
   }
   
-  button.start-button {
+  .menu-overlay {
     position: absolute;
-    left: calc(50% - 120px);
-    top: calc(50% - 32px);
-    width: 240px;
-    height: 64px;
-    padding: 10px 20px;
-    background-color: var(--brand-color);
-    color: white;
-    border: solid 3px white;
-    border-radius: 8px;
+    top: 0; right: 0; bottom: 0; left: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    outline: none;
+
+    background-color: rgba(0,0,0, 0.8);
+    color: #e8e8e8;
     font-size: 24px;
-    font-weight: bold;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    &[hidden] {
+      display: none;
+    }
+
+    &.menu-transparent {
+      background: none;
+    }
+
+    button.menu-button {
+      display: block;
+      width: 240px;
+      padding: 10px 20px;
+      margin: 0 auto;
+
+      border: solid 3px white;
+      border-radius: 8px;
+
+      background-color: var(--brand-color);
+      color: white;
+
+      font-size: 24px;
+      font-weight: bold;
+    }
   }
 }

game/less/lib/responsive.less

@@ -16,7 +16,7 @@
     font-size: 24px;
   }
   
-  .container button {
+  .container #game-controls button {
     width: 50px;
     height: 50px;
   }

game/views/game-view.pug

@@ -1,11 +1,20 @@
 extends layout
 block game-view
 
-  .game-display-wrapper
+  #game-display.game-display-wrapper
     canvas(id="game-display" width="960" height="540").game-display
-    button(type="button").start-button#start-button Start Game
-    button(type="button").direction-button#btn-move-left
-      img(src='/dist/assets/img/btn-left.svg', alt='Left button icon').button-icon
-    button(type="button").direction-button#btn-move-right
-      img(src='/dist/assets/img/btn-right.svg', alt='Left button icon').button-icon
-    button(type="button").action-button#btn-throw-egg 🥚
+
+    #system-menu.menu-overlay
+      button(type="button").menu-button#boot-button BOOT CARTRIDGE
+
+    #main-menu.menu-overlay.menu-transparent
+      button(type="button").menu-button#start-button Start Game
+
+    #game-controls.menu-overlay.menu-transparent
+      button(type="button").direction-button#btn-move-left
+        img(src='/dist/assets/img/btn-left.svg', alt='Left button icon').button-icon
+      
+      button(type="button").direction-button#btn-move-right
+        img(src='/dist/assets/img/btn-right.svg', alt='Left button icon').button-icon
+      
+      button(type="button").action-button#btn-throw-egg 🥚

game/views/layout.pug

@@ -5,6 +5,7 @@ html(lang="en")
     meta(name="viewport" content="width=device-width, initial-scale=1")
     title CyberEgg 2077
     link(rel="stylesheet", href="/dist/game-app.css")
+    link(rel="icon", type="image/x-icon", href="/dist/assets/icon/favicon.ico")
   body
 
     .navbar