Add support for choosing foreground and background colours

3 files changed, 23 insertions, 3 deletions

diff --git a/web/hitomezashi_web.c b/web/hitomezashi_web.c
index 4859c20..539fa96 100644
--- a/web/hitomezashi_web.c
+++ b/web/hitomezashi_web.c
@@ -32,6 +32,9 @@ int EMSCRIPTEN_KEEPALIVE main(void) {
   int gap = strtol(strtok(NULL, "\n"), NULL, 0);
   int line_thickness = strtol(strtok(NULL, "\n"), NULL, 0);
 
+  Uint32 fg_colour = strtol(strtok(NULL, "\n"), NULL, 0);
+  Uint32 bg_colour = strtol(strtok(NULL, "\n"), NULL, 0);
+
   if (SDL_Init(SDL_INIT_VIDEO) != 0) {
     return Hitomezashi_Web_Result_Err_Sdl_Init;
   }
@@ -42,7 +45,8 @@ int EMSCRIPTEN_KEEPALIVE main(void) {
 
   struct Hitomezashi_State state;
   if (hitomezashi_state_init(&state, x_pattern_len, y_pattern_len, x_pattern,
-                             y_pattern, gap, line_thickness) != 0) {
+                             y_pattern, gap, line_thickness, fg_colour,
+                             bg_colour) != 0) {
     return Hitomezashi_Web_Result_Err_State_Init;
   }
 
@@ -81,6 +85,16 @@ EM_JS(char *, hitomezashi_web_get_args, (void), {
   const y_pattern = search_params.get("y_pattern");
   const gap = search_params.get("gap");
   const line_thickness = search_params.get("line_thickness");
+  let fg_colour = search_params.get("fg_colour");
+  let bg_colour = search_params.get("bg_colour");
+  if (!fg_colour) {
+    fg_colour = "#000000";
+  }
+  if (!bg_colour) {
+    bg_colour = "#FFFFFF";
+  }
+  fg_colour = "0x" + fg_colour.slice(1);
+  bg_colour = "0x" + bg_colour.slice(1);
 
   if (!(x_pattern && y_pattern && gap && line_thickness)) {
     result_js = "i";
@@ -91,7 +105,7 @@ EM_JS(char *, hitomezashi_web_get_args, (void), {
       result_js = "i";
     } else {
       result_js = x_pattern + "\n" + y_pattern + "\n" + gap + "\n" +
-                  line_thickness + "\n";
+                  line_thickness + "\n" + fg_colour + "\n" + bg_colour + "\n";
     }
   }
 
diff --git a/web/hitomezashi_web.h b/web/hitomezashi_web.h
index 5d4f523..361a8c2 100644
--- a/web/hitomezashi_web.h
+++ b/web/hitomezashi_web.h
@@ -2,6 +2,7 @@
 #ifndef HITOMEZASHI_WEB_H
 #define HITOMEZASHI_WEB_H
 
+#include "SDL2/SDL.h"
 #include "emscripten.h"
 
 enum Hitomezashi_Web_Result {
@@ -12,7 +13,8 @@ enum Hitomezashi_Web_Result {
 };
 
 int hitomezashi_web(int x_pattern_len, int y_pattern_len, char *x_pattern,
-                    char *y_pattern, int gap, int line_thickness);
+                    char *y_pattern, int gap, int line_thickness,
+                    Uint32 fg_colour, Uint32 bg_colour);
 
 /** Parse the URL query string and return the parameters thereof.
  *
diff --git a/web/hitomezashi_web_shell.html b/web/hitomezashi_web_shell.html
index 7b3ad76..d3224dd 100644
--- a/web/hitomezashi_web_shell.html
+++ b/web/hitomezashi_web_shell.html
@@ -39,6 +39,8 @@
             <p><label>y pattern: <input name="y_pattern"></label></p>
             <p><label>gap: <input name="gap" type="number"></label></p>
             <p><label>line thickness: <input name="line_thickness" type="number"></label></p>
+            <p><label>foreground colour: <input name="fg_colour" type="color"></label></p>
+            <p><label>background colour: <input name="bg_colour" type="color"></label></p>
             <p><input type="submit" value="submit"></p>
     </form>
     <br>
@@ -63,6 +65,8 @@
       document.querySelector("input[name=\"y_pattern\"]").value = params.get("y_pattern");
       document.querySelector("input[name=\"gap\"]").value = params.get("gap");
       document.querySelector("input[name=\"line_thickness\"]").value = params.get("line_thickness");
+      document.querySelector("input[name=\"fg_colour\"]").value = params.get("fg_colour");
+      document.querySelector("input[name=\"bg_colour\"]").value = params.get("bg_colour");
     </script>
     {{{ SCRIPT }}}
   </body>