Add ui scaling (works kinda strange)

3 files changed, 19 insertions, 11 deletions

diff --git a/src/main.c b/src/main.c
index 749be94..a2f8296 100644
--- a/src/main.c
+++ b/src/main.c
@@ -22,6 +22,10 @@ static const int SCREEN_FPS = 60;
 static const int SCREEN_TICKS_PER_FRAME = 1000 / SCREEN_FPS;
 
 static const int FONT_ID = 0;
+static const Clay_Dimensions DEFAULT_DIMENSIONS = {
+  .width = 1280,
+  .height = 720,
+};
 
 typedef struct {
   bool pressed;
@@ -189,7 +193,7 @@ int init_ui(app_state *state) {
 	return 1;
   }
 
-  if (!SDL_CreateWindowAndRenderer("crynth", 640, 480, SDL_WINDOW_RESIZABLE | SDL_WINDOW_BORDERLESS, &state->window, &state->renderer_data.renderer)) {
+  if (!SDL_CreateWindowAndRenderer("crynth", DEFAULT_DIMENSIONS.width, DEFAULT_DIMENSIONS.height, SDL_WINDOW_RESIZABLE | SDL_WINDOW_BORDERLESS, &state->window, &state->renderer_data.renderer)) {
 	return 1;
   }
 
@@ -265,12 +269,15 @@ SDL_AppResult SDL_AppIterate(void *appstate) {
 
   int start_tick = SDL_GetTicks();
 
+  Clay_Dimensions dimensions = Clay_GetCurrentContext()->layoutDimensions;
+
   UIData *ui_data = arena_alloc(arena, sizeof(UIData));
   ui_data->msg_queue = &state->msg_queue;
   ui_data->keys = state->keys;
   ui_data->keys_amount = 12;
   ui_data->arena = arena;
   ui_data->knob_settings = &state->knob_settings;
+  ui_data->scale = dimensions.width / DEFAULT_DIMENSIONS.width;
 
   Clay_SetPointerState((Clay_Vector2){ state->pointer.position_x, state->pointer.position_y }, state->pointer.pressed);
   Clay_UpdateScrollContainers(true, (Clay_Vector2){ state->pointer.pending_scroll_delta_x, state->pointer.pending_scroll_delta_y }, 0.016f);
diff --git a/src/ui.c b/src/ui.c
index fcc9877..5d2297e 100644
--- a/src/ui.c
+++ b/src/ui.c
@@ -153,7 +153,7 @@ void draw_white_key(size_t idx, UIData *ui_data) {
 	}
 	CLAY(CLAY_IDI("white_key", idx), {
 	  .layout = {
-	    .sizing = {CLAY_SIZING_FIXED(40), CLAY_SIZING_FIXED(100)},
+	    .sizing = {CLAY_SIZING_FIXED(40 * ui_data->scale), CLAY_SIZING_FIXED(100 * ui_data->scale)},
 	  },
 	  .backgroundColor = fill_color,
 	  .border = { .width = {1, 1, 1, 1, 0}, .color = border_color},
@@ -209,7 +209,7 @@ void draw_black_key(size_t idx, UIData *ui_data) {
 	
 	CLAY(CLAY_IDI("black_key", idx), {
       .layout = {
-	    .sizing = {CLAY_SIZING_FIXED(25), CLAY_SIZING_FIXED(65)},
+	    .sizing = {CLAY_SIZING_FIXED(25 * ui_data->scale), CLAY_SIZING_FIXED(65 * ui_data->scale)},
 	  },
 	  .backgroundColor = fill_color,
       .border = { .width = {1, 1, 0, 1, 0}, .color = border_color},
@@ -220,7 +220,7 @@ void draw_black_key(size_t idx, UIData *ui_data) {
 void draw_keyboard(UIData *ui_data) {
   CLAY(CLAY_ID("keyboard_container"), {
 	  .layout = {
-		.sizing = {CLAY_SIZING_FIXED(280), CLAY_SIZING_FIXED(100)},
+		.sizing = {CLAY_SIZING_FIXED(280 * ui_data->scale), CLAY_SIZING_FIXED(100 * ui_data->scale)},
 		.layoutDirection = CLAY_LEFT_TO_RIGHT,
 		.childAlignment = {CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER},
 	  },
@@ -294,18 +294,18 @@ void draw_knob(Clay_ElementId id, UIData *ui_data, KnobInfo* knob_info, Clay_Siz
 void draw_panel(UIData *ui_data) {
   CLAY(CLAY_ID("panel_container"), {
 	  .layout = {
-		.sizing = {CLAY_SIZING_FIXED(450), CLAY_SIZING_FIXED(100)},
+		.sizing = {CLAY_SIZING_FIXED(450 * ui_data->scale), CLAY_SIZING_FIXED(100 * ui_data->scale)},
 		.childGap = 30,
 		.childAlignment = {CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER},
 	  },
   }) {
 	CLAY(CLAY_ID("volume_knob_container")) {
-	  draw_knob(CLAY_ID("volume_knob"), ui_data, &ui_data->knob_settings->volume, CLAY_SIZING_FIXED(85), CLAY_SIZING_FIXED(45));
+	  draw_knob(CLAY_ID("volume_knob"), ui_data, &ui_data->knob_settings->volume, CLAY_SIZING_FIXED(85 * ui_data->scale), CLAY_SIZING_FIXED(45 * ui_data->scale));
 	}
 
 	CLAY(CLAY_ID("wave_screen"), {
 		.layout = {
-		  .sizing = {CLAY_SIZING_FIXED(200), CLAY_SIZING_FIXED(100)},
+		  .sizing = {CLAY_SIZING_FIXED(200 * ui_data->scale), CLAY_SIZING_FIXED(100 * ui_data->scale)},
 		},
 		.border = { .width = {1, 1, 1, 1, 0}, .color = COLOR_FG },
 	  });
@@ -321,16 +321,16 @@ void draw_panel(UIData *ui_data) {
 			.childGap = 5,
 		  },
 	  }) {
-		draw_knob(CLAY_ID("attack_knob"), ui_data, &ui_data->knob_settings->attack, CLAY_SIZING_FIXED(40), CLAY_SIZING_FIXED(21));
-		draw_knob(CLAY_ID("decay_knob"), ui_data, &ui_data->knob_settings->decay, CLAY_SIZING_FIXED(40), CLAY_SIZING_FIXED(21));
+		draw_knob(CLAY_ID("attack_knob"), ui_data, &ui_data->knob_settings->attack, CLAY_SIZING_FIXED(40 * ui_data->scale), CLAY_SIZING_FIXED(21 * ui_data->scale));
+		draw_knob(CLAY_ID("decay_knob"), ui_data, &ui_data->knob_settings->decay, CLAY_SIZING_FIXED(40 * ui_data->scale), CLAY_SIZING_FIXED(21 * ui_data->scale));
 	  }
 	  CLAY(CLAY_ID("envelope_knobs_lower"), {
 		  .layout = {
 			.childGap = 5,
 		  },
 	  }) {
-		draw_knob(CLAY_ID("sustain_knob"), ui_data, &ui_data->knob_settings->sustain, CLAY_SIZING_FIXED(40), CLAY_SIZING_FIXED(21));
-		draw_knob(CLAY_ID("release_knob"), ui_data, &ui_data->knob_settings->release, CLAY_SIZING_FIXED(40), CLAY_SIZING_FIXED(21));
+		draw_knob(CLAY_ID("sustain_knob"), ui_data, &ui_data->knob_settings->sustain, CLAY_SIZING_FIXED(40 * ui_data->scale), CLAY_SIZING_FIXED(21 * ui_data->scale));
+		draw_knob(CLAY_ID("release_knob"), ui_data, &ui_data->knob_settings->release, CLAY_SIZING_FIXED(40 * ui_data->scale), CLAY_SIZING_FIXED(21 * ui_data->scale));
 	  }
 	}
   };
diff --git a/src/ui.h b/src/ui.h
index 3c89d3e..daf4596 100644
--- a/src/ui.h
+++ b/src/ui.h
@@ -48,6 +48,7 @@ typedef struct {
   size_t keys_amount;
   KnobSettings *knob_settings;
   Arena *arena;
+  float scale;
 } UIData;
 
 typedef struct {