You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
3.4 KiB
108 lines
3.4 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<link rel="stylesheet" href="index.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
|
|
<script type='text/javascript' src='client/board.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/squares.js'></script>
|
|
</head>
|
|
<body>
|
|
<div id="controls-container">
|
|
<div class='controls-title'>Puzzle Robots</div>
|
|
|
|
<div id="controls-room">
|
|
<div class='controls-subtitle'>Room</div>
|
|
<input type="text" id='game-id'>
|
|
<button type='button'>></button>
|
|
|
|
<div class="controls-room-errors"></div>
|
|
|
|
<div>Reset your board</div>
|
|
<button type='button' id='game-start'>Start New Round</button>
|
|
<div class="timer">0:42</div>
|
|
<button type='button'>Skip Timer</button>
|
|
</div>
|
|
|
|
<!-- <div class="rounds">
|
|
|
|
</div> -->
|
|
|
|
<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>
|
|
|
|
|
|
<div id="controls-guesses">
|
|
<div class='controls-subtitle'>Guess</div>
|
|
</div>
|
|
|
|
<div id="controls-footer">
|
|
<div>Heart (match head height)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="content-container">
|
|
</div>
|
|
|
|
<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 });
|
|
|
|
// connection.onopen = controls.playerAdd.bind(controls);
|
|
|
|
connection.onerror = (err) => {
|
|
console.error(err);
|
|
|
|
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)
|
|
if (!data.head || !data.body) {
|
|
console.warn("Unprocessable entity: ", msg)
|
|
return;
|
|
}
|
|
|
|
console.log(msg)
|
|
|
|
switch(data.head.type) {
|
|
case 'connect':
|
|
break;
|
|
|
|
case 'disconnect':
|
|
break;
|
|
|
|
case 'players':
|
|
controls.playersUpdate(data.body)
|
|
break;
|
|
|
|
case 'robots':
|
|
board.drawRobots(data.body);
|
|
break;
|
|
|
|
case 'walls':
|
|
board.drawWalls(data.body);
|
|
break;
|
|
|
|
default:
|
|
console.warn("Unhandled message: ", msg)
|
|
}
|
|
};
|
|
})
|
|
</script>
|
|
</body>
|
|
</html> |