2022-06-23 05:44:57 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title></title>
|
|
|
|
|
<script src="http://localhost:35729/livereload.js" charset="utf-8"></script>
|
|
|
|
|
<script type="text/javascript" src="socket.io.min.js"></script>
|
|
|
|
|
<link rel="stylesheet" href="style.css">
|
|
|
|
|
<script src='scripts/script.js' type="module"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<!-- Canvas used to generate individual sprites off one sprite atlas -->
|
|
|
|
|
|
|
|
|
|
<canvas class="hidden" id="spriteJank" width=24 height=24></canvas>
|
|
|
|
|
<main>
|
|
|
|
|
<p id="message"></p>
|
|
|
|
|
<div id="game" style="display: none;">
|
|
|
|
|
<span id="leftBar">
|
|
|
|
|
<p id="status">Connection Status</p>
|
|
|
|
|
</span>
|
|
|
|
|
<span id="rightBar">
|
|
|
|
|
<div class="canvasContainer">
|
|
|
|
|
<canvas oncontextmenu="return false;" id="canvas" width=0 height=0></canvas>
|
|
|
|
|
</div>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="menu" id="menu">
|
|
|
|
|
<div id="joinType">
|
|
|
|
|
<h2>Create Room Or Join with code?</h2>
|
|
|
|
|
<button type="button" id="gotoCreate">create game</button>
|
|
|
|
|
<button type="button" id="gotoJoin">Join game</button>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div id="joinGame" style="display: none;">
|
|
|
|
|
<input type="text" id="joinGameCode" value="">
|
|
|
|
|
<input type="text" id="joinGameUsername" value="bob">
|
|
|
|
|
<button type="button" id="joinGameButton">Join</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="createGame" >
|
|
|
|
|
<h2>Create Room</h2>
|
|
|
|
|
<hr>
|
|
|
|
|
<div class="leftRight">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<h3>Settings</h3>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<span>Username</span>
|
|
|
|
|
<input type="text" id="createGameUsername" value="">
|
|
|
|
|
</div>
|
|
|
|
|
<u>Color</u>
|
|
|
|
|
<div id="createGameSelectColorBar"></div>
|
|
|
|
|
<u>Mode</u>
|
|
|
|
|
<div id="createGameSelectModeBar"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="centerBar"></span>
|
|
|
|
|
<div class="right">
|
|
|
|
|
<h3>Game Settings</h3>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<span>Percentage mines</span>
|
2022-06-23 19:27:36 +00:00
|
|
|
<div class="sliderContainer">
|
|
|
|
|
<div class="sliderNumber" id="createGameOptionsMinePercentIndicator"></div>
|
|
|
|
|
<input type="range" id="createGameOptionsMinePercent" min="0" max="1000" value="50" class="slider">
|
|
|
|
|
</div>
|
2022-06-23 05:44:57 +00:00
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<span>Number of mines</span>
|
|
|
|
|
<input type="number" id="createGameOptionsMines" value="100">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<span>Minefield Width</span>
|
|
|
|
|
<input type="number" id="createGameOptionsWidth" value="32">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<span>Minefield Height</span>
|
|
|
|
|
<input type="number" id="createGameOptionsHeight" value="32">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<hr>
|
|
|
|
|
<button type="button" id="createRoomButton">Start Game</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</main>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
