Track user interactions

index.js

@@ -8,6 +8,7 @@ const {
 } = require('kontra')
 
 const loadAssets = require('./assets')
+const persistChanges = require('./persistance')
 const renderGround = require('./scenes/game.scene')
 const renderBall = require('./sprites/ball')
 const renderBasket = require('./sprites/basket')
@@ -27,6 +28,7 @@ window.onload = async () => {
 
   initKeys()
   initPointer()
+  persistChanges()
 
   const assets = await loadAssets()
   const [ basketImage, groundImage, playerImage, ballImage ] = assets

persistance.js

@@ -0,0 +1,30 @@
+const { on, setStoreItem } = require('kontra')
+
+function persistChanges () {
+  const currentState = {
+    player: {
+      player: 'player',
+      direction: 'idle',
+      dx: 0,
+      dy: 0
+    }
+  }
+
+  const actions = []
+  actions.push({ ...currentState.player, ts: new Date() - 0 })
+
+  on('userInteraction', (action) => {
+    const diff = Object
+      .keys(action)
+      .map((key) => currentState.player[ key ] !== action[ key ])
+      .reduce((soFar, now) => soFar || now)
+
+    if (diff) {
+      actions.push({ ...action, ts: new Date() - 0 })
+      setStoreItem('actions', actions)
+      currentState.player = action
+    }
+  })
+}
+
+module.exports = persistChanges

update.js

@@ -1,26 +1,42 @@
-const { keyPressed } = require('kontra')
+const { emit, keyPressed } = require('kontra')
 
 function movePlayer ({ player, canvas, tileEngine }) {
   if (keyPressed('left') && player.x >= 8) {
     player.flipped = true
     player.turned = 0
     player.x -= 8
+    emit(
+      'userInteraction',
+      { player: 'player', direction: 'left', dx: -8, dy: 0 }
+    )
   }
 
   if (keyPressed('right') && player.x <= (canvas.width - 21 - 8)) {
     player.flipped = false
     player.turned = 0
     player.x += 8
+    emit(
+      'userInteraction',
+      { player: 'player', direction: 'right', dx: 8, dy: 0 }
+    )
   }
 
   if (keyPressed('up') && player.y >= 8) {
     player.turned = -1
     player.y -= 8
+    emit(
+      'userInteraction',
+      { player: 'player', direction: 'up', dx: 0, dy: -8 }
+    )
   }
 
   if (keyPressed('down') && player.y <= (canvas.height - 31 - 8)) {
     player.turned = 1
     player.y += 8
+    emit(
+      'userInteraction',
+      { player: 'player', direction: 'down', dx: 0, dy: 8 }
+    )
   }
 
   tileEngine.sx = player.x