Trying to fix fog of war bug that reveals the full map

Author: codewithkyle

client/src/pages/tabletop-page/tabletop-component/table-canvas/table-canvas.ts

@@ -133,19 +133,30 @@ export default class TableCanvas extends SuperComponent<ITableCanvas>{
         for (let i = 0; i < this.fogOfWarShapes.length; i++) {
             switch (this.fogOfWarShapes[i].type){
                 case "poly":
-                    this.fogctx.beginPath();
-                    this.fogctx.moveTo(this.fogOfWarShapes[i].points[0].x, this.fogOfWarShapes[i].points[0].y);
-                    for (let p = 1; p < this.fogOfWarShapes[i].points.length; p++){
-                        this.fogctx.lineTo(this.fogOfWarShapes[i].points[p].x, this.fogOfWarShapes[i].points[p].y);
+                    try {
+                        this.fogctx.beginPath();
+                        this.fogctx.moveTo(this.fogOfWarShapes[i].points[0].x, this.fogOfWarShapes[i].points[0].y);
+                        for (let p = 1; p < this.fogOfWarShapes[i].points.length; p++){
+                            this.fogctx.lineTo(this.fogOfWarShapes[i].points[p].x, this.fogOfWarShapes[i].points[p].y);
+                        }
+                        this.fogctx.closePath();
+                        this.fogctx.fill();
+                    } catch (e) {
+                        console.error("Render error:", e);
                     }
-                    this.fogctx.closePath();
-                    this.fogctx.fill();
                     break;
                 case "rect":
-                    const width = this.fogOfWarShapes[i].points[1].x - this.fogOfWarShapes[i].points[0].x;
-                    const height = this.fogOfWarShapes[i].points[1].y - this.fogOfWarShapes[i].points[0].y
-                    this.fogctx.rect(this.fogOfWarShapes[i].points[0].x, this.fogOfWarShapes[i].points[0].y, width, height);
-                    this.fogctx.fill();
+                    try {
+                        const width = this.fogOfWarShapes[i].points[1].x - this.fogOfWarShapes[i].points[0].x;
+                        const height = this.fogOfWarShapes[i].points[1].y - this.fogOfWarShapes[i].points[0].y
+                        this.fogctx.rect(this.fogOfWarShapes[i].points[0].x, this.fogOfWarShapes[i].points[0].y, width, height);
+                        this.fogctx.fill();
+                    } catch (e) {
+                        console.error("Render error:", e);
+                    }
+                    break;
+                default:
+                    console.error("How did you get here?");
                     break;
             }
         }
@@ -244,28 +255,32 @@ export default class TableCanvas extends SuperComponent<ITableCanvas>{
 
         if (!this.image) return;
 
-        // Always draw map first
-        this.imgctx.drawImage(
-            this.image,
-            0, 0, this.w, this.h
-        );
-
         // Other
         this.renderGridLines();
         this.renderFogOfWar();
-        
+
+        // Always draw map first
         this.imgctx.drawImage(
-            this.gridCanvas,
-            0, 0,
-            this.w, this.h
+            this.image,
+            0, 0, this.w, this.h
         );
+       
+        if (this.renderGridLines) {
+            this.imgctx.drawImage(
+                this.gridCanvas,
+                0, 0,
+                this.w, this.h
+            );
+        }
 
         // Always draw fog last
-        this.imgctx.drawImage(
-            this.fogCanvas,
-            0, 0,
-            this.w, this.h
-        );
+        if (this.renderFogOfWar) {
+            this.imgctx.drawImage(
+                this.fogCanvas,
+                0, 0,
+                this.w, this.h
+            );
+        }
     }
 }
 env.bind("table-canvas", TableCanvas);

server/views/layouts/main.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
 
-    <title>Tabletopper v0.6.1</title>
+    <title>Tabletopper v0.6.2</title>
     <meta name="description" content="Jump into a D&D tabletop session with your friends, hassle free.">
 
     <link rel="icon" href="/static/favicon.png" sizes="any">

server/views/layouts/vtt.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
 
-    <title>Tabletopper v0.6.1</title>
+    <title>Tabletopper v0.6.2</title>
     <meta name="description" content="Jump into a D&D tabletop session with your friends, hassle free.">
 
     <link rel="icon" href="/static/favicon.png" sizes="any">

wss/src/room.ts

@@ -66,6 +66,10 @@ class Room {
     }
 
     public syncFog(shape):void{
+        if (shape.points.length < 2) {
+            console.log("Got malformed fog of war shape:", shape);
+            return;
+        }
         this.fogOfWarShapes.push(shape);
         this.broadcast("room:tabletop:fog:sync", {
             fogOfWarShapes: this.fogOfWarShapes,
@@ -105,7 +109,7 @@ class Room {
 
     private decrementConditions() {
         let prev;
-        if (this.activeInitiative - 1 < 0) {
+        if (this.activeInitiative -  < 0) {
             prev = this.initiative[this.initiative.length - 1];
         } else {
             prev = this.initiative[this.activeInitiative - 1];