1 files changed, 4 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);