MultiplayerMinesweeper/client/www/game.html
2023-04-03 15:34:15 -04:00

105 lines
3.5 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="socket.io.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src='index.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">
<h1>Join Game</h1>
<hr>
<div class="codeContainer">
<h3>Invited to a game? Enter the code into the box below and click 'join'</h3>
<input type="text" class="codeInput" id="joinGameCode" value="" placeholder="Enter Game Code"> <br>
<button type="button" class="codeButton" id="gotoJoin">Join Game</button>
</div>
<hr>
<br><br>
<h1>Create New Game</h1>
<hr>
<div class="codeContainer">
<h3>To create a new game to play with your friends, click the 'Create Game' button below</h3>
<button type="button" id="gotoCreate">Create Game</button>
</div>
<hr>
</div>
<div id="joinGame" style="display: none;">
<input type="text" id="joinGameCode" value="">
<u>Color</u>
<div id="joinGameSelectColorBar"></div>
<input type="text" id="joinGameUsername" value="">
<button type="button" id="joinGameButton">Join</button>
</div>
<div id="createGame" style="display: none;">
<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="" placeholder="Input Username">
</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>
<div class="sliderContainer">
<div class="sliderNumber" id="createGameOptionsMinePercentIndicator"></div>
<input type="range" id="createGameOptionsMinePercent" min="0" max="1000" value="50" class="slider">
</div>
</div>
<div class="row">
<span>Number of mines</span>
<input type="text" id="createGameOptionsMines" value="100">
</div>
<div class="row">
<span>Minefield Width</span>
<input type="text" id="createGameOptionsWidth" value="32">
</div>
<div class="row">
<span>Minefield Height</span>
<input type="text" id="createGameOptionsHeight" value="32">
</div>
</div>
</div>
<hr>
<button type="button" id="createRoomButton">Start Game</button>
</div>
</div>
</main>
</body>
</html>