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

Bounded movement inside walls.

Browse Source
master
Ben Burlingham 5 years ago
parent 97cf2dc632
commit ec22d54b1f
6 changed files with 150 additions and 112 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. 85
      client/board.js
  2. 60
      client/controls.js
  3. 28
      index.css
  4. 23
      index.html
  5. 4
      notes.txt
  6. 2
      server/game.js

85
client/board.js
Unescape View File

@ -2,20 +2,10 @@ const Board = function({ parent, squares }) {
this.parent = parent;
this.squares = squares;
this.blockers = {};
this.walls = {};
this.listeners = {};
this.drawSquares();
this.resetBlockers();
};
Board.prototype.resetBlockers = function() {
this.blockers = {
negativeI: null,
negativeJ: null,
positiveI: null,
positiveJ: null
};
};
Board.prototype.drawRobots = function(robots) {
@ -46,6 +36,8 @@ Board.prototype.drawRobots = function(robots) {
shadow.style.left = x + 'px';
shadow.style.top = y + 'px';
shadow.dataset.parentRobot = id;
shadow.dataset.currentI = i;
shadow.dataset.currentJ = j;
this.parent.appendChild(robot);
this.parent.appendChild(shadow);
@ -73,7 +65,11 @@ Board.prototype.drawSquares = function() {
};
Board.prototype.drawWalls = function(edges) {
this.walls = {};
edges.forEach(edge => {
this.walls[edge] = true;
const id = `wall-${edge}`;
if (document.getElementById(id)) {
@ -82,8 +78,6 @@ Board.prototype.drawWalls = function(edges) {
const [i1, j1, i2, j2] = edge.split('-');
console.log(edge)
const wall = document.createElement('div');
wall.id = id;
wall.title = edge;
@ -107,37 +101,61 @@ Board.prototype.drawWalls = function(edges) {
})
};
// i1 and j1 are the original position.
// i2 and j2 are the requested position.
// Check all the edges crossed between the two to find if it's a valid move.
Board.prototype.getBlockers = function({ i1, j1, i2, j2 }) {
// const upperEdge = `${i1}-${j1}-${i2}-${j2}`;
// const lowerEdge = `${i1}-${j1}-${i2}-${j2}`;
if (i1 === i2 && j1 < j2) {
if (i1 !== i2 && j1 !== j2) {
return "uh oh";
}
if (i1 === i2 && j1 == j2) {
return;
} else if (i1 === i2 && j1 > j2) {
// Moving up
// Moving down.
for (let j = j2; j < j1; j++) {
const edge = `${i1}-${j + 1}-${i1 + 1}-${j + 1}`;
if (this.walls[edge]) {
return document.querySelector(`[data-wall='${edge}']`);
}
}
} else if (j1 === j2 && i1 <= i2) {
this.blockers.positiveI && console.log(this.blockers.positiveI.i, i1)
} else if (i1 === i2 && j1 < j2) {
// Moving down.
for (let j = j1; j < j2; j++) {
const edge = `${i1}-${j + 1}-${i1 + 1}-${j + 1}`;
if (this.blockers.positiveI && this.blockers.positiveI.i <= i1) {
return this.blockers.positiveI.blockage;
if (this.walls[edge]) {
return document.querySelector(`[data-wall='${edge}']`);
}
}
} else if (j1 === j2 && i1 < i2) {
// Moving right.
for (let i = i1; i < i2; i++) {
const edge = `${i + 1}-${j1}-${i + 1}-${j1 + 1}`;
const rightEdge = `${i1 + 1}-${j1}-${i1 + 1}-${j1 + 1}`;
const wall = document.querySelector(`[data-wall='${rightEdge}']`);
if (this.walls[edge]) {
return document.querySelector(`[data-wall='${edge}']`);
}
}
} else if (j1 === j2 && i1 > i2) {
// Moving left.
for (let i = i2; i < i1; i++) {
const edge = `${i + 1}-${j1}-${i + 1}-${j1 + 1}`;
if (wall) {
this.blockers.positiveI = { i: i1 + 1, blockage: wall };
return wall;
if (this.walls[edge]) {
return document.querySelector(`[data-wall='${edge}']`);
}
}
} else {
// const leftEdge = `${i1}-${j1}-${i2}-${j2}`;
// console.log("Left edge: ", leftEdge)
}
return null;
// return "uh oh";
};
Board.prototype.onRobotDragStart = function(evt) {
@ -157,16 +175,15 @@ Board.prototype.onRobotDragStart = function(evt) {
};
Board.prototype.onRobotDrag = function(dragTarget, evt) {
const { i: i1, j: j1 } = this.squares.xyToIj({ x: evt.x - evt.movementX, y: evt.y - evt.movementY });
const i1 = dragTarget.dataset.currentI * 1;
const j1 = dragTarget.dataset.currentJ * 1;
// const { i: i1, j: j1 } = this.squares.xyToIj({ x: evt.x - evt.movementX, y: evt.y - evt.movementY });
const { i: i2, j: j2 } = this.squares.xyToIj({ x: evt.x, y: evt.y });
const blockage = this.getBlockers({ i1, j1, i2, j2 });
// console.warn(blockers)
if (blockage) {
console.log(blockage)
console.log("NOPE")
// this.onRobotDragStop(); works but i don't like it
// console.log(blockage)
return;
}
@ -177,8 +194,6 @@ Board.prototype.onRobotDrag = function(dragTarget, evt) {
};
Board.prototype.onRobotDragStop = function(_) {
this.resetBlockers();
document.body.removeEventListener('mouseup', this.listeners.onRobotDragStop);
document.body.removeEventListener('mousemove', this.listeners.onRobotDrag);
};

60
client/controls.js vendored
Unescape View File

@ -1,36 +1,45 @@
const Controls = {
guessBuild: () => {
const container = document.getElementById('controls-guesses');
container.querySelectorAll('.controls-guess').forEach(el => el.parentNode.removeChild(el));
for (let i = 1; i <= 30; i++) {
const guess = document.createElement('div');
guess.className = 'controls-guess';
guess.innerHTML = i;
guess.setAttribute('data-value', i);
guess.addEventListener('click', Controls.guessClick)
container.appendChild(guess);
const Controls = function(connection) {
this.connection = connection;
console.log(this.connection)
}
},
guessClick: (evt) => {
alert(evt.currentTarget.dataset.value)
},
// guessBuild: = function() {
// const container = document.getElementById('controls-guesses');
// container.querySelectorAll('.controls-guess').forEach(el => el.parentNode.removeChild(el));
// for (let i = 1; i <= 30; i++) {
// const guess = document.createElement('div');
// guess.className = 'controls-guess';
// guess.innerHTML = i;
// guess.setAttribute('data-value', i);
// guess.addEventListener('click', Controls.guessClick)
// container.appendChild(guess);
// }
// },
// guessClick: (evt) => {
// alert(evt.currentTarget.dataset.value)
// },
playerAdd: () => {
Controls.prototype.playerAdd = function() {
const rawInput = prompt("What is your name?");
connection.send(JSON.stringify({ head: { type: 'playerAdd' }, body: rawInput }))
},
this.connection.send(JSON.stringify({ head: { type: 'playerAdd' }, body: rawInput }))
};
playerRemove: (rawInput) => {
connection.send(JSON.stringify({ head: { type: 'playerRemove' }, body: rawInput }))
},
Controls.prototype.playerRemove = function(rawInput) {
this.connection.send(JSON.stringify({ head: { type: 'playerRemove' }, body: rawInput }))
};
playersUpdate: (names) => {
Controls.prototype.playersUpdate = function(names) {
const container = document.getElementById('controls-players');
console.log(names)
const keys = Object.keys(names);
if (keys.length > 0) {
const nobody = document.getElementById('controls-players-nobody');
nobody.parentNode.removeChild(nobody);
}
Object.keys(names).forEach(connectionId => {
keys.forEach(connectionId => {
const id = `player-${connectionId}`;
if (document.getElementById(id)) {
@ -49,5 +58,4 @@ const Controls = {
// container.removeChild(el);
// }
// })
},
};

28
index.css
Unescape View File

@ -24,12 +24,6 @@ body {
z-index: 1;
}
.controls-subtitle {
background-color: #4D3243;
color: #fff;
padding: 12px;
}
.controls-title {
background-color: #639978;
background-image: url('sprite-robots.png');
@ -40,21 +34,31 @@ body {
text-align: center;
}
.controls-room {
.controls-subtitle {
background-color: #4D3243;
color: #fff;
padding: 12px;
margin: 24px 0;
}
.controls-room span {
#controls-room {
}
.controls-room input {
.controls-room-error {
background: #e00000;
color: #fff;
margin: 4px 0;
padding: 8px;
}
.controls-room button {
#controls-players {
}
.controls-player {
padding: 8px;
}
#controls-guesses {
background: salmon;
}

23
index.html
Unescape View File

@ -15,10 +15,12 @@
<div id="controls-container">
<div class='controls-title'>Puzzle Robots</div>
<div class="controls-room">
<div id="controls-room">
<div class='controls-subtitle'>Room</div>
<input type="text" id='game-id'>
<button type='button'>&gt;</button>
<div class="controls-room-errors"></div>
</div>
<!-- <div class="rounds">
@ -28,6 +30,8 @@
<div id="controls-players">
<div class='controls-subtitle'>Players</div>
<div class="controls-player" id='controls-players-nobody'>Nobody is in the game yet.</div>
</div>
@ -41,15 +45,22 @@
<script>
window.addEventListener('load', () => {
const connection = new WebSocket('ws://localhost:8080/ricochet');
const squares = new Squares();
const controls = new Controls(connection);
const board = new Board({ parent: document.getElementById('content-container'), squares });
var connection = new WebSocket('ws://localhost:8080/ricochet', ['soap', 'xmpp']);
// connection.onopen = controls.playerAdd.bind(controls);
// connection.onopen = Controls.playerAdd;
connection.onerror = (err) => {
console.error(err);
connection.onerror = console.error;
const div = document.createElement('div');
div.className = 'controls-room-error';
div.innerHTML = "Can't reach the server.";
document.getElementById('controls-room').appendChild(div);
}
connection.onmessage = function (msg) {
const data = JSON.parse(msg.data)
@ -68,7 +79,7 @@
break;
case 'players':
// Controls.playersUpdate(data.body)
controls.playersUpdate(data.body)
break;
case 'robots':

4
notes.txt
Unescape View File

@ -1,12 +1,10 @@
// TODO dynamic sizing of squares based on available height
// TODO dynamic move population
// TODO move websocket server to /core
// TODO dynamic socket server resolution
// TODO namespace server to /ricochet
// TODO [soap, xmpp]
// TODO a message must have a head and a body
// TODO your favorite games
// TODO no cancel from name prompt
// TODO limit concurrent players
// TODO window resize update board
// TODO donate link
// TODO tutorial

2
server/game.js
Unescape View File

@ -32,6 +32,8 @@ Game.prototype.getRobots = function() {
Game.prototype.getWalls = function() {
// Edge IDs are of the form [i1-j1-i2-j2]. Top left is 0, 0.
return [
"1-3-1-4",
"4-1-5-1",
"4-8-5-8",
"8-3-8-4"
];

Write Preview
Loading…
Cancel
Save