HTMLshell.html

<!doctype html>

<!--
  HTML template for the emscripten page. Unlike emscipten's official minimal
  frontend, this one is really minimal.

  by Miloslav Ciz (drummyfish), 2020

  Released under CC0 1.0 (https://creativecommons.org/publicdomain/zero/1.0/)
  plus a waiver of all other intellectual property. The goal of this work is
  be and remain completely in the public domain forever, available for any use
  whatsoever.
-->

<html>

<head>
  <meta charset="utf-8">
  <title>game</title>

  <style>
    html, body
    {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
    }

    body
    {
      background: black;
    }

    canvas
    {
      display: block;
      width: 100vw;
      height: 100vh;
      object-fit: contain;
    }

    #controls
    {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 5;
      pointer-events: none;
      -webkit-tap-highlight-color: transparent;
    }

    .padBtn
    {
      position: absolute;
      width: 13vmin;
      height: 13vmin;
      border-radius: 50%;
      background: rgba(255,255,255,0.15);
      border: 0.4vmin solid rgba(255,255,255,0.35);
      color: rgba(255,255,255,0.7);
      font: bold 5vmin sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: auto;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
    }

    .padBtn:active
    {
      background: rgba(255,255,255,0.35);
    }

    #dpad
    {
      position: absolute;
      left: 6vmin;
      bottom: 6vmin;
      width: 42vmin;
      height: 42vmin;
    }

    #btnUp    { left: 14.5vmin; top: 0; }
    #btnDown  { left: 14.5vmin; top: 29vmin; }
    #btnLeft  { left: 0; top: 14.5vmin; }
    #btnRight { left: 29vmin; top: 14.5vmin; }

    .actBtn
    {
      position: absolute;
      border-radius: 50%;
      background: rgba(255,255,255,0.15);
      border: 0.4vmin solid rgba(255,255,255,0.35);
      color: rgba(255,255,255,0.75);
      font: bold 5vmin sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: auto;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
    }

    .actBtn:active
    {
      background: rgba(255,255,255,0.35);
    }

    #actions
    {
      position: absolute;
      right: 6vmin;
      bottom: 6vmin;
      width: 42vmin;
      height: 42vmin;
    }

    #btnShoot
    {
      right: 0;
      bottom: 0;
      width: 20vmin;
      height: 20vmin;
      font-size: 7vmin;
      background: rgba(255,0,0,0.18);
      border-color: rgba(255,0,0,0.45);
    }

    #btnJump
    {
      right: 22vmin;
      bottom: 3vmin;
      width: 14vmin;
      height: 14vmin;
      font-size: 4.5vmin;
    }

    #btnC
    {
      right: 3vmin;
      bottom: 22vmin;
      width: 14vmin;
      height: 14vmin;
      font-size: 4.5vmin;
    }

    #btnB
    {
      right: 19vmin;
      bottom: 22vmin;
      width: 14vmin;
      height: 14vmin;
      font-size: 4.5vmin;
    }

    #btnMap
    {
      top: 6vmin;
      left: 6vmin;
      width: 11vmin;
      height: 11vmin;
      font-size: 3.5vmin;
    }

    #helpButton
    {
      position: fixed;
      top: 10px;
      right: 10px;
      width: 34px;
      height: 34px;
      z-index: 10;
      border: 1px solid #666;
      border-radius: 50%;
      background: rgba(0,0,0,0.6);
      color: #ddd;
      font: bold 18px sans-serif;
      cursor: pointer;
    }

    #helpOverlay
    {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 9;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.7);
    }

    #helpPanel
    {
      background: #101010;
      color: #ccc;
      border: 1px solid #555;
      padding: 20px 28px;
      font: 14px monospace;
      max-width: 80vw;
      max-height: 80vh;
      overflow-y: auto;
    }

    #helpPanel h1
    {
      margin: 0 0 12px;
      font-size: 18px;
      color: #fff;
    }

    #helpPanel table
    {
      border-collapse: collapse;
    }

    #helpPanel td
    {
      padding: 2px 14px 2px 0;
      vertical-align: top;
    }

    #helpPanel td:first-child
    {
      color: #fff;
      white-space: nowrap;
    }

    #helpClose
    {
      margin-top: 14px;
      padding: 4px 14px;
      border: 1px solid #666;
      background: #222;
      color: #ddd;
      font: 14px monospace;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>

  <button id="helpButton" title="Controls" onclick="toggleHelp()">?</button>

  <div id="helpOverlay" onclick="toggleHelp()">
    <div id="helpPanel" onclick="event.stopPropagation()">
      <h1>Controls</h1>
      <table>
        <tr><td>Move</td><td>arrows / numpad / W A S D Q E</td></tr>
        <tr><td>Look</td><td>mouse (rotation), RMB: toggle free look</td></tr>
        <tr><td>Jump</td><td>Space</td></tr>
        <tr><td>A button (shoot, confirm)</td><td>J / Enter / Ctrl / LMB</td></tr>
        <tr><td>B button (cancel, strafe)</td><td>K / Shift</td></tr>
        <tr><td>C button (modifier)</td><td>L: C+Down = menu, C+Up = jump,<br>C+Left/A = prev. weapon, C+Right/B = next weapon</td></tr>
        <tr><td>Cycle weapon</td><td>F</td></tr>
        <tr><td>Change weapon</td><td>O P X Y Z / mouse wheel / mouse middle</td></tr>
        <tr><td>Map</td><td>Tab</td></tr>
        <tr><td>Menu</td><td>Esc</td></tr>
      </table>
      <button id="helpClose" onclick="toggleHelp()">Close</button>
    </div>
  </div>

  <div id="controls" oncontextmenu="return false">
    <div id="dpad">
      <button id="btnUp"   class="padBtn">&#9650;</button>
      <button id="btnDown" class="padBtn">&#9660;</button>
      <button id="btnLeft" class="padBtn">&#9664;</button>
      <button id="btnRight" class="padBtn">&#9654;</button>
    </div>
    <button id="btnMap" class="actBtn">TAB</button>
    <div id="actions">
      <button id="btnShoot" class="actBtn">FIRE</button>
      <button id="btnJump" class="actBtn">JUMP</button>
      <button id="btnC" class="actBtn">C</button>
      <button id="btnB" class="actBtn">B</button>
    </div>
  </div>
  
  <script type='text/javascript'>
    Module = {
      print:
        function(what) 
        {
          console.log(what);
        },
      printErr:
        function(what)
        {
          console.error(what);
        },
      canvas:
        (
          function()
          {
            return document.getElementById('canvas');
          }
        )(),
      onRuntimeInitialized: function()
        {
          var press =
            Module.cwrap('webButton', null, ['number','number']);
          var setTouch =
            Module.cwrap('webSetTouchControls', null, ['number']);

          // show the on-screen controls and disable the mouse only when the
          // primary input is touch (smartphone/tablet), otherwise keep mouse
          // look and hide the OSD
          var isTouch =
            (window.matchMedia &&
              window.matchMedia('(pointer: coarse)').matches) ||
            ('ontouchstart' in window) ||
            (navigator.maxTouchPoints > 0);

          setTouch(isTouch ? 1 : 0);
          document.getElementById('controls').style.display =
            isTouch ? 'block' : 'none';

          function bindControl(id, key)
          {
            var el = document.getElementById(id);

            el.addEventListener('pointerdown',
              function(event)
              {
                event.preventDefault();
                el.setPointerCapture(event.pointerId);
                press(key, 1);
              });

            function up(event)
            {
              event.preventDefault();
              press(key, 0);
            }

            el.addEventListener('pointerup', up);
            el.addEventListener('pointercancel', up);
            el.addEventListener('lostpointercapture', up);
          }

          bindControl('btnUp', 0);      // SFG_KEY_UP
          bindControl('btnRight', 1);   // SFG_KEY_RIGHT
          bindControl('btnDown', 2);    // SFG_KEY_DOWN
          bindControl('btnLeft', 3);    // SFG_KEY_LEFT
          bindControl('btnShoot', 4);   // SFG_KEY_A (fire, confirm)
          bindControl('btnJump', 7);    // SFG_KEY_JUMP
          bindControl('btnC', 6);       // SFG_KEY_C (modifier)
          bindControl('btnB', 5);       // SFG_KEY_B (cancel, strafe)
          bindControl('btnMap', 10);    // SFG_KEY_MAP (TAB, hold to view)
        }
    };

    function toggleHelp()
    {
      var overlay = document.getElementById('helpOverlay');
      overlay.style.display =
        (overlay.style.display == 'flex') ? 'none' : 'flex';
    }

    document.addEventListener('keydown',
      function(event)
      {
        if (event.key == 'h' || event.key == 'H' || event.key == '?')
          toggleHelp();
      });
  </script>

  {{{ SCRIPT }}}

</body>
</html>