5 files changed, 87 insertions, 8 deletions
diff --git a/src/resources/resources.c b/src/resources/resources.c
index 55bf3ce..031ee25 100644
--- a/src/resources/resources.c
+++ b/src/resources/resources.c
@@ -9,4 +9,3 @@ void LoadResources() {
 }
 
 Font *GetMainFont() { return &MainFont; }
-
diff --git a/src/resources/resources.h b/src/resources/resources.h
index a368a02..5cc24ff 100644
--- a/src/resources/resources.h
+++ b/src/resources/resources.h
@@ -1,7 +1,18 @@
+#include <raylib.h>
+
 #ifndef RESOURCES_H
 #define RESOURCES_H
 
-#include <raylib.h>
+/// #670916 as RGBA
+static const Color COLORSCHEME_BROWN = { 103, 9, 22, 255 };
+/// #CF042C as RGBA
+static const Color COLORSCHEME_RED = { 207, 4, 44, 255 };
+/// #F0781C as RGBA
+static const Color COLORSCHEME_ORANGE = { 240, 120, 28, 255 };
+/// #f7bc53 as RGBA
+static const Color COLORSCHEME_YELLOW = { 247, 188, 83, 255 };
+/// #E9E1B9 as RGBA
+static const Color COLORSCHEME_WHITE = { 233, 225, 185, 255 };
 
 void LoadResources();
 Font *GetMainFont();
diff --git a/src/scenes/puzzleScene.c b/src/scenes/puzzleScene.c
index 10e3fc9..0377c03 100644
--- a/src/scenes/puzzleScene.c
+++ b/src/scenes/puzzleScene.c
@@ -2,6 +2,7 @@
 #include <stdlib.h>
 #include "scenes.h"
 #include "../resources/resources.h"
+#include "../ui_elements/UI.h"
 
 typedef struct {
     Puzzle *PuzzlePtr;
@@ -12,16 +13,69 @@ bool updatePuzzleScene(void *self) {
     return true;
 }
 
-Vector2 PuzzleNamePos = { .x = 0, .y = 0 };
+const int HEADER_FONT_SIZE = 50;
+const int PADDING = 10;
+const int BORDER = 2;
+const int FOOTER_HEIGHT = 40;
+
+void DrawPuzzleName(char *name) {
+    Vector2 width = MeasureTextEx(*GetMainFont(), name, 50, 1);
+    int screen_width = GetScreenWidth();
+    Vector2 pos = { .y = 20, .x = (screen_width - width.x) / 2, };
+    DrawTextEx(*GetMainFont(), name, pos, HEADER_FONT_SIZE, 1, COLORSCHEME_BROWN);
+}
+
+Rectangle GetBodyRect() {
+    int HeaderOffset = PADDING * 2 + HEADER_FONT_SIZE;
+    Rectangle outp = {
+        .x = PADDING,
+        .y = HeaderOffset,
+        .width = GetScreenWidth() - PADDING * 2,
+        .height = GetScreenHeight() - HeaderOffset - PADDING * 3 - FOOTER_HEIGHT,
+    };
+    return outp;
+}
+
+void GetPanesSplit(Rectangle *pane1, Rectangle *pane2, Rectangle body, float proportion_h, float proportion_v) {
+    if (body.height >= body.width) {
+        // vertical split
+        pane1->x = body.x;
+        pane1->y = body.y;
+        pane1->width = body.width;
+        pane1->height = (body.height - PADDING) * proportion_v;
+
+        pane2->x = body.x;
+        pane2->y = body.y + pane1->height + PADDING;
+        pane2->width = body.width;
+        pane2->height = (body.height - PADDING) * (1 - proportion_v);
+        return;
+    }
+
+    // horizontal split
+    pane1->x = body.x;
+    pane1->y = body.y;
+    pane1->height = body.height;
+    pane1->width = (body.width - PADDING) * proportion_h;
+
+    pane2->y = body.y;
+    pane2->x = body.x + pane1->width + PADDING;
+    pane2->height = body.height;
+    pane2->width = (body.width - PADDING) * (1 - proportion_h);
+}
 
 bool drawPuzzleScene(void *self) {
     puzzleSceneData *data = ((Scene *)self)->data;
-    ClearBackground(SKYBLUE);
+    ClearBackground(COLORSCHEME_WHITE);
+    DrawPuzzleName(data->PuzzlePtr->Name);
+
+    Rectangle body = GetBodyRect();
+    Rectangle pane1, pane2;
+    GetPanesSplit(&pane1, &pane2, body, 0.5, 0.4);
+    DrawRecBordered(pane1, WHITE, COLORSCHEME_ORANGE, BORDER);
+    DrawRecBordered(pane2, WHITE, COLORSCHEME_ORANGE, BORDER);
+    
+    // DrawRecBordered(body, COLORSCHEME_WHITE, COLORSCHEME_ORANGE, BORDER);
 
-    DrawTextEx(*GetMainFont(),
-            data->PuzzlePtr->Name,
-            PuzzleNamePos, 
-            100, 1, BLACK);
 
     return true;
 }
diff --git a/src/ui_elements/UI.c b/src/ui_elements/UI.c
new file mode 100644
index 0000000..fb469e3
--- /dev/null
+++ b/src/ui_elements/UI.c
@@ -0,0 +1,7 @@
+#include "UI.h"
+#include <raylib.h>
+
+void DrawRecBordered(Rectangle rec, Color bg, Color border_color, int border_width) {
+    DrawRectangleRounded(rec, 0.015f, 8, bg); 
+    DrawRectangleRoundedLinesEx(rec, 0.015f, 8, border_width, border_color);
+}
diff --git a/src/ui_elements/UI.h b/src/ui_elements/UI.h
new file mode 100644
index 0000000..4e70482
--- /dev/null
+++ b/src/ui_elements/UI.h
@@ -0,0 +1,8 @@
+#include <raylib.h>
+
+#ifndef UI_ELEMENTS_H
+#define UI_ELEMENTS_H
+
+void DrawRecBordered(Rectangle rec, Color bg, Color border, int border_width);
+
+#endif // UI_ELEMENTS_H