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

UI overhaul. Centralized game state.

Browse Source
master
Ben Burlingham 5 years ago
parent e8d1fec9b6
commit c20f9d1534
16 changed files with 463 additions and 531 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 11
      README.txt
  2. BIN
      assets/gas-giant.png
  3. BIN
      assets/stars.png
  4. 6
      client/connection.js
  5. 121
      client/controls.js
  6. 32
      client/grid.js
  7. 52
      client/join.js
  8. 100
      controls.css
  9. 16
      index.css
  10. 159
      index.html
  11. 102
      join.css
  12. 163
      server/ricochet.js
  13. 6
      socket/messenger.js
  14. 198
      style/controls.css
  15. 2
      style/grid.css
  16. 26
      style/index.css

11
README.txt
Unescape View File

@ -9,23 +9,26 @@ Any movement, including initial locations, is represented by pushing or popping
A victory state can be stored by taking a snapshot of the current stack. A victory state can be stored by taking a snapshot of the current stack.
## Icons ## Credit
Icons from [https://game-icons.net](https://game-icons.net) Icons from [https://game-icons.net](https://game-icons.net)
## TODO ## TODO
- win declare - win declare
- replay stack - replay stack
- countdown skip - countdown skip
- Extract loader from join.css and kill join.css, join.js
- slide arrows - slide arrows
- chat box - chat box
- no cancel from name prompt - no cancel from name prompt
- restore state on join - clear out the trash bins of history (client)
- handle conn interrupt
- donate link heart fill in not underline
- Robots not resizing (shadows do though)
- limit concurrent players, make sure connections are closed - limit concurrent players, make sure connections are closed
- move websocket server to /core - move websocket server to /core
- dynamic socket server resolution - dynamic socket server resolution
- walls and winstate algorithm - walls and winstate algorithm
- restore name prompt
- tutorial - tutorial
- donate link - donate link

BIN
assets/gas-giant.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
assets/stars.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

6
client/connection.js
Unescape View File

@ -39,7 +39,8 @@ Connection.prototype.connect = function(){
const names = ["Biff", "Morty", "Herb", "Chester", "Lyle", "Cap", "Dale", "Ned", "Mindy", "Frankie", "Gabriel", "Mona", "Dolores", const names = ["Biff", "Morty", "Herb", "Chester", "Lyle", "Cap", "Dale", "Ned", "Mindy", "Frankie", "Gabriel", "Mona", "Dolores",
"Sepulveda", "Venus", "Blingbing", "Cyrpt"] "Sepulveda", "Venus", "Blingbing", "Cyrpt"]
const r = Math.floor(Math.random() * names.length); const r = Math.floor(Math.random() * names.length);
const rawInput = names[r] //prompt("What is your name?"); const rawInput = names[r]
// const rawInput = prompt("What is your name?");
this.ws = new WebSocket('ws://localhost:8080/ricochet?name=' + rawInput); this.ws = new WebSocket('ws://localhost:8080/ricochet?name=' + rawInput);
@ -74,14 +75,15 @@ Connection.prototype.onReceiveMessage = function({ data }) {
let eventName; let eventName;
switch (msg.type) { switch (msg.type) {
case 'connected': eventName = 'G-connected'; break;
case 'countdown': eventName = 'G-countdown'; break; case 'countdown': eventName = 'G-countdown'; break;
case 'connected': eventName = 'G-connected'; break;
case 'guess': eventName = 'G-guess'; break; case 'guess': eventName = 'G-guess'; break;
case 'players': eventName = 'G-players'; break; case 'players': eventName = 'G-players'; break;
case 'robots': eventName = 'G-robots'; break; case 'robots': eventName = 'G-robots'; break;
case 'skip': eventName = 'G-skip'; break; case 'skip': eventName = 'G-skip'; break;
case 'solve': eventName = 'G-solve'; break; case 'solve': eventName = 'G-solve'; break;
case 'start': eventName = 'G-start'; break; case 'start': eventName = 'G-start'; break;
case 'state': eventName = 'G-state'; break;
case 'stop': eventName = 'G-stop'; break; case 'stop': eventName = 'G-stop'; break;
case 'walls': eventName = 'G-walls'; break; case 'walls': eventName = 'G-walls'; break;
case 'winstate': eventName = 'G-winstate'; break; case 'winstate': eventName = 'G-winstate'; break;

121
client/controls.js vendored
Unescape View File

@ -4,35 +4,35 @@ const Controls = function() {
const evt = new Event('L-join');
document.dispatchEvent(evt);
// this.starts = []; // this.starts = [];
// this.timers = {}; // this.timers = {};
// // "Local" and "Global" messages // // "Local" and "Global" messages
// document.addEventListener('L-connected', this.msgConnected.bind(this)); document.addEventListener('L-conn-error', this.msgConnectionError.bind(this));
document.addEventListener('L-stack', this.msgStack.bind(this)); document.addEventListener('L-stack', this.msgStack.bind(this));
// document.addEventListener('L-reset', this.msgReset.bind(this)); // document.addEventListener('L-reset', this.msgReset.bind(this));
// document.addEventListener('L-undo', this.msgUndo.bind(this)); // document.addEventListener('L-undo', this.msgUndo.bind(this));
// document.addEventListener('G-guess', this.msgGuess.bind(this)); // document.addEventListener('G-guess', this.msgGuess.bind(this));
document.addEventListener('G-countdown', this.msgCountdown.bind(this)); document.addEventListener('G-connected', this.msgCountdown.bind(this));
document.addEventListener('G-countdown', this.msgConnected.bind(this));
document.addEventListener('G-players', this.msgPlayers.bind(this)); document.addEventListener('G-players', this.msgPlayers.bind(this));
document.addEventListener('G-skip', this.msgSkip.bind(this)); // document.addEventListener('G-skip', this.msgSkip.bind(this));
document.addEventListener('G-start', this.msgStart.bind(this)); // document.addEventListener('G-start', this.msgStart.bind(this));
document.addEventListener('G-stop', this.msgStop.bind(this)); document.addEventListener('G-state', this.msgState.bind(this));
// document.addEventListener('G-stop', this.msgStop.bind(this));
// Click handlers // Click handlers
document.getElementById('controls-reset').addEventListener('click', this.onClickReset.bind(this)); // document.getElementById('controls-reset').addEventListener('click', this.onClickReset.bind(this));
document.getElementById('controls-robots').addEventListener('click', this.onClickRobots.bind(this)); // document.getElementById('controls-robots').addEventListener('click', this.onClickRobots.bind(this));
document.getElementById('controls-skip').addEventListener('click', this.onClickSkip.bind(this)); // document.getElementById('controls-skip').addEventListener('click', this.onClickSkip.bind(this));
document.getElementById('controls-start').addEventListener('click', this.onClickStart.bind(this)); // document.getElementById('controls-start').addEventListener('click', this.onClickStart.bind(this));
document.getElementById('controls-stop').addEventListener('click', this.onClickStop.bind(this)); // document.getElementById('controls-stop').addEventListener('click', this.onClickStop.bind(this));
document.getElementById('controls-submit').addEventListener('click', this.onClickSubmit.bind(this)); // document.getElementById('controls-submit').addEventListener('click', this.onClickSubmit.bind(this));
document.getElementById('controls-undo').addEventListener('click', this.onClickUndo.bind(this)); // document.getElementById('controls-undo').addEventListener('click', this.onClickUndo.bind(this));
document.getElementById('controls-walls').addEventListener('click', this.onClickWalls.bind(this)); // document.getElementById('controls-walls').addEventListener('click', this.onClickWalls.bind(this));
this.setState('CONNECTING');
} }
//===== Countdown //===== Countdown
@ -84,62 +84,81 @@ const Controls = function() {
// document.getElementById('controls-panic').style.display = ''; // document.getElementById('controls-panic').style.display = '';
// }; // };
Controls.prototype.setState = function(state) {
const blocks = [
'controls-connection',
'controls-countdown',
'controls-moves',
'controls-options',
'controls-players',
'controls-solution',
];
blocks.forEach(id => document.getElementById(id).style.display = 'none');
// IDs to show for each state.
const STATE = {
CONNECTING: ['controls-connection'],
PLAY: ['controls-players', 'controls-moves', 'controls-options'],
COUNTDOWN: ['controls-players', 'controls-moves', 'controls-countdown'],
SOLUTION: ['controls-players', 'controls-solution']
};
(STATE[state] || []).forEach(id => document.getElementById(id).style.display = 'block');
};
//===== Message handlers //===== Message handlers
Controls.prototype.msgConnected = function() {
};
Controls.prototype.msgConnectionError = function() {
this.setState('CONNECTING');
};
Controls.prototype.msgCountdown = function(evt) { Controls.prototype.msgCountdown = function(evt) {
// this.showWaiting();
console.error(evt);
alert("COUNTDOWN RECEIVED");
}; };
Controls.prototype.msgStack = function(evt) { Controls.prototype.msgStack = function(evt) {
const robots = evt.detail.reduce((acc, { id }) => acc.has(id) ? acc : acc.add(id), new Set()); const robots = evt.detail.reduce((acc, { id }) => acc.has(id) ? acc : acc.add(id), new Set());
const moveCount = evt.detail.length - robots.size; const moveCount = evt.detail.length - robots.size;
document.getElementById('controls-moves').innerHTML = moveCount; // document.getElementById('controls-moves').innerHTML = moveCount;
document.getElementById('controls-undo').style.display = moveCount > 0 ? 'block' : 'none'; // document.getElementById('controls-undo').style.display = moveCount > 0 ? 'block' : 'none';
}; };
Controls.prototype.msgPlayers = function(evt) { Controls.prototype.msgPlayers = function(evt) {
const container = document.getElementById('controls-players'); this.names = evt.detail.body;
const names = evt.detail.body;
const keys = Object.keys(names);
if (keys.length > 0) {
const nobody = document.getElementById('controls-players-nobody');
nobody && nobody.parentNode.removeChild(nobody);
}
keys.forEach(connectionId => { const container = document.getElementById('controls-players');
const id = `player-${connectionId}`; container.querySelectorAll('.controls-player').forEach(el => {
container.removeChild(el);
if (document.getElementById(id)) {
return;
}
const n = document.createElement('div');
n.id = id;
n.innerHTML = names[connectionId];
n.className = 'controls-player';
container.appendChild(n)
}); });
this.names = names; const keys = Object.keys(this.names);
if (keys.length > 1) {
keys.forEach(connectionId => {
const n = document.createElement('div');
n.innerHTML = this.names[connectionId];
n.className = 'controls-player';
container.appendChild(n)
});
}
container.querySelectorAll('.controls-player').forEach(el => { const msg = container.querySelector('.controls-message');
const id = el.id.split('player-').pop(); msg.innerHTML = (keys.length > 1 ? '' : 'Nobody is in the game yet.');
if (!this.names[id]) { msg.style.display = (keys.length > 1 ? 'none' : 'block');
container.removeChild(el);
}
});
}; };
Controls.prototype.msgSkip = function() { Controls.prototype.msgSkip = function() {
// this.coundownComplete(); // this.coundownComplete();
}; };
Controls.prototype.msgStart = function() { Controls.prototype.msgState = function(evt) {
// // this.setState(evt.detail.body);
this.setState('SOLUTION')
}; };
Controls.prototype.msgStop = function() { Controls.prototype.msgStop = function() {

32
client/grid.js
Unescape View File

@ -432,35 +432,3 @@ Grid.prototype.msgWinState = function(evt) {
this.winstate = evt.detail.body; this.winstate = evt.detail.body;
this.drawWinState(); this.drawWinState();
}; };
//============ THE TRASH BIN OF HISTORY
// Content.prototype.drawRobot = function({ id, i, j }) {
// const robot = document.getElementById(`robot-${id}`);
// const arrows = document.getElementById(`arrows-${id}`);
// const { x, y } = this.ijToXy({ i, j });
// const s = this.squares.sideLength;
// robot.style.display = 'block';
// robot.style.left = x + 'px';
// robot.style.top = y + 'px';
// robot.dataset.i = i;
// robot.dataset.j = j;
// this.robots[`${i}-${j}`] = id;
// arrows.style.display = 'block';
// arrows.style.left = (x - s) + 'px';
// arrows.style.top = (y - s) + 'px';
// };
// Content.prototype.ijToXy = function({ i, j }) {
// if ((i !== 0 && !i) || (j !== 0 && !j)) {
// return
// }
// return {
// x: this.squares.x0 + i * this.squares.sideLength,
// y: this.squares.y0 + j * this.squares.sideLength
// }
// };

52
client/join.js
Unescape View File

@ -1,52 +0,0 @@
const Join = function() {
document.addEventListener('L-conn-error', this.onConnectionError.bind(this));
document.addEventListener('L-conn-open', this.onConnectionOpen.bind(this));
document.getElementById('join-setup-start').addEventListener('click', this.onClickStart.bind(this));
document.getElementById('join-setup-go').addEventListener('click', this.onClickStart.bind(this));
document.getElementById('join-setup-back').addEventListener('click', this.onClickBack.bind(this));
this.showSetup();
};
Join.prototype.showSetup = function() {
document.getElementById('join-setup').style.display = 'block';
document.getElementById('join-connect').style.display = 'none';
document.getElementById('join-error').style.display = 'none';
};
Join.prototype.showLoad = function() {
document.getElementById('join-setup').style.display = 'none';
document.getElementById('join-connect').style.display = 'block';
document.getElementById('join-error').style.display = 'none';
};
Join.prototype.showError = function() {
document.getElementById('join-setup').style.display = 'none';
document.getElementById('join-connect').style.display = 'none';
document.getElementById('join-error').style.display = 'block';
};
Join.prototype.onClickBack = function() {
this.showSetup();
};
Join.prototype.onClickGo = function() {
this.showLoad();
};
Join.prototype.onClickStart = function() {
this.showLoad();
const evt = new Event('L-join');
document.dispatchEvent(evt);
};
Join.prototype.onConnectionError = function() {
this.showError();
};
Join.prototype.onConnectionOpen = function() {
document.getElementById('join').style.display = 'none';
this.showSetup();
};

100
controls.css
Unescape View File

@ -1,100 +0,0 @@
#controls-container {
background: #e7e7e7;
border: solid #e7e7e7;
border-width: 0 10px;
bottom: 0;
left: 20px;
position: absolute;
top: 0;
width: 300px;
z-index: 1;
}
.controls-title {
background-color: #639978;
background-image: url('sprite-robots.png');
/*color: #fff;*/
font-size: 12px;
line-height: 48px;
margin-bottom: 24px;
text-align: center;
}
.controls-subtitle {
background-color: #4D3243;
background-image: linear-gradient(90deg, #4D3243, #3C2132);
color: #fff;
padding: 12px;
margin: 24px 0 12px 0;
}
.controls-alert-info {
background: #21dfae;
color: #222;
padding: 12px;
margin: 24px 0 12px 0;
}
.controls-alert-urgent {
background: #DE4F21;
color: #fff;
padding: 12px;
margin: 24px 0 12px 0;
}
.controls-row {
align-items: center;
display: flex;
flex-direction: row;
padding: 8px;
}
.controls-row :nth-child(2) {
flex: 1;
margin: 0 8px;
width: 100%;
}
.controls-player {
padding: 8px;
}
#controls-footer {
bottom: 0;
left: 0;
padding: 24px;
position: absolute;
right: 0;
text-align: center;
}
#controls-footer a {
color: #639699;
font-size: 24px;
text-decoration: none;
}
#controls-footer a:hover {
text-decoration: underline;
}
.controls-button {
background: none;
border: 1px solid #888;
color: #444;
cursor: pointer;
font-size: 12px;
padding: 4px 8px;
}
.controls-button:hover {
background: #21dfae;
border-color: #21dfae;
color: #222;
}
#controls-start {
display: block;
margin: 0 auto;
padding: 4px 8px;
}

16
index.css
Unescape View File

@ -1,16 +0,0 @@
* {
box-sizing: border-box;
font-family: Montserrat;
}
body {
overflow: hidden;
}
/*
PALETTE:
21DFAE Aquamarine
4D3243 Plum
DE4F21 Fire
639699 Cadet
*/

159
index.html
Unescape View File

@ -1,115 +1,92 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Robots</title> <title>Robots</title>
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="style/index.css">
<link rel="stylesheet" href="controls.css"> <link rel="stylesheet" href="style/controls.css">
<link rel="stylesheet" href="grid.css"> <link rel="stylesheet" href="style/grid.css">
<link rel="stylesheet" href="join.css"> <link href="https://fonts.googleapis.com/css2?family=Days+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet"> <script type='text/javascript' src='client/connection.js'></script>
<script type='text/javascript' src='client/connection.js'></script> <script type='text/javascript' src='client/controls.js'></script>
<script type='text/javascript' src='client/controls.js'></script> <script type='text/javascript' src='client/cookie.js'></script>
<script type='text/javascript' src='client/cookie.js'></script> <script type='text/javascript' src='client/grid.js'></script>
<script type='text/javascript' src='client/grid.js'></script> <script type='text/javascript' src='client/stack.js'></script>
<script type='text/javascript' src='client/icons.js'></script> </head>
<script type='text/javascript' src='client/stack.js'></script> <body>
</head> <div id="controls-container">
<body> <div class='controls-block' id="controls-players">
<!-- <div id="join"> <div class="controls-title">Players</div>
<div id='join-setup'> <div class="controls-message"></div>
<button type='button' class='join-button' id='join-setup-start'>Start a new game</button> </div>
<div class='join-message'>- or -</div>
<input type="text" placeholder="Join a game" />
<button type='text' class='join-button' id='join-setup-go'>Go</button>
</div>
<div id="join-connect"> <div class='controls-block' id="controls-moves">
<div class='join-message'>Contacting Server</div> <div class="controls-title">Moves</div>
</div> <div id='controls-moves-count'>24</div>
<div id="join-error"> <div class="controls-moves-buttons-layout">
<div class='join-message'>Can't reach the server.</div> <div class='controls-button' id='controls-undo'>Undo</div>
<button type='text' class='join-button' id='join-setup-back'>Back</button> <div class='controls-button' id='controls-reset'>Reset</div>
</div> </div>
</div>
-->
<div id="controls-container">
<div id="controls-manage">
<div class='controls-subtitle'>Global</div>
<div class="controls-row"> <div class='controls-button' id='controls-submit'>Solve the puzzle</div>
<div>Start Next Round</div>
<div>&nbsp;</div>
<div class='controls-button' id='controls-start'>Do It</div>
</div> </div>
<div class="controls-row"> <div class='controls-block' id="controls-options">
<div>Stop This Round</div> <div class="controls-title">Options</div>
<div>&nbsp;</div> <div class='controls-button' id='controls-robots'>Move Robots</div>
<div class='controls-button' id='controls-stop'>Yeah</div> <div class='controls-button' id='controls-walls'>Move Walls</div>
</div> </div>
<div class="controls-row"> <div class='controls-block' id='controls-connection'>
<div>Move Robots</div> <div class="controls-message" id="controls-connecting">Connecting...</div>
<div>&nbsp;</div> <div class="controls-message" id='controls-error'>Can't reach the server.</div>
<div class='controls-button' id='controls-robots'>Reposition</div>
</div> </div>
<div class="controls-row"> <div class='controls-block' id="controls-countdown">
<div>Move Walls</div> <div class='controls-title'>Aardvark Matthews Dunkirk has a solution!</div>
<div>&nbsp;</div>
<div class='controls-button' id='controls-walls'>Regenerate</div> <div class="controls-countdown-values-layout">
</div> <div id="controls-solution-value">11</div>
</div> <div id="controls-countdown-value">19</div>
</div>
<div id="controls-players"> <div class='controls-button' id='controls-skip'>Skip</div>
<div class='controls-subtitle'>Players</div> </div>
<div class="controls-player" id='controls-players-nobody'>Nobody is in the game yet.</div> <div class='controls-block' id="controls-solution">
</div> <div class='controls-title'>Round over</div>
<div class="controls-message" id='controls-solution-message'>Congrats Aardvark Matthews Dunkirk!</div>
<div id="controls-local"> <div id='controls-solution-count'>24</div>
<div class='controls-subtitle'>Local</div>
<div class="controls-row">
<div>Moves:</div>
<div id="controls-moves"></div>
<div class='controls-button' id='controls-undo'>Undo</div>
<div class='controls-button' id='controls-reset'>Reset</div>
</div>
<button id='controls-submit'>Submit</button> <div class='controls-button' id='controls-solution-replay'>Replay</div>
<div id="controls-panic"> <div class='controls-button' id='controls-next'>Start next round</div>
<div class='controls-alert-urgent'></div> </div>
<div class="controls-row"> <div id="controls-footer">
<div>Countdown:</div> <a href='http://buymeacoff.ee/5EGitAV' target='_blank'>&#9825;</a>
<div id="controls-countdown">30 seconds!</div>
<div class='controls-button' id='controls-skip'>Skip</div>
</div>
</div> </div>
</div> </div>
<div id="controls-footer"> <div id="content-container">
<a href='http://buymeacoff.ee/5EGitAV' target='_blank'>&#9825;</a> <div id="content-grid"></div>
</div> </div>
</div>
<div id="content-container"> <script>
<div id="content-grid"></div> window.addEventListener('load', () => {
</div> // Order-independent. Communication via local events.
new Connection();
new Controls();
new Grid();
new Stack();
<script> // Entry point.
window.addEventListener('load', () => { const evt = new Event('L-join');
// Order-independent. Communication via local events. document.dispatchEvent(evt);
new Connection(); })
new Controls(); </script>
new Grid(); </body>
new Stack();
})
</script>
</body>
</html> </html>

102
join.css
Unescape View File

@ -1,102 +0,0 @@
#join {
background-color: #28313b;
background-image: linear-gradient(315deg, #28313b 0%, #1A2026 74%);
bottom: 0;
color: #e7e7e7;
display: flex;
flex-direction: column;
justify-content: center;
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 0;
z-index: 10;
}
.join-button {
background: none;
border: 1px solid #888;
color: #ccc;
cursor: pointer;
font-size: 32px;
height: 72px;
line-height: 72px;
vertical-align: middle;
}
.join-button:hover {
background: #21dfae;
border-color: #21dfae;
color: #222;
}
.join-message {
font-size: 24px;
line-height: 72px;
}
#join-setup-start,
#join-setup-back {
width: 500px;
}
#join-setup-go {
width: 96px;
}
#join-setup .join-message {
margin: 24px 0;
}
#join-setup input {
border: 0;
font-size: 32px;
height: 72px;
line-height: 72px;
margin-right: 40px;
padding: 0 24px;
vertical-align: middle;
width: 360px;
}
@keyframes LoadingBackground {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
#join-connect {
animation: LoadingBackground 8s infinite;
background-size: 230% 230%;
background-image: linear-gradient(90deg, #21DFAE 600px, #FFF 600px, #FFF 605px, #21DFAE 605px);
color: #222;
display: none;
font-size: 32px;
height: 72px;
margin: 0 auto;
text-align: center;
width: 500px;
}
#join-error {
display: none;
font-size: 32px;
height: 264px;
line-height: 264px;
margin: 0 auto;
position: relative;
text-align: center;
width: 500px;
}
#join-error .join-message {
background-color: #DE4F21;
color: #fff;
}
#join-error button {
position: absolute;
bottom: 0;
left: 0;
}

