index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>Tetrivoice: Tetris of the Future</title>
  </head>
  <link rel=stylesheet href="./style.css">
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@900&display=swap" rel="stylesheet">
  <body>
    <!-- JS Files -->
    <script src="js/three.min.js"></script>
    <script src="js/OrbitControls.js"></script>
    <script src="js/cannon.min.js"></script>
    <script src="js/CannonDebugRenderer.js"></script>
    <script src="js/localizationData.js"></script>
    <script src="main.js"></script>
    <!-- Page -->
    <div id="title">TETRIVOICE</div>
    <div id="scoretext" class="score" hidden="true">
      <u>SCORE</u>
    </div>
    <div id="score" class="score" hidden="true">
      0
    </div>
    <main>
      <div id="text">
        <button id="button">Start playing</button>
        <p id="message" hidden aria-hidden="true">
          <u><span style="color: red; font-size:35px;">ERROR</u></span><br/>
          Your browser doesn't support Speech Recognition.<br/>
          Please use Google Chrome for best results.<br/>
        </p>
      </div>
      <div id="startText" class="startText">
        <p id="startMessage" hidden="false" aria-hidden="false">
          <ul>&#9675; Use your microphone to issue voice commands that move the tetrominoes.
          <br/>
          (<u><span style="color: yellow">NOTE</u></span>: You can change the recognized language/dialect in the bottom right corner!)</ul>
          <ul>&#9675; Use the WASD keys while speaking to influence the block's direction.</ul>
          <ul>&#9675; Blocks will move in the direction of the key you are <b><u>holding</u></b> (as highlighted).</ul>
          <ul>&#9675; Clicking & moving the mouse rotates the scene. ESC key pauses game.</ul>
          <br/>
          <ul><u><span style="color: yellow">NOTE</u></span>: Rotation is currently only left/right.</ul>
          <br/>
        </p>
      </div>
    </main>
      <span class="anchor" id="section1"></span>
      <div id="keyBinds" style='color: white;' class="section">
        <span id="upArrow" style='font-size:100px;color: white;'>&#8673;</span>
        <br/>
        <span id="downArrow" style='font-size:100px;color: white;'>&#8675;</span>
        <br/>
        <br/>
        <br/>
        <b> &nbsp;  &nbsp;  &nbsp; <span style="color: yellow">HOLD KEYS</span></b>
        <br/>
        <u>to move while speaking</u>
        <br></br>
        <li><b>W</b> moves up</li>
        <li><b>S</b> moves down</li>
        <li><b>A</b> moves left</li>
        <li><b>D</b> moves right</li>
        <!-- <li>T to spawn blocks</li> -->
      </div>
      <div id="voiceComs" style='color: white;' class="section">
        <span id="leftArrow" style='font-size:100px;'>&#8672;</span>
        <br\>
        <span id="rightArrow" style='font-size:100px;'>&#8674;</span>
        <br/>
        <br/>
        <br/>
        <b><span style="color: yellow">VOICE COMMANDS</span> </b>
        <br/>
        <u>(Speak clearly/slowly)</u>
        <ul dir='rtl'>
          <b><li id='rotate'>ROTATE</li></b>
          <b><li id='move'>MOVE</li></b>
          <b><li id='drop'>DROP</li></b>
          <!-- <li>SPAWN</li> -->
        </ul>
        <br/>
        <label id="languagesDDlabel" for="languagesDD">Choose a language:</label>
        <select style="max-width: 150px" id="languagesDD">
        </select>
      </div>
  </body>
  <span id="nextpiece">NEXT PIECE: [ ]</span>
  <footer class='footer'>
    <!-- Audio Tracks -->
    <audio id="soundtrack">
      <source src="./misc/sounds/Game_Tunes-14289/Total_Reboot_-_01_-_Your_Mission.mp3" type="audio/mpeg">
      <source src="./misc/sounds/Game_Tunes-14289/ZhangJW_-_02_-_Level_1.mp3" type="audio/mpeg">
      <source src="./misc/sounds/Game_Tunes-14289/Total_Reboot_-_03_-_Level_2.mp3" type="audio/mpeg">
      <source src="./misc/sounds/Game_Tunes-14289/ZhangJW_-_04_-_Level_3.mp3" type="audio/mpeg">
      <source src="./misc/sounds/Game_Tunes-14289/Total_Reboot_-_05_-_Level_4_Lose.mp3" type="audio/mpeg">
      <source src="./misc/sounds/Game_Tunes-14289/ZhangJW_-_06_-_Level_5_Win.mp3" type="audio/mpeg">
      <source src="./misc/sounds/Game_Tunes-14289/Total_Reboot_-_07_-_Game_Over.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>
  </footer>
</html>