mitigates a nasty delay issue

app/client/components/GameComponent.js

@@ -41,10 +41,13 @@ export class GameComponent extends AppElement {
         }
         #container {
           width: 100%;
+          height: 100%;
           text-align: left;
           position: relative;
         }
         #widget {
+          position: absolute;
+          bottom: 0;
           display: flex;
           flex-direction: row;
           flex-wrap: wrap;
@@ -61,7 +64,7 @@ export class GameComponent extends AppElement {
           white-space: nowrap;
         }
         #buttons {
-          padding: 0.5em;
+          padding: 0.5em 0.5em 0 0.5em;
           flex-basis: 100%;
         }
       `
@@ -108,14 +111,21 @@ export class GameComponent extends AppElement {
     // this.rowingGames = createRowingGames(canvas, canvas.clientWidth, canvas.clientHeight)
     // @ts-ignore
     this.rowingGames = createRowingGames(canvas, gameSize, gameSize)
+
+    // This mitigates a problem with delayed app state updates in the kaboom game.
+    // If we use the change events from our Web Component to notify the game (i.e. by using the
+    // change notifiers available in this component), then the state changes will be processed by the
+    // game with a certain delay. This is pretty weird, since they are processed by this component at
+    // the correct time. Also when we look at timestamps in the games callback, then it seems that they
+    // are called completely in sync with the event and without dely.
+    // This problem only occures, when the update events are created from a web request (i.e. by receiving
+    // new rowing metrics via web socket).
+    // By delivering the app state updates directly here from index.js, this problem does not occure.
+    this.sendEvent('setGameStateUpdater', (appState) => { this.gameAppState(appState) })
   }
 
-  updated (changedProperties) {
-    if (changedProperties.has('appState')) {
-      if (this.rowingGames !== undefined) {
-        this.rowingGames.appState(changedProperties.get('appState'))
-      }
-    }
+  gameAppState (appState) {
+    if (this.rowingGames) this.rowingGames.appState(appState)
   }
 
   disconnectedCallback () {

app/client/index.js

@@ -39,6 +39,12 @@ export class App extends LitElement {
       // @ts-ignore
       this.app.handleAction(event.detail)
     })
+
+    // sets the handler to notify games about new app states
+    this.addEventListener('setGameStateUpdater', (event) => {
+      // @ts-ignore
+      this.gameStateUpdater = event.detail
+    })
   }
 
   /**
@@ -49,6 +55,8 @@ export class App extends LitElement {
    */
   updateState = (newState) => {
     this.appState = { ...newState }
+    // notify games about new app state
+    if (this.gameStateUpdater) this.gameStateUpdater(this.appState)
   }
 
   /**

app/client/lib/app.js

@@ -37,27 +37,27 @@ export function createApp (app) {
     // use the native websocket implementation of browser to communicate with backend
     socket = new WebSocket(`ws://${location.host}/websocket`)
 
-    socket.addEventListener('open', (event) => {
+    socket.onopen = (event) => {
       console.log('websocket opened')
       if (initialWebsocketOpenend) {
         websocketOpened()
         initialWebsocketOpenend = false
       }
-    })
+    }
 
-    socket.addEventListener('error', (error) => {
+    socket.onerror = (error) => {
       console.log('websocket error', error)
       socket.close()
-    })
+    }
 
-    socket.addEventListener('close', (event) => {
+    socket.onclose = (event) => {
       console.log('websocket closed, attempting reconnect')
       setTimeout(() => {
         initWebsocket()
       }, 1000)
-    })
+    }
 
-    socket.addEventListener('message', (event) => {
+    socket.onmessage = (event) => {
       try {
         const message = JSON.parse(event.data)
         if (!message.type) {
@@ -89,7 +89,7 @@ export function createApp (app) {
       } catch (err) {
         console.log(err)
       }
-    })
+    }
   }
 
   async function requestWakeLock () {