17: Player movement updates

kappa-view-kv has an event listener API called onUpdate, which emits the key that was modified, as well as its new value:

core.api.kv.onUpdate(function (key, msg) {
  console.log(key, '=', msg.value)
})

Exercise

See if you can listen for key updates and have messages of type player-position update a player character on the screen with neat-log.

Tips

• You can draw a single character to neat-log in your draw method using txt-blit:

function draw (state) {
  const screen = []
  const playerIcon = ['@']

  for (var i = 0; i < state.playerPositions.length; i++) {
    const pos = state.playerPositions[i]
    blit(screen, playerIcon, pos.x, pos.y)
  }

  return screen.join('\n')
}

And beyond!

From here you should be able to hook this up with your hyperswarm code and see other players, move around, and chat in real-time! You can even play the game while you're offline and your movements & messages will sync to others when they see you again.

There are tons of fun additions you could make to the game from here:

• show a text bubble over each player with their latest message, instead of a chat window
• provide a keyboard key that lets each player cycle the colour of their character (chalk is handy for this)
• add items that players can pick up and drop, and manage their inventory
• generate random levels using a shared random seed, that players can explore together

Once you solve this exercise continue to exercise 18