From df573afc900796b5de050373cf46580782c06844 Mon Sep 17 00:00:00 2001 From: Ben Burlingham Date: Fri, 22 May 2020 19:59:00 -0700 Subject: [PATCH] Drawing walls. --- game.js | 16 +++++- ricochet.html | 154 ++++++++++++++++++++++++++++++++++++++------------ server.js | 4 +- 3 files changed, 133 insertions(+), 41 deletions(-) diff --git a/game.js b/game.js index a506f8c..e78a6b5 100644 --- a/game.js +++ b/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; \ No newline at end of file diff --git a/ricochet.html b/ricochet.html index 08dc3e1..5d16655 100644 --- a/ricochet.html +++ b/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{ @@ -165,47 +182,110 @@ // console.log(data); // }); -// 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); -}; - -// Log messages from the server -connection.onmessage = function (e) { - console.log('Server: ' + e.data); -}; - -document.getElementById('game-start').addEventListener('click', () => { - connection.send('says hello!') -}) - - 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'; - - while (board.hasChildElements) { - board.removeChild(board.firstChild); - } + // BROWSER + var connection = new WebSocket('ws://localhost:8080/ricochet', ['soap', 'xmpp']); + + // 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; + + case 'walls': + Board.placeWalls(data.body); + break; + } + }; + + + + document.getElementById('game-start').addEventListener('click', () => { + connection.send('says hello!') + }) - for (let i = 0; i < squaresPerSide; i++) { - for (let j = 0; j < squaresPerSide; j++) { - const square = document.createElement('div'); - square.className = 'square'; + const Board = { + squaresPerSide: 20, + squareSize: 40, - board.appendChild(square); + placeSquares: () => { + const board = document.getElementById('board'); + + 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 < 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) + \ No newline at end of file diff --git a/server.js b/server.js index b13e201..8cca235 100644 --- a/server.js +++ b/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))