chore: moved dice container UI code to separate file

src/application.c

@@ -1,57 +1,9 @@
 #include "application.h"
-
+#include "dice_container.h"
 #include "style.h"
 #include <SDL3/SDL.h>
 #include <clay/clay.h>
 
-static inline
-void DiceSelectorContainer() {
-	CLAY(CLAY_ID("DiceSelector"), {
-		.layout = {
-			.layoutDirection = CLAY_TOP_TO_BOTTOM,
-			.sizing = { CLAY_SIZING_PERCENT(0.15), CLAY_SIZING_GROW(0) },
-			.padding = containerPadding,
-			.childGap = paragraphGap,
-		},
-		.INNER_CONTAINER(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,
-		},
-		.INNER_CONTAINER(0),
-	}) {
-		CLAY_TEXT(CLAY_STRING("Header Text"), CLAY_TEXT_CONFIG({
-			.H(1, 0),
-		}));
-		CLAY_TEXT(CLAY_STRING("Content text"), CLAY_TEXT_CONFIG({
-			.BODY(0),
-		}));
-	}
-}
-
-static inline
-void DiceContainer() {
-	CLAY(CLAY_ID("DiceContainer"), {
-		.layout = {
-			.layoutDirection = CLAY_LEFT_TO_RIGHT,
-			.sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_PERCENT(0.4) },
-			.childGap = containerGap
-		},
-	}) {
-		DiceSelectorContainer();
-		ActiveDiceContainer();
-	}
-}
-
 static inline
 void DiceLogContainer() {
 	CLAY(CLAY_ID("LogContainer"), {
@@ -76,7 +28,7 @@ void InitiativeListContainer() {
 
 Clay_RenderCommandArray RenderApplication() {
 	Clay_BeginLayout();
-	CLAY(CLAY_ID("OuterContainer"), windowStyle) {
+	CLAY(CLAY_ID("OuterContainer"), WindowStyle()) {
 		DiceContainer();
 		CLAY(CLAY_ID("LowerSplitContainer"), {
 			.layout = {

src/dice_container.c

@@ -0,0 +1,42 @@
+#include "dice_container.h"
+#include <clay/clay.h>
+#include "style.h"
+
+static inline
+void DiceSelectorContainer() {
+	CLAY(CLAY_ID("DiceSelector"), {
+		.layout = {
+			.layoutDirection = CLAY_TOP_TO_BOTTOM,
+			.sizing = { CLAY_SIZING_PERCENT(0.15), CLAY_SIZING_GROW(0) },
+			.padding = containerPadding,
+			.childGap = paragraphGap,
+		},
+		.INNER_CONTAINER(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,
+		},
+		.INNER_CONTAINER(0),
+	}) { }
+}
+
+void DiceContainer() {
+	CLAY(CLAY_ID("DiceContainer"), {
+		.layout = {
+			.layoutDirection = CLAY_LEFT_TO_RIGHT,
+			.sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_PERCENT(0.4) },
+			.childGap = containerGap
+		},
+	}) {
+		DiceSelectorContainer();
+		ActiveDiceContainer();
+	}
+}

src/dice_container.h

@@ -0,0 +1,6 @@
+#ifndef DICE_CONTAINER_H
+#define DICE_CONTAINER_H
+
+extern void DiceContainer();
+
+#endif // !DICE_CONTAINER_H

src/style.c

@@ -1 +1,45 @@
+#include "style.h"
+#include "defs.h"
 
+Clay_Color ContainerBackgrounds(size_t idx) {
+	return (Clay_Color) {
+		255*containerBackgrounds[idx],
+		255*containerBackgrounds[idx],
+		255*containerBackgrounds[idx],
+		255
+	};
+}
+
+Clay_Color ContainerBorders(size_t idx) {
+	return (Clay_Color) {
+		255*containerBorders[idx],
+		255*containerBorders[idx],
+		255*containerBorders[idx],
+		255
+	};
+}
+
+Clay_Color TextColors(size_t idx) {
+	return (Clay_Color) {
+		255*textColorsP[idx],
+		255*textColorsP[idx],
+		255*textColorsP[idx],
+		255
+	};
+}
+
+Clay_Color WindowBackground() {
+	return (Clay_Color) { 255*windowBackground, 255*windowBackground, 255*windowBackground, 255 };
+}
+
+Clay_ElementDeclaration WindowStyle() {
+	return (Clay_ElementDeclaration) {
+		.layout = {
+			.layoutDirection = CLAY_TOP_TO_BOTTOM,
+			.sizing = layoutExpand,
+			.padding = CLAY_PADDING_ALL(windowPadding),
+			.childGap = containerGap,
+		},
+		.backgroundColor = WindowBackground()
+	};
+}

src/style.h

@@ -5,36 +5,32 @@
 #include <clay/clay.h>
 #include <stdint.h>
 
-constexpr int renderScale = 1;
-
 ////////////////////////////////////
 // CONTAINER STYLE
 ////////////////////////////////////
 
-constexpr uint16_t containerGap = 5 * renderScale;
+constexpr uint16_t containerGap = 10;
+constexpr double defaultRadius = 5.;
+
+constexpr float containerBackgrounds[] = {
+	.2f,
+	.3f,
+	.4f
+};
+constexpr float containerBorders[] = {
+	.3f,
+	.4f,
+	.5f
+};
+
 constexpr Clay_Padding containerPadding = {
-	32 * renderScale, 32 * renderScale,
+	32, 32,
-	16 * renderScale, 16 * renderScale
+	16, 16
-};
-constexpr Clay_Color containerColors[] = {
-	{ 255*0.25, 255*0.25, 255*0.25, 255 },
-	{ 255*0.2, 255*0.2, 255*0.2, 255 },
-	{ 255*0.1, 255*0.1, 255*0.1, 255 },
-};
-
-constexpr Clay_Sizing layoutExpand = {
-	.width = CLAY_SIZING_GROW(0),
-	.height = CLAY_SIZING_GROW(0)
-};
-
-constexpr double defaultRadius = 5.0 * renderScale;
-constexpr Clay_CornerRadius defaultRadiusAll = {
-	defaultRadius, defaultRadius,
-	defaultRadius, defaultRadius
 };
 
 #define INNER_CONTAINER(depth_)\
-backgroundColor = containerColors[depth_],\
+	backgroundColor = ContainerBackgrounds(depth_),\
+	.border = { ContainerBorders(depth_), CLAY_BORDER_ALL(2) },\
 	.cornerRadius = defaultRadiusAll
 
 
@@ -43,39 +39,27 @@ backgroundColor = containerColors[depth_],\
 ////////////////////////////////////
 
 constexpr uint16_t windowPadding = containerGap;
-constexpr Clay_Color windowBackground = {
+constexpr float windowBackground = .18f;
-	255*0.35, 255*0.35, 255*0.35, 255
-};
-constexpr Clay_ElementDeclaration windowStyle = {
-	.layout = {
-		.layoutDirection = CLAY_TOP_TO_BOTTOM,
-		.sizing = layoutExpand,
-		.padding = CLAY_PADDING_ALL(windowPadding),
-		.childGap = containerGap,
-	},
-	.backgroundColor = windowBackground
-};
 
 ////////////////////////////////////
 // TEXT STYLE
 ////////////////////////////////////
 
-constexpr float paragraphGap = 10 * renderScale;
+constexpr float paragraphGap = 10;
-constexpr uint16_t baseFontSize = 16 * renderScale;
+constexpr uint16_t baseFontSize = 16;
-
+constexpr float textColorsP[] = {
-constexpr Clay_Color textColors[] = {
+	0.9f,
-	{ 250, 250, 250, 255 },
+	0.9f,
-	{ 250, 250, 250, 255 },
+	0.9f
-	{ 250, 250, 250, 255 },
 };
 
 constexpr uint16_t headerSizes[] = {
-	64 * renderScale, 32 * renderScale,
+	64, 32,
-	28 * renderScale, 16 * renderScale
+	28, 16
 };
 
 #define TEXT_STYLE(color_)\
-	textColor = textColors[color_]
+	textColor = TextColors(color_)
 
 #define BODY(color_)\
 	fontId = FONT_DEFAULT,\
@@ -87,4 +71,25 @@ constexpr uint16_t headerSizes[] = {
 	.fontSize = headerSizes[(level_)-1],\
 	.TEXT_STYLE(color_)
 
+////////////////////////////////////
+// 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)
+};
+
+constexpr Clay_CornerRadius defaultRadiusAll = {
+	defaultRadius, defaultRadius,
+	defaultRadius, defaultRadius
+};
+
 #endif // !STYLE_H