Merge branch 'develop'

src/components/GameMove.js

@@ -366,6 +366,7 @@ function mergeExploration(
       );
     }
   } else if (data[2] && data[2].move === moveNumber - 2) {
+    console.log("Merging 2 moves back");
     let node = exploration[moveNumber - 2];
     let gameEngine = GameFactory(game.metaGame, node.state);
     // subtree of the move I chose
@@ -477,21 +478,31 @@ function fixMoveOutcomes(exploration, moveNumber) {
 }
 
 // after you submit a move, move the subtree of that explored move to the actual move.
-function mergeExistingExploration(moveNum, cur_exploration, exploration) {
-  let subtree = undefined;
+function mergeExistingExploration(moveNum, cur_exploration, exploration, game = undefined, useSameMove = false) {
   moveNum++;
   while (true) {
     let move = exploration[moveNum].move
       .toLowerCase()
       .replace(/\s+/g, "");
-    subtree = cur_exploration.children.find(
-      (e) => e.move.toLowerCase().replace(/\s+/g, "") === move
-    );
+    let subtree;
+    if (useSameMove) {
+      let gameEngine = GameFactory(game.metaGame, exploration[moveNum - 1].state);
+      subtree = cur_exploration.children.find(
+        (e) => gameEngine.sameMove(move, e.move)
+      );
+    } else {
+      subtree = cur_exploration.children.find(
+        (e) => e.move.toLowerCase().replace(/\s+/g, "") === move
+      );
+    }
     if (subtree !== undefined) {
       moveNum++;
       if (moveNum === exploration.length) {
         exploration[exploration.length - 1].children =
           subtree.children;
+        // TODO: Don't we need to save the exploration to DB here? In particular if a whole bunch of auto moves were triggered. Also if
+        // we save here, then we only need to fetch the previous move's exploration when the user looks at his game. I think existing exploration after a
+        // set of auto moves will be lost if we don't save. Maybe test with Zola, it can trigger many auto moves near the end of the game.
         break;
       }
     } else {
@@ -1449,7 +1460,15 @@ function GameMove(props) {
         errorSetter(true);
       }
     }
-    fetchData();
+
+    // Don't fetch data if user is refreshing a completed game. No point in fetching the game again, the only thing that could have changed is public exploration
+    if (explorationRef.current.gameID === gameID && game && game.gameOver) {
+      if (focus?.canExplore) {
+        explorationFetchedSetter(false);
+      }
+    } else {
+        fetchData();
+    }
   }, [
     gameID,
     metaGame,
@@ -1531,7 +1550,7 @@ function GameMove(props) {
 
   useEffect(() => {
     if (dbgame !== null) {
-      // Make sure explorationRef is still for the current game (this DOES change e.g. when you click on Next Game)
+      // I don't think the gameID check is still needed, but better safe than sorry
       const exploration = (explorationRef.current && explorationRef.current.gameID === dbgame.id) ? explorationRef.current.nodes : null;
       const foc = cloneDeep(focus);
       const game = dbgame;
@@ -1554,18 +1573,24 @@ function GameMove(props) {
         navigate
       );
       if (exploration !== null) {
-        let ok = explorationRef.current.nodes.length === exploration.length;
-        for (let i = 0; ok && i < explorationRef.current.nodes.length; i++) {
-          if (exploration[i].state !== explorationRef.current.nodes[i].state) {
-            ok = false;
-            break;
+        if (explorationRef.current.nodes.length === exploration.length) {
+          let ok = true;
+          for (let i = 0; ok && i < explorationRef.current.nodes.length; i++) {
+            if (exploration[i].state !== explorationRef.current.nodes[i].state) {
+              ok = false;
+            }
           }
-        }
-        if (ok) {
-          for (let i = 0; i < explorationRef.current.nodes.length; i++) {
-            explorationRef.current.nodes[i].children = exploration[i].children;
+          if (ok) {
+            for (let i = 0; i < explorationRef.current.nodes.length; i++) {
+              explorationRef.current.nodes[i].children = exploration[i].children;
+            }
+            handleGameMoveClick(foc);
           }
-          handleGameMoveClick(foc);
+          // if we got here from the "trigger a refresh" button, we should probably also fetch exploration in case the user is exploring on more than one device
+          explorationFetchedSetter(false);
+        } else if (explorationRef.current.nodes.length === exploration.length + 1) {
+          // page refreshed and opponent moved
+          mergeExistingExploration(exploration.length - 1, exploration[exploration.length - 1], explorationRef.current.nodes, gameRef.current, true);
         }
       }
       processNewSettings(

src/components/GameMoveWrapper.js

@@ -0,0 +1,10 @@
+import { useParams } from 'react-router-dom';
+import GameMove from './GameMove';
+
+// A wrapper that is used to remount GameMove in case metaGame or gameID changes (e.g. when we navigate to GameMove when user clicks on "Next Game")
+function GameMoveWrapper() {
+  const params = useParams();
+  return <GameMove key={`${params.metaGame}-${params.gameID}`} />;
+}
+
+export default GameMoveWrapper;

src/components/Me/MyTurnTable.js

@@ -146,7 +146,7 @@ function MyTurnTable({ games, fetching }) {
       columnHelper.accessor("timeRemaining", {
         header: "Time remaining",
         cell: (props) => (
-          <span class={props.row.original.clockHard ? `hardTime` : "softTime"}>
+          <span className={props.row.original.clockHard ? `hardTime` : "softTime"}>
             {showMilliseconds(props.getValue())}
           </span>
         ),

src/pages/Skeleton.js

@@ -19,7 +19,7 @@ import {
 import { Amplify, Auth } from "aws-amplify";
 import Spinner from "../components/Spinner";
 import Welcome from "./Welcome";
-import GameMove from "../components/GameMove";
+import GameMoveWrapper from "../components/GameMoveWrapper";
 import About from "../components/About";
 import StandingChallenges from "../components/StandingChallenges";
 import ListGames from "../components/ListGames";
@@ -263,7 +263,7 @@ function Bones(props) {
                           <Route path="/event/:eventid" element={<Event />} />
                           <Route
                             path="/move/:metaGame/:cbits/:gameID"
-                            element={<GameMove update={update} />}
+                            element={<GameMoveWrapper update={update} />}
                           />
                           <Route
                             path="/legal"