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.
102 lines
4.3 KiB
102 lines
4.3 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Robots</title>
|
|
<link rel="stylesheet" href="style/index.css">
|
|
<link rel="stylesheet" href="style/controls.css">
|
|
<link rel="stylesheet" href="style/grid.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Days+One&display=swap" rel="stylesheet">
|
|
<script type='text/javascript' src='client/connection.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/grid.js'></script>
|
|
<script type='text/javascript' src='client/stack.js'></script>
|
|
</head>
|
|
<body>
|
|
<div id="controls-container">
|
|
<div class='controls-block' id="controls-players">
|
|
<div class="controls-title">Players</div>
|
|
<div class="controls-message"></div>
|
|
</div>
|
|
|
|
<div class='controls-block' id="controls-moves">
|
|
<div class="controls-title">Moves</div>
|
|
<div id='controls-moves-count'></div>
|
|
|
|
<div class="controls-moves-buttons-layout">
|
|
<div class='controls-button' id='controls-moves-reset'>Reset</div>
|
|
<div class='controls-button' id='controls-moves-undo'>Undo</div>
|
|
</div>
|
|
|
|
<div class='controls-button' id='controls-moves-solve'>Solve the puzzle</div>
|
|
</div>
|
|
|
|
<div class='controls-block' id="controls-options">
|
|
<div class="controls-title">Options</div>
|
|
<div class='controls-button' id='controls-options-robots'>Move Robots</div>
|
|
<div class='controls-button' id='controls-options-walls'>Move Walls</div>
|
|
<div class='controls-button' id='controls-options-objective'>Move Objective</div>
|
|
<div class="controls-message">Careful - these affect all players!</div>
|
|
</div>
|
|
|
|
<div class='controls-block' id='controls-connection'>
|
|
<div class="controls-title">Connection</div>
|
|
<div class="controls-message"></div>
|
|
</div>
|
|
|
|
<div class='controls-block' id="controls-countdown">
|
|
<div class='controls-title' id='controls-countdown-player'></div>
|
|
|
|
<div class="controls-countdown-layout">
|
|
<div id="controls-countdown-moves"></div>
|
|
<div id="controls-countdown-value"></div>
|
|
</div>
|
|
|
|
<div class='controls-button' id='controls-countdown-skip'>Skip</div>
|
|
</div>
|
|
|
|
<div class='controls-block' id="controls-win">
|
|
<div class='controls-title'>Round over</div>
|
|
<div class="controls-message" id='controls-win-message'><span id='controls-win-player'></span> wins!</div>
|
|
|
|
<div id='controls-win-count'></div>
|
|
|
|
<div class='controls-button' id='controls-win-next'>Start next round</div>
|
|
</div>
|
|
|
|
<div id="controls-footer">
|
|
<a href='http://www.benburlingham.com/' target='_blank'>B</a>
|
|
<a href='http://buymeacoff.ee/5EGitAV' target='_blank'>♡</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="content-container">
|
|
<div id="content-grid"></div>
|
|
</div>
|
|
|
|
<script>
|
|
window.addEventListener('load', () => {
|
|
// Order-independent. Communication via local events.
|
|
new Connection();
|
|
new Controls();
|
|
new Grid();
|
|
new Stack();
|
|
|
|
// Entry point.
|
|
const name = Cookie.getCookie({ name: "player_name" });
|
|
const rawInput = name ? name : prompt("What is your name?");
|
|
|
|
if (!rawInput) {
|
|
const evt = new CustomEvent('L-conn-error', { detail: "noname" });
|
|
document.dispatchEvent(evt);
|
|
return;
|
|
}
|
|
|
|
const evt = new CustomEvent('L-join', { detail: rawInput.substr(0, 20) });
|
|
document.dispatchEvent(evt);
|
|
})
|
|
</script>
|
|
</body>
|
|
</html> |