Loading, but then server locks

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>

client/src/App.js

@@ -25,7 +25,7 @@ function App() {
   return (
     <Router>
       <Routes>
-        <Route element={<Board/>} path={`${base}/games/:id`}/>
+        <Route exact element={<Board/>} path={`${base}/games/:id`}/>
         <Route exact element={<Board/>} path={`${base}`}/>
       </Routes>
     </Router>

client/src/Board.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import "./Board.css";
-//import history from "./history.js";
+import history from "./history.js";
 import Paper from '@material-ui/core/Paper';
 import TextField from '@material-ui/core/TextField';
 import List from '@material-ui/core/List';
@@ -423,65 +423,17 @@ class Board extends React.Component {
       settlement: null
     };
 
-    const params = {};
-
-    if (props.router && props.router.params.id) {
-      console.log(`Loading game: ${props.router.params.id}`);
-      params.url = `${base}/api/v1/games/${props.router.params.id}`;
-      params.method = "GET"
-    } else {
-      console.log("Requesting new game.");
-      params.url = `${base}/api/v1/games`;
-      params.method = "POST";
-    }
-
-    window.fetch(params.url, {
-      method: params.method,
-      cache: 'no-cache',
-      credentials: 'same-origin',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-//      body: JSON.stringify(data) // body data type must match "Content-Type" header
-    }).then((res) => {
-      if (res.status > 400) {
-        console.log(`Unable to find game ${props.router.params.id}`);
-        throw new Error(`Unable to find requested game ${props.router.params.id}. Starting new one.`);
-      }
-      return res.json();
-    }).then((game) => {
-      console.log (`Game ${game.id} loaded.`);
-
-      if (!props.router.params.id) {
-//        history.push(`${gamesPath}/${game.id}`);
-      }
-
-      this.game = game;
-      //this.setState({ game: game });
-      this.pips = Pips(this);
-      this.tiles = Tiles(this);
-      this.table = Table(this);
-    
-      this.borders = this.game.borders.map((file) => {
-        console.log(file);
-        return Border(this, file);
-      });
-    
-      //this.loadTimer = window.setTimeout(this.loadGame, 1000);
-    }).catch((error) => {
-      console.error(error);
-      alert(error);
-    })
+    this.id = (props.router && props.router.params.id) ? props.router.params.id : 0;
   }
 
-  loadGame() {    
+  loadGame() {
     if (this.loadTimer) {
       window.clearTimeout(this.loadTimer);
       this.loadTimer = null;
     }
 
     if (this.state.game) {
-      return;
+  //    return;
     }
 
     window.fetch(`${base}/api/v1/games/${this.state.game.id}`, {
@@ -539,8 +491,8 @@ class Board extends React.Component {
     }).then(() => {
       this.loadTimer = window.setTimeout(this.loadGame, 1000);
     });
-}
-  
+  }
+
   randomize() {
     //this.borders = shuffle(this.borders);
     this.tiles = shuffle(this.tiles);
@@ -684,17 +636,16 @@ class Board extends React.Component {
     if (this.updateSizeTimer) {
       clearTimeout(this.updateSizeTimer);
     }
- console.log("Fix updateDimensions");
- 
+
     this.updateSizeTimer = setTimeout(() => {
       const container = document.getElementById("root"),
         offset = container.firstChild.offsetHeight,
         height = window.innerHeight - offset;
-        return;
+
       this.offsetY = offset;
       this.width = window.innerWidth;
       this.height = height;
-      
+
       this.canvas.width = this.width;
       this.canvas.height = this.height;
       this.canvas.style.top = `${offset}px`;
@@ -1071,6 +1022,60 @@ class Board extends React.Component {
     window.addEventListener("mousemove", this.mouseMove);
     window.addEventListener("resize", this.updateDimensions);
 
+    const params = {};
+    if (this.id) {
+      console.log(`Loading game: ${this.id}`);
+      params.url = `${base}/api/v1/games/${this.id}`;
+      params.method = "GET"
+    } else {
+      console.log("Requesting new game.");
+      params.url = `${base}/api/v1/games`;
+      params.method = "POST";
+    }
+
+    window.fetch(params.url, {
+      method: params.method,
+      cache: 'no-cache',
+      credentials: 'same-origin',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+//      body: JSON.stringify(data) // body data type must match "Content-Type" header
+    }).then((res) => {
+      if (res.status > 400) {
+        let message;
+        if (this.id) {
+          message = `Unable to find game ${this.id}. Starting new game.`;
+        } else {
+          message = `Starting new game.`;
+        }
+        console.log(message);
+        throw new Error(message);
+      }
+      return res.json();
+    }).then((game) => {
+      console.log (`Game ${game.id} loaded.`);
+
+      if (!this.id) {
+        history.push(`${gamesPath}/${game.id}`);
+      }
+
+      this.game = game;
+      this.setState({ game: game });
+      this.pips = Pips(this);
+      this.tiles = Tiles(this);
+      this.table = Table(this);
+
+      this.borders = this.game.borders.map((file) => {
+        return Border(this, file);
+      });
+
+      this.loadTimer = window.setTimeout(this.loadGame, 1000);
+    }).catch((error) => {
+      console.error(error);
+      alert(error);
+    })
+
     setTimeout(this.updateDimensions, 1000);
   }