From e8d1fec9b67c8622578ade3578146e41d5fff7c4 Mon Sep 17 00:00:00 2001
From: Ben Burlingham <ben.burlingham@gmail.com>
Date: Fri, 26 Jun 2020 18:02:18 -0700
Subject: [PATCH] Memoizing client connections in messenger.

---
 README.txt          |  1 +
 assets/comet.svg    |  2 +-
 client/controls.js  |  7 +++++
 client/icons.js     | 39 -------------------------
 index.html          |  6 ++--
 server/ricochet.js  | 69 ++++++++++++++++-----------------------------
 socket/messenger.js | 69 ++++++++++++++++++++++++++-------------------
 socket/server.js    | 33 ++++++++++++++++------
 8 files changed, 101 insertions(+), 125 deletions(-)
 delete mode 100644 client/icons.js

diff --git a/README.txt b/README.txt
index bc3e548..606bb0d 100644
--- a/README.txt
+++ b/README.txt
@@ -16,6 +16,7 @@ Icons from [https://game-icons.net](https://game-icons.net)
 - win declare
 - replay stack
 - countdown skip 
+- Extract loader from join.css and kill join.css, join.js
 - slide arrows
 - chat box
 - no cancel from name prompt
diff --git a/assets/comet.svg b/assets/comet.svg
index 38c600c..78abf67 100644
--- a/assets/comet.svg
+++ b/assets/comet.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;" id='foo'><g class="fill" transform="translate(0,0)" style="touch-action: none;"><path d="M20.916 15.648c147.945 202 202.556 312.645-3.146 252.438 201.76 82.926 225.515 176.51 49.13 180.76 190.922 51.156 315.057 60.258 377.16 10.43 67.76-54.368 62.6-177.648 13.31-361.6-.002 179.943-88.34 149.935-171.18-39.96 60.246 191.39-81.408 116.353-265.274-42.068zM457.37 97.676v-.008.008zm-79.792 150.84c5.457.054 10.994.79 16.508 2.267 3.763 1.01 7.352 2.34 10.77 3.924-.053-.058-.102-.12-.155-.178 51.248 21.08 79.986 77.264 65.253 132.25-16.008 59.742-77.174 95.054-136.914 79.046-59.29-15.886-94.507-76.24-79.395-135.547 1.144 7.843 3.71 15.465 7.808 22.564 15.038 26.045 46.48 37.745 78.735 32.334 8.387-.382 17.33-2.932 25.75-7.793 22.18-12.807 32.317-36.774 22.642-53.53-9.676-16.76-35.5-19.966-57.682-7.16-7.3 4.214-13.283 9.64-17.697 15.618-3.05-11-3.31-22.928-.14-34.75 7.978-29.778 35.053-49.34 64.518-49.047z" fill="#fff" fill-opacity="1"></path></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;"><g class="fill" transform="translate(0,0)" style="touch-action: none;"><path d="M20.916 15.648c147.945 202 202.556 312.645-3.146 252.438 201.76 82.926 225.515 176.51 49.13 180.76 190.922 51.156 315.057 60.258 377.16 10.43 67.76-54.368 62.6-177.648 13.31-361.6-.002 179.943-88.34 149.935-171.18-39.96 60.246 191.39-81.408 116.353-265.274-42.068zM457.37 97.676v-.008.008zm-79.792 150.84c5.457.054 10.994.79 16.508 2.267 3.763 1.01 7.352 2.34 10.77 3.924-.053-.058-.102-.12-.155-.178 51.248 21.08 79.986 77.264 65.253 132.25-16.008 59.742-77.174 95.054-136.914 79.046-59.29-15.886-94.507-76.24-79.395-135.547 1.144 7.843 3.71 15.465 7.808 22.564 15.038 26.045 46.48 37.745 78.735 32.334 8.387-.382 17.33-2.932 25.75-7.793 22.18-12.807 32.317-36.774 22.642-53.53-9.676-16.76-35.5-19.966-57.682-7.16-7.3 4.214-13.283 9.64-17.697 15.618-3.05-11-3.31-22.928-.14-34.75 7.978-29.778 35.053-49.34 64.518-49.047z" fill="#fff" fill-opacity="1"></path></g></svg>
\ No newline at end of file
diff --git a/client/controls.js b/client/controls.js
index 82f7d43..9f3ba5d 100644
--- a/client/controls.js
+++ b/client/controls.js
@@ -1,6 +1,13 @@
 //===== Constructor
 const Controls = function() {
     this.names = {};
+
+
+
+    const evt = new Event('L-join');
+    document.dispatchEvent(evt);
+
+
 //     this.starts = [];
 //     this.timers = {};
 
diff --git a/client/icons.js b/client/icons.js
deleted file mode 100644
index 5794a7a..0000000
--- a/client/icons.js
+++ /dev/null
@@ -1,39 +0,0 @@
-const Icons = {
-    comet: (color) => {
-    //     const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-    // star.setAttribute("viewBox", '0 0 100 100'); 
-
-    // const path = document.createElementNS("http://www.w3.org/2000/svg", 'path');
-
-        const obj = document.getElementById('TEST_OBJECT_SVG');
-
-        console.log(obj);
-        console.log(obj.contentDocument)
-
-        return obj;
-    },
-
-    moon: (color) => {
-
-    },
-
-    planet: (color) => {
-        
-    },
-
-    rocket: (color) => {
-        
-    },
-
-    spacesuit: (color) => {
-        
-    },
-
-    spider: (color) => {
-        
-    },
-
-    ufo: (color) => {
-        
-    },
-};
\ No newline at end of file
diff --git a/index.html b/index.html
index 1ac1932..fd6faca 100644
--- a/index.html
+++ b/index.html
@@ -14,11 +14,10 @@
     <script type='text/javascript' src='client/cookie.js'></script>
     <script type='text/javascript' src='client/grid.js'></script>
     <script type='text/javascript' src='client/icons.js'></script>
-    <script type='text/javascript' src='client/join.js'></script>
     <script type='text/javascript' src='client/stack.js'></script>
 </head>
 <body>
-    <div id="join">
+    <!-- <div id="join">
         <div id='join-setup'>
             <button type='button' class='join-button' id='join-setup-start'>Start a new game</button>
             <div class='join-message'>- or -</div>
@@ -35,7 +34,7 @@
             <button type='text' class='join-button' id='join-setup-back'>Back</button>
         </div>
     </div>
-
+ -->
     <div id="controls-container">
         <div id="controls-manage">
             <div class='controls-subtitle'>Global</div>
@@ -106,7 +105,6 @@
     <script>
         window.addEventListener('load', () => {
             // Order-independent. Communication via local events.
-            new Join();
             new Connection();
             new Controls();
             new Grid();
diff --git a/server/ricochet.js b/server/ricochet.js
index eada038..1dec405 100644
--- a/server/ricochet.js
+++ b/server/ricochet.js
@@ -1,22 +1,9 @@
 const uuid = require('node-uuid');
-
-const UrlParser = require('url');
-
-///////////////
-
-
-// REMEMBER THIS WILL BE IN A COMPLETELY SEPARATE DIRECTORY
-
-
-///////////////
-
+const DEBUG = (process.env.NODE_ENV !== "production");
 
 const Ricochet = function({ messenger }) {
     this.messenger = messenger;
-
-    console.log("HELLO RICOCHET")
-
-    // const players = {};
+    this.players = {};
 
     // this.id = uuid.v4();
     // this.countdownTimer = null;
@@ -33,19 +20,20 @@ const Ricochet = function({ messenger }) {
 };
 
 Ricochet.prototype.onConnect = function(ws, req) {
-    console.log("CONNECTED TO RICOCHET INSTANCE")
     // const query = url.query;
     // const santizedName = (query.name || 'Unknown').replace(/[^\w ]/g, '');
 
     // DEBUG && console.log("Connected:");
     // DEBUG && console.log (`${santizedName} ${ws.id} via ${req.url}`);
-    // G.addPlayer(ws.id, santizedName);
 
-    // Server.messageAll({ type: 'players', body: G.getPlayers() });
-    // Server.messageOne(ws, { type: 'walls', body: G.getWalls()});
-    // Server.messageOne(ws, { type: 'robots', body: G.getRobots()});
-    // Server.messageOne(ws, { type: 'winstate', body: G.getWinState()});
-    // Server.messageOne(ws, { type: 'connected', body: ws.id});
+    // this.addPlayer(ws.id, santizedName);
+
+    // this.messenger.messageAll({ type: 'players', body: this.players });
+
+    // this.messenger.messageOne(ws, { type: 'walls', body: G.getWalls()});
+    // this.messenger.messageOne(ws, { type: 'robots', body: G.getRobots()});
+    // this.messenger.messageOne(ws, { type: 'winstate', body: G.getWinState()});
+    // this.messenger.messageOne(ws, { type: 'connected', body: ws.id});
 }
 
 Ricochet.prototype.onMessage = function(ws, json) {
@@ -53,29 +41,24 @@ Ricochet.prototype.onMessage = function(ws, json) {
 };
 
 Ricochet.prototype.onDisconnect = function(ws) {
-// onDisconnect: (ws) => { 
-//         DEBUG && console.log("Disconnected:");  
-//         DEBUG && console.log(ws.id);      
+    DEBUG && console.log("Disconnected:");  
+    DEBUG && console.log(ws.id);      
 
-//         G.removePlayer(ws.id);
-//         Server.messageOthers(ws, { type: 'players', body: G.getPlayers() });
-//     },
+    this.removePlayer(ws.id);
+    
+    // this.messenger.messageAll({ type: 'players', body: this.players });
 };
 
-// Game.prototype.addPlayer = function(id, name) {
-//     if (!players[id]) {
-//         players[id] = name;
-//     }
-// }
-
-// Game.prototype.removePlayer = function(id) {
-//     players[id] = undefined;
-//     delete players[id];
-// }
+Ricochet.prototype.addPlayer = function(id, name) {
+    if (!this.players[id]) {
+        this.players[id] = name;
+    }
+};
 
-// Game.prototype.getPlayers = function() {
-//     return players;
-// }
+Ricochet.prototype.removePlayer = function(id) {
+    this.players[id] = undefined;
+    delete this.players[id];
+};
 
 // Game.prototype.getRobots = function() {
 //     return this.TEMP_ROBOTS;
@@ -222,6 +205,4 @@ Ricochet.prototype.onDisconnect = function(ws) {
 //         }
 //     },
 
-module.exports = {
-    new: Ricochet
-};
\ No newline at end of file
+module.exports = Ricochet;
\ No newline at end of file
diff --git a/socket/messenger.js b/socket/messenger.js
index 78dbf1c..79a0ce4 100644
--- a/socket/messenger.js
+++ b/socket/messenger.js
@@ -1,35 +1,46 @@
 const WebSocket = require('ws');
 const DEBUG = (process.env.NODE_ENV !== "production");
 
-const Messenger = {
-    messageOne: (ws, message) => { 
-        DEBUG && console.log(`Sending to only ${ws.id}:`);
-        DEBUG && console.log(message);
-
-        ws.send(JSON.stringify(message));
-    },
-
-    messageOthers: (ws, message) => { 
-        DEBUG && console.log(`Sending to other client(s):`);
-        DEBUG && console.log(message);
-
-        wss.clients.forEach((client) => {
-            if (client !== ws && client.readyState === WebSocket.OPEN) {
-                client.send(JSON.stringify(message));
-            }
-        });
-    },
-
-    messageAll: (message) => { 
-        DEBUG && console.log(`Sending to all ${wss.clients.size} client(s):`);
-        DEBUG && console.log(message);
-
-        wss.clients.forEach((client) => {
-            if (client.readyState === WebSocket.OPEN) {
-                client.send(JSON.stringify(message));
-            }
-        });
-    },
+const Messenger = function() {
+    this.clients = {};
 };
 
+Messenger.prototype.messageOne = function(ws, message) { 
+    DEBUG && console.log(`Sending to only ${ws.id}:`);
+    DEBUG && console.log(message);
+
+    ws.send(JSON.stringify(message));
+};
+
+Messenger.prototype.messageOthers = function(ws, message) { 
+    DEBUG && console.log(`Sending to other client(s):`);
+    DEBUG && console.log(message);
+
+    Object.values(this.clients).forEach((client) => {
+        if (client !== ws && client.readyState === WebSocket.OPEN) {
+            client.send(JSON.stringify(message));
+        }
+    });
+};
+
+Messenger.prototype.messageAll = function(message) { 
+    DEBUG && console.log(`Sending to all ${wss.clients.size} client(s):`);
+    DEBUG && console.log(message);
+
+    Object.values(this.clients).forEach((client) => {
+        if (client.readyState === WebSocket.OPEN) {
+            client.send(JSON.stringify(message));
+        }
+    });
+};
+
+Messenger.prototype.subscribe = function(ws) {
+    this.clients[ws.id] = ws;
+};
+
+Messenger.prototype.unsubscribe = function(ws) {
+    delete this.clients[ws.id];
+};
+
+
 module.exports = Messenger;
\ No newline at end of file
diff --git a/socket/server.js b/socket/server.js
index 00edcb0..421d6a7 100644
--- a/socket/server.js
+++ b/socket/server.js
@@ -1,27 +1,44 @@
 const WebSocket = require('ws');
 const UrlParser = require('url');
 const uuid = require('node-uuid');
-const messenger = require('./messenger');
+const Messenger = require('./messenger');
 
-const jsDir = `${__dirname}/server`;
+const RicochetApp = require(`${__dirname}/../server/ricochet.js`);
 
-const RicochetApp = require(`${jsDir}/ricochet.js`);
-
-const clientApps = {
-    '/ricochet': RicochetApp.new({ messenger })
+const apps = {
+    '/ricochet': new RicochetApp({ messenger: new Messenger() })
 };
 
+// Make sure all apps follow the messaging contract.
+Object.keys(apps).forEach((key) => {
+    const app = apps[key];
+    
+    const valid = app && app.messenger && app.onConnect && app.onMessage && app.onDisconnect;
+
+    if (!valid) {
+        delete apps[key];
+        console.log(`Application at ${key} is missing one or more: messenger, onConnect, onMessage, onDisconnect.`);
+    }
+});
+
 const onConnect = (ws, req) => {
     // Store an ID on the socket connection.
     ws.id = uuid.v4();
     
     const url = UrlParser.parse(req.url, true);
+    const app = apps[url.pathname];
     
-    if (clientApps[url.pathname]) {
+    if (app) {
+        app.messenger.subscribe(ws);
+
         app.onConnect(ws, req);
 
         ws.on('message', app.onMessage);
-        ws.on('close', app.onDisconnect);
+
+        ws.on('close', () => {
+            app.onDisconnect(ws);
+            app.messenger.unsubscribe(ws);
+        });
     }
 };