Name and socket ID persistence.

README.md

@@ -13,9 +13,6 @@ A victory state can be stored by taking a snapshot of the current stack.
 Icons from [https://game-icons.net](https://game-icons.net)
 
 ## TODO
-- tutorial 
-- restore name prompt
-- home button
-
 - reset robots? on server reset...avoid multiple shadows
-- Fix 9 things
+- "start next round" button not showing on new join in win state
+- Fix 6 things

client/connection.js

@@ -31,7 +31,9 @@ const Connection = function() {
 
 Connection.prototype.connect = function() {
     const hostname = window.location.hostname;
-    this.ws = new WebSocket(`ws://${hostname}:8080/ricochet?name=${this.name}`);
+    const uuid = Cookie.getCookie({ name: 'player_id' });
+
+    this.ws = new WebSocket(`ws://${hostname}:8080/ricochet?name=${this.name}&uuid=${uuid}`);
 
     this.ws.addEventListener('open', this.socketListeners.open);
     this.ws.addEventListener('error', this.socketListeners.error);

client/controls.js

@@ -128,7 +128,11 @@ Controls.prototype.msgComplete = function(evt) {
 };
 
 Controls.prototype.msgConnected = function(evt) {
-    this.playerId = evt.detail.body;  
+    this.playerId = evt.detail.body.player_id;  
+
+    Cookie.setCookie({ name: 'player_name', value: evt.detail.body.player_name, days: 1 });
+    Cookie.setCookie({ name: 'player_id', value: this.playerId, days: 1 });
+    
     this.drawPlayers();
 };
 
@@ -188,7 +192,7 @@ Controls.prototype.msgState = function(evt) {
 };
 
 Controls.prototype.msgWin = function(evt) {
-    document.getElementById('controls-win-message').innerHTML = `Congratulations ${this.names[evt.detail.player_id]} !`;
+    document.getElementById('controls-win-message').innerHTML = `Congratulations ${this.names[evt.detail.body.player_id]} !`;
     document.getElementById('controls-win-count').innerHTML = evt.detail.body.moveCount;
 };
 

client/cookie.js

@@ -1,16 +1,16 @@
 const Cookie = {
-    getCookie: function(name) {
+    getCookie: function({ name }) {
         var v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
         return v ? decodeURI(v[2]) : null;
     },
 
-    setCookie: function(name, value, days) {
+    setCookie: function({ name, value, days }) {
         var d = new Date;
         d.setTime(d.getTime() + 24*60*60*1000*days);
         document.cookie = name + "=" + encodeURI(value) + ";path=/;expires=" + d.toGMTString();
     },
 
-    deleteCookie: function(name) { 
+    deleteCookie: function({ name }) { 
-        Util.setCookie(name, '', -1); 
+        Cookie.setCookie({ name, value: '', days: -1 }); 
     }
 };

client/grid.js

@@ -333,7 +333,7 @@ Grid.prototype.findNextObstacle = function({ direction, i, j }) {
 };
 
 Grid.prototype.checkObjective = function({ id, i, j }) {
-    const complete = (i === this.objective.i && j === this.objective.j && id === this.objective.id);
+    const complete = (i === this.objective.i * 1 && j === this.objective.j * 1 && id === this.objective.id);
 
     const evtSolve = new CustomEvent('L-complete', { detail: { complete }});
     document.dispatchEvent(evtSolve);

client/stack.js

@@ -27,7 +27,7 @@ Stack.prototype.getInitialPositions = function() {
 };
 
 Stack.prototype.msgConnected = function(evt) {
-    this.playerId = evt.detail.body;
+    this.playerId = evt.detail.body.player_id;
 };
 
 Stack.prototype.msgRobots = function(evt) {

index.html

@@ -67,6 +67,7 @@
             </div>
 
             <div id="controls-footer">
+                <a href='http://www.benburlingham.com/' target='_blank'>B</a>
                 <a href='http://buymeacoff.ee/5EGitAV' target='_blank'>&#9825;</a>
             </div>
         </div>
@@ -84,13 +85,8 @@
                 new Stack();
 
                 // Entry point.
-
+                const name = Cookie.getCookie({ name: "player_name" });
-                const names = ["Biff", "Morty", "Herb", "Chester", "Lyle", "Cap", "Dale", "Ned", "Mindy", "Frankie", "Gabriel", "Mona", "Dolores",
+                const rawInput = name ? name : prompt("What is your name?");
-                    "Sepulveda", "Venus", "Blingbing", "Cyrpt"]
-                const r = Math.floor(Math.random() * names.length);
-                const rawInput = names[r] 
-
-                // const rawInput = prompt("What is your name?");
 
                 if (!rawInput) {
                     const evt = new CustomEvent('L-conn-error', { detail: "noname" });

package-lock.json

@@ -4,10 +4,10 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
-    "node-uuid": {
+    "uuid": {
-      "version": "1.4.8",
+      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/node-uuid/-/node-uuid-1.4.8.tgz",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.2.0.tgz",
-      "integrity": "sha1-sEDrCSOWivq/jTL7HxfxFn/auQc="
+      "integrity": "sha512-CYpGiFTUrmI6OBMkAdjSDM0k5h8SkkiTP4WAjQgDgNB1S3Ou9VBEvr6q0Kv2H1mMk7IWfxYGpMH5sd5AvcIV2Q=="
     },
     "ws": {
       "version": "7.3.0",

package.json

@@ -9,7 +9,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "node-uuid": "^1.4.8",
+    "uuid": "^8.2.0",
     "ws": "^7.3.0"
   },
   "devDependencies": {}

server/ricochet.js

@@ -1,4 +1,4 @@
-const uuid = require('node-uuid');
+const uuid = require('uuid');
 const UrlParser = require('url');
 const DEBUG = (process.env.NODE_ENV !== "production");
 
@@ -75,9 +75,11 @@ Ricochet.prototype.onConnect = function(ws, req) {
 
     this.addPlayer(ws.id, santizedName);
 
+    console.log(ws.id)
+
     this.messenger.messageAll({ type: 'players', body: this.players });
 
-    this.messenger.messageOne(ws, { type: 'connected', body: ws.id});
+    this.messenger.messageOne(ws, { type: 'connected', body: { player_id: ws.id, player_name: santizedName } });
     this.messenger.messageOne(ws, { type: 'robots', body: this.robots});
     this.messenger.messageOne(ws, { type: 'objective', body: this.objective});
     this.messenger.messageOne(ws, { type: 'state', body: this.state});
@@ -296,6 +298,8 @@ Ricochet.prototype.msgSkip = function() {
 Ricochet.prototype.msgSolve = function(message) {
     clearTimeout(this.countdownTimer);
 
+    
+
     this.countdownTimer = setTimeout(this.onCountdownComplete.bind(this), this.countdownDuration * 1000);
     this.countdownTimestamp = new Date().getTime();