scatter pieces around board

game/index.js

@@ -557,16 +557,16 @@ async function main () {
     // The actual place for the puzzle. The tiles may
     // not be moved around infinitely, just on the (invisible)
     // puzzle table. however, the camera may move away from the table
-    const puzzleTableColor = [200, 0, 0, 255]
+    const puzzleTableColor = [40, 40, 40, 0]
     const puzzleTable = new Bitmap(
-      puzzle.info.width * 2,
-      puzzle.info.height * 2,
+      puzzle.info.table.width,
+      puzzle.info.table.height,
       puzzleTableColor
     )
 
     // In the middle of the table, there is a board. this is to
     // tell the player where to place the final puzzle
-    const boardColor = [0, 150, 0, 255]
+    const boardColor = [80, 80, 80, 255]
     const board = new Bitmap(
       puzzle.info.width,
       puzzle.info.height,

scripts/server

@@ -2,4 +2,4 @@
 
 cd "$RUN_DIR/server"
 
-nodemon index.js
+nodemon -d 2 index.js

server/index.js

@@ -7,7 +7,7 @@ import { uniqId, choice } from './util.js'
 
 // desired number of tiles
 // actual calculated number can be higher
-const TARGET_TILES = 1000
+const TARGET_TILES = 500
 
 const IMAGES = [
   '/example-images/ima_86ec3fa.jpeg',
@@ -55,7 +55,6 @@ app.use('/', (req, res, next) => {
     statics(req, res, next)
   }
 })
-app.listen(port, hostname, () => console.log(`server running on http://${hostname}:${port}`))
 
 const wss = new WebSocketServer(config.ws);
 
@@ -109,4 +108,6 @@ wss.on('message', async ({socket, data}) => {
     console.error(e)
   }
 })
+
+app.listen(port, hostname, () => console.log(`server running on http://${hostname}:${port}`))
 wss.listen()

server/puzzle.js

@@ -1,5 +1,5 @@
 import sizeOf from 'image-size'
-import { choice } from './util.js'
+import { choice, shuffle } from './util.js'
 
 // cut size of each puzzle tile in the
 // final resized version of the puzzle image
@@ -23,28 +23,77 @@ async function createPuzzle(targetTiles, image) {
   }
   const shapes = determinePuzzleTileShapes(info)
 
-  // Complete puzzle object
-  const p = {
-    // tiles array
-    tiles: tiles.map(tile => {
+  let positions = new Array(info.tiles)
+  for (let tile of tiles) {
+    positions[tile.idx] ={
+      // instead of info.tileSize, we use info.tileDrawSize
+      // to spread the tiles a bit
+      x: (info.coords[tile.idx].x) * (info.tileSize * 1.5),
+      y: (info.coords[tile.idx].y) * (info.tileSize * 1.5),
+    }
+  }
+
+  let tableWidth = info.width * 3
+  let tableHeight = info.height * 3
+
+  let off = (info.tileSize * 1.5)
+  let last = {x: info.width - (1 * off), y: info.height - (2 * off) }
+  let count_x = Math.ceil(info.width / off) + 2
+  let count_y = Math.ceil(info.height / off) + 2
+
+  let diff_x = off
+  let diff_y = 0
+  let index = 0
+  for (let pos of positions) {
+    pos.x = last.x
+    pos.y = last.y
+    last.x+=diff_x
+    last.y+=diff_y
+    index++
+    // did we move horizontally?
+    if (diff_x !== 0) {
+      if (index === count_x) {
+        diff_y = diff_x
+        count_y ++
+        diff_x = 0
+        index = 0
+      }
+    } else {
+      if (index === count_y) {
+        diff_x = -diff_y
+        count_x ++
+        diff_y = 0
+        index = 0
+      }
+    }
+  }
+
+  // then shuffle the positions
+  positions = shuffle(positions)
+
+  tiles = tiles.map(tile => {
     return {
       idx: tile.idx, // index of tile in the array
       group: 0, // if grouped with other tiles
       z: 0, // z index of the tile
-        owner: 0, // who owns the tile
+
+      // who owns the tile
       // 0 = free for taking
       // -1 = finished
       // other values: id of player who has the tile
+      owner: 0,
+
       // physical current position of the tile (x/y in pixels)
       // this position is the initial position only and is the
       // value that changes when moving a tile
-        // TODO: scatter the tiles on the table at the beginning
-        pos: {
-          x: info.coords[tile.idx].x * info.tileSize,
-          y: info.coords[tile.idx].y * info.tileSize,
-        },
+      pos: positions[tile.idx],
     }
-    }),
+  })
+
+  // Complete puzzle object
+  const p = {
+    // tiles array
+    tiles,
     // game data for puzzle, data changes during the game
     data: {
       // TODO: maybe calculate this each time?
@@ -54,6 +103,10 @@ async function createPuzzle(targetTiles, image) {
     // static puzzle information. stays same for complete duration of
     // the game
     info: {
+      table: {
+        width: tableWidth,
+        height: tableHeight,
+      },
       // information that was used to create the puzzle
       targetTiles: targetTiles,
       imageUrl: imgUrl,