Menu navigation

This commit is contained in:
Dusk 2022-08-27 12:45:07 +02:00
parent 6163a5bbcb
commit fc44bb3456
5 changed files with 157 additions and 56 deletions

View File

@ -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});
}

View File

@ -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{

View File

@ -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;
// 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, 0, 0, 30);
self.renderer.fillRectangleEx(x+10, y+10, width, height, skew);
// Transparency depending on tab at the middle
var alpha: u8 = 100;
if (tab_i == 1) {
alpha = 255;
}
self.renderer.setColor(255, 255, 255, 255);
self.renderer.fillRectangleEx(x, y, width, height, skew);
// Current selection
{
const y = @intCast(i32, sel_y_offset);
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);
// TODO: The shadow should be static, it is easier like this rn tho
if (tab_i == 1) {
// Shadow
self.renderer.setColor(0, 0, 0, 30);
self.renderer.fillRectangleEx(x + 10, y + 10, width, height, skew);
}
self.renderMenu(x, y, curr_tab, curr_tab.sel, alpha, true);
}
// {
// 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);
}
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);
}
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);
}

View File

@ -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);

View File

@ -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));
}