fix: renamed INNER_CONTAINER to CONTAINER

src/application.c

@@ -11,7 +11,7 @@ void DiceLogContainer() {
 			.sizing = layoutExpand,
 			.padding = CLAY_PADDING_ALL(16),
 		},
-		.INNER_CONTAINER(0),
+		.CONTAINER(0),
 	}) {}
 }
 
@@ -22,7 +22,7 @@ void InitiativeListContainer() {
 			.sizing = layoutExpand,
 			.padding = CLAY_PADDING_ALL(16),
 		},
-		.INNER_CONTAINER(0),
+		.CONTAINER(0),
 	}) {}
 }
 

src/dice.c

@@ -26,7 +26,8 @@ size_t add_die_to_active(enum die_type die) {
 }
 
 void remove_die_from_active(size_t index) {
-	memmove(active_dice_set + index + 1, active_dice_set + index, MAX_ACTIVE_DICE - index - 1);
+	memcpy(active_dice_set + index, active_dice_set + index + 1, MAX_ACTIVE_DICE - index - 1);
+	--current_active_count;
 }
 
 struct roll_result_type roll_active_dice_set(enum die_type die) {
@@ -42,3 +43,15 @@ struct roll_result_type roll_active_dice_set(enum die_type die) {
 	return results;
 }
 
+Clay_String die_to_str(enum die_type die) {
+	switch (die) {
+		case COIN: return CLAY_STRING("C");
+		case D4: return CLAY_STRING("4");
+		case D6: return CLAY_STRING("6");
+		case D8: return CLAY_STRING("8");
+		case D10: return CLAY_STRING("10");
+		case D12: return CLAY_STRING("12");
+		case D20: return CLAY_STRING("20");
+		case D100: return CLAY_STRING("100");
+	}
+}

src/dice.h

@@ -1,15 +1,17 @@
 #ifndef DICE_H
 #define DICE_H
 
+#include "renderer/clay_renderer_SDL3.h"
 #include <stdlib.h>
 
 #ifndef MAX_ACTIVE_DICE
-#define MAX_ACTIVE_DICE 5
+#define MAX_ACTIVE_DICE 20
 #endif
 
 enum die_type {
 	COIN = 2,
 	D4 = 4,
+	D6 = 6,
 	D8 = 8,
 	D10 = 10,
 	D12 = 12,
@@ -30,4 +32,6 @@ extern size_t add_die_to_active(enum die_type die);
 extern void remove_die_from_active(size_t index);
 extern struct roll_result_type roll_active_dice_set(enum die_type die);
 
+extern Clay_String die_to_str(enum die_type die);
+
 #endif // !DICE_H

src/dice_container.c

@@ -1,38 +1,126 @@
 #include "dice_container.h"
+#include <SDL3/SDL_mouse.h>
 #include <clay/clay.h>
+#include <stdint.h>
 #include "style.h"
+#include "dice.h"
+
+static
+void HandleAddDieButtonInteraction(Clay_ElementId element, Clay_PointerData pointer, intptr_t die) {
+	if (pointer.state == CLAY_POINTER_DATA_PRESSED_THIS_FRAME) {
+		add_die_to_active((enum die_type)die);
+	}
+}
+
+static inline
+void AddDieButton(enum die_type die) {
+	CLAY(CLAY_IDI("AddDieButton", die), {
+		.layout = {
+			.sizing = { CLAY_SIZING_FIXED(100), CLAY_SIZING_FIXED(100) },
+			.childAlignment = { CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER },
+		},
+		.backgroundColor = DieButtonColor(die, Clay_Hovered()),
+	}) {
+		Clay_OnHover(&HandleAddDieButtonInteraction, die);
+		CLAY_TEXT(die_to_str(die), CLAY_TEXT_CONFIG({
+			.textColor = TextColors(0),
+			.H(2),
+		}));
+	}
+}
 
 static inline
 void DiceSelectorContainer() {
 	CLAY(CLAY_ID("DiceSelector"), {
+		.CONTAINER(0),
 		.layout = {
-			.layoutDirection = CLAY_TOP_TO_BOTTOM,
-			.sizing = { CLAY_SIZING_PERCENT(0.15), CLAY_SIZING_GROW(0) },
-			.padding = containerPadding,
-			.childGap = paragraphGap,
+			.sizing = { CLAY_SIZING_FIT(), CLAY_SIZING_GROW() },
+			.childAlignment = { CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER },
 		},
-		.INNER_CONTAINER(0),
-	}) { }
+	}) {
+		CLAY(CLAY_ID("DiceSelectorInner"), {
+			.layout = {
+				.layoutDirection = CLAY_TOP_TO_BOTTOM,
+				.childGap = paragraphGap,
+				.childAlignment = { CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER },
+				.sizing = { CLAY_SIZING_FIT(), CLAY_SIZING_FIT() },
+				.padding = containerPadding,
+			},
+			.clip = {
+				false, true, Clay_GetScrollOffset(),
+			},
+		}) {
+			AddDieButton(COIN);
+			AddDieButton(D4);
+			AddDieButton(D6);
+			AddDieButton(D8);
+			AddDieButton(D10);
+			AddDieButton(D12);
+			AddDieButton(D20);
+			AddDieButton(D100);
+		}
+	}
+}
+
+static
+void HandleRemoveDieButtonInteraction(Clay_ElementId element, Clay_PointerData pointer, intptr_t index) {
+	if (pointer.state == CLAY_POINTER_DATA_PRESSED_THIS_FRAME) {
+		remove_die_from_active(index);
+	}
+}
+
+static inline
+void RemoveDieButton(enum die_type die, int index) {
+	CLAY(CLAY_IDI("RemoveDieButton", index), {
+		.layout = {
+			.sizing = { CLAY_SIZING_FIXED(200), CLAY_SIZING_FIXED(200) },
+			.childAlignment = { CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER },
+		},
+		.backgroundColor = DieButtonColor(die, Clay_Hovered()),
+	}) {
+		Clay_OnHover(&HandleRemoveDieButtonInteraction, index);
+		CLAY_TEXT(die_to_str(die), CLAY_TEXT_CONFIG({
+			.H(1),
+			.textColor = TextColors(0)
+		}));
+	}
 }
 
 static inline
 void ActiveDiceContainer() {
 	CLAY(CLAY_ID("ActiveDice"), {
 		.layout = {
-			.layoutDirection = CLAY_TOP_TO_BOTTOM,
-			.sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0) },
-			.padding = containerPadding,
-			.childGap = paragraphGap,
+			.sizing = { CLAY_SIZING_GROW(), CLAY_SIZING_GROW() },
 		},
-		.INNER_CONTAINER(0),
-	}) { }
+		.clip = {
+			true, true,
+			{ Clay_GetScrollOffset().x, 0 },
+		},
+		.CONTAINER(0),
+	}) {
+		CLAY(CLAY_ID("ActiveDiceInner"), {
+			.layout = {
+				.sizing = { CLAY_SIZING_GROW(), CLAY_SIZING_GROW() },
+				.layoutDirection = CLAY_LEFT_TO_RIGHT,
+				.childAlignment = { CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER },
+				.childGap = 16,
+				.padding = { 100, 100, 0, 0 },
+			},
+		}) {
+			size_t dice_count = 0;
+			enum die_type const *dice = get_active_dice_set(&dice_count);
+			for (size_t i = 0; i < dice_count; ++i) {
+				RemoveDieButton(dice[i], i);
+			}
+		}
+	}
 }
 
 void DiceContainer() {
 	CLAY(CLAY_ID("DiceContainer"), {
 		.layout = {
 			.layoutDirection = CLAY_LEFT_TO_RIGHT,
-			.sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_PERCENT(0.4) },
+			.sizing = { CLAY_SIZING_GROW(), CLAY_SIZING_PERCENT(0.4) },
 			.childGap = containerGap
 		},
 	}) {

src/main.c

@@ -1,4 +1,5 @@
 #include <SDL3/SDL_hints.h>
+#include <SDL3/SDL_keycode.h>
 #include <SDL3/SDL_oldnames.h>
 #include <clay/clay.h>
 #include "renderer/clay_renderer_SDL3.h"
@@ -48,7 +49,7 @@ void LogOutputResolution() {
 	SDL_Log("output size: %i, %d", w, h);
 }
 
-static inline
+static
 Clay_Dimensions MeasureText(Clay_StringSlice text, Clay_TextElementConfig *config, void *userData) {
 	TTF_Font **fonts = userData;
 	TTF_Font *font = fonts[config->fontId];
@@ -57,10 +58,7 @@ Clay_Dimensions MeasureText(Clay_StringSlice text, Clay_TextElementConfig *confi
 	if (!TTF_GetStringSize(font, text.chars, text.length, &width, &height)) {
 		SDL_LogError(SDL_LOG_CATEGORY_ERROR, "MeasureText failed to measure text %s", SDL_GetError());
 	}
-	return (Clay_Dimensions) {
-		.width = text.length * config->fontSize,
-		.height = config->fontSize
-	};
+	return (Clay_Dimensions) { width, height };
 }
 
 static
@@ -132,7 +130,14 @@ int main(int argc, char *argv[]) {
 		.textEngine = textEngine,
 	};
 	SDL_Event event;
+	uint64_t startFrameTime = SDL_GetTicksNS();
+	double deltaTime = 0.0;
+	bool mouseButtonDown = false;
+	bool shiftDown = false;
 	while (running) {
+		deltaTime = SDL_GetTicksNS() - startFrameTime;
+		startFrameTime = SDL_GetTicksNS();
+		Clay_Vector2 scrollMotion = { 0, 0 };
 		while (SDL_PollEvent(&event)) {
 			HandleEvent(event);
 			switch (event.type) {
@@ -147,17 +152,32 @@ int main(int argc, char *argv[]) {
 					LogOutputResolution();
 					break;
 				case SDL_EVENT_MOUSE_WHEEL:
-					Clay_UpdateScrollContainers(true, (Clay_Vector2){ event.wheel.x, event.wheel.y }, 0.01f);
+					if (shiftDown) {
+						scrollMotion = (Clay_Vector2) { event.wheel.y * 2.f, event.wheel.x * 2.f };
+					} else {
+						scrollMotion = (Clay_Vector2) { event.wheel.x * 2.f, event.wheel.y * 2.f };
+					}
 					break;
 				case SDL_EVENT_MOUSE_MOTION:
-					Clay_SetPointerState((Clay_Vector2) { event.motion.x, event.motion.y }, event.motion.state & SDL_BUTTON_LEFT);
+					Clay_SetPointerState((Clay_Vector2) { event.motion.x, event.motion.y }, mouseButtonDown);
 					break;
 				case SDL_EVENT_MOUSE_BUTTON_DOWN:
-					Clay_SetPointerState((Clay_Vector2) { event.button.x, event.button.y }, event.button.button == SDL_BUTTON_LEFT);
-				default:
+				case SDL_EVENT_MOUSE_BUTTON_UP:
+					if (event.button.button == SDL_BUTTON_LEFT) {
+						mouseButtonDown = event.button.down;
+						Clay_SetPointerState((Clay_Vector2) { event.button.x, event.button.y }, mouseButtonDown);
+					}
 					break;
+				case SDL_EVENT_KEY_DOWN:
+				case SDL_EVENT_KEY_UP:
+					if (event.key.key == SDLK_LSHIFT || event.key.key == SDLK_RSHIFT) {
+						shiftDown = event.key.down;
+					}
+					break;
+				default: break;
 			}
 		}
+		Clay_UpdateScrollContainers(true, scrollMotion, deltaTime);
 		SDL_SetRenderDrawColor(renderer, 10, 10, 10, 255);
 		SDL_RenderClear(renderer);
 		Clay_RenderCommandArray array = RenderApplication();

src/style.c

@@ -1,5 +1,7 @@
 #include "style.h"
+#include "application.h"
 #include "defs.h"
+#include "dice.h"
 
 Clay_Color ContainerBackgrounds(size_t idx) {
 	return (Clay_Color) {
@@ -43,3 +45,28 @@ Clay_ElementDeclaration WindowStyle() {
 		.backgroundColor = WindowBackground()
 	};
 }
+
+Clay_Color DieColor(enum die_type die) {
+	switch(die) {
+		case COIN: return (Clay_Color) { 230, 184, 48, 255 };
+		case D4: return (Clay_Color) { 177, 56, 52, 255 };
+		case D6: return (Clay_Color) { 115, 177, 52, 255 };
+		case D8: return (Clay_Color) { 52, 177, 125, 255 };
+		case D10: return (Clay_Color) { 52, 177, 176, 255 };
+		case D12: return (Clay_Color) { 52, 93, 177, 255 };
+		case D20: return (Clay_Color) { 177, 52, 140, 255 };
+		case D100: return (Clay_Color) { 95, 52, 177, 255 };
+		default: return (Clay_Color) { 0, 0, 0, 255 };
+	}
+}
+
+Clay_Color DieButtonColor(enum die_type die, bool selected) {
+	Clay_Color color = DieColor(die);
+	if (selected) {
+		float avg = (color.r + color.g + color.b) / 3.f;
+		color.r = (color.r - avg) * 0.8f + avg - 30;
+		color.g = (color.g - avg) * 0.8f + avg - 30;
+		color.b = (color.b - avg) * 0.8f + avg - 30;
+	}
+	return color;
+}

src/style.h

@@ -2,15 +2,23 @@
 #define STYLE_H
 
 #include "defs.h"
+#include "dice.h"
 #include <clay/clay.h>
 #include <stdint.h>
 
+////////////////////////////////////
+// WINDOW STYLE
+////////////////////////////////////
+
+constexpr uint16_t windowPadding = 10;
+constexpr float windowBackground = 0.15f;
+
 ////////////////////////////////////
 // CONTAINER STYLE
 ////////////////////////////////////
 
 constexpr uint16_t containerGap = 10;
-constexpr double defaultRadius = 5.;
+constexpr double defaultRadius = 5.0;
 
 constexpr float containerBackgrounds[] = {
 	.2f,
@@ -24,22 +32,14 @@ constexpr float containerBorders[] = {
 };
 
 constexpr Clay_Padding containerPadding = {
-	32, 32,
-	16, 16
+	24, 24,
+	24, 24,
 };
 
-#define INNER_CONTAINER(depth_)\
-	backgroundColor = ContainerBackgrounds(depth_),\
-	.border = { ContainerBorders(depth_), CLAY_BORDER_ALL(2) },\
-	.cornerRadius = defaultRadiusAll
-
-
-////////////////////////////////////
-// WINDOW STYLE
-////////////////////////////////////
-
-constexpr uint16_t windowPadding = containerGap;
-constexpr float windowBackground = .18f;
+#define CONTAINER(depth_)\
+backgroundColor = ContainerBackgrounds(depth_),\
+.border = { ContainerBorders(depth_), CLAY_BORDER_ALL(2) },\
+.cornerRadius = defaultRadiusAll
 
 ////////////////////////////////////
 // TEXT STYLE
@@ -58,30 +58,19 @@ constexpr uint16_t headerSizes[] = {
 	28, 16
 };
 
-#define TEXT_STYLE(color_)\
-	textColor = TextColors(color_)
-
 #define BODY(color_)\
 	fontId = FONT_DEFAULT,\
-	.fontSize = baseFontSize,\
-	.TEXT_STYLE(color_)
+	.fontSize = baseFontSize
 
-#define H(level_, color_)\
-	fontId = FONT_BOLD,\
-	.fontSize = headerSizes[(level_)-1],\
-	.TEXT_STYLE(color_)
+#define H(level_)\
+fontId = FONT_BOLD,\
+.fontSize = headerSizes[(level_)-1]
 
 ////////////////////////////////////
 // COMPILATIONS
 // | Functions and expressions that combine styling data from the settings above.
 ////////////////////////////////////
 
-extern Clay_Color ContainerBackgrounds(size_t idx);
-extern Clay_Color ContainerBorders(size_t idx);
-extern Clay_Color TextColors(size_t idx);
-extern Clay_Color WindowBackground();
-extern Clay_ElementDeclaration WindowStyle();
-
 constexpr Clay_Sizing layoutExpand = {
 	.width = CLAY_SIZING_GROW(0),
 	.height = CLAY_SIZING_GROW(0)
@@ -92,4 +81,12 @@ constexpr Clay_CornerRadius defaultRadiusAll = {
 	defaultRadius, defaultRadius
 };
 
+extern Clay_Color ContainerBackgrounds(size_t idx);
+extern Clay_Color ContainerBorders(size_t idx);
+extern Clay_Color TextColors(size_t idx);
+extern Clay_Color WindowBackground();
+extern Clay_ElementDeclaration WindowStyle();
+extern Clay_Color DieColor(enum die_type die);
+extern Clay_Color DieButtonColor(enum die_type die, bool selected);
+
 #endif // !STYLE_H