Working browser -> C emscripten text box

build_web_debug.bat

@@ -5,7 +5,7 @@ mkdir build_web
 
 call run_codegen.bat || goto :error
 
-emcc -O2 -s ALLOW_MEMORY_GROWTH --source-map-base . -gsource-map -DDEVTOOLS -Ithirdparty -Igen main.c -o build_web\index.html --preload-file assets --shell-file web_template.html || goto :error
+emcc -sEXPORTED_FUNCTIONS=_main,_end_text_input -sEXPORTED_RUNTIME_METHODS=ccall,cwrap -O2 -s ALLOW_MEMORY_GROWTH --source-map-base . -gsource-map -DDEVTOOLS -Ithirdparty -Igen main.c -o build_web\index.html --preload-file assets --shell-file web_template.html || goto :error
 
 goto :EOF
 

build_web_release.bat

@@ -6,7 +6,7 @@ mkdir build_web_release
 call run_codegen.bat || goto :error
 
 echo Building release
-emcc -DNDEBUG -O2 -DDEVTOOLS -s ALLOW_MEMORY_GROWTH -Ithirdparty -Igen main.c -o build_web_release\index.html --preload-file assets --shell-file web_template.html || goto :error
+emcc -sEXPORTED_FUNCTIONS=_main,_end_text_input -sEXPORTED_RUNTIME_METHODS=ccall,cwrap -DNDEBUG -O2 -DDEVTOOLS -s ALLOW_MEMORY_GROWTH -Ithirdparty -Igen main.c -o build_web_release\index.html --preload-file assets --shell-file web_template.html || goto :error
 
 goto :EOF
 

main.c

@@ -26,6 +26,8 @@
 #define ARRLEN(x) ((sizeof(x)/sizeof(0[x])) / ((size_t)(!(sizeof(x) % sizeof(0[x])))))
 #define ENTITIES_ITER(ents) for(Entity *it = ents; it < ents + ARRLEN(ents); it++) if(it->exists)
 
+#define Log(...) { printf("Log | "); printf(__VA_ARGS__); }
+
 // so can be grep'd and removed
 #define dbgprint(...) { printf("Debug | %s:%d | ", __FILE__, __LINE__); printf(__VA_ARGS__); }
 Vec2 RotateV2(Vec2 v, float theta)
@@ -182,11 +184,19 @@ typedef struct Arena
 
 Entity *player = NULL; // up here, used in text backend callback
 
-Sentence text_input_buffer;
 void begin_text_input(); // called when player engages in dialog, must say something and fill text_input_buffer
 // a callback, when 'text backend' has finished making text
-void end_text_input()
+void end_text_input(char *what_player_said)
 {
+#ifdef WEB // hacky
+ _sapp_emsc_register_eventhandlers();
+#endif
+
+ size_t player_said_len = strlen(what_player_said);
+ Sentence what_player_said_sentence = {0};
+ assert(player_said_len < ARRLEN(what_player_said_sentence.data));
+ memcpy(what_player_said_sentence.data, what_player_said, player_said_len);
+
  // the new elements wouldn't fit!
  Dialog *to_append = &player->talking_to->player_dialog;
  if(to_append->cur_index + 2 >= ARRLEN(to_append->data))
@@ -203,13 +213,18 @@ void end_text_input()
    to_append->cur_index--;
   }
  }
- BUFF_APPEND(to_append, text_input_buffer);
+ BUFF_APPEND(to_append, what_player_said_sentence);
  BUFF_APPEND(to_append, SENTENCE_CONST("NPC response"));
  player->state = CHARACTER_IDLE;
 }
 
+// keydown needs to be referenced when begin text input,
+// on web it disables event handling so the button up event isn't received
+bool keydown[SAPP_KEYCODE_MENU] = {0};
+
 #ifdef DESKTOP
 bool receiving_text_input = false;
+Sentence text_input_buffer = {0};
 void begin_text_input()
 {
  receiving_text_input = true;
@@ -219,6 +234,10 @@ void begin_text_input()
 #ifdef WEB
 void begin_text_input()
 {
+ Log("Disabling event handlers\n");
+ _sapp_emsc_unregister_eventhandlers(); // stop getting input, hand it off to text input
+ memset(keydown, 0, ARRLEN(keydown));
+ emscripten_run_script("start_dialog();");
 }
 #else
 #error "No platform defined for text input!
@@ -377,7 +396,7 @@ sg_image load_image(const char *path)
    &png_width, &png_height,
    &num_channels, 0);
  assert(pixels);
