<!doctype html>

<!--
  HTML template for the emscripted 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>
    table
    {
      width: 100%;
    }

    td
    {
      width: 11%;
      padding: 0;
      margin: 0;
    }

    button
    {
      width: 100%;
    }

    canvas
    {
      display: block;
      margin: 10px auto 30px;
    }
  </style>
</head>

<body>
  <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
  
  <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()
        {
          pressFunc = Module.cwrap('webButton', '', ['number','number']);
        }
    };

    function down(button)
    {
      pressFunc(button,1);
    }

    function up(button)
    {
      pressFunc(button,0);
    }
  </script>

  {{{ SCRIPT }}}

  <table style="user-select:none; -moz-user-select: none; -ms-user-select:none; -webkit-user-select: none; -o-user-select:none;" onselectstart="return false;" unselectable="on">
    <tr> <td></td> <td><button onmousedown="down(0)" ontouchstart="down(0)" onmouseup="up(0)" ontouchend="up(0)" onmouseout="up(0)" ontouchleave="(0)">U</button></td> <td></td> <td></td> <td><button onmousedown="down(4)" ontouchstart="down(4)" onmouseup="up(4)" ontouchend="up(4)" onmouseout="up(4)" ontouchleave="(4)">A</button></td> <td></td> <td></td> </tr>
    <tr> <td><button onmousedown="down(3)" ontouchstart="down(3)" onmouseup="up(3)" ontouchend="up(3)" onmouseout="up(3)" ontouchleave="(3)">L</button></td> <td></td> <td><button onmousedown="down(1)" ontouchstart="down(1)" onmouseup="up(1)" ontouchend="up(1)" onmouseout="up(1)" ontouchleave="(1)">R</button></td> <td></td> <td></td> <td><button onmousedown="down(5)" ontouchstart="down(5)" onmouseup="up(5)" ontouchend="up(5)" onmouseout="up(5)" ontouchleave="(5)">B</button></td> <td></td> </tr>
    <tr> <td></td> <td><button onmousedown="down(2)" ontouchstart="down(2)" onmouseup="up(2)" ontouchend="up(2)" onmouseout="up(2)" ontouchleave="(2)">D</button></td> <td></td> <td></td> <td></td> <td></td> <td><button onmousedown="down(6)" ontouchstart="down(6)" onmouseup="up(6)" ontouchend="up(6)" onmouseout="up(6)" ontouchleave="(6)">C</button></td> </tr>
  </table>

</body>
</html>