snake-text-rs-wasm/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>snake text rs wasm</title>

    <style>
      body {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        font-size: 20px;
        font-family: courier;
      }
      input {
        width: 50px;
      }
      .dummy-button {
        border: 2px solid black;
        padding: 10px;
        cursor: pointer;
        font-weight: bold;
        background-color: lightgray;
      }
      #play-pause {
        margin-top: 20px;
      }
      #score-block {
        margin-top: 20px;
      }
      .game-state {
        position: absolute;
        top: 40%;
        border: 3px solid black;
        padding: 30px;
        font-size: 40px;
        font-weight: bold;
      }
      #game-over {
        color: red;
        display: none;
      }
      #controls-info {
        margin-bottom: 40px;
      }
      #controls-line-2 {
        margin-top: 40px;
      }
      #button-left {
        margin-right: 40px;
      }
      #button-right {
        margin-left: 40px;
      }
      #gamepads {
        margin-top: 30px;
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="creation-bar">
      Width: <input type="number" id="width">
      Height: <input type="number" id="height">
      Speed: <input type="number" id="speed">
      <span id="create" class="dummy-button">Create !</span><!-- don't use button element to avoid issues with focus -->
    </div>
    <button id="play-pause"></button>
    <div id="score-block">
      <span>Score: </span><span id="score">0</span>,
      <span>Speed: </span><span id="current-speed">0</span>
    </div>
    <pre id="snake-text-canvas"></pre>
    <div class="game-state" id="game-over">Game Over</div>
    <div class="game-state" id="pause">Pause</div>
    <div id="controls-info">Use a,s,d,w to control snake, space to pause</div>
    <div>
      <span id="button-up" class="dummy-button">⬆</span>
    </div>
    <div id="controls-line-2">
      <span id="button-left" class="dummy-button">⬅</span>
      <span id="button-down" class="dummy-button">⬇</span>
      <span id="button-right" class="dummy-button">➡</span>
    </div>
    <div id="gamepads">
      🎮 Gamepads:
      <ul id="gamepad-list">
      </ul>
    </div>
    <noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
    <script src="./bootstrap.js"></script>
  </body>
</html>