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.
142 lines
4.8 KiB
142 lines
4.8 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 id="controls-manage">
|
|
<div class='controls-subtitle'>Manage</div>
|
|
|
|
<div class="controls-row">
|
|
<div>Room ID</div>
|
|
<input type="text" id='game-id'>
|
|
<div class="controls-button">Go</div>
|
|
</div>
|
|
|
|
<div class="controls-room-errors"></div>
|
|
|
|
<div class="controls-row">
|
|
<div>Start Next Round</div>
|
|
<div> </div>
|
|
<div class='controls-button' id='controls-next-round'>Do It</div>
|
|
</div>
|
|
|
|
<div class="controls-row">
|
|
<div>Move Robots</div>
|
|
<div> </div>
|
|
<div class='controls-button' id='controls-reposition-robots'>Reposition</div>
|
|
</div>
|
|
|
|
<div class="controls-row">
|
|
<div>Move Walls</div>
|
|
<div> </div>
|
|
<div class='controls-button' id='controls-regenerate-walls'>Regenerate</div>
|
|
</div>
|
|
</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 class="controls-row">
|
|
<div>Moves:</div>
|
|
<div id="controls-moves">4</div>
|
|
<div class='controls-button' id='controls-moves-reset'>Reset</div>
|
|
</div>
|
|
|
|
<div class="controls-row">
|
|
<div>Timer:</div>
|
|
<div id="controls-timer">0:42</div>
|
|
<div class='controls-button' id='controls-timer-skip'>Skip</div>
|
|
</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);
|
|
|
|
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);
|
|
|
|
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> |