Working browser -> C emscripten text box

2 years ago · 2394603f6e
parent 4ccbf1959b
commit 2394603f6e
4 changed files with 93 additions and 9 deletions
--- a/build_web_debug.bat
+++ b/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

--- a/build_web_release.bat
+++ b/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

--- a/main.c
+++ b/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
--- a/web_template.html
+++ b/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 }}}