Drawing robots.

game.js

@@ -2,27 +2,26 @@ const uuid = require('node-uuid');
 
 const Game = function() {
     this.id = uuid.v4();
+}
+
+Game.prototype.getRobots = function() {
+   const robots = [
+        {x: 3, y: 1, color: 'red' },
+        {x: 19, y: 0, color: 'silver' },
+        {x: 1, y: 19, color: 'green' }
+    ];
+
+    return robots.map(r => [r.color, r.x, r.y]); 
+}
 
+Game.prototype.getWalls = function() {
     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;
-}
+    return walls.map(w => [w.x, w.y, w.n, w.s, w.e, w.w]);
+};
 
 module.exports = Game;

ricochet.html

@@ -52,6 +52,14 @@
             width: 8px;
         }
 
+        .board-robot {
+            border-radius: 18px;
+            height: 36px;
+            margin: 2px;
+            position: absolute;
+            width: 36px;
+        }
+
         .square{
             background: #ddd;
             border-style: solid;
@@ -168,21 +176,6 @@
             }
         };
 
-
-// https://github.com/websockets/ws
-//         const WebSocket = require('ws');
-
-// const ws = new WebSocket('ws://www.host.com/path');
-
-// ws.on('open', function open() {
-//   ws.send('something');
-// });
-
-// ws.on('message', function incoming(data) {
-//   console.log(data);
-// });
-
-        // BROWSER
         var connection = new WebSocket('ws://localhost:8080/ricochet', ['soap', 'xmpp']);
 
         // connection.onopen = function (evt) {};
@@ -191,6 +184,7 @@
         connection.onmessage = function (msg) {
             const data = JSON.parse(msg.data)
             if (!data.head || !data.body) {
+                console.warn("Unprocessable entity: ", msg)
                 return;
             }
 
@@ -204,6 +198,13 @@
                 case 'walls':
                     Board.placeWalls(data.body);
                     break;
+
+                case 'robots':
+                    Board.placeRobots(data.body);
+                    break;
+
+                default:
+                    console.warn("Unhandled message: ", msg)
             }
         };
 
@@ -237,6 +238,21 @@
                 }
             },
 
+            placeRobots: (robots) => {
+                robots.forEach(robot => {
+                    const [color, x, y] = robot;
+                    console.warn(color)
+
+                    const r = document.createElement('div');
+                    r.className = 'board-robot';
+                    r.style.background = color;
+                    r.style.left = 40 * x + 'px';
+                    r.style.top = 40 * y + 'px';
+
+                    document.getElementById('board').appendChild(r);
+                })
+            },
+
             placeWall: (id, className, x, y) => {
                 if (document.getElementById(id)) {
                     return;
@@ -248,13 +264,11 @@
                 w.style.left = y + 'px';
                 w.className = className;
 
-                const board = document.getElementById('board');
-                board.appendChild(w);
+                document.getElementById('board').appendChild(w);
             },
 
             placeWalls: (walls) => {
-                walls.forEach(buffer => {
-                    const wall = new Int8Array(buffer);
+                walls.forEach(wall => {
                     const [x, y, north, south, east, west] = wall;
 
                     const pxX = 40 * x;

server.js

@@ -45,7 +45,8 @@ const Server = {
         const G = new Game();
 
         Server.messageAll(ws, { head: { type: 'connect' }, body: { id: ws.id }});
-        Server.messageAll(ws, { head: { type: 'walls' }, body: G.walls})
+        Server.messageAll(ws, { head: { type: 'walls' }, body: G.getWalls()})
+        Server.messageAll(ws, { head: { type: 'robots' }, body: G.getRobots()})
     },
 
     onMessage: (ws, message) => {