Merge pull request #18 from Xwilarg/webworker

Author: mbrinkl

.eslintrc.json

@@ -26,6 +26,7 @@
   ],
   "rules": {
     "react/react-in-jsx-scope": "off", // handled by @vitejs/plugin-react
-    "react/prop-types": "off" // todo: readdress this after moving all react files to typescript
+    "react/prop-types": "off", // todo: readdress this after moving all react files to typescript
+    "import/no-unresolved": ["error", { "ignore": ["\\?worker$"] }] // ignore vite worker import
   }
 }

src/App.jsx

@@ -1,9 +1,10 @@
 import { Client as BgioClient } from "boardgame.io/react";
-import { Game } from "./Game";
+import { Game, generatePuzzleBoard } from "./Game";
 import { BoardWrapper } from "./components/BoardWrapper";
 import { parseUrl } from "./Parsing";
 import { Footer } from "./components/Footer";
-import { useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import PuzzleGenWorker from "./PuzzleGenWorker?worker";
 
 const wrapBoardWithReload = ({ reload, board: RawBoard }) => {
   const Board = (props) => {
@@ -14,35 +15,98 @@ const wrapBoardWithReload = ({ reload, board: RawBoard }) => {
 };
 
 export const App = () => {
-  const { seed, setupData } = parseUrl();
-  const [game, setGame] = useState({ ...Game(setupData), seed });
+  const setupData = useMemo(() => parseUrl(), []);
+  const [game, setGame] = useState(null);
+  const [worker, setWorker] = useState();
 
-  const reload = () => {
-    setGame({ ...Game(setupData), seed });
-  };
+  const setupGame = useCallback(() => {
+    console.log(
+      `Loading game: ${
+        setupData.gamemode === "c" ? "classic" : "puzzle"
+      } gamemode${
+        setupData.seed != null ? ` with a seed of "${setupData.seed}"` : ""
+      }, ${setupData.count} piece${setupData.count > 1 ? "s" : ""}, ${
+        setupData.size
+      }x${setupData.size} grid, piece${
+        Object.keys(setupData.pieces).length > 1 ? "s" : ""
+      } allowed: ${Object.keys(setupData.pieces)
+        .map((x) => `${x} (x${setupData.pieces[x]})`)
+        .join(", ")}`
+    );
 
-  const Client = BgioClient({
-    game,
-    board: wrapBoardWithReload({ reload, board: BoardWrapper }),
-    numPlayers: 1,
-    debug: {
-      collapseOnLoad: true,
-    },
-  });
-
-  console.log(
-    `Loading game: ${
-      setupData.gamemode === "c" ? "classic" : "puzzle"
-    } gamemode${seed != null ? ` with a seed of "${seed}"` : ""}, ${
-      setupData.count
-    } piece${setupData.count > 1 ? "s" : ""}, ${setupData.size}x${
-      setupData.size
-    } grid, piece${
-      Object.keys(setupData.pieces).length > 1 ? "s" : ""
-    } allowed: ${Object.keys(setupData.pieces)
-      .map((x) => `${x} (x${setupData.pieces[x]})`)
-      .join(", ")}`
-  );
+    if (setupData.gamemode === "p") {
+      if (worker) {
+        worker.postMessage(setupData);
+      } else {
+        const { cells, knownCells, error } = generatePuzzleBoard(
+          setupData.seed,
+          setupData.pieces,
+          setupData.size,
+          setupData.count,
+          setupData.difficulty
+        );
+
+        if (error) {
+          console.error(error);
+        } else {
+          setGame({ ...Game({ ...setupData, cells, knownCells }) });
+        }
+      }
+    } else {
+      setGame({ ...Game(setupData) });
+    }
+  }, [worker, setGame, setupData]);
+
+  // Setup web worker
+  useEffect(() => {
+    // Firefox does not allow module workers, but PuzzleGenWorker is compiled
+    // to a non-module type in production - so don't allow worker in dev with Firefox
+    const isFirefox = navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
+    const isWorkerAvailable =
+      process.env.NODE_ENV === "production" || !isFirefox;
+
+    let w;
+
+    if (isWorkerAvailable) {
+      w = new PuzzleGenWorker();
+      w.onmessage = (e) => {
+        if (typeof e.data === "string") {
+          console.error(e.data);
+        } else {
+          const { cells, knownCells } = e.data;
+          setGame(Game({ ...setupData, cells, knownCells }));
+        }
+      };
+      setWorker(w);
+    } else {
+      setWorker(null);
+    }
+
+    return () => {
+      if (w) {
+        w.terminate();
+        setWorker(undefined);
+      }
+    };
+  }, [setGame, setupData]);
+
+  // Wait for worker creation to start game
+  useEffect(() => {
+    if (worker !== undefined) {
+      setupGame();
+    }
+  }, [worker, setupGame]);
+
+  const Client = game
+    ? BgioClient({
+        game,
+        board: wrapBoardWithReload({ reload: setupGame, board: BoardWrapper }),
+        numPlayers: 1,
+        debug: {
+          collapseOnLoad: true,
+        },
+      })
+    : () => <div>Generating Board...</div>;
 
   return (
     <div>

src/Game.js

@@ -1,4 +1,5 @@
-import { INVALID_MOVE } from "boardgame.io/dist/cjs/core.js";
+import { INVALID_MOVE } from "boardgame.io/core";
+import { Random } from "./Random";
 
 function isValid(data, size, x, y) {
   return (
@@ -190,9 +191,9 @@ export function generateBoard(random, id, pieces, size, count) {
   let data = Array(size * size).fill(0);
   let i = count;
   while (i > 0) {
-    const rand = Math.floor(random.Number() * (size * size));
+    const rand = Math.floor(random.next() * (size * size));
     if (rand !== id && Number.isInteger(data[rand])) {
-      const value = Math.floor(random.Number() * Object.keys(piecesMdf).length);
+      const value = Math.floor(random.next() * Object.keys(piecesMdf).length);
       let piece = Object.keys(piecesMdf)[value];
 
       if (piecesMdf[piece] === 0) {
@@ -231,7 +232,8 @@ function validateBoard(data, discovered, pieces, size) {
     }
 
     let str = "";
-    for (let piece of Object.keys(pieces)) { // Check all pieces
+    for (let piece of Object.keys(pieces)) {
+      // Check all pieces
       // List of all moves for the current piece
       let moves = parseNotation(
         pieceMovesCheck[piece],
@@ -279,10 +281,12 @@ function validateBoard(data, discovered, pieces, size) {
   };
 }
 
-function generatePuzzleBoard(random, pieces, size, count, difficulty) {
+export function generatePuzzleBoard(seed, pieces, size, count, difficulty) {
   let data;
   let discovered;
-  let hasError = false;
+  let error;
+
+  const random = new Random(seed);
 
   let c = 0;
   const maxIt = 300;
@@ -306,7 +310,7 @@ function generatePuzzleBoard(random, pieces, size, count, difficulty) {
         }
       }
       if (possibilities.length > 0) {
-        let randPos = Math.floor(random.Number() * possibilities.length);
+        let randPos = Math.floor(random.next() * possibilities.length);
         discovered[possibilities[randPos]] = true;
       } else {
         giveup = true; // Algorithm failed with this generation, we give up
@@ -348,7 +352,7 @@ function generatePuzzleBoard(random, pieces, size, count, difficulty) {
             }
           }
           for (let i = emptyCasesAfter; i > difficulty; i--) {
-            const rand = Math.floor(random.Number() * possibleTarget.length);
+            const rand = Math.floor(random.next() * possibleTarget.length);
             discovered[possibleTarget[rand]] = true;
             possibleTarget.splice(rand, 1).indexOf(rand);
           }
@@ -363,11 +367,25 @@ function generatePuzzleBoard(random, pieces, size, count, difficulty) {
     }
   }
 
+  let knownCells;
   if (c === maxIt) {
-    hasError = true;
+    error = "Failed to generate puzzle";
+  } else {
+    knownCells = Array(size * size).fill(false);
+    for (let i in discovered) {
+      if (discovered[i]) {
+        knownCells[i] = true;
+      }
+    }
   }
 
-  return { data, discovered, hasError };
+  return { cells: data, knownCells, error };
+}
+
+function generateClassicBoard(G, id) {
+  const random = new Random(G.seed);
+  G.cells = fillPositions(generateBoard(random, id, G.pieces, G.size, G.count));
+  G.knownCells = Array(G.size * G.size).fill(false);
 }
 
 function isWinCondition(G, id) {
@@ -391,40 +409,14 @@ function isWinCondition(G, id) {
 export const Game = (setupData) => ({
   setup: () => ({
     ...setupData,
-    knownCells: null,
-    cells: null,
+    knownCells: setupData.knownCells ?? null,
+    cells: setupData.cells ?? null,
   }),
 
   moves: {
-    generatePuzzleBoard: ({ G, random }) => {
-      // using destructured values from G caused very slow load times?
-      const { pieces, size, count, difficulty } = setupData;
-
-      const { data, discovered, hasError } = generatePuzzleBoard(
-        random,
-        pieces,
-        size,
-        count,
-        difficulty
-      );
-      if (!hasError) {
-        G.cells = data;
-        G.knownCells = Array(size * size).fill(false);
-
-        for (let i in discovered) {
-          if (discovered[i]) {
-            G.knownCells[i] = true;
-          }
-        }
-      }
-    },
-
-    discoverPiece: ({ G, events, random }, id) => {
+    discoverPiece: ({ G, events }, id) => {
       if (G.cells === null) {
-        G.cells = fillPositions(
-          generateBoard(random, id, G.pieces, G.size, G.count)
-        );
-        G.knownCells = Array(G.size * G.size).fill(false);
+        generateClassicBoard(G, id);
       }
 
       if (G.knownCells[id] !== false || G.gamemode === "p") {
@@ -438,12 +430,9 @@ export const Game = (setupData) => ({
       }
     },
 
-    placeHint: ({ G, events, random }, id, action) => {
+    placeHint: ({ G, events }, id, action) => {
       if (G.cells === null) {
-        G.cells = fillPositions(
-          generateBoard(random, id, G.pieces, G.size, G.count)
-        );
-        G.knownCells = Array(G.size * G.size).fill(false);
+        generateClassicBoard(G, id);
       }
 
       if (G.knownCells[id] === true) {

src/Parsing.js

@@ -17,7 +17,7 @@ function findGetParameter(parameterName) {
 
 export function parseUrl() {
   // Setting everything from URL parameter
-  const seed = findGetParameter("r") ?? undefined;
+  const seed = findGetParameter("r");
   let pieces = findGetParameter("p");
   let size = findGetParameter("s");
   let count = findGetParameter("c");
@@ -135,12 +135,10 @@ export function parseUrl() {
 
   return {
     seed,
-    setupData: {
-      pieces: availablePieces,
-      size,
-      count,
-      gamemode,
-      difficulty,
-    },
+    pieces: availablePieces,
+    size,
+    count,
+    gamemode,
+    difficulty,
   };
 }

src/PuzzleGenWorker.js

@@ -0,0 +1,19 @@
+import { generatePuzzleBoard } from "./Game";
+
+onmessage = (e) => {
+  const { seed, pieces, size, count, difficulty } = e.data;
+
+  const { cells, knownCells, error } = generatePuzzleBoard(
+    seed,
+    pieces,
+    size,
+    count,
+    difficulty
+  );
+
+  if (error) {
+    postMessage(error);
+  } else {
+    postMessage({ cells, knownCells });
+  }
+};

src/Random.js

@@ -0,0 +1,35 @@
+export class Random
+{
+    constructor(seed) {
+        function getHashCode(value) { // https://stackoverflow.com/a/7616484
+            var hash = 0,
+                i, chr;
+            if (value.length === 0) return hash;
+            for (i = 0; i < value.length; i++) {
+                chr = value.charCodeAt(i);
+                hash = ((hash << 5) - hash) + chr;
+                hash |= 0; // Convert to 32bit integer
+            }
+            return hash;
+        }
+        
+        if (!seed) {
+            this.seed = Date.now();
+        } else {
+            this.seed = getHashCode(seed);
+        }
+    }
+
+    setSeed(seed) {
+        this.seed = seed;
+    }
+
+    reset() {
+        this.seed = Date.now();
+    }
+
+    next() {
+        var x = Math.sin(this.seed++) * 10000;
+        return x - Math.floor(x);
+    }
+}