Bounded movement inside walls.

client/board.js

@@ -2,20 +2,10 @@ const Board = function({ parent, squares }) {
     this.parent = parent;
     this.squares = squares;
     
-    this.blockers = {};
+    this.walls = {};
     this.listeners = {};
 
     this.drawSquares();
-    this.resetBlockers();
-};
-
-Board.prototype.resetBlockers = function() {
-    this.blockers = {
-        negativeI: null,
-        negativeJ: null,
-        positiveI: null,
-        positiveJ: null
-    };
 };
 
 Board.prototype.drawRobots = function(robots) {
@@ -46,6 +36,8 @@ Board.prototype.drawRobots = function(robots) {
         shadow.style.left = x + 'px';
         shadow.style.top = y + 'px';
         shadow.dataset.parentRobot = id;
+        shadow.dataset.currentI = i;
+        shadow.dataset.currentJ = j;
 
         this.parent.appendChild(robot);
         this.parent.appendChild(shadow);
@@ -73,7 +65,11 @@ Board.prototype.drawSquares = function() {
 };
 
 Board.prototype.drawWalls = function(edges) {
+    this.walls = {};
+
     edges.forEach(edge => {
+        this.walls[edge] = true;
+
         const id = `wall-${edge}`;
 
         if (document.getElementById(id)) {
@@ -82,8 +78,6 @@ Board.prototype.drawWalls = function(edges) {
 
         const [i1, j1, i2, j2] = edge.split('-');
 
-        console.log(edge)
-
         const wall = document.createElement('div');
         wall.id = id;
         wall.title = edge;
@@ -107,37 +101,61 @@ Board.prototype.drawWalls = function(edges) {
     })
 };
 
+// i1 and j1 are the original position.
+// i2 and j2 are the requested position.
+// Check all the edges crossed between the two to find if it's a valid move.
 Board.prototype.getBlockers = function({ i1, j1, i2, j2 }) {
     // const upperEdge = `${i1}-${j1}-${i2}-${j2}`;
     // const lowerEdge = `${i1}-${j1}-${i2}-${j2}`;
 
-    if (i1 === i2 && j1 < j2) {
+    if (i1 !== i2 && j1 !== j2) {
-        
+        return "uh oh";
-
+    }
-    } else if (i1 === i2 && j1 > j2) {
-        
 
-    } else if (j1 === j2 && i1 <= i2) {
-        this.blockers.positiveI && console.log(this.blockers.positiveI.i, i1)
 
-        if (this.blockers.positiveI && this.blockers.positiveI.i <= i1) {
+    if (i1 === i2 && j1 == j2) {
-            return this.blockers.positiveI.blockage;
+        return;
+    } else if (i1 === i2 && j1 > j2) {
+        // Moving up
+        // Moving down.
+        for (let j = j2; j < j1; j++) {
+            const edge = `${i1}-${j + 1}-${i1 + 1}-${j + 1}`;
+
+            if (this.walls[edge]) {
+                return document.querySelector(`[data-wall='${edge}']`);
+            }
         }
 
-        const rightEdge = `${i1 + 1}-${j1}-${i1 + 1}-${j1 + 1}`;
+    } else if (i1 === i2 && j1 < j2) {
-
+        // Moving down.
-        const wall = document.querySelector(`[data-wall='${rightEdge}']`);
+        for (let j = j1; j < j2; j++) {
+            const edge = `${i1}-${j + 1}-${i1 + 1}-${j + 1}`;
 
-        if (wall) {
+            if (this.walls[edge]) {
-            this.blockers.positiveI = { i: i1 + 1, blockage: wall };
+                return document.querySelector(`[data-wall='${edge}']`);
-            return wall;
+            }
+        }
+    } else if (j1 === j2 && i1 < i2) {
+        // Moving right.
+        for (let i = i1; i < i2; i++) {
+            const edge = `${i + 1}-${j1}-${i + 1}-${j1 + 1}`;
+
+            if (this.walls[edge]) {
+                return document.querySelector(`[data-wall='${edge}']`);
+            }
+        }
+    } else if (j1 === j2 && i1 > i2) {
+        // Moving left.
+        for (let i = i2; i < i1; i++) {
+            const edge = `${i + 1}-${j1}-${i + 1}-${j1 + 1}`;
+
+            if (this.walls[edge]) {
+                return document.querySelector(`[data-wall='${edge}']`);
+            }
         }
-    } else {
-        // const leftEdge = `${i1}-${j1}-${i2}-${j2}`;
-        // console.log("Left edge: ", leftEdge)
     }
 
-    return null;
+    // return "uh oh";
 };
 
 Board.prototype.onRobotDragStart = function(evt) {
@@ -157,16 +175,15 @@ Board.prototype.onRobotDragStart = function(evt) {
 };
 
 Board.prototype.onRobotDrag = function(dragTarget, evt) {
-    const { i: i1, j: j1 } = this.squares.xyToIj({ x: evt.x - evt.movementX, y: evt.y - evt.movementY });
+    const i1 = dragTarget.dataset.currentI * 1;
+    const j1 = dragTarget.dataset.currentJ * 1;
+    // const { i: i1, j: j1 } = this.squares.xyToIj({ x: evt.x - evt.movementX, y: evt.y - evt.movementY });
     const { i: i2, j: j2 } = this.squares.xyToIj({ x: evt.x, y: evt.y });
 
     const blockage = this.getBlockers({ i1, j1, i2, j2 });
-    // console.warn(blockers)
 
     if (blockage) {
-        console.log(blockage)
+        // console.log(blockage)
-        console.log("NOPE")
-        // this.onRobotDragStop(); works but i don't like it
         return;
     }
     
@@ -177,8 +194,6 @@ Board.prototype.onRobotDrag = function(dragTarget, evt) {
 };
 
 Board.prototype.onRobotDragStop = function(_) {
-    this.resetBlockers();
-
     document.body.removeEventListener('mouseup', this.listeners.onRobotDragStop);
     document.body.removeEventListener('mousemove', this.listeners.onRobotDrag);
 };

client/controls.js

@@ -1,53 +1,61 @@
-const Controls = {
+const Controls = function(connection) {
-    guessBuild: () => {
+    this.connection = connection;
-        const container = document.getElementById('controls-guesses');
+    console.log(this.connection)
-        container.querySelectorAll('.controls-guess').forEach(el => el.parentNode.removeChild(el));
+}
-
+
-        for (let i = 1; i <= 30; i++) {
+    // guessBuild: = function() {
-            const guess = document.createElement('div');
+    //     const container = document.getElementById('controls-guesses');
-            guess.className = 'controls-guess';
+    //     container.querySelectorAll('.controls-guess').forEach(el => el.parentNode.removeChild(el));
-            guess.innerHTML = i;
+
-            guess.setAttribute('data-value', i);
+    //     for (let i = 1; i <= 30; i++) {
-            guess.addEventListener('click', Controls.guessClick)
+    //         const guess = document.createElement('div');
-            container.appendChild(guess);
+    //         guess.className = 'controls-guess';
+    //         guess.innerHTML = i;
+    //         guess.setAttribute('data-value', i);
+    //         guess.addEventListener('click', Controls.guessClick)
+    //         container.appendChild(guess);
+    //     }
+    // },
+
+    // guessClick: (evt) => {
+    //     alert(evt.currentTarget.dataset.value)
+    // },
+
+Controls.prototype.playerAdd = function() {
+    const rawInput = prompt("What is your name?");
+    this.connection.send(JSON.stringify({ head: { type: 'playerAdd' }, body: rawInput }))
+};
+
+Controls.prototype.playerRemove = function(rawInput) {
+    this.connection.send(JSON.stringify({ head: { type: 'playerRemove' }, body: rawInput }))
+};
+
+Controls.prototype.playersUpdate = function(names) {
+    const container = document.getElementById('controls-players');
+    const keys = Object.keys(names);
+
+    if (keys.length > 0) {
+        const nobody = document.getElementById('controls-players-nobody');
+        nobody.parentNode.removeChild(nobody);
+    }
+    
+    keys.forEach(connectionId => {
+        const id = `player-${connectionId}`;
+
+        if (document.getElementById(id)) {
+            return;
         }
-    },
+
-
+        const n = document.createElement('div');
-    guessClick: (evt) => {
+        n.id = id;
-        alert(evt.currentTarget.dataset.value)
+        n.innerHTML = names[connectionId];
-    },
+        n.className = 'controls-player';
-
+        container.appendChild(n)
-    playerAdd: () => {
+    });
-        const rawInput = prompt("What is your name?");
+
-        connection.send(JSON.stringify({ head: { type: 'playerAdd' }, body: rawInput }))
+    // container.querySelectorAll('.controls-player').forEach(el => {
-    },
+    //     if (!names[el.id]) {
-
+    //         container.removeChild(el);
-    playerRemove: (rawInput) => {
+    //     }
-        connection.send(JSON.stringify({ head: { type: 'playerRemove' }, body: rawInput }))
+    // })
-    },
-
-    playersUpdate: (names) => {
-        const container = document.getElementById('controls-players');
-        console.log(names)
-        
-        Object.keys(names).forEach(connectionId => {
-            const id = `player-${connectionId}`;
-
-            if (document.getElementById(id)) {
-                return;
-            }
-
-            const n = document.createElement('div');
-            n.id = id;
-            n.innerHTML = names[connectionId];
-            n.className = 'controls-player';
-            container.appendChild(n)
-        });
-
-        // container.querySelectorAll('.controls-player').forEach(el => {
-        //     if (!names[el.id]) {
-        //         container.removeChild(el);
-        //     }
-        // })
-    },
 };

index.css

@@ -24,12 +24,6 @@ body {
     z-index: 1;
 }
 
-.controls-subtitle {
-    background-color: #4D3243;
-    color: #fff;
-    padding: 12px;
-}
-
 .controls-title {
     background-color: #639978;
     background-image: url('sprite-robots.png');
@@ -40,21 +34,31 @@ body {
     text-align: center;
 }
 
-.controls-room {
+.controls-subtitle {
+    background-color: #4D3243;
+    color: #fff;
+    padding: 12px;
+    margin: 24px 0;
 }
 
-.controls-room span {
+#controls-room {
-
 }
 
-.controls-room input {
+.controls-room-error {
-
+    background: #e00000;
+    color: #fff;
+    margin: 4px 0;
+    padding: 8px;
 }
 
-.controls-room button {
+#controls-players {
+}
 
+.controls-player {
+    padding: 8px;
 }
 
+
 #controls-guesses  {
     background: salmon;
 }

index.html

@@ -15,10 +15,12 @@
     <div id="controls-container">
         <div class='controls-title'>Puzzle Robots</div>
 
-        <div class="controls-room">
+        <div id="controls-room">
             <div class='controls-subtitle'>Room</div>
             <input type="text" id='game-id'>
             <button type='button'>&gt;</button>
+
+            <div class="controls-room-errors"></div>
         </div>
 
         <!-- <div class="rounds">
@@ -28,6 +30,8 @@
 
         <div id="controls-players">
             <div class='controls-subtitle'>Players</div>
+
+            <div class="controls-player" id='controls-players-nobody'>Nobody is in the game yet.</div>
         </div>
         
 
@@ -41,15 +45,22 @@
 
     <script>
         window.addEventListener('load', () => {
+            const connection = new WebSocket('ws://localhost:8080/ricochet');
             const squares = new Squares();
-
+            const controls = new Controls(connection);
             const board = new Board({ parent: document.getElementById('content-container'), squares });
 
-            var connection = new WebSocket('ws://localhost:8080/ricochet', ['soap', 'xmpp']);
+            // connection.onopen = controls.playerAdd.bind(controls);
+
+            connection.onerror = (err) => {
+                console.error(err);
 
-            // connection.onopen = Controls.playerAdd;
+                const div = document.createElement('div');
+                div.className = 'controls-room-error';
+                div.innerHTML = "Can't reach the server.";
 
-            connection.onerror = console.error;
+                document.getElementById('controls-room').appendChild(div);
+            }
 
             connection.onmessage = function (msg) {
                 const data = JSON.parse(msg.data)
@@ -68,7 +79,7 @@
                         break;
 
                     case 'players':
-                        // Controls.playersUpdate(data.body)
+                        controls.playersUpdate(data.body)
                         break;
 
                     case 'robots':

notes.txt

@@ -1,12 +1,10 @@
-// TODO dynamic sizing of squares based on available height
 // TODO dynamic move population
 // TODO move websocket server to /core
 // TODO dynamic socket server resolution
 // TODO namespace server to /ricochet
-// TODO [soap, xmpp]
-// TODO a message must have a head and a body
 // TODO your favorite games
 // TODO no cancel from name prompt
 // TODO limit concurrent players
 // TODO window resize update board
-// TODO donate link
+// TODO donate link
+// TODO tutorial

server/game.js

@@ -32,6 +32,8 @@ Game.prototype.getRobots = function() {
 Game.prototype.getWalls = function() {
     // Edge IDs are of the form [i1-j1-i2-j2]. Top left is 0, 0.
     return [
+        "1-3-1-4",
+        "4-1-5-1",
         "4-8-5-8", 
         "8-3-8-4"
     ];