Has a Torba that Tweens

This is just a demo build that has NiceTween up and running to "bounce"
a Torba head off the left margin.

game/js/game-app.js

@@ -7,7 +7,7 @@
 const DTP_COMPONENT_NAME = 'game-app';
 import '../less/style.less';
 
-import { NiceGame, NiceVector2d } from 'dtp-nice-game';
+import { NiceGame, NiceSprite, NiceVector2d, NiceEasing } from 'dtp-nice-game';
 
 import GameBackground from './lib/game-background.js';
 import GamePlayer from './lib/game-player.js';
@@ -31,11 +31,18 @@ export default class GameApp extends NiceGame {
   }
 
   async run ( ) {
+    /*
+     * Initialize NiceGame engine resources
+     */
     await this.startGameEngine(
       this.onGameUpdate.bind(this),
       this.onGameRender.bind(this),
     );
 
+    /*
+     * Initialize the inputs this game needs
+     */
+
     this.input.addKey('moveLeft', 'ArrowLeft');
     this.input.addKey('moveRight', 'ArrowRight');
     this.input.addKey('throwEgg', 'Space');
@@ -44,22 +51,21 @@ export default class GameApp extends NiceGame {
     this.input.addButton('moveRight', 'btn-move-right');
     this.input.addButton('throwEgg', 'btn-throw-egg');
 
-    await this.audio.setMusicStream('/dist/assets/audio/music/idra');
     await this.loadGameAssets();
 
     this.mode = 'menu';
+
+    this.startUpdateLoop();
   }
 
   async onStartGame (/* event */) {
     this.mode = 'loading';
+    this.startButton.setAttribute('hidden', '');
 
     this.audio.start();
+    this.startMusicStream('/dist/assets/audio/music/idra');
     this.loadAudio();
 
-    this.audio.playMusicStream();
-    this.audio.musicVolume = 0.4;
-    this.startButton.setAttribute('hidden', '');
-
     this.tex.moveSpeed = 2;
 
     this.eggs.clear();
@@ -69,23 +75,35 @@ export default class GameApp extends NiceGame {
 
     this.level = 1;
     this.startLevel();
+
+    const tween = this
+      .createTween(this.torba.position, { x: 480 }, { x: 0 }, NiceEasing.Bounce.Out)
+      .delay(1000.0)
+      .duration(2000.0);
+    tween.run(performance.now());
+  }
+
+  async startMusicStream (url) {
+    await this.audio.setMusicStream(url);
+    this.audio.playMusicStream();
+    this.audio.musicVolume = 0.4;
   }
 
   startLevel ( ) {
-    const NOW = new Date();
+    const now = performance.now();
     this.nextSpawnInterval = 1000 * 5;
-    this.nextSpawnTime = NOW.valueOf() + this.nextSpawnInterval;
+    this.nextSpawnTime = now + this.nextSpawnInterval;
     this.formations = [ ];
   }
 
-  onGameUpdate ( ) {
+  onGameUpdate (elapsed, now) {
     switch (this.mode) {
       case 'loading':
         break;
       case 'menu':
-        return this.updateMenu( );
+        return this.updateMenu(elapsed, now);
       case 'game':
-        return this.updateGame( );
+        return this.updateGame(elapsed, now);
     }
   }
 
@@ -100,16 +118,14 @@ export default class GameApp extends NiceGame {
     }
   }
 
-  updateMenu ( ) { }
+  updateMenu (/* elapsed, now */) { }
 
   renderMenu (ctx) {
     this.background.draw(ctx, 0, 0);
     this.tex.render(ctx);
   }
 
-  updateGame ( ) {
-    const NOW = new Date();
-
+  updateGame (elapsed, now) {
     this.background.update();
     this.tex.update();
 
@@ -130,7 +146,7 @@ export default class GameApp extends NiceGame {
     /*
      * Spawn an enemy from the groyper army at scheduled intervals.
      */
-    if (NOW.valueOf() >= this.nextSpawnTime) {
+    if (now >= this.nextSpawnTime) {
       this.nextSpawnTime += this.nextSpawnInterval;
       this.enemies.spawnBeardson();
     }
@@ -141,7 +157,6 @@ export default class GameApp extends NiceGame {
     for (const formation of this.formations) {
       formation.update();
     }
-
   }
 
   renderGame (ctx) {
@@ -155,6 +170,8 @@ export default class GameApp extends NiceGame {
     this.eggs.render(ctx);
 
     this.tex.render(ctx);
+
+    this.torba.render(ctx);
   }
 
   throwEgg ( ) {
@@ -191,6 +208,9 @@ export default class GameApp extends NiceGame {
     this.enemies = new GameEnemies(this);
     jobs.push(this.enemies.load());
 
+    this.torba = new NiceSprite(this, new NiceVector2d(480, 20));
+    jobs.push(this.torba.load('/dist/assets/img/torba.png', 52, 64));
+
     await Promise.all(jobs);
   }
 

game/less/lib/brand-link.less

@@ -1,6 +1,7 @@
 .brand-link {
   display: block;
   width: 240px;
+  margin: 0 auto var(--default-margin) auto;
 
   img.brand-header {
     display: block;

game/less/lib/button.less

@@ -28,10 +28,14 @@ button.direction-button {
 }
 
 button.action-button {
-  background: rgba(255,0,0, 0.6);
+  background-color: var(--brand-color-50pct);
   color: white;
   font-size: 3em;
   font-family: apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol;
+
+  &:active {
+    background-color: var(--brand-color-80pct);
+  }
 }
 
 button.action-button.active,

game/less/lib/variables.less

@@ -1,6 +1,36 @@
+/*
+ * Define variables as LESS variables for use with all the LESS tools.
+ */
+
+@brand-color                : rgb(4, 130, 216);
+@brand-color-80pct          : rgba(4, 130, 216, 0.8);
+@brand-color-50pct          : rgba(4, 130, 216, 0.5);
+
+@direction-btn-color        : rgb(0,0,0);
+@direction-btn-color-80pct  : rgba(0,0,0, 0.8);
+@direction-btn-color-50pct  : rgba(0,0,0, 0.5);
+
+@background-color           : #000000;
+@text-color                 : #e8e8e8;
+
+@default-margin             : 30px;
+
+/*
+ * Expose LESS variables also as CSS variables, which are more configurable at
+ * runtime or with user settings.
+ */
+
 * {
-  --brand-color: rgb(252, 98, 0);
-  --background-color: rgb(0,0,0);
-  --text-color: #e8e8e8;
-  --default-margin: 30px;
+  --brand-color               : @brand-color;
+  --brand-color-80pct         : @brand-color-80pct;
+  --brand-color-50pct         : @brand-color-50pct;
+
+  --direction-btn-color       : @direction-btn-color;
+  --direction-btn-color-80pct : @direction-btn-color-80pct;
+  --direction-btn-color-50pct : @direction-btn-color-50pct;
+  
+  --background-color          : @background-color;
+  --text-color                : @text-color;
+
+  --default-margin            : @default-margin;
 }

game/views/layout.pug

@@ -7,6 +7,11 @@ html(lang="en")
     link(rel="stylesheet", href="/dist/game-app.css")
   body
 
+    .navbar
+      .brand-link
+        a(href="https://nicecrew.digital", target="_blank")
+          img(src="/platform/img/nicecrew-banner.png", alt="NiceCrew Banner").brand-header
+
     .container
 
       block game-view
@@ -15,8 +20,5 @@ html(lang="en")
         .game-data
           .game-title= pkg.niceGame.title
           .game-subtitle= pkg.niceGame.description
-        .brand-link
-          a(href="https://nicecrew.digital", target="_blank")
-            img(src="/platform/img/nicecrew-banner.png", alt="NiceCrew Banner").brand-header
 
     script(src=`${gameModuleUrl}?v=${pkg.version}`, type="module")