ben.burlingham
/
ricochet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Features: Wall regeneration and robot repositioning.

Browse Source
master
Ben Burlingham 5 years ago
parent fd2280d497
commit 82f9604043
6 changed files with 165 additions and 38 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      client/board.js
  2. 38
      client/controls.js
  3. 18
      index.css
  4. 38
      index.html
  5. 19
      server.js
  6. 80
      server/game.js

10
client/board.js
Unescape View File

@ -123,6 +123,16 @@ Board.prototype.drawSquares = function() {
Board.prototype.drawWalls = function(edges) {
this.walls = {};
while (this.parent.getElementsByClassName('content-wall-x').length) {
const child = this.parent.getElementsByClassName('content-wall-x')[0];
child.parentNode.removeChild(child);
}
while (this.parent.getElementsByClassName('content-wall-y').length) {
const child = this.parent.getElementsByClassName('content-wall-y')[0];
child.parentNode.removeChild(child);
}
edges.forEach(edge => {
this.walls[edge] = true;

38
client/controls.js vendored
Unescape View File

@ -1,9 +1,13 @@
const Controls = function(connection) {
this.connection = connection;
const Controls = function() {
this.moves = 0;
document.addEventListener('move-increment', this.onMoveIncrement.bind(this));
document.getElementById('controls-moves-reset').addEventListener('click', this.onMoveReset.bind(this));
document.getElementById('controls-next-round').addEventListener('click', this.onStartNextGame.bind(this));
document.getElementById('controls-regenerate-walls').addEventListener('click', this.onRegenWalls.bind(this));
document.getElementById('controls-reposition-robots').addEventListener('click', this.onRepositionRobots.bind(this));
// document.getElementById('controls-timer-skip').addEventListener('click', this.onSkipTimer.bind(this));
}
// guessBuild: = function() {
@ -25,12 +29,17 @@ const Controls = function(connection) {
// },
Controls.prototype.playerAdd = function() {
const rawInput = prompt("What is your name?");
this.connection.send(JSON.stringify({ head: { type: 'playerAdd' }, body: rawInput }))
const names = ["Biff", "Morty", "Herb", "Chester", "Lyle", "Cap", "Dale", "Ned", "Mindy"]
const r = Math.floor(Math.random() * names.length);
const rawInput = names[r] //prompt("What is your name?");
const evt = new CustomEvent('playerAdd', { detail: rawInput });
document.dispatchEvent(evt);
};
Controls.prototype.playerRemove = function(rawInput) {
this.connection.send(JSON.stringify({ head: { type: 'playerRemove' }, body: rawInput }))
alert('nope')
};
Controls.prototype.playersUpdate = function(names) {
@ -72,6 +81,21 @@ Controls.prototype.onMoveReset = function() {
this.moves = 0;
document.getElementById('controls-moves').innerHTML = this.moves;
var event = new Event('board-reset');
const event = new Event('board-reset');
document.dispatchEvent(event);
};
};
Controls.prototype.onStartNextGame = function() {
const evt = new Event('board-reset');
document.dispatchEvent(evt);
}
Controls.prototype.onRegenWalls = function() {
const evt = new Event('regenerateWalls');
document.dispatchEvent(evt);
}
Controls.prototype.onRepositionRobots = function() {
const evt = new Event('repositionRobots');
document.dispatchEvent(evt);
}

18
index.css
Unescape View File

@ -16,8 +16,8 @@ body {
#controls-container {
background: #e7e7e7;
border: solid #c7c7c7;
border-width: 0 1px;
border: solid #e7e7e7;
border-width: 0 10px;
bottom: 0;
left: 20px;
position: absolute;
@ -38,6 +38,7 @@ body {
.controls-subtitle {
background-color: #4D3243;
background-image: linear-gradient(90deg, #4D3243, #3C2132);
color: #fff;
padding: 12px;
margin: 24px 0 12px 0;
@ -59,19 +60,22 @@ body {
.controls-button {
background: none;
border: 1px solid #888;
color: #666;
color: #444;
cursor: pointer;
font-size: 12px;
padding: 4px 8px;
}
.controls-button:hover {
background: #ddd;
border-color: #444;
color: #222;
background: #639699;
border-color: #639699;
color: #fff;
}
#controls-room {
#controls-start {
display: block;
margin: 0 auto;
padding: 4px 8px;
}
.controls-room-error {

38
index.html
Unescape View File

@ -13,10 +13,8 @@
</head>
<body>
<div id="controls-container">
<div class='controls-title'>Puzzle Robots</div>
<div id="controls-room">
<div class='controls-subtitle'>Room</div>
<div id="controls-manage">
<div class='controls-subtitle'>Manage</div>
<div class="controls-row">
<div>Room ID</div>
@ -26,7 +24,23 @@
<div class="controls-room-errors"></div>
<button type='button' id='game-start'>Start New Round</button>
<div class="controls-row">
<div>Start Next Round</div>
<div>&nbsp;</div>
<div class='controls-button' id='controls-next-round'>Do It</div>
</div>
<div class="controls-row">
<div>Move Robots</div>
<div>&nbsp;</div>
<div class='controls-button' id='controls-reposition-robots'>Reposition</div>
</div>
<div class="controls-row">
<div>Move Walls</div>
<div>&nbsp;</div>
<div class='controls-button' id='controls-regenerate-walls'>Regenerate</div>
</div>
</div>
<div id="controls-players">
@ -66,7 +80,19 @@
const controls = new Controls(connection);
const board = new Board({ parent: document.getElementById('content-container'), squares });
// connection.onopen = controls.playerAdd.bind(controls);
connection.onopen = controls.playerAdd.bind(controls);
document.addEventListener('repositionRobots', () => {
connection.send(JSON.stringify({ head: { type: 'repositionRobots' }}));
});
document.addEventListener('regenerateWalls', () => {
connection.send(JSON.stringify({ head: { type: 'regenerateWalls' }}));
});
document.addEventListener('playerAdd', (evt) => {
connection.send(JSON.stringify({ head: { type: 'playerAdd' }, rawBody: evt.detail }));
});
connection.onerror = (err) => {
console.error(err);

19
server.js
Unescape View File

@ -52,8 +52,8 @@ const Server = {
ws.on('close', Server.onDisconnect.bind(null, ws))
Server.messageAll({ head: { type: 'connect' }, body: { id: ws.id }});
Server.messageAll({ head: { type: 'walls' }, body: G.getWalls()})
Server.messageAll({ head: { type: 'robots' }, body: G.getRobots()})
Server.messageAll({ head: { type: 'walls' }, body: G.getWalls()});
Server.messageAll({ head: { type: 'robots' }, body: G.getRobots()});
},
onMessage: (ws, json) => {
@ -62,7 +62,7 @@ const Server = {
DEBUG && console.log('Received message: ');
DEBUG && console.log(message);
if (!message.head || !message.body) {
if (!message.head) {
DEBUG && console.warn("Unprocessable message: ")
DEBUG && console.warn(message);
return;
@ -72,13 +72,22 @@ const Server = {
case 'playerAdd':
DEBUG && console.log('Adding player: ');
DEBUG && console.log(ws.id);
DEBUG && console.log(message.body);
const santizedName = message.body.replace(/[^\w ]/g, '');
DEBUG && console.log(message.rawBody);
const santizedName = message.rawBody.replace(/[^\w ]/g, '');
G.addPlayer(ws.id, santizedName);
Server.messageAll({ head: { type: 'players' }, body: G.getPlayers() });
break;
case 'playerRemove':
break;
case 'repositionRobots':
Server.messageAll({ head: { type: 'robots' }, body: G.getRobots()});
break;
case 'regenerateWalls':
Server.messageAll({ head: { type: 'walls' }, body: G.getWalls()});
break;
case 'newRound':
break;
default:
console.warn("Unknown message type: ", message.head.type)
}

80
server/game.js
Unescape View File

@ -22,23 +22,77 @@ Game.prototype.getPlayers = function() {
}
Game.prototype.getRobots = function() {
return [
{i: 9, j: 9, color: '#E00000' },
{i: 18, j: 9, color: '#00C000' },
{i: 1, j: 9, color: '#0000FF' },
{i: 9, j: 18, color: '#00C0C0' },
{i: 9, j: 1, color: '#F000F0' },
];
const robots = ['#E00000', '#00C000', '#0000FF', '#00C0C0', '#F000F0'];
const squaresPerSide = 20;
const gen = () => Math.floor(Math.random() * squaresPerSide);
// Leave here for testing.
// return [
// {i: 9, j: 9, color: '#E00000' },
// {i: 18, j: 9, color: '#00C000' },
// {i: 1, j: 9, color: '#0000FF' },
// {i: 9, j: 18, color: '#00C0C0' },
// {i: 9, j: 1, color: '#F000F0' },
// ];
return robots.map(color => ({ i: gen(), j: gen(), color }));
}
Game.prototype.getWalls = function() {
// Edge IDs are of the form [i1-j1-i2-j2]. Top left is 0, 0.
return [
"1-9-1-10",
"9-1-10-1",
"9-19-10-19",
"19-9-19-10"
];
// Leave here for testing.
// return [
// "1-9-1-10",
// "9-1-10-1",
// "9-19-10-19",
// "19-9-19-10"
// ];
console.log("Generating walls.");
// Squares per side has quadratic relationship with wall/corner requirements.
const squaresPerSide = 20;
const numberOfCorners = Math.ceil(Math.pow((squaresPerSide / 10), 2));
const numberOfWalls = Math.ceil(Math.pow((squaresPerSide / 5), 2));
const gen = () => Math.floor(Math.random() * squaresPerSide + 1);
const edges = [];
// DO NUMBER OF CORNERS FIRST AFTER TESTING
for (let n = 0; n < numberOfWalls; n++) {
const ri = gen();
const rj = gen();
const isHorizontal = Math.random() < 0.5;
const isBackward = Math.random() < 0.5;
let i1, j1, i2, j2;
if (isHorizontal) {
i1 = isBackward ? ri - 1 : ri;
i2 = isBackward ? ri : ri + 1;
j1 = rj;
j2 = rj;
} else {
i1 = ri;
i2 = ri;
j1 = isBackward ? rj - 1 : rj;
j2 = isBackward ? rj : rj + 1;
}
const edge = `${i1}-${j1}-${i2}-${j2}`;
if (edges.includes(edge)) {
n--;
} else {
edges.push(edge);
}
}
return edges;
};
module.exports = Game;
Write Preview
Loading…
Cancel
Save