Add buttons to web version

2 years ago · eed7f2064f
3 changed files with 84 additions and 26 deletions
--- a/HTMLshell.html
+++ b/HTMLshell.html
@ -18,34 +18,78 @@
				@@ -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 @@
				@@ -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)
				@@ -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)
				@@ -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[])
				@@ -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
				@@ -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