chore: formatting fix in style.h

src/dice_container.c

@@ -35,13 +35,13 @@ void AddDieButton(enum Dice_Die die) {
 			.sizing = { CLAY_SIZING_FIXED(100), CLAY_SIZING_FIXED(100) },
 			.childAlignment = { CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER },
 		},
-		.image = { GetDiceImage(die) }
+		.image = { GetDiceImage(die, Clay_Hovered()) },
 	}) {
 		Clay_OnHover(&HandleAddDieButtonInteraction, die);
 		CLAY_TEXT(Dice_ToString(die), CLAY_TEXT_CONFIG({
-			.textColor = TextColors(0),
 			.H(2),
-			.textAlignment = CLAY_TEXT_ALIGN_CENTER
+			.textColor = TextColors(0),
+			.textAlignment = CLAY_TEXT_ALIGN_CENTER,
 		}));
 	}
 }
@@ -49,23 +49,22 @@ void AddDieButton(enum Dice_Die die) {
 static inline
 void DiceSelectorContainer() {
 	CLAY(CLAY_ID("DiceSelector"), {
-		.PANEL(0),
 		.layout = {
 			.sizing = { CLAY_SIZING_FIT(), CLAY_SIZING_GROW() },
-			.childAlignment = { CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER },
 		},
+		.PANEL(0),
 	}) {
-		CLAY(CLAY_ID("DiceSelectorInner"), {
+		CLAY_AUTO_ID({
 			.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 = panelPadding,
+				.sizing = { CLAY_SIZING_GROW(), CLAY_SIZING_GROW() },
+				.padding = { 2, 2, 5, 5 },
+				.childAlignment = { CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_TOP },
 			},
 			.clip = {
-				true, true, Clay_GetScrollOffset(),
+				false, true, Clay_GetScrollOffset(),
 			},
+			.LISTCONTAINER(0),
 		}) {
 			AddDieButton(D4);
 			AddDieButton(D6);
@@ -93,7 +92,7 @@ void RemoveDieButton(enum Dice_Die die, int index) {
 			.sizing = { CLAY_SIZING_FIXED(200), CLAY_SIZING_FIXED(200) },
 			.childAlignment = { CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER },
 		},
-		.image = { GetDiceImage(die) },
+		.image = { GetDiceImage(die, Clay_Hovered()) },
 	}) {
 		size_t result_length;
 		struct Dice_ResultType const *result = Dice_GetLastResult(&result_length);
@@ -115,24 +114,23 @@ static inline
 void ActiveDiceContainer() {
 	CLAY(CLAY_ID("ActiveDice"), {
 		.layout = {
+			.sizing = { CLAY_SIZING_GROW(), CLAY_SIZING_GROW() },
 			.layoutDirection = CLAY_TOP_TO_BOTTOM,
 			.childAlignment = { CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER },
-			.sizing = { CLAY_SIZING_GROW(), CLAY_SIZING_GROW() },
 		},
 		.PANEL(0),
 	}) {
 		CLAY(CLAY_ID("ActiveDiceInner"), {
 			.layout = {
-				.sizing = { CLAY_SIZING_GROW(), CLAY_SIZING_GROW() },
+				.sizing = { CLAY_SIZING_FIT(), CLAY_SIZING_GROW() },
 				.layoutDirection = CLAY_LEFT_TO_RIGHT,
-				.childAlignment = { CLAY_ALIGN_X_CENTER, CLAY_ALIGN_Y_CENTER },
+				.childAlignment = { CLAY_ALIGN_X_LEFT, CLAY_ALIGN_Y_CENTER },
 				.childGap = 16,
 				.padding = { 100, 100, 0, 0 },
 			},
 			.clip = {
-				true, true,
-				{ Clay_GetScrollOffset().x, 0 },
-			},
+				true, true, { Clay_GetScrollOffset().x, 0 }
+			}
 		}) {
 			size_t dice_count = 0;
 			enum Dice_Die const *dice = Dice_GetActiveSet(&dice_count);

src/main.c

@@ -139,9 +139,9 @@ int main(int argc, char *argv[]) {
 					break;
 				case SDL_EVENT_MOUSE_WHEEL:
 					if (shiftDown) {
-						scrollMotion = (Clay_Vector2) { event.wheel.y * 5.f, event.wheel.x * 5.f };
+						scrollMotion = (Clay_Vector2) { event.wheel.y * 2.f, -event.wheel.x * 5.f };
 					} else {
-						scrollMotion = (Clay_Vector2) { event.wheel.x * 5.f, event.wheel.y * 5.f };
+						scrollMotion = (Clay_Vector2) { -event.wheel.x * 2.f, event.wheel.y * 5.f };
 					}
 					break;
 				case SDL_EVENT_MOUSE_MOTION:
@@ -169,6 +169,7 @@ int main(int argc, char *argv[]) {
 		Clay_RenderCommandArray array = RenderApplication();
 		SDL_Clay_RenderClayCommands(&backendData, &array);
 		SDL_RenderPresent(renderer);
+		SDL_Delay(10);
 	}
 	SDL_DestroyRenderer(renderer);
 	SDL_DestroyWindow(window);

src/resources.c

@@ -7,6 +7,7 @@
 
 TTF_Font *fonts[FONT_MAX];
 SDL_Texture *diceImages[DICE_IMAGE_MAX];
+SDL_Texture *diceImagesSelected[DICE_IMAGE_MAX];
 TTF_TextEngine *textEngine = nullptr;
 
 static inline
@@ -32,33 +33,42 @@ void LoadDiceImages() {
 		SDL_LogError(SDL_LOG_CATEGORY_ERROR, "IMG_LoadTexture Failed to load die texture: %s", SDL_GetError());
 		exit(7);
 	}
+	diceImagesSelected[COIN_IMAGE] = IMG_LoadTexture(renderer, "assets/icons/d2.svg");
 	if(!(diceImages[D4_IMAGE] = IMG_LoadTexture(renderer, "assets/icons/d4.svg"))) {
 		SDL_LogError(SDL_LOG_CATEGORY_ERROR, "IMG_LoadTexture Failed to load die texture: %s", SDL_GetError());
 		exit(7);
 	}
+	diceImagesSelected[D4_IMAGE] = IMG_LoadTexture(renderer, "assets/icons/d4.svg");
 	if(!(diceImages[D6_IMAGE] = IMG_LoadTexture(renderer, "assets/icons/d6.svg"))) {
 		SDL_LogError(SDL_LOG_CATEGORY_ERROR, "IMG_LoadTexture Failed to load die texture: %s", SDL_GetError());
 		exit(7);
 	}
+	diceImagesSelected[D6_IMAGE] = IMG_LoadTexture(renderer, "assets/icons/d6.svg");
 	if(!(diceImages[D8_IMAGE] = IMG_LoadTexture(renderer, "assets/icons/d8.svg"))) {
 		SDL_LogError(SDL_LOG_CATEGORY_ERROR, "IMG_LoadTexture Failed to load die texture: %s", SDL_GetError());
 		exit(7);
 	}
+	diceImagesSelected[D8_IMAGE] = IMG_LoadTexture(renderer, "assets/icons/d8.svg");
 	if(!(diceImages[D10_IMAGE] = IMG_LoadTexture(renderer, "assets/icons/d10.svg"))) {
 		SDL_LogError(SDL_LOG_CATEGORY_ERROR, "IMG_LoadTexture Failed to load die texture: %s", SDL_GetError());
 		exit(7);
 	}
+	diceImagesSelected[D10_IMAGE] = IMG_LoadTexture(renderer, "assets/icons/d10.svg");
 	if(!(diceImages[D12_IMAGE] = IMG_LoadTexture(renderer, "assets/icons/d12.svg"))) {
 		SDL_LogError(SDL_LOG_CATEGORY_ERROR, "IMG_LoadTexture Failed to load die texture: %s", SDL_GetError());
 		exit(7);
 	}
+	diceImagesSelected[D12_IMAGE] = IMG_LoadTexture(renderer, "assets/icons/d12.svg");
 	if(!(diceImages[D20_IMAGE] = IMG_LoadTexture(renderer, "assets/icons/d20.svg"))) {
 		SDL_LogError(SDL_LOG_CATEGORY_ERROR, "IMG_LoadTexture Failed to load die texture: %s", SDL_GetError());
 		exit(7);
 	}
+	diceImagesSelected[D20_IMAGE] = IMG_LoadTexture(renderer, "assets/icons/d20.svg");
 	for (size_t i = 0; i < DICE_IMAGE_MAX; ++i) {
 		Clay_Color color = dieColors[i];
 		SDL_SetTextureColorMod(diceImages[i], color.r, color.g, color.b);
+		color = ToHoveredColor(dieColors[i]);
+		SDL_SetTextureColorMod(diceImagesSelected[i], color.r, color.g, color.b);
 	}
 }
 
@@ -67,23 +77,22 @@ void LoadResources() {
 	LoadDiceImages();
 }
 
-SDL_Texture *GetDiceImage(enum Dice_Die die) {
+SDL_Texture *GetDiceImage(enum Dice_Die die, bool selected) {
 	switch (die) {
 		case COIN:
-			return diceImages[COIN_IMAGE];
+			return selected ? diceImagesSelected[COIN_IMAGE] : diceImages[COIN_IMAGE];
 		case D4:
-			return diceImages[D4_IMAGE];
+			return selected ? diceImagesSelected[D4_IMAGE] : diceImages[D4_IMAGE];
 		case D6:
-			return diceImages[D6_IMAGE];
+			return selected ? diceImagesSelected[D6_IMAGE] : diceImages[D6_IMAGE];
 		case D8:
-			return diceImages[D8_IMAGE];
+			return selected ? diceImagesSelected[D8_IMAGE] : diceImages[D8_IMAGE];
 		case D10:
-			return diceImages[D10_IMAGE];
-		case D12:
-			return diceImages[D12_IMAGE];
-		case D20:
-			return diceImages[D20_IMAGE];
 		case D100:
-			return diceImages[D10_IMAGE];
+			return selected ? diceImagesSelected[D10_IMAGE] : diceImages[D10_IMAGE];
+		case D12:
+			return selected ? diceImagesSelected[D12_IMAGE] : diceImages[D12_IMAGE];
+		case D20:
+			return selected ? diceImagesSelected[D20_IMAGE] : diceImages[D20_IMAGE];
 	}
 }

src/resources.h

@@ -26,9 +26,10 @@ enum DiceImages {
 extern TTF_TextEngine *textEngine;
 extern TTF_Font *fonts[FONT_MAX];
 extern SDL_Texture *diceImages[DICE_IMAGE_MAX];
+extern SDL_Texture *diceImagesSelected[DICE_IMAGE_MAX];
 
 extern void LoadResources();
 
-extern SDL_Texture *GetDiceImage(enum Dice_Die die);
+extern SDL_Texture *GetDiceImage(enum Dice_Die die, bool selected);
 
 #endif // !RESOURCES_H

src/style.c

@@ -30,7 +30,12 @@ Clay_Color TextColors(size_t idx) {
 }
 
 Clay_Color WindowBackground() {
-	return (Clay_Color) { 255*windowBackground, 255*windowBackground, 255*windowBackground, 255 };
+	return (Clay_Color) {
+		255*windowBackground,
+		255*windowBackground,
+		255*windowBackground,
+		255
+	};
 }
 
 Clay_ElementDeclaration WindowStyle() {

src/style.h

@@ -36,9 +36,13 @@ constexpr Clay_Padding panelPadding = {
 	24, 24,
 };
 
+#define LISTCONTAINER(depth_)\
+border = { PanelBorder(depth_), CLAY_BORDER_ALL(2) },\
+.cornerRadius = defaultRadiusAll
+
 #define PANEL(depth_)\
 backgroundColor = PanelBackground(depth_),\
-.border = { PanelBackground(depth_), CLAY_BORDER_ALL(2) },\
+.border = { PanelBorder(depth_), CLAY_BORDER_OUTSIDE(2) },\
 .cornerRadius = defaultRadiusAll
 
 ////////////////////////////////////
@@ -59,8 +63,8 @@ constexpr uint16_t headerSizes[] = {
 };
 
 #define BODY()\
-	fontId = FONT_DEFAULT,\
-	.fontSize = baseFontSize
+fontId = FONT_DEFAULT,\
+.fontSize = baseFontSize
 
 #define H(level_)\
 fontId = FONT_BOLD,\
@@ -111,7 +115,7 @@ constexpr Clay_CornerRadius defaultRadiusAll = {
 };
 
 extern Clay_Color PanelBackground(size_t idx);
-extern Clay_Color PanelBackground(size_t idx);
+extern Clay_Color PanelBorder(size_t idx);
 extern Clay_Color TextColors(size_t idx);
 extern Clay_Color WindowBackground();
 extern Clay_ElementDeclaration WindowStyle();