Text

src/main.zig

@@ -25,22 +25,22 @@ pub fn main() !void {
     var item1 = Item.init(
         raylib.LoadTexture("menu/game/CometCrash/ICON0.PNG"),
         "Comet Crash",
-        "",
+        "3/1/2025  23:11",
     );
     var item2 = Item.init(
         raylib.LoadTexture("menu/game/LBP1/ICON0.PNG"),
         "LittleBigPlanet",
-        "",
+        "3/1/2025  23:15",
     );
     var item3 = Item.init(
         raylib.LoadTexture("menu/game/LBP2/ICON0.PNG"),
         "LittleBigPlanet 2",
-        "",
+        "3/1/2025  23:26",
     );
     var item4 = Item.init(
         raylib.LoadTexture("menu/game/LBP3/ICON0.PNG"),
         "LittleBigPlanet 3",
-        "",
+        "3/1/2025  23:48",
     );
     try column.appendItem(&item1);
     try column.appendItem(&item2);
@@ -102,7 +102,8 @@ pub const Scales = struct {
         self.item_icon_small_height = 48;
         self.item_icon_large_width = 67;
         self.item_icon_large_height = 48;
-        self.item_title_font_size = 16;
+        self.item_title_font_size = 18;
+        self.item_subtitle_font_size = 12;
 
         self.column_icon_scale = 0.75;
         self.column_title_font_size = 13;
@@ -145,15 +146,20 @@ pub const Column = struct {
             },
         };
 
-        const title_font_size = scales.column_title_font_size;
+        var title = Text{
-        const title_font_spacing = 1.0;
+            .string = self.title,
-        const title_size = raylib.MeasureTextEx(global_font, @ptrCast(self.title), title_font_size, title_font_spacing);
+            .font_size = scales.column_title_font_size,
-        const title_position = raylib.Vector2{
+            .font_spacing = 1,
-            .x = icon.box.x + icon.box.w / 2.0 - title_size.x / 2.0,
+            .box = .{
-            .y = icon.box.y + icon.box.h + 6,
+                .x = icon.box.x - 8,
+                .y = icon.box.y + icon.box.h + 6,
+                .w = icon.box.w + 16,
+                .h = scales.column_title_font_size,
+            },
+            .align_h = .center,
         };
 
-        var y: f32 = scales.column_position_center.y + icon.box.h + title_size.y + scales.column_item_spacing;
+        var y: f32 = scales.column_position_center.y + icon.box.h + title.box.h + scales.column_item_spacing;
         for (self.items.items) |item| {
             item.position = .{ .x = scales.column_position_center.x, .y = y };
             item.draw();
@@ -161,7 +167,7 @@ pub const Column = struct {
         }
 
         icon.draw();
-        raylib.DrawTextEx(global_font, @ptrCast(self.title), title_position, title_font_size, title_font_spacing, raylib.WHITE);
+        title.draw();
     }
 
     pub fn appendItem(self: *Column, item: *Item) !void {
@@ -217,14 +223,35 @@ pub const Item = struct {
             },
         };
 
-        const title_size = raylib.MeasureTextEx(global_font, @ptrCast(self.title), scales.item_title_font_size, 1);
+        var title = Text{
-        const title_position = raylib.Vector2{
+            .string = self.title,
-            .x = icon.box.x + 8 + icon.box.w,
+            .box = .{
-            .y = icon.box.y + icon.box.h / 2.0 - title_size.y / 2.0,
+                .x = icon.box.x + 8 + icon.box.w,
+                .y = icon.box.y,
+                .w = 300,
+                .h = icon.box.h / 2.0 - 2,
+            },
+            .font_size = scales.item_title_font_size,
+            .font_spacing = 1,
+            .align_v = .right,
+        };
+
+        var subtitle = Text{
+            .string = self.subtitle,
+            .box = .{
+                .x = icon.box.x + 8 + icon.box.w,
+                .y = icon.box.y + icon.box.h / 2.0 + 1,
+                .w = 200,
+                .h = icon.box.h / 2.0 - 2,
+            },
+            .font_size = scales.item_subtitle_font_size,
+            .font_spacing = 1,
+            .align_v = .left,
         };
 
         icon.draw();
-        raylib.DrawTextEx(global_font, @ptrCast(self.title), title_position, scales.item_title_font_size, 1, raylib.WHITE);
+        title.draw();
+        subtitle.draw();
     }
 
     pub fn setLarge(self: *Item, large: bool) void {
@@ -369,6 +396,58 @@ pub const Image = struct {
     pub const Align = enum { left, center, right };
 };
 
+/// Draws a string inside a bounding box.
+// TODO ellipsize text
+// TODO clip text and scroll
+pub const Text = struct {
+    box: BoundingBox,
+    string: []const u8,
+    font_size: f32,
+    font_spacing: f32,
+
+    align_h: Align = .left,
+    align_v: Align = .left,
+
+    pub fn draw(self: *Text) void {
+        const size = raylib.MeasureTextEx(
+            global_font,
+            @ptrCast(self.string),
+            self.font_size,
+            self.font_spacing,
+        );
+        if (debug_draw)
+            raylib.DrawRectangleLines(
+                @intFromFloat(self.box.x),
+                @intFromFloat(self.box.y),
+                @intFromFloat(self.box.w),
+                @intFromFloat(self.box.h),
+                raylib.GREEN,
+            )
+        else
+            raylib.DrawTextEx(
+                global_font,
+                @ptrCast(self.string),
+                .{
+                    .x = switch (self.align_h) {
+                        .left => self.box.x,
+                        .center => self.box.x + self.box.w / 2.0 - size.x / 2.0,
+                        .right => self.box.x + self.box.w - size.x,
+                    },
+                    .y = switch (self.align_v) {
+                        .left => self.box.y,
+                        .center => self.box.y + self.box.h / 2.0 - size.y / 2.0,
+                        .right => self.box.y + self.box.h - size.y,
+                    },
+                },
+                self.font_size,
+                self.font_spacing,
+                raylib.WHITE,
+            );
+    }
+
+    pub const Align = enum { left, center, right };
+};
+
 /// Create ortho camera looking down at the XY plane, with a fovy of 1 for UV-like positioning.
 fn createCamera() raylib.Camera3D {
     var camera = raylib.Camera3D{};