<!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>