fixed board editing, added shuffleBoard()

The dragging functionality works as expected now, even when editing.
You can shuffle the board now, so that when creating a board, you can save it in a shuffled state.

board.js

@@ -2,22 +2,22 @@
  * @public
  * @function
  * @name createBoard
- * @param {number} width The width of the board
- * @param {number} height The height of the board
+ * @param {number} boardWidth The width of the board
+ * @param {number} boardHeight The height of the board
  * @returns 
  */
 
-function createBoard(width, height) {
+function createBoard(boardWidth, boardHeight) {
   /** 
    * @var
    * @name board
    * @type {Square[][]}
    */
   var board = [[]];
   // let squareId = 0;
-  for (var x = 0; x < width; x++) {
+  for (var x = 0; x < boardWidth; x++) {
     board[x] = [];
-    for (var y = 0; y < height; y++) {
+    for (var y = 0; y < boardHeight; y++) {
       if (random(0, 1) <= chanceOfSquare) {
         board[x][y] = new Square(x * gridCellSize, y * gridCellSize, squareId);
         squareId++;
@@ -29,6 +29,17 @@ function createBoard(width, height) {
   return board;
 }
 
+function createEmptyBoard(width, height) {
+  var board = [[]];
+  for (var x = 0; x < width; x++) {
+    board[x] = [];
+    for (var y = 0; y < height; y++) {
+      board[x][y] = undefined;
+    }
+  }
+  return board;
+}
+
 /**
  * @public
  * @function
@@ -93,14 +104,15 @@ function checkBoardForSquare(mx, my) {
  * @description Clear the board
  */
 function clearBoard() {
-  for (var x = 0; x < width; x++) {
+  for (var x = 0; x < gridWidth; x++) {
     board[x] = [];
-    for (var y = 0; y < height; y++) {
+    for (var y = 0; y < gridHeight; y++) {
       board[x][y] = undefined;
     }
   }
   boardSet = true;
   squareId = 0;
+
 }
 
 function setBoard(boardObj) {
@@ -114,5 +126,31 @@ function setBoard(boardObj) {
       }
     })
   });
-  console.debug({status: "Board set", board});
+  doDebug ? console.debug({status: "Board set", board}) : undefined;
+}
+
+// shuffle the board by gathering all the squares and put them into an array. then clear the board, and put the squares back in the board in a random order.
+function shuffleBoard() {
+  let squares = [];
+  board.forEach(function(e, index) {
+    e.forEach(function(d, index2) {
+      if (board[index][index2] != undefined) {
+        squares.push(board[index][index2]);
+      }
+    })
+  });
+  clearBoard();
+  // board = createEmptyBoard(gridWidth, gridHeight);
+  while (squares.length > 0) {
+    board.forEach(function(e, index) {
+      e.forEach(function(d, index2) {
+        if (random(0, 1) <= chanceOfSquare && squares.length > 0) {
+          let tempSquare = squares.pop();
+          tempSquare.x = index * gridCellSize;
+          tempSquare.y = index2 * gridCellSize;
+          board[index][index2] = tempSquare;
+        }
+      });
+    });
+  }
 }

editor.js

@@ -86,11 +86,8 @@ function readFile(inputFile) {
           for (let x = 0; x < dataRead[0].length; x++) {
             dataString += String.fromCharCode(dataRead[0][x]);
           }
-          console.log(dataString);
           boardObject = JSON.parse(dataString);
-          console.log(boardObject);
-
-          doDebug ? console.debug({status: "Data read", dataRead, boardObject}) : undefined;
+          doDebug ? console.debug({status: "Data read", dataRead, dataString, boardObject}) : undefined;
           finishedData = true;
           return;
         }
@@ -114,7 +111,7 @@ function readFile(inputFile) {
 
 
 function byteDataToHexStr(bytes) {
-  console.log(bytes)
+  doDebug ? console.debug({status: "Converting bytes to hex string", bytes}) : undefined;
   let hexStr = ""
   bytes.forEach(byte => {
     let byteStr = byte.toString(16);

events.js

@@ -43,7 +43,9 @@ function mouseReleased() {
     }
     if (selectedSquare != undefined && holdingSquare != undefined) {
       // holdingSquare = holdingSquare.release();
-      selectedSquare.release();
+      selectedSquare.color = color(255, 0, 0);
+      selectedSquare = selectedSquare.release();
+      holdingSquare = undefined;
     }
   }
 
@@ -154,7 +156,7 @@ function keyReleased(event) {
   }
   if (event.key === '2') {
     // add a connector to the right of the selected square. If there is no selected square, do nothing. If there is already 4 connectors, remove all connectors.
-    console.log({status: "Adding connector to right of square", selectedSquare});
+    doDebug ? console.log({status: "Adding connector to right of square", selectedSquare}) : undefined;
     if (selectedSquare != undefined) {
       doDebug ? console.debug({status: "Adding connector to right of square", selectedSquare}) : undefined;
       selectedSquare.addConnector("right");
@@ -214,13 +216,15 @@ function keyTyped() {
     saveBoard();
   }
 
+  if (key === 'r' || key === 'R') {
+    shuffleBoard();
+  }
 }
 
 /**
  * @todo Develop a way to load a board from a file. and also parse the file. */
 function loadFile(file) {
-  console.log("Loading file");
-  console.log(file);
+  doDebug ? console.debug({status: "Loading file", file}) : undefined;
   if (fileInput != undefined) {
     fileInput.remove();
   }

sketch.js

@@ -1,9 +1,9 @@
-var gridWidth = 5;
-var gridHeight = 5;
+var gridWidth = 10;
+var gridHeight = 10;
 var gridCellSize = 10;
 var isFullScreen = false;
 var bgColor = 0x28262c;
-var doDebug = true; 
+var doDebug = false; 
 
 var gridSizesSet = false;
 var boardSet = false;
@@ -65,8 +65,6 @@ function draw() {
 // use from "Square.js";
 
 function drawGrid() {
-  var gridWidth = 10;
-  var gridHeight = 10;
   gridCellSize = floor(height / gridHeight);
   stroke(250);
   fill(40,38,44);
@@ -80,6 +78,6 @@ function drawGrid() {
 function displayStartScreen() {
   fill(0);
   textSize(32);
-  fill(255);
+  fill(lerpColor(color(0), color(255), 1.0));
   text("Click to start", (width/2)-(7*16), (height/2)-16);
 }