name :)

common/GameCommon.js

@@ -10,12 +10,13 @@ function setGame(gameId, game) {
   GAMES[gameId] = game
 }
 
-function addPlayer(gameId, playerId) {
+function addPlayer(gameId, playerId, name) {
   GAMES[gameId].players[playerId] = {
     id: playerId,
     x: 0,
     y: 0,
-    down: false
+    down: false,
+    name: name,
   }
   GAMES[gameId].evtInfos[playerId] = {
     _last_mouse: null,
@@ -302,7 +303,6 @@ function handleInput(gameId, playerId, input) {
 
     const tileIdxAtPos = freeTileIdxByPos(gameId, pos)
     if (tileIdxAtPos >= 0) {
-      console.log('tile: ', tileIdxAtPos)
       let maxZ = getMaxZIndex(gameId) + 1
       changeData(gameId, { maxZ })
       _dataChange()
@@ -372,7 +372,6 @@ function handleInput(gameId, playerId, input) {
             groupTiles(gameId, tileIdx, otherTileIdx)
             tileIdxs = getGroupedTileIdxs(gameId, tileIdx)
             const zIndex = getMaxZIndexByTileIdxs(gameId, tileIdxs)
-            console.log('z:' , zIndex, tileIdxs)
             setTilesZIndex(gameId, tileIdxs, zIndex)
             _tileChanges(tileIdxs)
             return true
@@ -394,7 +393,6 @@ function handleInput(gameId, playerId, input) {
       }
     }
   }
-  // console.log(mouse)
   evtInfo._last_mouse = pos
 
   return changes

game/Communication.js

@@ -15,13 +15,13 @@ function send(message) {
 
 let clientSeq
 let events
-function connect(gameId, clientId) {
+function connect(gameId, clientId, name) {
   clientSeq = 0
   events = {}
   conn = new WsClient(WS_ADDRESS, clientId + '|' + gameId)
   return new Promise(r => {
     conn.connect()
-    send([Protocol.EV_CLIENT_INIT])
+    send([Protocol.EV_CLIENT_INIT, name])
     conn.onSocket('message', async ({ data }) => {
       const msg = JSON.parse(data)
       const msgType = msg[0]

game/index.js

@@ -20,12 +20,17 @@ function addCanvasToDom(canvas) {
 
 function initme() {
   // return uniqId()
-  let ID = localStorage.getItem("ID")
+  let ID = localStorage.getItem('ID')
   if (!ID) {
     ID = Util.uniqId()
-    localStorage.setItem("ID", ID)
+    localStorage.setItem('ID', ID)
   }
-  return ID
+  let name = localStorage.getItem('NAME')
+  if (!name) {
+    name = prompt('What\'s your name?');
+    localStorage.setItem('NAME', name)
+  }
+  return [ID, name]
 }
 
 const getFirstOwnedTile = (puzzle, userId) => {
@@ -96,12 +101,12 @@ export default class EventAdapter {
 
 async function main() {
   let gameId = GAME_ID
-  let CLIENT_ID = initme()
+  let [CLIENT_ID, name] = initme()
 
   let cursorGrab = await Graphics.loadImageToBitmap('/grab.png')
   let cursorHand = await Graphics.loadImageToBitmap('/hand.png')
 
-  const game = await Communication.connect(gameId, CLIENT_ID)
+  const game = await Communication.connect(gameId, CLIENT_ID, name)
   Game.createGame(GAME_ID, game);
 
   const bitmaps = await PuzzleGraphics.loadPuzzleBitmaps(game.puzzle)
@@ -204,7 +209,10 @@ async function main() {
 
       // LOCAL + SERVER CHANGES
       // -------------------------------------------------------------
-      Game.handleInput(GAME_ID, CLIENT_ID, evt)
+      const changes = Game.handleInput(GAME_ID, CLIENT_ID, evt)
+      if (changes.length > 0) {
+        rerender = true
+      }
       Communication.sendClientEvent(evt)
     }
   }
@@ -273,6 +281,15 @@ async function main() {
         Math.round(pos.x - cursor.width/2),
         Math.round(pos.y - cursor.height/2)
       )
+      if (id !== CLIENT_ID) {
+        ctx.fillStyle = 'white'
+        ctx.font = '10px sans-serif'
+        ctx.textAlign = 'center'
+        ctx.fillText(p.name,
+          Math.round(pos.x),
+          Math.round(pos.y) + cursor.height
+        )
+      }
     }
     if (DEBUG) Debug.checkpoint('players done')
     // ---------------------------------------------------------------

server/index.js

@@ -76,10 +76,11 @@ wss.on('message', async ({socket, data}) => {
     const msgType = msg[0]
     switch (msgType) {
       case Protocol.EV_CLIENT_INIT: {
+        const name = msg[1]
         if (!Game.exists(gameId)) {
           await Game.createGame(gameId, TARGET_TILES, Util.choice(IMAGES))
         }
-        Game.addPlayer(gameId, clientId)
+        Game.addPlayer(gameId, clientId, name)
         Game.addSocket(gameId, socket)
 
         notify(