moveable items

src/main.zig

@@ -58,6 +58,8 @@ pub fn main() !void {
         if (raylib.IsKeyPressed('Z')) item1.setLarge(!item1.large);
         if (raylib.IsKeyPressed('S')) raylib.TakeScreenshot("screenshot.png");
 
+        column.updatePositions();
+
         raylib.BeginDrawing();
         defer raylib.EndDrawing();
 
@@ -66,7 +68,14 @@ pub fn main() !void {
 
         raylib.DrawFPS(1, 1);
 
-        const debug_text = try std.fmt.allocPrint(allocator, "screen size = {d}x{d}", .{ screen_width, screen_height });
+        const debug_text = try std.fmt.allocPrint(allocator,
+            \\screen size = {d}x{d}
+            \\selected = {d}
+        , .{
+            screen_width,
+            screen_height,
+            column.selected,
+        });
         defer allocator.free(debug_text);
         raylib.DrawText(@ptrCast(debug_text), 80, 2, 8, raylib.GREEN);
     }
@@ -95,6 +104,7 @@ pub const Scales = struct {
     column_position_center: raylib.Vector2,
     column_position_spacing: f32,
     column_item_spacing: f32,
+    column_item_start: f32,
 
     /// Recalculate scales after screen resize.
     pub fn recalculate(self: *Scales) void {
@@ -113,6 +123,7 @@ pub const Scales = struct {
         };
         self.column_position_spacing = 64;
         self.column_item_spacing = 16;
+        self.column_item_start = 117.8;
     }
 };
 
@@ -121,6 +132,8 @@ pub const Column = struct {
     title: []const u8,
 
     items: std.ArrayList(*Item),
+    selected: usize = 0,
+    start_y: f32 = undefined,
 
     pub fn init(allocator: Allocator, icon: raylib.Texture2D, title: []const u8) Column {
         raylib.SetTextureFilter(icon, raylib.TEXTURE_FILTER_BILINEAR);
@@ -159,12 +172,8 @@ pub const Column = struct {
             .align_h = .center,
         };
 
-        var y: f32 = scales.column_position_center.y + icon.box.h + title.box.h + scales.column_item_spacing;
+        // self.start_y = scales.column_position_center.y + icon.box.h + title.box.h + scales.column_item_spacing;
-        for (self.items.items) |item| {
+        for (self.items.items) |item| item.draw();
-            item.position = .{ .x = scales.column_position_center.x, .y = y };
-            item.draw();
-            y += scales.item_icon_small_height + scales.column_item_spacing;
-        }
 
         icon.draw();
         title.draw();
@@ -172,14 +181,34 @@ pub const Column = struct {
 
     pub fn appendItem(self: *Column, item: *Item) !void {
         try self.items.append(item);
+        self.refresh();
     }
 
     pub fn insertItem(self: *Column, idx: usize, item: *Item) !void {
         try self.items.insert(idx, item);
+        self.refresh();
     }
 
     pub fn removeItem(self: *Column, idx: usize) void {
         _ = try self.items.orderedRemove(idx);
+        self.refresh();
+    }
+
+    fn updatePositions(self: *Column) void {
+        const up = raylib.IsKeyPressed(raylib.KEY_UP) or raylib.IsKeyPressedRepeat(raylib.KEY_UP);
+        const down = raylib.IsKeyPressed(raylib.KEY_DOWN) or raylib.IsKeyPressedRepeat(raylib.KEY_DOWN);
+        if (up and self.selected > 0) self.selected -= 1;
+        if (down and self.selected < self.items.items.len - 1) self.selected += 1;
+
+        if (up or down) self.refresh();
+    }
+
+    fn refresh(self: *Column) void {
+        var y = scales.column_item_start;
+        for (self.items.items[self.selected..]) |item| {
+            item.setPosition(.{ .x = scales.column_position_center.x, .y = y });
+            y += scales.item_icon_small_height + scales.column_item_spacing;
+        }
     }
 };
 
@@ -187,7 +216,8 @@ pub const Item = struct {
     position: raylib.Vector2 = .{ .x = 0, .y = 0 },
     // icon_scale: f32,
     // start_scale: f32,
-    // time: f32 = 0.0,
+    time: f32 = 0.0,
+    start_position: raylib.Vector2 = .{ .x = 0, .y = 0 },
 
     icon: raylib.Texture2D,
     title: []const u8,
@@ -206,18 +236,23 @@ pub const Item = struct {
     }
 
     pub fn draw(self: *Item) void {
-        // self.time += raylib.GetFrameTime();
+        self.time += raylib.GetFrameTime();
         // self.icon_scale = std.math.lerp(
         //     self.start_scale,
         //     if (self.large) scales.item_icon_large_scale else scales.item_icon_small_scale,
         //     easeOutExpo(self.time / 0.333),
         // );
+        const position = raylib.Vector2Lerp(
+            self.start_position,
+            self.position,
+            easeOutExpo(self.time / 0.333),
+        );
 
         var icon = Image{
             .texture = self.icon,
             .box = .{
-                .x = self.position.x - scales.item_icon_small_width / 2.0 + 67.0 / 2.0,
+                .x = position.x - scales.item_icon_small_width / 2.0 + 67.0 / 2.0,
-                .y = self.position.y,
+                .y = position.y,
                 .w = scales.item_icon_small_width,
                 .h = scales.item_icon_small_height,
             },
@@ -260,6 +295,12 @@ pub const Item = struct {
         // self.start_scale = self.icon_scale;
     }
 
+    pub fn setPosition(self: *Item, position: raylib.Vector2) void {
+        self.start_position = self.position;
+        self.position = position;
+        self.time = 0;
+    }
+
     fn easeOutExpo(x: f32) f32 {
         return 1.0 - std.math.pow(f32, 2, -10 * std.math.clamp(x, 0.0, 1.0));
     }