adds a background flash effect, makes metrics prettier

app/client/arcade/SpaceBackground.js

@@ -14,10 +14,11 @@ const STAR_NUM = 10
  * @param {import('kaboom').KaboomCtx} k Kaboom Context
  */
 export default function addSpaceBackground (k) {
-  k.add([
+  const background = k.add([
     k.rect(k.width() + 50, k.height() + 50),
     k.pos(-25, -25),
     k.color(0, 9, 28),
+    redflash(),
     k.layer('background')
   ])
 
@@ -44,6 +45,28 @@ export default function addSpaceBackground (k) {
       { speed: k.rand(STAR_SPEED * 0.5, STAR_SPEED * 1.5) }
     ])
   }
+  function redflash () {
+    let timer = 0
+    let origR = 0
+    let flashing = false
+    return {
+      add () {
+        origR = this.color.r
+      },
+      update () {
+        if (flashing && timer < 0.2) {
+          this.color.r = k.wave(origR, 100, timer * 20)
+          timer += k.dt()
+        } else {
+          this.color.r = origR
+        }
+      },
+      redflash () {
+        timer = 0
+        flashing = true
+      }
+    }
+  }
 
   k.onUpdate('star', (star) => {
     star.move(0, star.speed)
@@ -52,4 +75,12 @@ export default function addSpaceBackground (k) {
       addStar(true)
     }
   })
+
+  function _redflash () {
+    background.redflash()
+  }
+
+  return {
+    redflash: _redflash
+  }
 }

app/client/arcade/StrokeFighterBattleScene.js

@@ -15,9 +15,9 @@ export default function StrokeFighterBattleScene (k) {
   // how much stroke power is needed to fire high power lasers
   const THRESHOLD_POWER = 180
   // training duration in seconds
-  const TARGET_TIME = 5 * 60
+  const TARGET_TIME = 10 * 60
   // strokes per minute at start of training
-  const SPM_START = 14
+  const SPM_START = 18
   // strokes per minute at end of training
   const SPM_END = 28
   const BULLET_SPEED = 1200
@@ -44,7 +44,7 @@ export default function StrokeFighterBattleScene (k) {
     'ui'
   ], 'game')
 
-  addSpaceBackground(k)
+  const background = addSpaceBackground(k)
 
   function grow (rate) {
     return {
@@ -82,7 +82,7 @@ export default function StrokeFighterBattleScene (k) {
     k.shake(4)
     k.play('hit', {
       detune: -1200,
-      volume: 0.3,
+      volume: 0.6,
       speed: k.rand(0.5, 2)
     })
   })
@@ -141,12 +141,13 @@ export default function StrokeFighterBattleScene (k) {
       spawnBullet(player.pos.sub(16, 15))
       spawnBullet(player.pos.add(16, -15))
     } else {
+      background.redify()
       spawnBullet(player.pos.sub(0, 20))
       spawnBullet(player.pos.sub(16, 15))
       spawnBullet(player.pos.add(16, -15))
     }
     k.play('shoot', {
-      volume: 0.3,
+      volume: 0.6,
       detune: k.rand(-1200, 1200)
     })
   }
@@ -176,7 +177,7 @@ export default function StrokeFighterBattleScene (k) {
     k.shake(1)
     k.play('hit', {
       detune: k.rand(-1200, 1200),
-      volume: 0.1,
+      volume: 0.3,
       speed: k.rand(0.2, 2)
     })
   })

app/client/components/GameComponent.js

@@ -34,7 +34,7 @@ export class GameComponent extends AppElement {
             height: 100vw;
           }
         }
-        span .icon {
+        div > .icon {
           height: 0.8em;
           width: 1.5em;
         }
@@ -44,11 +44,25 @@ export class GameComponent extends AppElement {
           position: relative;
         }
         #widget {
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
           padding: 0.5em;
           margin: 1vw;
-          background: var(--theme-widget-color);
+          background: var(--theme-background-color);
           border-radius: var(--theme-border-radius);
         }
+        .metric-unit {
+          font-size: 80%
+        }
+        #widget div {
+          width: 6.5em;
+          white-space: nowrap;
+        }
+        #buttons {
+          padding: 0.5em;
+          flex-basis: 100%;
+        }
       `
     ]
   }
@@ -59,13 +73,19 @@ export class GameComponent extends AppElement {
       <canvas id="arcade"></canvas>
       <div id="container">
         <div id="widget">
-          <span>${icon_route}${Math.round(metrics.distanceTotal)}</span><br/>
+          <!-- todo: should use the same calculations as PerformanceDashboard -->
-          <span>${icon_stopwatch}${metrics.splitFormatted}</span><br/>
+          <div>${icon_route}${Math.round(metrics.distanceTotal)}<span class="metric-unit">m</span></div>
-          <span>${icon_bolt}${Math.round(metrics.powerRaw)}</span><br/>
+          <div>${icon_stopwatch}${metrics.splitFormatted}<span class="metric-unit">/500m</span></div>
-          <span>${icon_paddle}${Math.round(metrics.strokesPerMinute)}</span><br/>
+          <div>${icon_bolt}${Math.round(metrics.powerRaw)}<span class="metric-unit">watt</span></div>
-          ${metrics?.heartrate ? html`<span>${icon_heartbeat}${Math.round(metrics.heartrate)}</span><br/>` : ''}
+          <div>${icon_paddle}${Math.round(metrics.strokesPerMinute)}<span class="metric-unit">/min</span></div>
+          ${metrics?.heartrate ? html`<div>${icon_heartbeat}${Math.round(metrics.heartrate)}<span class="metric-unit">bpm</span></div>` : ''}
+          <div>${icon_bolt}${metrics.instantaneousTorque.toFixed(2)}<span class="metric-unit">trq</span></div>
+          <div>${icon_bolt}${metrics.powerRatio.toFixed(2)}<span class="metric-unit">ratio</span></div>
+          <div>${icon_bolt}${metrics.strokeState}</div>
 
-          <button @click=${this.openDashboard}>${icon_exit}</button>
+          <div id='buttons'>
+            <button @click=${this.openDashboard}>${icon_exit}</button>
+          </div>
         </div>
       </div>
     `

app/client/lib/styles.js

@@ -5,7 +5,7 @@
   Common styles for UI elements
 */
 
-import { css } from 'lit-element'
+import { css } from 'lit'
 
 export const buttonStyles = css`
     button {