WIP | Implement basic menu rendering

src/MainMenu.zig

@@ -10,20 +10,20 @@ const Action = @import("Action.zig");
 
 const Self = @This();
 
-action_list: [3]Action = .{
+action_list: [5]Action = .{
-    // Action.init(SDL.SDL_SCANCODE_RIGHT, actionRight), // Tab Right
+    Action.init(SDL.Scancode.right, actionTabRight), // Tab Right
-    // Action.init(SDL.SDL_SCANCODE_LEFT, actionLeft), // Tab left
+    Action.init(SDL.Scancode.left, actionTabLeft), // Tab left
     Action.init(SDL.Scancode.down, actionSelDown), // Go down
     Action.init(SDL.Scancode.up, actionSelUp), // Go up
     Action.init(SDL.Scancode.@"return", actionSelect), // Select
 },
 
-tab_list: [2]MenuTab = [2]MenuTab{
+tab_list: [2]MenuTab = .{
-    MenuTab.init("1P", &.{
+    MenuTab.init("1P", .{255, 127, 0}, &.{
         MenuSelection.init("Play", play),
         MenuSelection.init("Print", print),
     }),
-    MenuTab.init("Options", &.{
+    MenuTab.init("Options", .{127, 0, 255}, &.{
         MenuSelection.init("Play", play),
         MenuSelection.init("Print", print),
     }),
@@ -40,15 +40,15 @@ state: State = State.main_menu,
 holding_down: bool = false,
 holding_enter: bool = false,
 
-pub fn init(renderer: Renderer.Renderer) Self {
+pub fn init(renderer: *Renderer.Renderer) Self {
     return Self{ .renderer = Renderer.init(renderer) };
 }
 
-fn getSel(self: *Self) MenuSelection {
+pub fn getSel(self: Self) MenuSelection {
     return self.tab_list[self.tab].contents[self.sel];
 }
 
-fn getTab(self: *Self) MenuTab {
+pub fn getTab(self: Self) MenuTab {
     return self.tab_list[self.tab];
 }
 
@@ -77,9 +77,35 @@ pub fn tick(self: *Self) State {
     //\\Selection: {s}
     //\\
     //, .{ tab.name, sel.name });
+
+    self.renderer.render(self.*);
     return self.state;
 }
 
+pub fn getPrevTab(self: Self) usize {
+    if (self.tab == 0) {
+        return self.tab_list.len - 1;
+    } else {
+        return self.tab - 1;
+    }
+}
+
+pub fn getNextTab(self: Self) usize {
+    if (self.tab == self.tab_list.len - 1) {
+        return 0;
+    } else {
+        return self.tab + 1;
+    }
+}
+
+fn actionTabLeft(self: *Self) void {
+    self.tab = self.getPrevTab();
+}
+
+fn actionTabRight(self: *Self) void {
+    self.tab = self.getNextTab();
+}
+
 fn actionSelDown(self: *Self) void {
     self.sel += 1;
     self.sel %= self.tab_list[self.tab].contents.len;

src/MainMenu/MenuTab.zig

@@ -7,12 +7,14 @@ const Self = @This();
 name: []const u8,
 contents: []MenuSelection,
 contents_buffer: [50]MenuSelection,
+color: [3]u8, // Make this const
 
-pub fn init(name: []const u8, contents: []const MenuSelection) Self {
+pub fn init(name: []const u8, color: [3]u8, contents: []const MenuSelection) Self {
     var ret = Self{
         .name = name,
         .contents = undefined,
         .contents_buffer = undefined,
+        .color = color,
     };
     std.mem.copy(MenuSelection, &ret.contents_buffer, contents);
     ret.contents = ret.contents_buffer[0..contents.len];

src/MainMenu/Renderer.zig

@@ -7,10 +7,47 @@ const color = @import("../color.zig");
 
 const Self = @This();
 
-renderer: Renderer,
+renderer: *Renderer,
 
-pub fn init(renderer: Renderer) Self {
+pub fn init(renderer: *Renderer) Self {
     return Self{
         .renderer = renderer,
     };
 }
+pub fn render(self: Self, main_menu: MainMenu) void {
+    const width = 100;
+    const spacing = 10;
+    const height = 20;
+
+
+    const tabs = [_]usize{
+        main_menu.getPrevTab(),
+        main_menu.tab,
+        main_menu.getNextTab(),
+    };
+
+    for (tabs) |tab, tab_i| {
+        const curr_tab = main_menu.tab_list[tab];
+        for (curr_tab.contents) |_, sel_i| {
+            self.renderer.setColor(curr_tab.color[0], curr_tab.color[1], curr_tab.color[2], 255);
+            if (main_menu.sel == sel_i and tab_i == 1) {
+                self.renderer.setColor(0, 255, 0, 255);
+            }
+
+            // 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) * spacing;
+            const total_width = (tabs.len * width);
+
+            // Move it from the left to the center
+            const centering = (screen_width - (total_width + total_spacing)) / 2;
+
+            const x = @intCast(i32, tab_i * (width+spacing) + centering);
+            const y = @intCast(i32, 10 + (height + spacing) * sel_i);
+
+            self.renderer.fillRectangle(x, y, width, height);
+        }
+    }
+
+}

src/Renderer.zig

@@ -170,17 +170,23 @@ fn renderRectangle(self: *Self, x: i32, y: i32, w: i32, h: i32) void {
     const i = self.vbo_index;
     const vertex_data = [36]f32{
         xf,            yf, // up-left
-        self.color[0], self.color[1], self.color[2], self.color[3],
+        self.color[0], self.color[1],
+        self.color[2], self.color[3],
         xf + wf,       yf, // up-right
-        self.color[0], self.color[1], self.color[2], self.color[3],
+        self.color[0], self.color[1],
+        self.color[2], self.color[3],
         xf,            yf + hf,
-        self.color[0], self.color[1], self.color[2], self.color[3],
+        self.color[0], self.color[1],
+        self.color[2], self.color[3],
         xf + wf,       yf + hf, // down-right
-        self.color[0], self.color[1], self.color[2], self.color[3],
+        self.color[0], self.color[1],
+        self.color[2], self.color[3],
         xf + wf,       yf,
-        self.color[0], self.color[1], self.color[2], self.color[3],
+        self.color[0], self.color[1],
+        self.color[2], self.color[3],
         xf,            yf + hf, // down-left
-        self.color[0], self.color[1], self.color[2], self.color[3],
+        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;

src/main.zig

@@ -11,7 +11,7 @@ pub fn main() !void {
     var renderer = try Renderer.init();
     defer renderer.deinit();
 
-    var main_menu = MainMenu.init(renderer);
+    var main_menu = MainMenu.init(&renderer);
     var game = Game.init(&renderer);
 
     var current_state: State = main_menu.state;