wip: mostly running, still working on keyboard input

dist/js/cyberegg2077.js

@@ -10,58 +10,39 @@ import { NiceImage, NiceSprite, NiceGame } from '/dist/js/lib/nice-game.js';
 
 class Tex extends NiceSprite {
 
-  constructor ( ) {
+  constructor (game) {
     super();
-
-    this.input = {
-      moveLeft: false,
-      moveRight: false,
-    };
-
+    this.game = game;
     this.moveSpeed = 2;
   }
 
   async load ( ) { return super.load('/dist/assets/img/big-baja-tex.png', 82, 128); }
 
   update ( ) {
-    if (this.input.moveLeft) {
+    const { input } = this.game;
+    if (input.buttons.moveLeft.isPressed || input.keys.moveLeft.isPressed) {
       this.position.x -= this.moveSpeed;
     }
-    if (this.input.moveRight) {
+    if (input.buttons.moveRight.isPressed || input.keys.moveLeft.isPressed) {
       this.position.x += this.moveSpeed;
     }
   }
 }
 
-class Egg {
-
-  constructor (image) {
-    this.image = image;
-    this.position = { x: 0, y: 0 };
-  }
-
-  render (ctx) {
-    ctx.drawImage(
-      this.sprite.image,
-      this.position.x - (this.sprite.image.width / 2),
-      this.position.y - (this.sprite.image.height / 2),
-    );
-  }
-}
-
 class CyberEgg2077 extends NiceGame {
 
   constructor ( ) {
     super(DTP_COMPONENT_NAME);
     this.startButton = document.getElementById('start-button');
     this.startButton.addEventListener('click', this.onStartGame.bind(this));
+    this.mode = 'loading';
   }
 
   async run ( ) {
     await this.startGameEngine(this.onUpdateDisplay.bind(this));
 
-    this.input.addKey('moveLeft', 'LeftArrow');
-    this.input.addKey('moveRight', 'RightArrow');
+    this.input.addKey('moveLeft', 'ArrowLeft');
+    this.input.addKey('moveRight', 'ArrowRight');
     this.input.addKey('throwEgg', 'Space');
 
     this.input.addButton('moveLeft', 'btn-move-left');
@@ -69,6 +50,9 @@ class CyberEgg2077 extends NiceGame {
     this.input.addButton('throwEgg', 'btn-throw-egg');
 
     await this.audio.setMusicStream('/dist/assets/audio/cyber_pulse.ogg');
+    await this.loadGameAssets();
+
+    this.mode = 'menu';
   }
 
   async onStartGame (/* event */) {
@@ -76,21 +60,29 @@ class CyberEgg2077 extends NiceGame {
     this.startButton.setAttribute('hidden', '');
 
     this.tex.moveSpeed = 2;
+    this.mode = 'game';
   }
 
   onUpdateDisplay (ctx) {
-    /*
-     * Update game objects, run the logic, woo.
-     */
+    switch (this.mode) {
+      case 'loading':
+        break;
+      case 'menu':
+        return this.updateMenu(ctx);
+      case 'game':
+        return this.updateGame(ctx);
+    }
+  }
 
-    this.tex.update();
+  updateMenu (ctx) {
+    this.background.draw(ctx, 0, 0);
+    this.tex.render(ctx);
+  }
 
-    /*
-     * Render the game scene using painter's algorithm (back to front)
-     */
+  updateGame (ctx) {
+    this.tex.update();
 
     this.background.draw(ctx, 0, 0);
-
     this.tex.render(ctx);
   }
 
@@ -98,7 +90,7 @@ class CyberEgg2077 extends NiceGame {
     this.background = new NiceImage(960, 540);
     await this.background.load('/dist/assets/img/bg-001.jpg');
 
-    this.tex = new Tex();
+    this.tex = new Tex(this);
     this.tex.position.x = 480;
     this.tex.position.y = 470;
     await this.tex.load();

dist/js/lib/nice-audio.js

@@ -19,13 +19,16 @@ export default class NiceAudio {
 
   constructor ( ) {
     this.log = new NiceLog(DTP_COMPONENT_NAME);
-    this._musicVolume = 0.7;
   }
 
   start ( ) {
     this.ctx = new AudioContext();
     this.masterVolume = this.ctx.createGain();
     this.masterVolume.connect(this.ctx.destination);
+
+    this.musicGain = this.ctx.createGain();
+    this.musicGain.value = 0.7;
+    this.musicGain.connect(this.masterVolume);
   }
 
   /**
@@ -72,6 +75,8 @@ export default class NiceAudio {
     source.connect(gain);
     gain.connect(this.masterVolume);
 
+    source.start();
+
     return { gain, source };
   }
 
@@ -81,52 +86,41 @@ export default class NiceAudio {
    * @param {URL} url The URL of the resource to be set as the new music stream
    * for the audio engine.
    */
-  async setMusicStream (url) {
-    if (this.music) {
-      this.log.debug('setMusicStream', 'stopping current music');
-      this.music.pause();
-      delete this.music;
-    }
-
+  setMusicStream (url) {
+    this.stopMusicStream();
     this.log.debug('setMusicStream', 'setting new music stream', { url });
     this.music = new Audio(url);
-    this.music.volume = this.musicVolume;
+  }
 
-    this.musicGain = this.ctx.createGain();
-    this.musicGain.value = this._musicVolume;
-    this.musicGain.connect(this.masterVolume);
+  playMusicStream ( ) {
+    if (this.musicSource) {
+      return;
+    }
 
     this.musicSource = this.ctx.createMediaElementSource(this.music);
     this.musicSource.connect(this.musicGain);
 
-    this.music.play();
-  }
-
-  async playMusicStream ( ) {
-    if (!this.musicSource || !this.music.paused) {
-      return;
-    }
     this.log.debug('playMusicStream', 'starting music stream playback');
-    this.musicGain.value = this.musicVolume;
     this.music.play();
   }
 
-  async pauseMusicStream ( ) {
-    if (!this.musicSource || this.music.paused) {
+  stopMusicStream ( ) {
+    if (!this.musicSource) {
       return;
     }
+
     this.log.debug('pauseMusicStream', 'stopping music stream playback');
     this.music.pause();
+
     this.musicGain.value = 0;
-  }
 
-  get musicVolume ( ) { return this._musicVolume; }
+    this.musicSource.disconnect(this.musicGain);
+    delete this.musicSource;
+  }
 
+  get musicVolume ( ) { return this.musicGain.value; }
   set musicVolume (volume) {
-    this._musicVolume = volume;
-    if (this.musicGain) {
-      this.musicGain.value = volume;
-    }
+    this.musicGain.value = volume;
   }
 
   get haveMusicStream ( ) {

dist/js/lib/nice-game.js

@@ -4,11 +4,17 @@
 
 'use strict';
 
-import NiceLog   from '/dist/js/lib/nice-log.js';
-import NiceAudio from '/dist/js/lib/nice-audio.js';
-import { NiceInput } from '/dist/js/lib/nice-input.js';
-import NiceImage from './nice-image.js';
-import NiceSprite from './nice-sprite.js';
+import NiceLog        from '/dist/js/lib/nice-log.js';
+import NiceAudio      from '/dist/js/lib/nice-audio.js';
+import NiceImage      from './nice-image.js';
+import NiceSprite     from './nice-sprite.js';
+
+import {
+  NiceInputTools,
+  NiceInputButton,
+  NiceInputKey,
+  NiceInput,
+} from '/dist/js/lib/nice-input.js';
 
 class NiceGame {
 
@@ -45,10 +51,20 @@ class NiceGame {
 
   updateDisplay ( ) {
     if (this.onGameUpdate && (typeof this.onGameUpdate === 'function')) {
-      this.onGameUpdate();
+      this.onGameUpdate(this.gameDisplayCtx);
     }
     window.requestAnimationFrame(this.onUpdateDisplay);
   }
 }
 
-export { NiceLog, NiceAudio, NiceInput, NiceImage, NiceSprite, NiceGame };
+export {
+  NiceAudio,
+  NiceGame,
+  NiceImage,
+  NiceInputButton,
+  NiceInputKey,
+  NiceInputTools,
+  NiceInput,
+  NiceLog,
+  NiceSprite,
+};

dist/js/lib/nice-image.js

@@ -19,6 +19,7 @@ export default class NiceImage {
   get height ( ) { return this.image.height; }
 
   draw (ctx, x, y) {
+    if (!this.image) { return; }
     ctx.drawImage(this.image, x, y);
   }
 }

dist/js/lib/nice-input.js

@@ -4,6 +4,10 @@
 
 'use strict';
 
+const DTP_COMPONENT_NAME = 'nice-input';
+
+import NiceLog from './nice-log.js';
+
 /**
  * Static support methods used across the variety of Input classes.
  */
@@ -31,7 +35,10 @@ export class NiceInputTools {
  */
 export class NiceInputButton {
 
-  constructor (actionName, buttonId) {
+  constructor (manager, actionName, buttonId) {
+    this.manager = manager;
+    this.log = manager.log;
+
     this.actionName = actionName;
     this.isPressed = false;
 
@@ -40,6 +47,8 @@ export class NiceInputButton {
       throw new Error(`button element ${buttonId} does not exist in view`);
     }
 
+    this.log.debug('NiceInputButton', 'registering event callbacks', { element: this.element });
+
     /*
      * Events that mean a button is currently "down"
      */
@@ -62,12 +71,14 @@ export class NiceInputButton {
 
   async onInputStart (event) {
     NiceInputTools.cancelEvent(event);
+    this.log.debug('onInputStart', 'button down', { action: this.actionName });
     this.element.classList.add('active');
     this.isPressed = true;
   }
 
   async onInputEnd (event) {
     NiceInputTools.cancelEvent(event);
+    this.log.debug('onInputEnd', 'button up', { action: this.actionName });
     this.element.classList.remove('active');
     this.isPressed = false;
   }
@@ -94,8 +105,10 @@ export class NiceInputKey {
 export class NiceInput {
 
   constructor ( ) {
-    this.buttons = { };
+    this.log = new NiceLog(DTP_COMPONENT_NAME);
+    this.log.enable(true);
 
+    this.buttons = { };
     this.keys = { };
 
     document.addEventListener('keydown', this.onKeyDown.bind(this));
@@ -103,7 +116,7 @@ export class NiceInput {
   }
 
   addButton (actionName, buttonId) {
-    const button = new NiceInputButton(actionName, buttonId);
+    const button = new NiceInputButton(this, actionName, buttonId);
     this.buttons[actionName] = button;
   }