- dbgprint("Pah %s | Loading image with dimensions %d %d\n", path, png_width, png_height);
+ Log("Pah %s | Loading image with dimensions %d %d\n", path, png_width, png_height);
  to_return = sg_make_image(&(sg_image_desc)
    {
    .width = png_width,
@@ -1233,14 +1252,12 @@ double elapsed_time = 0.0;
 double last_frame_processing_time = 0.0;
 uint64_t last_frame_time;
 Vec2 mouse_pos = {0}; // in screen space
-bool keydown[SAPP_KEYCODE_MENU] = {0};
 bool roll_just_pressed = false; // to use to initiate dialog, shouldn't initiate dialog if the button is simply held down
 #ifdef DEVTOOLS
 bool mouse_frozen = false;
 #endif
 void frame(void)
 {
- dbgprint("%f %f\n", cam_offset().x, cam.pos.x);
 #if 0
  {
   sg_begin_default_pass(&state.pass_action, sapp_width(), sapp_height());
@@ -1677,7 +1694,7 @@ void event(const sapp_event *e)
   if(e->type == SAPP_EVENTTYPE_KEY_DOWN && e->key_code == SAPP_KEYCODE_ENTER)
   {
    receiving_text_input = false;
-   end_text_input();
+   end_text_input(text_input_buffer.data);
   }
  }
 #endif

web_template.html

@@ -50,10 +50,66 @@ body {
     image-rendering: pixelated;
     -ms-interpolation-mode: nearest-neighbor;
 }
+.inputdiv {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    margin: 0px;
+    border: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    display: none; /* set to flex by javascript */
+    justify-content: center;
+    align-items: center;
+
+    z-index: 10;
+    background: #00000090;
+}
+#inputtext {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    background: none;
+    width: 90%;
+    height: 50%;
+    margin-left: 5%;
+    margin-right: 5%;
+    border-top-style: hidden;
+    border-right-style: hidden;
+    border-left-style: hidden;
+    border-bottom-style: hidden;
+    transform: translateY(100%);
+    text-align: center;
+    font-size: 2em;
+    font-family: Arial;
+    color: white;
+}
+
+#inputtext:focus {
+ outline: none;
+}
+
+#inputbutton {
+ bottom: 0;
+ margin-bottom: 10%;
+ position: absolute;
+ font-family: Arial;
+ font-size: 3em;
+}
+
 </style>
 <link id="sokol-app-favicon" rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAZdJREFUOE9VUzFSw0AMlGihggekwhV0eQGZ8AQggQ4chlR5CjSeAUwHOHkCZPALoEuVVHkAdCnxMVpJd8YzHt/5pNXuSsdkDxNRkHfSC8REIZB88ASSXxrBdzU+tiVmBHs6UQMAiwgK6kCy4NsPACBPcfQ4VPtSSLdSfbjEmg0kVBkKMQ7lfIXKAoTnt8okPVbjwUqCJR//mtdMpaEa09ZwCZyopfk5g5Doye7UTz0JuUovfti0EIXvAbS7ebw3BaFIwaQAAwAqxzwAUTBYrE8AokG2AIpmHnZmzkG9aLHGcrE+1VoC14a3Nh90ZsKLOSTP/2OYc9pZxReq5Vce5UnqVfdJDlIXEklzOhkFpeXnJQQ7aN4tZcCsi0w0ehtrgMm/7xemAJ2n6/mNdtBseegXykCtJsrfx0ZC3RWA9hCO5uM0r4Ho8bjwgYwWIODoZYPZj8326UCpQPXFjsnAPEvtdA9k2XvegCV6ZZeq3av6fBvUvYZKsBbZiQI4tG0kQzW6kzrE1qfW/cWk+i1w14WuGxgvBOD+AP0MuCLRb/uuAAAAAElFTkSuQmCC"></head>
 <body style="background:black">
+ <div id="inputdiv" class="inputdiv">
+  <textarea id="inputtext">
+  </textarea>
+  <button id="inputbutton" onclick="end_dialog()"> Submit </button>
+ </div>
   <canvas class="game" id="canvas" oncontextmenu="event.preventDefault()" width="1504" height="864"></canvas>
+
+
   <script type="text/javascript">
     var Module = {
         preRun: [],
@@ -80,6 +136,17 @@ body {
         console.log("onerror: " + event.message);
     };
   </script>
+  <script type="text/javascript">
+   function start_dialog() {
+       document.getElementById("inputtext").value = "";
+       setTimeout(function(){document.getElementById("inputtext").focus();},200); // for some reason focus doesn't work immediately here
+       document.getElementById("inputdiv").style.display = "flex";
+   }
+   function end_dialog() {
+       document.getElementById("inputdiv").style.display = "none";
+       Module.ccall('end_text_input', 'void', ['string'], [document.getElementById("inputtext").value]);
+   }
+  </script>
   {{{ SCRIPT }}}