Drawing walls.

game.js

@@ -3,14 +3,26 @@ const uuid = require('node-uuid');
 const Game = function() {
     this.id = uuid.v4();
 
-    this.walls = [
+    const walls = [
         {x: 8, y: 9, n: 1, e: 0, s: 0, w: 1 },
         {x: 18, y: 9, n: 1, e: 0, s: 0, w: 1 },
         {x: 4, y: 19, n: 1, e: 0, s: 0, w: 1 }
     ];
-}
 
+    const buffers = walls.map(w => {
+        const buffer = new ArrayBuffer(6);
+        const view = new DataView(buffer)
+        view.setInt8(0, w.x);
+        view.setInt8(1, w.y);
+        view.setInt8(2, w.n);
+        view.setInt8(3, w.s);
+        view.setInt8(4, w.e);
+        view.setInt8(5, w.w);
 
+        return Array.prototype.slice.call(new Int8Array(buffer));
+    });
 
+    this.walls = buffers;
+}
 
 module.exports = Game;

ricochet.html

@@ -33,6 +33,23 @@
             border-style: solid;
             border-width: 1px 0 0 1px;
             margin: 0 auto;
+            position: relative;
+        }
+
+        .board-wall-x {
+            background: #222;
+            height: 8px;
+            margin-top: -4px;
+            position: absolute;
+            width: 40px;
+        }
+
+        .board-wall-y {
+            background: #222;
+            height: 40px;
+            margin-left: -4px;
+            position: absolute;
+            width: 8px;
         }
 
         .square{
@@ -167,45 +184,108 @@
 
         // BROWSER
         var connection = new WebSocket('ws://localhost:8080/ricochet', ['soap', 'xmpp']);
-// When the connection is open, send some data to the server
-connection.onopen = function (aaa) {
-    console.log(aaa)
-  connection.send('Ping'); // Send the message 'Ping' to the server
-};
 
-// Log errors
-connection.onerror = function (error) {
-  console.log('WebSocket Error ' + error);
-};
+        // connection.onopen = function (evt) {};
+        connection.onerror = console.error;
+
+        connection.onmessage = function (msg) {
+            const data = JSON.parse(msg.data)
+            if (!data.head || !data.body) {
+                return;
+            }
+
+            switch(data.head.type) {
+                case 'connect':
+                    break;
+
+                case 'disconnect':
+                    break;
 
-// Log messages from the server
-connection.onmessage = function (e) {
-  console.log('Server: ' + e.data);
+                case 'walls':
+                    Board.placeWalls(data.body);
+                    break;
+            }
         };
 
+
+
         document.getElementById('game-start').addEventListener('click', () => {
             connection.send('says hello!')
         })
 
+        const Board = {
+            squaresPerSide: 20,
+            squareSize: 40,
+
+            placeSquares: () => {
                 const board = document.getElementById('board');
-        const squaresPerSide = 20;
-        const squareSize  = 40;
 
-        board.style.width = (squaresPerSide * squareSize + 1) + 'px';
-        board.style.height = (squaresPerSide * squareSize + 1) + 'px';
+                board.style.width = (Board.squaresPerSide * Board.squareSize + 1) + 'px';
+                board.style.height = (Board.squaresPerSide * Board.squareSize + 1) + 'px';
 
                 while (board.hasChildElements)  {
                     board.removeChild(board.firstChild);
                 }
 
-        for (let i = 0; i < squaresPerSide; i++) {
-            for (let j = 0; j < squaresPerSide; j++) {
+                for (let i = 0; i < Board.squaresPerSide; i++) {
+                    for (let j = 0; j < Board.squaresPerSide; j++) {
                         const square = document.createElement('div');
                         square.className = 'square';
 
                         board.appendChild(square);
                     }
                 }
+            },
+
+            placeWall: (id, className, x, y) => {
+                if (document.getElementById(id)) {
+                    return;
+                }
+
+                const w = document.createElement('wall');
+                w.id = id;
+                w.style.top = x + 'px';
+                w.style.left = y + 'px';
+                w.className = className;
+
+                const board = document.getElementById('board');
+                board.appendChild(w);
+            },
+
+            placeWalls: (walls) => {
+                walls.forEach(buffer => {
+                    const wall = new Int8Array(buffer);
+                    const [x, y, north, south, east, west] = wall;
+
+                    const pxX = 40 * x;
+                    const pxY = 40 * y;
+
+                    if (north) {
+                        Board.placeWall(`${x}-${y}-n`, "board-wall-y", pxX, pxY);
+                    }
+
+                    if (south) {
+                        Board.placeWall(`${x}-${y}-s`, "board-wall-y", pxX, pxY + Board.squareSize);
+                    }
+
+                    if (east) {
+                        Board.placeWall(`${x}-${y}-e`, "board-wall-x", pxX, pxY);
+                    }
+
+                    if (west) {
+                        Board.placeWall(`${x}-${y}-e`, "board-wall-x", pxX + Board.squareSize, pxY);
+                    }
+
+                })
+            },
+
+            removeWalls: () => {
+                const walls = document.querySelector('board-wall-x').concat(document.querySelectorAll('board-wall-y'))
+            }
+        }
+
+        window.addEventListener('load', Board.placeSquares)
+
     </script>
 </body>
 </html>

server.js

@@ -31,13 +31,13 @@ const Server = {
     },
 
     onDisconnect: (ws) => { 
-        DEBUG && console.log("Closing " + ws.id)
+        DEBUG && console.log('Disconnected ' + ws.id);
         Server.messageOthers(ws, { head: { type: 'disconnect' }, body: { id: ws.id }})
     },
 
     onConnect: (ws, req) => {
         ws.id = uuid.v4();
-        DEBUG && console.log(req.url + ' connected to ' + ws.id);
+        DEBUG && console.log(req.url + ' connected ' + ws.id);
 
         ws.on('message', Server.onMessage.bind(null, ws));
         ws.on('close', Server.onDisconnect.bind(null, ws))