diff --git a/src/MainMenu.zig b/src/MainMenu.zig index 6f19b2e..27830ae 100644 --- a/src/MainMenu.zig +++ b/src/MainMenu.zig @@ -18,12 +18,16 @@ action_list: [5]Action = .{ Action.init(SDL.Scancode.@"return", actionSelect), // Select }, -tab_list: [2]MenuTab = .{ - MenuTab.init("1P", .{255, 127, 0}, &.{ +tab_list: [3]MenuTab = .{ + MenuTab.init("1P", .{245, 155, 20}, &.{ MenuSelection.init("Play", play), MenuSelection.init("Print", print), }), - MenuTab.init("Options", .{127, 0, 255}, &.{ + MenuTab.init("Options", .{162, 86, 179}, &.{ + MenuSelection.init("Play", play), + MenuSelection.init("Print", print), + }), + MenuTab.init("Online", .{105, 179, 86}, &.{ MenuSelection.init("Play", play), MenuSelection.init("Print", print), }), diff --git a/src/MainMenu/Renderer.zig b/src/MainMenu/Renderer.zig index 44e16e6..a5dcbb5 100644 --- a/src/MainMenu/Renderer.zig +++ b/src/MainMenu/Renderer.zig @@ -15,10 +15,10 @@ pub fn init(renderer: *Renderer) Self { }; } pub fn render(self: Self, main_menu: MainMenu) void { - const width = 100; - const spacing = 10; - const height = 20; - + const y_spacing = 20; + const x_spacing = 300; + const width = 200; + const height = 60; const tabs = [_]usize{ main_menu.getPrevTab(), @@ -26,28 +26,47 @@ pub fn render(self: Self, main_menu: MainMenu) void { 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_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 + x_spacing) + centering); + for (curr_tab.contents) |_, sel_i| { - self.renderer.setColor(curr_tab.color[0], curr_tab.color[1], curr_tab.color[2], 255); + 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 (main_menu.sel == sel_i and tab_i == 1) { - self.renderer.setColor(0, 255, 0, 255); + self.renderer.setColor(0, 0, 0, 30); + self.renderer.fillRectangleEx(x+10, y+10, width, height, skew); } - // 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); + self.renderer.setColor(255, 255, 255, 255); + self.renderer.fillRectangleEx(x, y, width, height, skew); - // Move it from the left to the center - const centering = (screen_width - (total_width + total_spacing)) / 2; + 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 x = @intCast(i32, tab_i * (width+spacing) + centering); - const y = @intCast(i32, 10 + (height + spacing) * sel_i); + 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.fillRectangle(x, y, width, height); } + 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); } } diff --git a/src/Renderer.zig b/src/Renderer.zig index 09818c0..31af023 100644 --- a/src/Renderer.zig +++ b/src/Renderer.zig @@ -93,7 +93,7 @@ pub fn init() !Self { gl.vertexAttribPointer(1, 4, .float, false, @sizeOf(f32) * 6, @sizeOf(f32) * 2); gl.enableVertexAttribArray(1); - gl.clearColor(0.91, 0.97, 1.00, 1.00); + gl.clearColor(0.91, 0.85, 0.65, 1.00); // TODO: See if there's a more optimal solution to this, maybe activating only when necessary gl.enable(.blend); @@ -154,10 +154,11 @@ pub fn drawRectangle(self: *Self, x: i32, y: i32, w: i32, h: i32) void { pub fn fillRectangle(self: *Self, x: i32, y: i32, w: i32, h: i32) void { //const indices = [_]u8{ 1, 3, 0, 1, 3, 2 }; - self.renderRectangle(x, y, w, h); + self.fillRectangleEx(x, y, w, h, 0); } -fn renderRectangle(self: *Self, x: i32, y: i32, w: i32, h: i32) void { +pub fn fillRectangleEx(self: *Self, x: i32, y: i32, w: i32, h: i32, skew_x: i32) void { + // TODO: Is this still necessary? self.test_counter += 1; //gl.uniform4fv(self.color_loc, &.{self.color}); @@ -167,24 +168,26 @@ fn renderRectangle(self: *Self, x: i32, y: i32, w: i32, h: i32) void { var wf = @intToFloat(f32, w); var hf = @intToFloat(f32, h); + const skew_x_offset = @intToFloat(f32, skew_x) * hf / 100; + const i = self.vbo_index; const vertex_data = [36]f32{ - xf, 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 + wf, yf, // up-right + xf - skew_x_offset, yf + hf, // down-left self.color[0], self.color[1], self.color[2], self.color[3], - xf, yf + hf, + xf + wf - skew_x_offset, yf + hf, // down-right self.color[0], self.color[1], self.color[2], self.color[3], - xf + wf, yf + hf, // down-right + xf + wf + skew_x_offset, yf, // up-right 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], - xf, yf + hf, // down-left + xf - skew_x_offset, yf + hf, // down-left self.color[0], self.color[1], self.color[2], self.color[3], }; @@ -192,6 +195,10 @@ fn renderRectangle(self: *Self, x: i32, y: i32, w: i32, h: i32) void { self.vbo_index += 36; } +fn renderRectangle(self: *Self, x: i32, y: i32, w: i32, h: i32) void { + self.renderRectangleEx(x, y, w, h, 0); +} + pub const OutputSize = struct { width: c_int, height: c_int }; pub fn getOutputSize(self: Self) OutputSize { var wsize = self.window.getSize();