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

Dragging robots.

Browse Source
master
Ben Burlingham 5 years ago
parent 4f124b5a6c
commit 0681a9bc95
3 changed files with 141 additions and 90 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. 64
      ricochet.css
  2. 163
      ricochet.html
  3. 4
      server.js

64
ricochet.css
Unescape View File

@ -43,6 +43,24 @@
}
#controls-guesses {
background: salmon;
}
.controls-guess {
background: yellow;
float: left;
font-size: 12px;
height: 30px;
line-height: 30px;
text-align: center;
width: 30px;
}
.controls-guess:hover {
background: orange;
}
.board-container {
background: conic-gradient(lime 0 25%, yellow 25% 50%, red 50% 75%, blue 75% 100%);
bottom: 0;
@ -52,14 +70,23 @@
top: 0;
}
#board {
#board-squares {
border-color: #aaa;
border-style: solid;
border-width: 1px 0 0 1px;
margin: 0 auto;
position: relative;
}
.board-square{
background: #ddd;
border-style: solid;
border-color: #aaa;
border-width: 0 1px 1px 0;
float: left;
height: 40px;
width: 40px;
}
.board-wall-x {
background: #222;
height: 8px;
@ -77,35 +104,18 @@
}
.board-robot {
border-radius: 18px;
/*border-radius: 20px;*/
border: 2px solid transparent;
height: 36px;
margin: 2px;
position: absolute;
width: 36px;
}
.square{
background: #ddd;
border-style: solid;
border-color: #aaa;
border-width: 0 1px 1px 0;
float: left;
height: 40px;
width: 40px;
}
.moves {
background: salmon;
}
.move-count {
background: yellow;
border-radius: 8px;
float: left;
font-size: 12px;
height: 16px;
line-height: 16px;
margin: 4px;
text-align: center;
width: 16px;
.board-robot-shadow {
background: red;
height: 36px;
opacity: 0.75;
position: absolute;
width: 36px;
}

163
ricochet.html
Unescape View File

@ -27,44 +27,13 @@
</div>
<div class="moves">
<div class="move-count">1</div>
<div class="move-count">2</div>
<div class="move-count">3</div>
<div class="move-count">4</div>
<div class="move-count">5</div>
<div class="move-count">6</div>
<div class="move-count">7</div>
<div class="move-count">8</div>
<div class="move-count">9</div>
<div class="move-count">10</div>
<br>
<div class="move-count">11</div>
<div class="move-count">12</div>
<div class="move-count">13</div>
<div class="move-count">14</div>
<div class="move-count">15</div>
<div class="move-count">16</div>
<div class="move-count">17</div>
<div class="move-count">18</div>
<div class="move-count">19</div>
<div class="move-count">20</div>
<br>
<div class="move-count">21</div>
<div class="move-count">22</div>
<div class="move-count">23</div>
<div class="move-count">24</div>
<div class="move-count">25</div>
<div class="move-count">26</div>
<div class="move-count">27</div>
<div class="move-count">28</div>
<div class="move-count">29</div>
<div class="move-count">30</div>
<div id="controls-guesses">
<div class='controls-subtitle'>Guess</div>
</div>
</div>
<div class="board-container">
<div id="board"></div>
<div id="board-squares"></div>
</div>
<script>
@ -76,6 +45,9 @@
// 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
const Cookie = {
getCookie: function(name) {
@ -95,16 +67,34 @@
};
const Controls = {
addPlayer: () => {
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);
}
},
guessClick: (evt) => {
alert(evt.currentTarget.dataset.value)
},
playerAdd: () => {
const rawInput = prompt("What is your name?");
connection.send(JSON.stringify({ head: { type: 'addPlayer' }, body: rawInput }))
connection.send(JSON.stringify({ head: { type: 'playerAdd' }, body: rawInput }))
},
removePlayer: (rawInput) => {
connection.send(JSON.stringify({ head: { type: 'removePlayer' }, body: rawInput }))
playerRemove: (rawInput) => {
connection.send(JSON.stringify({ head: { type: 'playerRemove' }, body: rawInput }))
},
updatePlayers: (names) => {
playersUpdate: (names) => {
const container = document.getElementById('controls-players');
console.log(names)
@ -130,43 +120,88 @@
},
};
const Robot = function([color, x, y]) {
this.color = color;
const el = document.createElement('div');
el.className = 'board-robot';
el.style.background = color;
el.style.left = 40 * x + 'px';
el.style.top = 40 * y + 'px';
el.addEventListener('mousedown', this.onMouseDown.bind(this));
this.shadow = document.createElement('div');
this.shadow.className = 'board-robot-shadow';
this.shadow.style.display = 'none';
Board.el.appendChild(el);
Board.el.appendChild(this.shadow);
};
Robot.prototype.onMouseDown = function(evt) {
document.body.addEventListener('mouseup', this.onMouseUp.bind(this));
document.body.addEventListener('mousemove', this.onDrag.bind(this));
this.shadow.style.display = 'block';
this.shadow.style.left = (this.snapX(evt.pageX) + 2) + 'px';
this.shadow.style.top = (this.snapY(evt.pageY) + 2) + 'px';
};
Robot.prototype.onDrag = function(evt) {
// this.shadow.style.left = (evt.pageX - Board.bounds.left - 18) + 'px';
// this.shadow.style.top = (evt.pageY - Board.bounds.top - 18) + 'px';
this.shadow.style.left = (this.snapX(evt.pageX) + 2) + 'px';
this.shadow.style.top = (this.snapY(evt.pageY) + 2) + 'px';
};
Robot.prototype.onMouseUp = function(evt) {
console.log('mouseup')
this.shadow.style.display = 'none';
document.removeEventListener('mouseup', this.onMouseUp);
document.removeEventListener('mousemove', this.onDrag);
};
Robot.prototype.snapX = (x) => {
const relativeX = Math.floor((x - Board.bounds.left) / Board.squareSize) * Board.squareSize;
const maxX = Board.squareSize * (Board.squaresPerSide - 1);
return Math.min(Math.max(0, relativeX), maxX);
};
Robot.prototype.snapY = (y) => {
const relativeY = Math.floor((y - Board.bounds.top) / Board.squareSize) * Board.squareSize;
const maxY = Board.squareSize * (Board.squaresPerSide - 1);
return Math.min(Math.max(0, relativeY), maxY);
};
const Board = {
bounds: document.getElementById('board-squares').getBoundingClientRect(),
el: document.getElementById('board-squares'),
squaresPerSide: 20,
squareSize: 40,
placeSquares: () => {
const board = document.getElementById('board');
Board.el.style.width = (Board.squaresPerSide * Board.squareSize + 1) + 'px';
Board.el.style.height = (Board.squaresPerSide * Board.squareSize + 1) + 'px';
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);
while (Board.el.hasChildElements) {
Board.el.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';
square.className = 'board-square';
board.appendChild(square);
Board.el.appendChild(square);
}
}
},
placeRobots: (robots) => {
robots.forEach(robot => {
const [color, x, y] = robot;
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);
})
robots.forEach(r => new Robot(r))
},
placeWall: (id, className, x, y) => {
@ -180,7 +215,7 @@
w.style.left = y + 'px';
w.className = className;
document.getElementById('board').appendChild(w);
Board.el.appendChild(w);
},
placeWalls: (walls) => {
@ -216,11 +251,15 @@
/////////////////////
window.addEventListener('load', Board.placeSquares)
window.addEventListener('load', () => {
Controls.guessBuild();
Board.placeSquares();
})
var connection = new WebSocket('ws://localhost:8080/ricochet', ['soap', 'xmpp']);
connection.onopen = Controls.addPlayer;
connection.onopen = Controls.playerAdd;
connection.onerror = console.error;
@ -241,7 +280,7 @@
break;
case 'players':
Controls.updatePlayers(data.body)
Controls.playersUpdate(data.body)
break;
case 'robots':

4
server.js
Unescape View File

@ -69,7 +69,7 @@ const Server = {
}
switch (message.head.type) {
case 'addPlayer':
case 'playerAdd':
DEBUG && console.log('Adding player: ');
DEBUG && console.log(ws.id);
DEBUG && console.log(message.body);
@ -77,6 +77,8 @@ const Server = {
G.addPlayer(ws.id, santizedName);
Server.messageAll({ head: { type: 'players' }, body: G.getPlayers() });
break;
case 'playerRemove':
break;
default:
console.warn("Unknown message type: ", message.head.type)
}

Write Preview
Loading…
Cancel
Save