Improve fog syncing

Author: codewithkyle

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

@@ -98,6 +98,12 @@ export default class TableCanvas extends SuperComponent<ITableCanvas>{
 
     private inbox({ type, data }) {
         switch (type) {
+            case "room:tabletop:fog:add":
+                this.fogOfWar = data.fogOfWar;
+                this.fogOfWarShapes.push(data.fogOfWarShapes);
+                this.updateFog = true;
+                this.render();
+                break;
             case "room:tabletop:fog:sync":
                 this.fogOfWar = data.fogOfWar;
                 this.fogOfWarShapes = data.fogOfWarShapes;
@@ -123,7 +129,7 @@ export default class TableCanvas extends SuperComponent<ITableCanvas>{
     }
 
     private sync(shape:FogOfWarShape) {
-        send("room:tabletop:fog:sync", shape);
+        send("room:tabletop:fog:add", shape);
     }
 
     private revealShapes() {

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.3</title>
+    <title>Tabletopper v0.6.4</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.3</title>
+    <title>Tabletopper v0.6.4</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/game.ts

@@ -40,7 +40,7 @@ class GameManager {
                     this.error(ws, "Action Failed", `Room ${ws.room} is no longer available.`);
                 }
                 break;
-            case "room:tabletop:fog:sync":
+            case "room:tabletop:fog:add":
                 if (room){
                     room.syncFog(data);
                 } else {

wss/src/room.ts

@@ -71,8 +71,8 @@ class Room {
             return;
         }
         this.fogOfWarShapes.push(shape);
-        this.broadcast("room:tabletop:fog:sync", {
-            fogOfWarShapes: this.fogOfWarShapes,
+        this.broadcast("room:tabletop:fog:add", {
+            fogOfWarShapes: shape,
             fogOfWar: this.fogOfWar,
         });
     }