Works!

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

client/.env

@@ -0,0 +1 @@
+

client/package.json

@@ -9,6 +9,7 @@
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
+    "moment": "^2.29.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-moment": "^1.1.1",

client/src/App.css

@@ -1,3 +1,8 @@
 body {
   font-family: 'Droid Sans', 'Arial Narrow', Arial, sans-serif;
 }
+
+#root {
+  width: 100vw;
+  height: 100vh;
+}

client/src/Board.js

@@ -633,13 +633,15 @@ class Board extends React.Component {
   }
 
   updateDimensions() {
+    const hasToolbar = false;
+
     if (this.updateSizeTimer) {
       clearTimeout(this.updateSizeTimer);
     }
 
     this.updateSizeTimer = setTimeout(() => {
       const container = document.getElementById("root"),
-        offset = container.firstChild.offsetHeight,
+        offset = hasToolbar ? container.firstChild.offsetHeight : 0,
         height = window.innerHeight - offset;
 
       this.offsetY = offset;
@@ -665,12 +667,16 @@ class Board extends React.Component {
       return;
     }
 
+    if (this.canvas.width === 0 || this.canvas.height === 0) {
+      return;
+    }
+
     const ctx = this.canvas.getContext("2d");
     ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
 
     ctx.save();
     ctx.strokeStyle = 'white';
-    ctx.filleStyle = 'rgba(0, 0, 0, 0)';
+    ctx.fillStyle = 'rgba(0, 0, 0, 0)';
 
     this.minSize = Math.min(this.canvas.height, this.canvas.width);
     /*
@@ -726,6 +732,7 @@ class Board extends React.Component {
       }
     }
     ctx.restore();
+   
     ctx.scale(this.minSize / hexagonRatio, this.minSize / hexagonRatio);
     ctx.translate(0.5 * hexagonRatio, 0.5 * hexagonRatio);
     ctx.lineWidth = 2. / this.minSize;

server/package.json

@@ -31,4 +31,4 @@
     "type": "git",
     "url": "git@git.ketrenos.com:jketreno/peddlers-of-ketran"
   }
- }
+}