show other player hands

game/CanvasAdapter.js

@@ -20,6 +20,14 @@ export default class CanvasAdapter {
     this._data = this._imageData.data
     this.apply()
   }
+  clearRect(rect) {
+    for (let x = rect.x0; x< rect.x1; x++) {
+      for (let y = rect.y0; y< rect.y1; y++) {
+        this.putPix(x, y, [0,0,0,0])
+      }
+    }
+    this.apply()
+  }
 
   getPix(x, y, out) {
     if (x < 0 || y < 0 || x >= this._w || y >= this._h) {

game/index.js

@@ -17,6 +17,7 @@ const TARGET_TILES = 1000 // desired number of tiles
                           // actual calculated number can be higher
 const IMAGES = [
   './example-images/ima_86ec3fa.jpeg',
+  './example-images/bleu.png',
   './example-images/saechsische_schweiz.jpg',
   './example-images/132-2048x1365.jpg',
 ]
@@ -138,7 +139,7 @@ function mapBitmapToAdapterCapped (src, rect_src, dst, rect_dst, rect_cap) {
             }
         }
     }
-    adapter_dst.apply()
+    dst.apply()
 }
 
 function mapBitmapToAdapter (bitmap_src, rect_src, adapter_dst, rect_dst) {
@@ -573,7 +574,7 @@ function uniqId() {
 }
 
 function initme() {
-  return uniqId()
+  // return uniqId()
   let ID = localStorage.getItem("ID")
   if (!ID) {
     ID = uniqId()
@@ -593,36 +594,35 @@ async function main () {
   // todo: maybe put in protocols, same as `me()`
   let gameId = 'asdfbla' // uniqId()
   let me = initme()
-  const player = {x: 0, y: 0, down: false}
 
   let cursorGrab = await loadImageToBitmap('./grab.png')
   let cursorHand = await loadImageToBitmap('./hand.png')
 
   let conn = setupNetwork(me + '|' + gameId)
-  conn.send(JSON.stringify({type: 'init', player}))
+  conn.send(JSON.stringify({ type: 'init' }))
   conn.onSocket('message', async ({data}) => {
     const d = JSON.parse(data)
-    let puzzle
+    let game
     if (d.type === 'init') {
-      if (d.puzzle) {
+      game = d.game
-        puzzle = d.puzzle
+      if (game.puzzle) {
         console.log('loaded from server')
       } else {
         // The game doesnt exist yet on the server, so load puzzle
         // and then give the server some info about the puzzle
         // Load puzzle and determine information about it
         // TODO: move puzzle creation to server
-        puzzle = await createPuzzle(TARGET_TILES, IMAGE_URL)
+        game.puzzle = await createPuzzle(TARGET_TILES, IMAGE_URL)
         conn.send(JSON.stringify({
           type: 'init_puzzle',
-          puzzle: puzzle,
+          puzzle: game.puzzle,
         }))
         console.log('loaded from local config')
       }
 
-      console.log('the puzzle ', puzzle)
+      console.log('the game ', game)
-      let bitmaps = await loadPuzzleBitmaps(puzzle)
+      let bitmaps = await loadPuzzleBitmaps(game.puzzle)
-      startGame(puzzle, bitmaps, conn)
+      startGame(game, bitmaps, conn)
     } else {
       // console.log(d)
     }
@@ -635,52 +635,46 @@ async function main () {
 
   // this must be fetched from server
 
-  const startGame = (puzzle, bitmaps, conn) => {
+  class renderRect {
-    // information for next render cycle
+    constructor() {
-    let rerenderTable = true
+      this.reset()
-    let rerenderTableRect = null
+    }
-    let rerenderPlayer = true
+    get () {
-    let rerender = true
+      return this.x0 === null ? null : this
-    let redrawMinX = null
+    }
-    let redrawMaxX = null
+    add (pos, offset) {
-    let redrawMinY = null
-    let redrawMaxY = null
-    const updateDrawMinMax = (pos, offset) => {
       let x0 = pos.x - offset
       let x1 = pos.x + offset
       let y0 = pos.y - offset
       let y1 = pos.y + offset
-        redrawMinX = redrawMinX === null ? x0 : Math.min(redrawMinX, x0)
+      this.x0 = this.x0 === null ? x0 : Math.min(this.x0, x0)
-        redrawMaxX = redrawMaxX === null ? x1 : Math.max(redrawMaxX, x1)
+      this.x1 = this.x1 === null ? x1 : Math.max(this.x1, x1)
-        redrawMinY = redrawMinY === null ? y0 : Math.min(redrawMinY, y0)
+      this.y0 = this.y0 === null ? y0 : Math.min(this.y0, y0)
-        redrawMaxY = redrawMaxY === null ? y1 : Math.max(redrawMaxY, y1)
+      this.y1 = this.y1 === null ? y1 : Math.max(this.y1, y1)
+    }
+    reset () {
+      this.x0 = null
+      this.x1 = null
+      this.y0 = null
+      this.y1 = null
+    }
   }
 
-    conn.onSocket('message', ({data}) => {
+  const startGame = (game, bitmaps, conn) => {
-      const d = JSON.parse(data)
+    let puzzle = game.puzzle
-      if (d.type === 'state_changed' && d.origin !== me) {
+    let players = game.players
-        for (let change of d.changes) {
+    // information for next render cycle
-          switch (change.type) {
+    let rectPlayer = new renderRect()
-            case 'change_tile': {
+    let rerenderPlayer = true
-              updateDrawMinMax(puzzle.tiles[change.tile.idx].pos, puzzle.info.tileDrawSize)
+    let rectTable = new renderRect()
-
+    let rerenderTable = true
-              puzzle.tiles[change.tile.idx] = change.tile
+    let rerender = true
-
-              updateDrawMinMax(puzzle.tiles[change.tile.idx].pos, puzzle.info.tileDrawSize)
-            } break;
-            case 'change_data': {
-              puzzle.data = change.data
-            } break;
-          }
-        }
-      }
-    })
 
     const changePlayer = (change) => {
       for (let k of Object.keys(change)) {
-        player[k] = change[k]
+        players[me][k] = change[k]
       }
-      _STATE.changes.push({type: 'change_player', player: player})
+      _STATE.changes.push({type: 'change_player', player: players[me]})
       _STATE_CHANGED = true
     }
     const changeData = (change) => {
@@ -708,12 +702,36 @@ async function main () {
     // this global data will change according to input events
     const cam = new Camera(canvas)
 
-    // Information about the mouse
+    conn.onSocket('message', ({data}) => {
-    const EV_DATA = {
+      const d = JSON.parse(data)
-      mouse_down_x: null,
+      if (d.type === 'state_changed' && d.origin !== me) {
-      mouse_down_y: null,
+        for (let change of d.changes) {
+          switch (change.type) {
+            case 'change_player': {
+              if (players[change.player.id]) {
+                rectPlayer.add(cam.translateMouseBack(players[change.player.id]), cursorGrab.width)
               }
 
+              players[change.player.id] = change.player
+
+              rectPlayer.add(cam.translateMouseBack(players[change.player.id]), cursorGrab.width)
+            } break;
+
+            case 'change_tile': {
+              rectTable.add(puzzle.tiles[change.tile.idx].pos, puzzle.info.tileDrawSize)
+
+              puzzle.tiles[change.tile.idx] = change.tile
+
+              rectTable.add(puzzle.tiles[change.tile.idx].pos, puzzle.info.tileDrawSize)
+            } break;
+            case 'change_data': {
+              puzzle.data = change.data
+            } break;
+          }
+        }
+      }
+    })
+
     // Information about what tile is the player currently grabbing
     let grabbingTileIdx = -1
 
@@ -842,7 +860,7 @@ async function main () {
 
         // TODO: instead there could be a function to
         //       get min/max x/y of a group
-        updateDrawMinMax(tileCenterPos(t), puzzle.info.tileDrawSize)
+        rectTable.add(tileCenterPos(t), puzzle.info.tileDrawSize)
       }
     }
     const moveGroupedTiles = (tile, dst) => {
@@ -862,55 +880,62 @@ async function main () {
 
 
 
+    let _last_mouse = null
+    let _last_mouse_down = null
     const onUpdate = () => {
       let last_x = null
       let last_y = null
-        // console.log(tp)
+
-        if (EV_DATA.mouse_down_x !== null) {
+      if (_last_mouse_down !== null) {
-            last_x = EV_DATA.mouse_down_x
+        last_x = _last_mouse_down.x
-        }
+        last_y = _last_mouse_down.y
-        if (EV_DATA.mouse_down_y !== null) {
-            last_y = EV_DATA.mouse_down_y
       }
       for (let mouse of evts.consumeAll()) {
+
         if (mouse.type === 'move') {
           const tp = cam.translateMouse(mouse)
           changePlayer({ x: tp.x, y: tp.y })
-            updateDrawMinMax(tp, cursorGrab.width)
+          if (_last_mouse) {
-            rerenderPlayer = true
+            rectPlayer.add(_last_mouse, cursorGrab.width)
           }
+          rectPlayer.add(mouse, cursorGrab.width)
+        }
+
         if (mouse.type === 'down') {
-            const tp = cam.translateMouse(mouse)
           changePlayer({ down: true })
-            updateDrawMinMax(tp, cursorGrab.width)
+          rectPlayer.add(mouse, cursorGrab.width)
-            rerenderPlayer = true
         } else if (mouse.type === 'up') {
-            const tp = cam.translateMouse(mouse)
           changePlayer({ down: false })
-            updateDrawMinMax(tp, cursorGrab.width)
+          if (_last_mouse) {
-            rerenderPlayer = true
+            rectPlayer.add(_last_mouse, cursorGrab.width)
           }
+          rectPlayer.add(mouse, cursorGrab.width)
+        }
+
         if (mouse.type === 'wheel') {
           if (mouse.deltaY < 0) {
             if (cam.zoomIn()) {
               rerender = true
               const tp = cam.translateMouse(mouse)
               changePlayer({ x: tp.x, y: tp.y })
-                        updateDrawMinMax(tp, cursorGrab.width)
+              if (_last_mouse) {
-                        rerenderPlayer = true
+                rectPlayer.add(_last_mouse, cursorGrab.width)
+              }
+              rectPlayer.add(mouse, cursorGrab.width)
             }
           } else {
             if (cam.zoomOut()) {
               rerender = true
               const tp = cam.translateMouse(mouse)
               changePlayer({ x: tp.x, y: tp.y })
-                        updateDrawMinMax(tp, cursorGrab.width)
+              if (_last_mouse) {
-                        rerenderPlayer = true
+                rectPlayer.add(_last_mouse, cursorGrab.width)
+              }
+              rectPlayer.add(mouse, cursorGrab.width)
             }
           }
         } else if (mouse.type === 'down') {
-                EV_DATA.mouse_down_x = mouse.x
+          _last_mouse_down = mouse
-                EV_DATA.mouse_down_y = mouse.y
           if (last_x === null || last_y === null) {
             last_x = mouse.x
             last_y = mouse.y
@@ -927,8 +952,7 @@ async function main () {
           console.log('down', tp)
 
         } else if (mouse.type === 'up') {
-                EV_DATA.mouse_down_x = null
+          _last_mouse_down = null
-                EV_DATA.mouse_down_y = null
           last_x = null
           last_y === null
 
@@ -951,7 +975,7 @@ async function main () {
               finishGroupedTiles(tile)
 
               let tp = cam.translateMouse(mouse)
-                        updateDrawMinMax(tp, puzzle.info.tileDrawSize)
+              rectTable.add(tp, puzzle.info.tileDrawSize)
             } else {
               // Snap to other tiles
               let other
@@ -980,7 +1004,7 @@ async function main () {
                   setGroupedZIndex(t, t.z)
                   snapped = true
 
-                                updateDrawMinMax(tileCenterPos(t), puzzle.info.tileDrawSize)
+                  rectTable.add(tileCenterPos(t), puzzle.info.tileDrawSize)
                 }
               }
 
@@ -1015,9 +1039,8 @@ async function main () {
           }
           grabbingTileIdx = -1
           console.log('up', cam.translateMouse(mouse))
-            } else if ((EV_DATA.mouse_down_x !== null) && mouse.type === 'move') {
+        } else if (_last_mouse_down !== null && mouse.type === 'move') {
-                EV_DATA.mouse_down_x = mouse.x
+          _last_mouse_down = mouse
-                EV_DATA.mouse_down_y = mouse.y
 
           if (last_x === null || last_y === null) {
             last_x = mouse.x
@@ -1034,8 +1057,8 @@ async function main () {
             moveGroupedTilesDiff(t, diffX, diffY)
 
             // todo: dont +- tileDrawSize, we can work with less
-                    updateDrawMinMax(tp, puzzle.info.tileDrawSize)
+            rectTable.add(tp, puzzle.info.tileDrawSize)
-                    updateDrawMinMax(tp_last, puzzle.info.tileDrawSize)
+            rectTable.add(tp_last, puzzle.info.tileDrawSize)
           } else {
             const diffX = Math.round(mouse.x - last_x)
             const diffY = Math.round(mouse.y - last_y)
@@ -1045,16 +1068,14 @@ async function main () {
           }
         }
         // console.log(mouse)
+        _last_mouse = mouse
       }
-        if (redrawMinX) {
+      if (rectTable.get()) {
-            rerenderTableRect = new BoundingRectangle(
-                redrawMinX,
-                redrawMaxX,
-                redrawMinY,
-                redrawMaxY
-            )
         rerenderTable = true
       }
+      if (rectPlayer.get()) {
+        rerenderPlayer = true
+      }
 
       if (_STATE_CHANGED) {
         conn.send(JSON.stringify({
@@ -1067,7 +1088,7 @@ async function main () {
     }
 
     const onRender = () => {
-      if (!rerenderTable && !rerender) {
+      if (!rerenderTable && !rerenderPlayer && !rerender) {
         return
       }
 
@@ -1075,7 +1096,7 @@ async function main () {
 
       // draw the puzzle table
       if (rerenderTable) {
-            fillBitmapCapped(puzzleTable, puzzleTableColor, rerenderTableRect)
+        fillBitmapCapped(puzzleTable, puzzleTableColor, rectTable.get())
 
         // draw the puzzle board on the table
         mapBitmapToBitmapCapped(board, board.getBoundingRect(), puzzleTable, new BoundingRectangle(
@@ -1083,7 +1104,7 @@ async function main () {
           boardPos.x + board.width - 1,
           boardPos.y,
           boardPos.y + board.height - 1,
-            ), rerenderTableRect)
+        ), rectTable.get())
 
         // draw all the tiles on the table
 
@@ -1100,11 +1121,12 @@ async function main () {
             bmp.getBoundingRect(),
             puzzleTable,
             rect,
-                  rerenderTableRect
+            rectTable.get()
           )
         }
       }
 
+      if (rerenderTable || rerender) {
         // finally draw the finished table onto the canvas
         // only part of the table may be visible, depending on the
         // camera
@@ -1115,10 +1137,21 @@ async function main () {
           - cam.y,
           - cam.y + (cam.height / cam.zoom),
         ), adapter, adapter.getBoundingRect())
+      } else if (rerenderPlayer) {
+        adapter.clearRect(rectPlayer.get())
+        mapBitmapToAdapterCapped(puzzleTable, new BoundingRectangle(
+          - cam.x,
+          - cam.x + (cam.width / cam.zoom),
+          - cam.y,
+          - cam.y + (cam.height / cam.zoom),
+        ), adapter, adapter.getBoundingRect(), rectPlayer.get())
+      }
 
-
+      if (rerenderPlayer) {
-        let cursor = player.down ? cursorGrab : cursorHand
+        for (let id of Object.keys(players)) {
-        let back = cam.translateMouseBack(player)
+          let p = players[id]
+          let cursor = p.down ? cursorGrab : cursorHand
+          let back = cam.translateMouseBack(p)
           mapBitmapToAdapter(
             cursor,
             cursor.getBoundingRect(),
@@ -1130,14 +1163,14 @@ async function main () {
               back.y - (cursor.width / 2) + cursor.height - 1,
             )
           )
+        }
+      }
 
       rerenderTable = false
-        rerenderTableRect = null
+      rerenderPlayer = false
       rerender = false
-        redrawMinX = null
+      rectTable.reset()
-        redrawMaxX = null
+      rectPlayer.reset()
-        redrawMinY = null
-        redrawMaxY = null
     }
 
     run({

server/index.js

@@ -48,12 +48,14 @@ wss.on('message', ({socket, data}) => {
         // a new player (or previous player) joined
         games[gid] = games[gid] || {puzzle: null, players: {}}
 
-        games[gid].players[uid] = parsed.player
+        games[gid].players[uid] = {id: uid, x: 0, y: 0, down: false}
 
         wss.notifyOne({
           type: 'init',
+          game: {
             puzzle: games[gid].puzzle,
             players: games[gid].players,
+          },
         }, socket)
       } break;