163
server/ricochet.js
Unescape View File

@ -1,39 +1,44 @@
const uuid = require('node-uuid'); const uuid = require('node-uuid');
const UrlParser = require('url');
const DEBUG = (process.env.NODE_ENV !== "production"); const DEBUG = (process.env.NODE_ENV !== "production");
const STATE = {
COUNTDOWN: 'COUNTDOWN',
PLAY: 'PLAY',
SOLUTION: 'SOLUTION'
};
const Ricochet = function({ messenger }) { const Ricochet = function({ messenger }) {
this.messenger = messenger; this.messenger = messenger;
this.squaresPerSide = 20;
// Properties that will be emitted
this.players = {}; this.players = {};
this.robots = this.freshRobots();
this.state = STATE.PLAY;
this.walls = this.freshWalls();
// this.id = uuid.v4(); // this.id = uuid.v4();
// this.countdownTimer = null; // this.countdownTimer = null;
// this.guess = Infinity; // this.guess = Infinity;
// this.squaresPerSide = 20;
// this.winningStack; // this.winningStack;
// const robots = ['#E00000', '#00C000', '#0000FF', '#00C0C0', '#F000F0'];
// const icons = ['assets/comet.svg', 'assets/moon.svg', 'assets/planet.svg', 'assets/rocket.svg', 'assets/spacesuit.svg'];
// // spider.svg, ufo.svg
// const gen = () => Math.floor(Math.random() * this.squaresPerSide);
// this.TEMP_ROBOTS = robots.map((color, idx) => ({ i: gen(), j: gen(), color, id: uuid.v4(), icon: icons[idx] }));
}; };
Ricochet.prototype.onConnect = function(ws, req) { Ricochet.prototype.onConnect = function(ws, req) {
// const query = url.query; const url = UrlParser.parse(req.url, true);
// const santizedName = (query.name || 'Unknown').replace(/[^\w ]/g, ''); const query = url.query;
const santizedName = (query.name || 'Unknown').replace(/[^\w ]/g, '');
// DEBUG && console.log("Connected:");
// DEBUG && console.log (`${santizedName} ${ws.id} via ${req.url}`);
// this.addPlayer(ws.id, santizedName); DEBUG && console.log(`Connected: ${santizedName} (${ws.id.substr(0, 8)}) via ${req.url}`);
// this.messenger.messageAll({ type: 'players', body: this.players }); this.addPlayer(ws.id, santizedName);
// this.messenger.messageOne(ws, { type: 'walls', body: G.getWalls()}); this.messenger.messageAll({ type: 'players', body: this.players });
// this.messenger.messageOne(ws, { type: 'robots', body: G.getRobots()}); this.messenger.messageOne(ws, { type: 'robots', body: this.robots});
this.messenger.messageOne(ws, { type: 'connected', body: ws.id});
this.messenger.messageOne(ws, { type: 'state', body: this.state});
this.messenger.messageOne(ws, { type: 'walls', body: this.walls});
// this.messenger.messageOne(ws, { type: 'winstate', body: G.getWinState()}); // this.messenger.messageOne(ws, { type: 'winstate', body: G.getWinState()});
// this.messenger.messageOne(ws, { type: 'connected', body: ws.id});
} }
Ricochet.prototype.onMessage = function(ws, json) { Ricochet.prototype.onMessage = function(ws, json) {
@ -41,12 +46,11 @@ Ricochet.prototype.onMessage = function(ws, json) {
}; };
Ricochet.prototype.onDisconnect = function(ws) { Ricochet.prototype.onDisconnect = function(ws) {
DEBUG && console.log("Disconnected:"); DEBUG && console.log(`Disconnected: ${this.players[ws.id]} (${ws.id.substr(0, 8)})`);
DEBUG && console.log(ws.id);
this.removePlayer(ws.id); this.removePlayer(ws.id);
// this.messenger.messageAll({ type: 'players', body: this.players }); this.messenger.messageAll({ type: 'players', body: this.players });
}; };
Ricochet.prototype.addPlayer = function(id, name) { Ricochet.prototype.addPlayer = function(id, name) {
@ -60,65 +64,70 @@ Ricochet.prototype.removePlayer = function(id) {
delete this.players[id]; delete this.players[id];
}; };
// Game.prototype.getRobots = function() { Ricochet.prototype.freshRobots = function() {
// return this.TEMP_ROBOTS; const robots = ['#E00000', '#00C000', '#0000FF', '#00C0C0', '#F000F0'];
// } const icons = ['assets/comet.svg', 'assets/moon.svg', 'assets/planet.svg', 'assets/rocket.svg', 'assets/spacesuit.svg'];
// // spider.svg, ufo.svg
// Game.prototype.getWalls = function() {
// // Edge IDs are of the form [i1-j1-i2-j2]. Top left is 0, 0.
// // Leave here for testing. const gen = () => Math.floor(Math.random() * this.squaresPerSide);
// // return [ return robots.map((color, idx) => ({ i: gen(), j: gen(), color, id: uuid.v4(), icon: icons[idx] }));
// // "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 numberOfCorners = Math.ceil(Math.pow((this.squaresPerSide / 10), 2));
// const numberOfWalls = Math.ceil(Math.pow((this.squaresPerSide / 5), 2));
// const gen = () => Math.floor(Math.random() * this.squaresPerSide);
// 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)) { Ricochet.prototype.freshWalls = function() {
// n--; // Edge IDs are of the form [i1-j1-i2-j2]. Top left is 0, 0.
// } else {
// edges.push(edge); // 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 numberOfCorners = Math.ceil(Math.pow((this.squaresPerSide / 10), 2));
const numberOfWalls = Math.ceil(Math.pow((this.squaresPerSide / 5), 2));
const gen = () => Math.floor(Math.random() * this.squaresPerSide);
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; return edges;
// }; };
// Game.prototype.getWinState = function() { // Game.prototype.getWinState = function() {
// // const gen = () => Math.floor(Math.random() * this.squaresPerSide); // // const gen = () => Math.floor(Math.random() * this.squaresPerSide);

6
socket/messenger.js
Unescape View File

@ -24,10 +24,12 @@ Messenger.prototype.messageOthers = function(ws, message) {
}; };
Messenger.prototype.messageAll = function(message) { Messenger.prototype.messageAll = function(message) {
DEBUG && console.log(`Sending to all ${wss.clients.size} client(s):`); const clients = Object.values(this.clients);
DEBUG && console.log(`Sending to all ${clients.length} client(s):`);
DEBUG && console.log(message); DEBUG && console.log(message);
Object.values(this.clients).forEach((client) => { clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) { if (client.readyState === WebSocket.OPEN) {
client.send(JSON.stringify(message)); client.send(JSON.stringify(message));
} }

198
style/controls.css
Unescape View File

@ -0,0 +1,198 @@
#controls-container {
bottom: 0;
left: 20px;
padding: 40px 0;
position: absolute;
top: 0;
width: 300px;
z-index: 1;
}
.controls-block {
background: #23074d;
border: 6px solid #483c6c;
border-radius: 0 18px 0 18px;
color: #0cffe1;
font-size: 24px;
margin-bottom: 24px;
overflow: hidden;
padding-bottom: 24px;
position: relative;
}
.controls-title {
background: #0cffe1;
color: #ff217c;
font-size: 14px;
margin-bottom: 16px;
padding: 8px 24px;
}
.controls-message {
cursor: default;
font-size: 16px;
padding: 24px;
}
.controls-button {
cursor: pointer;
padding: 8px 0;
text-align: center;
}
.controls-button:hover {
background: yellow;
color: #23074d;
}
/*===== PLAYERS BLOCK =====*/
#controls-players {
}
.controls-player {
cursor: default;
padding: 8px 24px;
}
/*===== MOVES BLOCK =====*/
#controls-moves {
background: #00dfd4;
border: 6px solid #483c6c;
border-radius: 0 18px 0 18px;
color: #ff217c;
position: relative;
}
#controls-moves-count {
cursor: default;
font-size: 84px;
text-align: center;
}
.controls-moves-buttons-layout {
display: flex;
flex-direction: row;
}
#controls-reset,
#controls-undo {
flex: 1;
font-size: 12px;
padding: 12px;
}
#controls-submit {
font-size: 24px;
padding: 8px 0;
}
/*===== OPTIONS BLOCK =====*/
#controls-options {
}
#controls-options .controls-button {
font-size: 16px;
padding: 8px 24px;
}
/*===== COUNTDOWN BLOCK =====*/
#controls-countdown {
background: #F96600;
border-color: #ffec83;
color: #ffff00;
cursor: default;
}
#controls-countdown .controls-title {
background: #CA1800;
color: #ffec83;
}
.controls-countdown-values-layout {
display: flex;
flex-direction: row;
}
#controls-countdown-value {
cursor: default;
flex: 1;
font-size: 64px;
text-align: center;
}
#controls-countdown-value::after {
content: 'seconds';
display: block;
font-size: 12px;
margin-top: -12px;
}
#controls-solution-value {
cursor: default;
flex: 1;
font-size: 64px;
text-align: center;
}
#controls-solution-value::after {
content: 'moves';
display: block;
font-size: 12px;
margin-top: -12px;
}
#controls-skip {
margin-top: 16px;
}
/*===== SOLUTION BLOCK =====*/
#controls-solution {
background: #483c6c;
border-width: 0;
color: #F96600;
text-align: center;
}
#controls-solution-message {
color: #ffec83;
padding-bottom: 0;
}
/*
0cffe1 CYAN 00dfd4
ff217c PINK
483c6c PURPLE 23074d
fe5e78 SALMON
ffa283 PEACH
F96600 ORANGE
ffec83 YELLOW FFFF00
*/
#controls-solution-count {
color: #ffec83;
cursor: default;
font-size: 84px;
}
#controls-solution-replay {
}
/*===== FOOTER BLOCK =====*/
#controls-footer {
bottom: 0;
left: 0;
padding: 24px;
position: absolute;
right: 0;
text-align: center;
}
#controls-footer a {
color: #639699;
font-size: 24px;
text-decoration: none;
}
#controls-footer a:hover {
text-decoration: underline;
}

2
grid.css → style/grid.css
Unescape View File

@ -1,6 +1,4 @@
#content-container { #content-container {
background-color: #28313b;
background-image: linear-gradient(315deg, #28313b 0%, #1A2026 74%);
bottom: 0; bottom: 0;
left: 0; left: 0;
position: absolute; position: absolute;

26
style/index.css
Unescape View File

@ -0,0 +1,26 @@
* {
box-sizing: border-box;
font-family: Days One;
}
body {
animation: MovingBackground 600s infinite;
background-image: url('../assets/stars.png');
overflow: hidden;
}
@keyframes MovingBackground {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
/*
0cffe1 CYAN 00dfd4
ff217c PINK
483c6c PURPLE 23074d
fe5e78 SALMON
ffa283 PEACH
F96600 ORANGE
ffec83 YELLOW FFFF00
*/
Write Preview
Loading…
Cancel
Save