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
4.5 KiB
108 lines
4.5 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'></div>
|
|
|
|
<div id='controls-win-count'></div>
|
|
|
|
<div class='controls-button' id='controls-win-replay'>Replay</div>
|
|
|
|
<div class='controls-button' id='controls-win-next'>Start next round</div>
|
|
</div>
|
|
|
|
<div id="controls-footer">
|
|
<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 names = ["Biff", "Morty", "Herb", "Chester", "Lyle", "Cap", "Dale", "Ned", "Mindy", "Frankie", "Gabriel", "Mona", "Dolores",
|
|
"Sepulveda", "Venus", "Blingbing", "Cyrpt"]
|
|
const r = Math.floor(Math.random() * names.length);
|
|
const rawInput = names[r]
|
|
|
|
// const rawInput = 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 });
|
|
document.dispatchEvent(evt);
|
|
})
|
|
</script>
|
|
</body>
|
|
</html> |