diff --git a/game.js b/game.js index e78a6b5..b825de5 100644 --- a/game.js +++ b/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; \ No newline at end of file diff --git a/ricochet.html b/ricochet.html index 5d16655..af3ac3a 100644 --- a/ricochet.html +++ b/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; diff --git a/server.js b/server.js index 8cca235..a1251a3 100644 --- a/server.js +++ b/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) => {