Move ui out to it's own file

3 files changed, 114 insertions, 97 deletions

diff --git a/src/main.c b/src/main.c
index be84922..d40945b 100644
--- a/src/main.c
+++ b/src/main.c
@@ -8,6 +8,8 @@
 #include <SDL3/SDL_scancode.h>
 #include <SDL3/SDL_keycode.h>
 
+#include "ui.h"
+
 #define CLAY_IMPLEMENTATION
 #include "clay/clay.h"
 #include "clay/renderers/clay_renderer_SDL3.c"
@@ -19,9 +21,6 @@ static const int SCREEN_TICKS_PER_FRAME = 1000 / SCREEN_FPS;
 
 static const int FONT_ID = 0;
 
-static const Clay_Color COLOR_BG = (Clay_Color){45, 53, 59, 255};
-static const Clay_Color COLOR_FG = (Clay_Color){211, 198, 170, 255};
-
 typedef struct {
   char key;
   float freq;
@@ -170,85 +169,6 @@ SDL_AppResult SDL_AppInit(void **appstate, int argc, char **argv) {
   return SDL_APP_CONTINUE;
 }
 
-void draw_white_key(size_t idx, bool pressed) {
-  Clay_Color fill_color;
-  Clay_Color border_color;
-
-  if (pressed) {
-	fill_color = COLOR_BG;
-	border_color = COLOR_FG;
-  } else {
-	fill_color = COLOR_FG;
-	border_color = COLOR_FG;
-  }
-  CLAY(CLAY_IDI("white_key", idx), {
-    .layout = {
-	  .sizing = {CLAY_SIZING_FIXED(40), .height = CLAY_SIZING_FIXED(100)},
-    },
-    .backgroundColor = fill_color,
-    .border = { .width = {1, 1, 1, 1, 0}, .color = border_color},
-  });  
-}
-
-void draw_black_key(size_t idx, bool pressed) {
-  Clay_Color fill_color;
-  Clay_Color border_color;
-
-  if (pressed) {
-	fill_color = COLOR_FG;
-	border_color = COLOR_BG;
-  } else {
-	fill_color = COLOR_BG;
-	border_color = COLOR_FG;
-  }
-  CLAY(CLAY_IDI("black_key", idx), {
-    .layout = {
-	  .sizing = {CLAY_SIZING_FIXED(25), .height = CLAY_SIZING_FIXED(65)},
-    },
-
-	.floating = {
-	  .attachTo = CLAY_ATTACH_TO_ELEMENT_WITH_ID,
-	  .parentId = CLAY_IDI("white_key", idx - 1).id,
-	  .attachPoints = {
-		.element = CLAY_ATTACH_POINT_CENTER_TOP,
-		.parent = CLAY_ATTACH_POINT_RIGHT_TOP,
-	  },
-	  .offset = {
-		.y = -1,
-	  },
-	},
-
-    .backgroundColor = fill_color,
-    .border = { .width = {1, 1, 0, 1, 0}, .color = border_color},
-  });
-}
-
-void draw_keyboard(bool *pressed_keys, size_t keys_amount) {
-  CLAY(CLAY_ID("keyboard"), {
-	  .layout = {
-		.layoutDirection = CLAY_LEFT_TO_RIGHT,
-	  },
-  }) {
-	for (size_t i = 0; i < keys_amount; i++) {
-	  bool pressed = pressed_keys[i];
-	  size_t key_idx = i % 12;
-	  if (key_idx <= 4) {
-		if (i % 2 == 0) {
-		  draw_white_key(i, pressed);
-		} else {
-		  draw_black_key(i, pressed);
-		}
-	  } else {
-		if (i % 2 == 0) {
-		  draw_black_key(i, pressed);
-		} else {
-		  draw_white_key(i, pressed);
-		}
-	  }
-	}
-  }
-}
-
 SDL_AppResult SDL_AppIterate(void *appstate) {
   app_state *state = appstate;
 
@@ -256,21 +176,8 @@ SDL_AppResult SDL_AppIterate(void *appstate) {
 
   Clay_BeginLayout();
 
-  CLAY(CLAY_ID("OuterContainer"), {
-    .layout = {
-	  .sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0)},
-	  .padding = CLAY_PADDING_ALL(16),
-	  .childGap = 16,
-	  .childAlignment = {
-		.x = CLAY_ALIGN_X_CENTER,
-		.y = CLAY_ALIGN_Y_CENTER,
-	  },
-	},
-    .backgroundColor = COLOR_BG,
-  }) {
-    draw_keyboard(state->last_keys, 12);
-  };
-  
+  draw_ui(state->last_keys, 12);
+
   Clay_RenderCommandArray render_commands = Clay_EndLayout();
 
   SDL_SetRenderDrawColor(state->renderer_data.renderer, 0, 0, 0, 255);
diff --git a/src/ui.c b/src/ui.c
new file mode 100644
index 0000000..7c90099
--- /dev/null
+++ b/src/ui.c
@@ -0,0 +1,97 @@
+#include "ui.h"
+
+void draw_white_key(size_t idx, bool pressed) {
+  Clay_Color fill_color;
+  Clay_Color border_color;
+
+  if (pressed) {
+	fill_color = COLOR_BG;
+	border_color = COLOR_FG;
+  } else {
+	fill_color = COLOR_FG;
+	border_color = COLOR_FG;
+  }
+  CLAY(CLAY_IDI("white_key", idx), {
+	.layout = {
+	  .sizing = {CLAY_SIZING_FIXED(40), .height = CLAY_SIZING_FIXED(100)},
+	},
+	.backgroundColor = fill_color,
+	.border = { .width = {1, 1, 1, 1, 0}, .color = border_color},
+  });  
+}
+
+void draw_black_key(size_t idx, bool pressed) {
+  Clay_Color fill_color;
+  Clay_Color border_color;
+
+  if (pressed) {
+	fill_color = COLOR_FG;
+	border_color = COLOR_BG;
+  } else {
+	fill_color = COLOR_BG;
+	border_color = COLOR_FG;
+  }
+  CLAY(CLAY_IDI("black_key", idx), {
+	.layout = {
+	  .sizing = {CLAY_SIZING_FIXED(25), .height = CLAY_SIZING_FIXED(65)},
+	},
+
+	.floating = {
+	  .attachTo = CLAY_ATTACH_TO_ELEMENT_WITH_ID,
+	  .parentId = CLAY_IDI("white_key", idx - 1).id,
+	  .attachPoints = {
+		.element = CLAY_ATTACH_POINT_CENTER_TOP,
+		.parent = CLAY_ATTACH_POINT_RIGHT_TOP,
+	  },
+	  .offset = {
+		.y = -1,
+	  },
+	},
+
+	.backgroundColor = fill_color,
+	.border = { .width = {1, 1, 0, 1, 0}, .color = border_color},
+  });
+}
+
+void draw_keyboard(bool *pressed_keys, size_t keys_amount) {
+  CLAY(CLAY_ID("keyboard"), {
+	  .layout = {
+		.layoutDirection = CLAY_LEFT_TO_RIGHT,
+	  },
+  }) {
+	for (size_t i = 0; i < keys_amount; i++) {
+	  bool pressed = pressed_keys[i];
+	  size_t key_idx = i % 12;
+	  if (key_idx <= 4) {
+		if (i % 2 == 0) {
+		  draw_white_key(i, pressed);
+		} else {
+		  draw_black_key(i, pressed);
+		}
+	  } else {
+		if (i % 2 == 0) {
+		  draw_black_key(i, pressed);
+		} else {
+		  draw_white_key(i, pressed);
+		}
+	  }
+	}
+  }
+}
+
+void draw_ui(bool *pressed_keys, size_t keys_amount) {
+  CLAY(CLAY_ID("OuterContainer"), {
+	  .layout = {
+		.sizing = {CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0)},
+		.padding = CLAY_PADDING_ALL(16),
+		.childGap = 16,
+		.childAlignment = {
+		  .x = CLAY_ALIGN_X_CENTER,
+		  .y = CLAY_ALIGN_Y_CENTER,
+		},
+	  },
+	  .backgroundColor = COLOR_BG,
+	}) {
+	draw_keyboard(pressed_keys, keys_amount);
+  };
+}
diff --git a/src/ui.h b/src/ui.h
new file mode 100644
index 0000000..f190ad2
--- /dev/null
+++ b/src/ui.h
@@ -0,0 +1,13 @@
+#ifndef UI_H_
+#define UI_H_
+
+#include <stdbool.h>
+#include <stddef.h>
+#include "clay/clay.h"
+
+static const Clay_Color COLOR_BG = (Clay_Color){45, 53, 59, 255};
+static const Clay_Color COLOR_FG = (Clay_Color){211, 198, 170, 255};
+
+void draw_ui(bool *pressed_keys, size_t keys_amount);
+
+#endif // UI_H_