From fc44bb3456a1b72ec560b65677b2842895508bac Mon Sep 17 00:00:00 2001 From: Strangedusk Date: Sat, 27 Aug 2022 12:45:07 +0200 Subject: [PATCH] Menu navigation --- src/MainMenu.zig | 51 ++++++++++++---- src/MainMenu/MenuTab.zig | 1 + src/MainMenu/Renderer.zig | 123 +++++++++++++++++++++++++++++--------- src/Renderer.zig | 36 +++++------ src/main.zig | 2 +- 5 files changed, 157 insertions(+), 56 deletions(-) diff --git a/src/MainMenu.zig b/src/MainMenu.zig index 27830ae..f28f0b6 100644 --- a/src/MainMenu.zig +++ b/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"); @@ -19,17 +20,19 @@ action_list: [5]Action = .{ }, tab_list: [3]MenuTab = .{ - MenuTab.init("1P", .{245, 155, 20}, &.{ + MenuTab.init("1P", .{ 245, 155, 20 }, &.{ MenuSelection.init("Play", play), MenuSelection.init("Print", print), }), - MenuTab.init("Options", .{162, 86, 179}, &.{ + MenuTab.init("Options", .{ 162, 86, 179 }, &.{ MenuSelection.init("Play", play), MenuSelection.init("Print", print), }), - MenuTab.init("Online", .{105, 179, 86}, &.{ + 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 { - return self.tab_list[self.tab].contents[self.sel]; +pub fn getSel(self: Self, offset: i32) MenuSelection { + 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.sel %= self.tab_list[self.tab].contents.len; + self.tab_list[self.tab].sel = self.getSelIdx(1); } 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}); } diff --git a/src/MainMenu/MenuTab.zig b/src/MainMenu/MenuTab.zig index 31d8505..0e762f8 100644 --- a/src/MainMenu/MenuTab.zig +++ b/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{ diff --git a/src/MainMenu/Renderer.zig b/src/MainMenu/Renderer.zig index a5dcbb5..f95e409 100644 --- a/src/MainMenu/Renderer.zig +++ b/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,64 +12,130 @@ 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]; // Auxiliary variables to claculate the center of the screen const wsize = self.renderer.getOutputSize(); const screen_width = @intCast(usize, wsize.width); - const total_spacing = (tabs.len-1) * x_spacing; + 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| { - const y = @intCast(i32, 10 + (height + y_spacing) * sel_i) + 100; + // Transparency depending on tab at the middle + 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.fillRectangleEx(x + 10, y + 10, width, height, skew); } - self.renderer.setColor(255, 255, 255, 255); - 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) { - self.renderer.setColor(curr_tab.color[0], curr_tab.color[1], curr_tab.color[2], 255); - } - - 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.renderMenu(x, y, curr_tab, curr_tab.sel, alpha, true); } - 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); + + // { + // for (range(n_sel_below)) |_, i| { + // 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); } diff --git a/src/Renderer.zig b/src/Renderer.zig index 31af023..eac75be 100644 --- a/src/Renderer.zig +++ b/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); @@ -172,24 +172,24 @@ pub fn fillRectangleEx(self: *Self, x: i32, y: i32, w: i32, h: i32, skew_x: i32) const i = self.vbo_index; const vertex_data = [36]f32{ - xf + skew_x_offset, yf, // up-left + xf + skew_x_offset, yf, // up-left self.color[0], self.color[1], - self.color[2], self.color[3], - xf + wf + skew_x_offset, yf, // up-right - self.color[0], self.color[1], - self.color[2], self.color[3], - xf - skew_x_offset, yf + hf, // down-left - self.color[0], self.color[1], - self.color[2], self.color[3], - xf + wf - skew_x_offset, yf + hf, // down-right - self.color[0], self.color[1], - self.color[2], self.color[3], - xf + wf + skew_x_offset, yf, // up-right - self.color[0], self.color[1], - self.color[2], self.color[3], - xf - skew_x_offset, yf + hf, // down-left - self.color[0], self.color[1], - self.color[2], self.color[3], + self.color[2], self.color[3], + xf + wf + skew_x_offset, yf, // up-right + self.color[0], self.color[1], + self.color[2], self.color[3], + xf - skew_x_offset, yf + hf, // down-left + self.color[0], self.color[1], + self.color[2], self.color[3], + xf + wf - skew_x_offset, yf + hf, // down-right + self.color[0], self.color[1], + self.color[2], self.color[3], + xf + wf + skew_x_offset, yf, // up-right + self.color[0], self.color[1], + self.color[2], self.color[3], + xf - skew_x_offset, yf + hf, // down-left + self.color[0], self.color[1], + self.color[2], self.color[3], }; std.mem.copy(f32, self.vbo[i .. i + 36], &vertex_data); self.vbo_index += 36; diff --git a/src/main.zig b/src/main.zig index 282a005..7766b82 100644 --- a/src/main.zig +++ b/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)); }