Merge pull request #58 from Chessweeper/loading-ex

Add loading bar

Author: Xwilarg

src/Algs.ts

@@ -402,7 +402,8 @@ export function generatePuzzleBoard(
   pieces: Record<string, number>,
   size: number,
   count: number,
-  difficulty: number
+  difficulty: number,
+  updateProgress: (value: number) => void
 ) {
   let data: Array<number | string> = [];
   let error: string | null = null;
@@ -433,6 +434,7 @@ export function generatePuzzleBoard(
   const subGenMaxIt = 50; // Max iteration count to attempt to place pieces for the sub generation part
   const firstGenCount = 4; // Number of pieces we place in the first generation
   for (; c < maxIt; c++) {
+    updateProgress(0);
     resetState(pieces); // Reset pieces on new loop
     const firstCount = count > firstGenCount ? firstGenCount : count; // Generate a first board with a max of 4 pieces
 
@@ -452,15 +454,16 @@ export function generatePuzzleBoard(
     discovered = digData["discovered"];
 
     if (!isSolved) {
-      console.log(
+      console.debug(
         `[${getTimeElapsed(
           startTime
         )}s] - Skipping unsolvabled puzzle (${firstGenCount} pieces construction, iteration n°${c})`
       );
       continue;
     }
 
-    console.log(
+    updateProgress(firstGenCount / count);
+    console.debug(
       `[${getTimeElapsed(
         startTime
       )}s] - ${firstGenCount} pieces puzzle generated`
@@ -491,28 +494,29 @@ export function generatePuzzleBoard(
         if (isSolved) {
           break;
         } else {
-          console.log(
+          console.debug(
             `[${getTimeElapsed(startTime)}s] - Skipping unsolvabled puzzle (${
               i + 1
             } pieces construction, sub-iteration n°${c2})`
           );
           resetState(piecesSaveState);
         }
       }
+      updateProgress(i / count);
       if (!isSolved) {
         break;
       }
     }
 
     // We try to remove tiles to match the difficulty
     if (!isSolved) {
-      console.log(
+      console.debug(
         `[${getTimeElapsed(
           startTime
         )}s] - Skipping unsolvabled puzzle (iteration n°${c})`
       );
     } else {
-      console.log(
+      console.debug(
         `[${getTimeElapsed(startTime)}s] - ${count} pieces puzzle generated`
       );
       for (let i = 0; i < data.length; i++) {
@@ -530,7 +534,7 @@ export function generatePuzzleBoard(
       const emptyCasesAfter = discovered.filter((x) => x === false).length;
 
       if (difficulty !== -1 && difficulty > emptyCasesAfter) {
-        console.log(
+        console.debug(
           `[${getTimeElapsed(
             startTime
           )}s] - Skipping puzzle with ${emptyCasesAfter} empty tiles`

src/PuzzleGenWorker.ts

@@ -4,12 +4,17 @@ import { SetupData } from "./Game";
 onmessage = (e: MessageEvent<SetupData>) => {
   const { seed, pieces, size, count, difficulty } = e.data;
 
+  const updateProgress = (value: number) => {
+    postMessage(value);
+  };
+
   const { cells, error } = generatePuzzleBoard(
     seed,
     pieces,
     size,
     count,
-    difficulty
+    difficulty,
+    updateProgress
   );
 
   if (error) {

src/components/Client.tsx

@@ -7,6 +7,7 @@ import { parseUrl } from "../Parsing";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import { Random } from "../Random";
+import { LoadingBar } from "./LoadingBar";
 import PuzzleGenWorker from "../PuzzleGenWorker?worker";
 
 export interface BoardPropsWithReload extends BoardProps<GameState> {
@@ -30,6 +31,7 @@ export const Client = (): JSX.Element => {
   const [game, setGame] = useState<BgioGame | null>(null);
   const [settingNextGame, setSettingNextGame] = useState(false);
   const [worker, setWorker] = useState<Worker | null>();
+  const [progress, setProgress] = useState(0);
 
   const nextGame = useRef<BgioGame | null>(null);
 
@@ -57,7 +59,8 @@ export const Client = (): JSX.Element => {
           setupData.pieces,
           setupData.size,
           setupData.count,
-          setupData.difficulty
+          setupData.difficulty,
+          setProgress
         );
 
         if (error) {
@@ -90,9 +93,13 @@ export const Client = (): JSX.Element => {
 
     if (isWorkerAvailable) {
       w = new PuzzleGenWorker();
-      w.onmessage = (e: MessageEvent<SetupData> | MessageEvent<string>) => {
+      w.onmessage = (
+        e: MessageEvent<SetupData> | MessageEvent<string> | MessageEvent<number>
+      ) => {
         if (typeof e.data === "string") {
           console.error(e.data);
+        } else if (typeof e.data === "number") {
+          setProgress(e.data);
         } else {
           const setupData = e.data;
           nextGame.current = Game(setupData);
@@ -156,9 +163,9 @@ export const Client = (): JSX.Element => {
               collapseOnLoad: true,
             },
           })
-        : () => <div>Generating Board...</div>,
+        : () => null,
     [game, setupGame]
   );
 
-  return <Client />;
+  return game ? <Client /> : <LoadingBar value={progress} />;
 };

src/components/LoadingBar.css

@@ -0,0 +1,16 @@
+#progress-container {
+  width: 100%;
+  text-align: center;
+  font-size: 1.2em;
+}
+
+#progress {
+  width: 100%;
+  background-color: grey;
+}
+
+#progress-content {
+  width: 0;
+  height: 30px;
+  background-color: green;
+}

src/components/LoadingBar.tsx

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from "react";
+import "./LoadingBar.css";
+
+interface LoadingBarProps {
+  value: number;
+}
+
+export const LoadingBar = ({ value }: LoadingBarProps): JSX.Element => {
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.style.width = value * 100 + "%";
+    }
+  }, [value]);
+
+  return (
+    <div id="progress-container">
+      Generating Board...
+      <div id="progress">
+        <div id="progress-content" ref={ref} />
+      </div>
+    </div>
+  );
+};