src/application.c

@@ -1,77 +1,62 @@
 #include "application.h"
 
+#include "defs.h"
 #include "style.h"
 #include <SDL3/SDL.h>
 #include <clay/clay.h>
 
-static inline void DiceSelectorContainer() {
+static inline
-	CLAY(CLAY_ID("DiceSelector"), {
+void DiceContainer() {
-		.layout = {
-			.layoutDirection = CLAY_TOP_TO_BOTTOM,
-			.sizing = { CLAY_SIZING_FIXED(300), 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.2) },
-			.sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_PERCENT(0.4) },
+			.padding = CLAY_PADDING_ALL(16),
-			.childGap = containerGap
 		},
+		.backgroundColor = containerColors[0],
+		.cornerRadius = defaultRadiusAll,
 	}) {
-		DiceSelectorContainer();
+		CLAY_TEXT(CLAY_STRING("Text data"), CLAY_TEXT_CONFIG({
-		ActiveDiceContainer();
+			TEXT_BODY,
+			.textColor = textColors[0]
+		}));
 	}
 }
 
-static inline void DiceLogContainer() {
+static inline
+void DiceLogContainer() {
 	CLAY(CLAY_ID("LogContainer"), {
 		.layout = {
 			.sizing = layoutExpand,
 			.padding = CLAY_PADDING_ALL(16),
 		},
-		.INNER_CONTAINER(0)
+		.backgroundColor = containerColors[0],
+		.cornerRadius = defaultRadiusAll
 	}) {}
 }
 
-static inline void InitiativeListContainer() {
+static inline
+void InitiativeListContainer() {
 	CLAY(CLAY_ID("InitiativeListContainer"), {
 		.layout = {
 			.sizing = layoutExpand,
 			.padding = CLAY_PADDING_ALL(16),
 		},
-		.INNER_CONTAINER(0)
+		.backgroundColor = containerColors[0],
+		.cornerRadius = defaultRadiusAll,
 	}) {}
 }
 
 Clay_RenderCommandArray RenderApplication() {
 	Clay_BeginLayout();
-	CLAY(CLAY_ID("OuterContainer"), windowStyle) {
+	CLAY(CLAY_ID("OuterContainer"), {
+		.layout = {
+			.layoutDirection = CLAY_TOP_TO_BOTTOM,
+			.sizing = layoutExpand,
+			.padding = CLAY_PADDING_ALL(windowPadding),
+			.childGap = containerGap,
+		},
+		.backgroundColor = windowBackground
+	}) {
 		DiceContainer();
 		CLAY(CLAY_ID("LowerSplitContainer"), {
 			.layout = {

src/style.h

@@ -3,16 +3,25 @@
 
 #include "defs.h"
 #include <clay/clay.h>
-#include <stdint.h>
 
-////////////////////////////////////
+constexpr float defaultRadius = 5.f;
-// CONTAINER STYLE
+constexpr Clay_CornerRadius defaultRadiusAll = {
-////////////////////////////////////
+	defaultRadius, defaultRadius,
+	defaultRadius, defaultRadius
+};
+constexpr float containerGap = 5.f;
+constexpr float windowPadding = 5.f;
 
-constexpr uint16_t containerGap = 5;
+
-constexpr Clay_Padding containerPadding = {
+#define TEXT_BODY\
-	32, 32,
+	.fontId = FONT_DEFAULT,\
-	16, 16
+	.fontSize = 15
+#define TEXT_H1\
+	.fontId = FONT_BOLD,\
+	.fontSize = 20
+
+constexpr Clay_Color windowBackground = {
+	255*0.35, 255*0.35, 255*0.35, 255
 };
 constexpr Clay_Color containerColors[] = {
 	{ 255*0.25, 255*0.25, 255*0.25, 255 },
@@ -20,68 +29,15 @@ constexpr Clay_Color containerColors[] = {
 	{ 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 float defaultRadius = 5.f;
-constexpr Clay_CornerRadius defaultRadiusAll = {
-	defaultRadius, defaultRadius,
-	defaultRadius, defaultRadius
-};
-
-#define INNER_CONTAINER(depth_) \
-backgroundColor = containerColors[depth_],\
-.cornerRadius = defaultRadiusAll
-
-
-////////////////////////////////////
-// WINDOW STYLE
-////////////////////////////////////
-
-constexpr float windowPadding = 5;
-constexpr Clay_Color windowBackground = {
-	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;
-constexpr uint16_t baseFontSize = 16;
-
 constexpr Clay_Color textColors[] = {
 	{ 250, 250, 250, 255 },
 	{ 250, 250, 250, 255 },
 	{ 250, 250, 250, 255 },
 };
 
-constexpr uint16_t headerSizes[] = {
+constexpr Clay_Sizing layoutExpand = {
-	64, 32, 28, 16
+	.width = CLAY_SIZING_GROW(0),
+	.height = CLAY_SIZING_GROW(0)
 };
 
-#define TEXT_STYLE(color_)\
-	textColor = textColors[color_]
-
-#define BODY(color_)\
-	fontId = FONT_DEFAULT,\
-	.fontSize = baseFontSize,\
-	.TEXT_STYLE(color_)
-
-#define H(level_, color_)\
-	fontId = FONT_BOLD,\
-	.fontSize = headerSizes[(level_)-1],\
-	.TEXT_STYLE(color_)
-
 #endif // !STYLE_H