Menu navigation

src/MainMenu.zig

@@ -1,5 +1,6 @@
 const std = @import("std");
 const SDL = @import("sdl2");
+const range = @import("utils.zig").range;
 
 const MenuSelection = @import("MainMenu/MenuSelection.zig");
 const MenuTab = @import("MainMenu/MenuTab.zig");
@@ -30,6 +31,8 @@ tab_list: [3]MenuTab = .{
     MenuTab.init("Online", .{ 105, 179, 86 }, &.{
         MenuSelection.init("Play", play),
         MenuSelection.init("Print", print),
+        MenuSelection.init("Print", print),
+        MenuSelection.init("Print", print),
     }),
 },
 
@@ -37,7 +40,6 @@ renderer: Renderer,
 
 // Current tab and selection index
 tab: usize = 0,
-sel: usize = 0,
 
 state: State = State.main_menu,
 
@@ -48,8 +50,33 @@ pub fn init(renderer: *Renderer.Renderer) Self {
     return Self{ .renderer = Renderer.init(renderer) };
 }
 
-pub fn getSel(self: Self) MenuSelection {
+pub fn getSel(self: Self, offset: i32) MenuSelection {
-    return self.tab_list[self.tab].contents[self.sel];
+    return self.tab_list[self.tab].contents[self.getSelIdx(offset)];
+}
+
+pub fn getSelIdx(self: Self, offset: i32) usize {
+    const len = @intCast(i32, self.getTab().contents.len);
+    const sel = @intCast(i32, self.getTab().sel);
+
+    var ret: i32 = undefined;
+    if (offset < 0) {
+        ret = sel;
+
+        for (range(@intCast(usize, -offset))) |_| {
+            ret -= 1;
+            if (ret < 0) {
+                ret = len - 1;
+            }
+        }
+        //ret = len - @mod(-offset - sel, len - 1);
+        //ret = @mod(0, 2);
+        std.debug.print("len {},offset {},ret {}, sel {}\n", .{ len, offset, ret, sel });
+    } else {
+        ret = @mod(offset + sel, len);
+        std.debug.print("len {},offset {},ret {}, sel {}\n", .{ len, offset, ret, sel });
+    }
+
+    return @intCast(usize, ret);
 }
 
 pub fn getTab(self: Self) MenuTab {
@@ -111,16 +138,20 @@ fn actionTabRight(self: *Self) void {
 }
 
 fn actionSelDown(self: *Self) void {
-    self.sel += 1;
+    self.tab_list[self.tab].sel = self.getSelIdx(1);
-    self.sel %= self.tab_list[self.tab].contents.len;
 }
 
 fn actionSelUp(self: *Self) void {
-    if (self.sel == 0) self.sel = self.tab_list[self.tab].contents.len - 1 else self.sel -= 1;
+    // if (self.tab_list[self.tab].sel == 0) {
+    //     self.tab_list[self.tab].sel = self.tab_list[self.tab].contents.len - 1;
+    // } else {
+    //     self.tab_list[self.tab].sel -= 1;
+    // }
+    self.tab_list[self.tab].sel = self.getSelIdx(-1);
 }
 
 fn actionSelect(self: *Self) void {
-    const action = self.getSel().action;
+    const action = self.getSel(0).action;
     @call(.{}, action, .{self});
 }
 

src/MainMenu/MenuTab.zig

@@ -8,6 +8,7 @@ name: []const u8,
 contents: []MenuSelection,
 contents_buffer: [50]MenuSelection,
 color: [3]u8, // Make this const
+sel: usize = 0,
 
 pub fn init(name: []const u8, color: [3]u8, contents: []const MenuSelection) Self {
     var ret = Self{

src/MainMenu/Renderer.zig

@@ -1,6 +1,9 @@
 const SDL = @import("sdl2");
 
 const MainMenu = @import("../MainMenu.zig");
+const MenuTab = @import("MenuTab.zig");
+
+const range = @import("../utils.zig").range;
 
 pub const Renderer = @import("../Renderer.zig");
 const color = @import("../color.zig");
@@ -9,25 +12,24 @@ const Self = @This();
 
 renderer: *Renderer,
 
+const skew = 20;
+const y_spacing = 20;
+const x_spacing = 300;
+const width = 200;
+const height = 60;
+
 pub fn init(renderer: *Renderer) Self {
     return Self{
         .renderer = renderer,
     };
 }
 pub fn render(self: Self, main_menu: MainMenu) void {
-    const y_spacing = 20;
-    const x_spacing = 300;
-    const width = 200;
-    const height = 60;
-
     const tabs = [_]usize{
         main_menu.getPrevTab(),
         main_menu.tab,
         main_menu.getNextTab(),
     };
 
-    const skew = 20;
-
     for (tabs) |tab, tab_i| {
         const curr_tab = main_menu.tab_list[tab];
 
@@ -37,36 +39,103 @@ pub fn render(self: Self, main_menu: MainMenu) void {
         const total_spacing = (tabs.len - 1) * x_spacing;
         const total_width = tabs.len * width;
 
+        //const screen_height = @intCast(usize, wsize.height);
+        // Current selection vertical offset
+        const sel_y_offset = y_spacing * 12;
+        // Number of items below selection
+        //const n_sel_below = (screen_height - sel_y_offset) / (height + y_spacing);
+        // Number of items below selection
+        //const n_sel_above = (sel_y_offset) / (height + y_spacing);
+
         // Move it from the left to the center
         const centering = (screen_width - (total_width + total_spacing)) / 2;
 
         const x = @intCast(i32, tab_i * (width + x_spacing) + centering);
 
-        for (curr_tab.contents) |_, sel_i| {
+        // Transparency depending on tab at the middle
-            const y = @intCast(i32, 10 + (height + y_spacing) * sel_i) + 100;
+        var alpha: u8 = 100;
+        if (tab_i == 1) {
+            alpha = 255;
+        }
+
+        // Current selection
+        {
+            const y = @intCast(i32, sel_y_offset);
 
             // TODO: The shadow should be static, it is easier like this rn tho
-            if (main_menu.sel == sel_i and tab_i == 1) {
+
+            if (tab_i == 1) {
+                // Shadow
                 self.renderer.setColor(0, 0, 0, 30);
                 self.renderer.fillRectangleEx(x + 10, y + 10, width, height, skew);
             }
 
-            self.renderer.setColor(255, 255, 255, 255);
+            self.renderMenu(x, y, curr_tab, curr_tab.sel, alpha, true);
-            self.renderer.fillRectangleEx(x, y, width, height, skew);
+        }
 
-            self.renderer.setColor(0, 0, 0, 255);
+        // {
-            if (main_menu.sel == sel_i and tab_i == 1) {
+        //     for (range(n_sel_below)) |_, i| {
-                self.renderer.setColor(curr_tab.color[0], curr_tab.color[1], curr_tab.color[2], 255);
+        //         const aux_sel: i32 = @intCast(i32, i + 1);
+        //         const curr_sel: usize = main_menu.getSelIdx(aux_sel);
+        //         const y = @intCast(i32, sel_y_offset + ((y_spacing + height) * (aux_sel)));
+        //         self.renderMenu(x, y, curr_tab, curr_sel, alpha, false);
+        //     }
+        // }
+
+        // for (curr_tab.contents) |_, sel_i| {
+        //     const y = @intCast(i32, 10 + (height + y_spacing) * sel_i) + 100;
+
+        //     // TODO: The shadow should be static, it is easier like this rn tho
+        //     if (curr_tab.sel == sel_i) {
+
+        //         if (tab_i == 1) {
+        //             // Shadow
+        //             self.renderer.setColor(0, 0, 0, 30);
+        //             self.renderer.fillRectangleEx(x+10, y+10, width, height, skew);
+        //         }
+
+        //         // White background
+        //         self.renderer.setColor(255, 255, 255, alpha);
+        //         self.renderer.fillRectangleEx(x, y, width, height, skew);
+        //         // Set color if selected
+        //         self.renderer.setColor(curr_tab.color[0], curr_tab.color[1], curr_tab.color[2], alpha);
+        //     } else {
+        //         // White background
+        //         self.renderer.setColor(255, 255, 255, alpha);
+        //         self.renderer.fillRectangleEx(x, y, width, height, skew);
+        //         // Set black color, not selected
+        //         self.renderer.setColor(0, 0, 0, alpha);
+
+        //     }
+
+        //     const margin = 20;
+        //     self.renderer.fillRectangleEx(x + margin, y + margin, width - margin*2 , height - margin*2, skew);
+        //     self.renderer.fillRectangleEx(x + width-6, y, 6, height, skew);
+        //     self.renderer.fillRectangleEx(x + width-12, y, 3, height, skew);
+
+        // }
+        // Tab header
+        self.renderer.setColor(curr_tab.color[0], curr_tab.color[1], curr_tab.color[2], alpha);
+        self.renderer.fillRectangleEx(x - 25, 10, width + 50, height + 50, skew);
+    }
+}
+
+fn renderMenu(self: Self, x: i32, y: i32, tab: MenuTab, sel: usize, a: u8, selected: bool) void {
+    // White background
+    self.renderer.setColor(255, 255, 255, a);
+    self.renderer.fillRectangleEx(x, y, width, height, skew);
+    _ = sel;
+    if (selected) {
+        // Set color if selected
+        self.renderer.setColor(tab.color[0], tab.color[1], tab.color[2], a);
+    } else {
+        // Set black color, not selected
+        self.renderer.setColor(0, 0, 0, a);
     }
 
     const margin = 20;
+
     self.renderer.fillRectangleEx(x + margin, y + margin, width - margin * 2, height - margin * 2, skew);
     self.renderer.fillRectangleEx(x + width - 6, y, 6, height, skew);
     self.renderer.fillRectangleEx(x + width - 12, y, 3, height, skew);
-
-        }
-        self.renderer.setColor(curr_tab.color[0], curr_tab.color[1], curr_tab.color[2], 255);
-        self.renderer.fillRectangleEx(x-25, 10, width+50, height+50, skew);
-    }
-
 }

src/Renderer.zig

@@ -103,7 +103,7 @@ pub fn init() !Self {
 }
 
 pub fn render(self: *Self) void {
-    std.debug.print("Number of rendered elements: {}\n", .{self.test_counter});
+    //std.debug.print("Number of rendered elements: {}\n", .{self.test_counter});
     self.test_counter = 0;
 
     self.buffer.data(f32, &self.vbo, .static_draw);

src/main.zig

@@ -37,7 +37,7 @@ pub fn main() !void {
 
         const delay = SDL.getTicks64() - start;
 
-        std.debug.print("{} ms\n", .{delay});
+        //std.debug.print("{} ms\n", .{delay});
         if (delay < 17) {
             SDL.delay(17 - @intCast(u32, delay));
         }