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