Add buttons to web version

8 months ago · eed7f2064f
--- a/HTMLshell.html
+++ b/HTMLshell.html
@ -18,34 +18,78 @@
  <meta charset="utf-8">
  <title>game</title>

  </head>
  <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'>
      var Module = {
        print:
          function(what) 
          {
            console.log(what);
          },
        printErr:
          function(what)
  <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()
          {
            console.error(what);
          },
        canvas:
          (
            function()
            {
              return document.getElementById('canvas');
            }
          )()
      };
    </script>

    {{{ SCRIPT }}}
            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>
--- a/main_sdl.c
+++ b/main_sdl.c
@ -88,6 +88,7 @@
 #include "sounds.h"

 const uint8_t *sdlKeyboardState;
 uint8_t webKeyboardState[SFG_KEY_COUNT];
 uint8_t sdlMouseButtonState = 0;
 int8_t sdlMouseWheelState = 0;

@ -155,6 +156,13 @@ void SFG_sleepMs(uint16_t timeMs)
 #endif
 }

 #ifdef __EMSCRIPTEN__
 void webButton(uint8_t key, uint8_t down)
 {
  webKeyboardState[key] = down;
 }
 #endif

 void SFG_getMouseOffset(int16_t *x, int16_t *y)
 {
 #ifndef __EMSCRIPTEN__
@ -176,6 +184,9 @@ void SFG_processEvent(uint8_t event, uint8_t data)

 int8_t SFG_keyPressed(uint8_t key)
 {
  if (webKeyboardState[key]) 
    return 1;

  switch (key)
  {
    case SFG_KEY_UP:
@ -376,6 +387,9 @@ int main(int argc, char *argv[])
  uint8_t argForceWindow = 0;
  uint8_t argForceFullscreen = 0;

  for (uint8_t i = 0; i < SFG_KEY_COUNT; ++i)
    webKeyboardState[i] = 0;

  for (uint8_t i = 1; i < argc; ++i)
  {
    if (argv[i][0] == '-' && argv[i][1] == 'h' && argv[i][2] == 0)
--- a/make.sh
+++ b/make.sh
@ -64,7 +64,7 @@ elif [ $1 == "emscripten" ]; then
  # emscripten (browser Javascript) build, requires:
  # - emscripten

  emcc ./main_sdl.c -s USE_SDL=2 -O3 -lopenal --shell-file HTMLshell.html -o game.html
  ../emsdk/upstream/emscripten/emcc ./main_sdl.c -s USE_SDL=2 -O3 -lopenal --shell-file HTMLshell.html -o game.html -s EXPORTED_FUNCTIONS='["_main","_webButton"]' -s EXPORTED_RUNTIME_METHODS='["ccall","cwrap"]'
 else
  echo "unknown parameter: $1"
 fi