Menu navigation
This commit is contained in:
parent
6163a5bbcb
commit
fc44bb3456
|
@ -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 {
|
||||
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});
|
||||
}
|
||||
|
||||
|
|
|
@ -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{
|
||||
|
|
|
@ -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| {
|
||||
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.setColor(255, 255, 255, 255);
|
||||
self.renderer.fillRectangleEx(x, y, width, height, skew);
|
||||
self.renderMenu(x, y, curr_tab, curr_tab.sel, alpha, true);
|
||||
}
|
||||
|
||||
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);
|
||||
// {
|
||||
// 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);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue