Skewed menu WIP
This commit is contained in:
parent
fc44bb3456
commit
8d47cb26f5
|
@ -12,10 +12,10 @@ const Self = @This();
|
|||
|
||||
renderer: *Renderer,
|
||||
|
||||
const skew = 20;
|
||||
const skew = 13;
|
||||
const y_spacing = 20;
|
||||
const x_spacing = 300;
|
||||
const width = 200;
|
||||
const width = 300;
|
||||
const height = 60;
|
||||
|
||||
pub fn init(renderer: *Renderer) Self {
|
||||
|
@ -30,30 +30,33 @@ pub fn render(self: Self, main_menu: MainMenu) void {
|
|||
main_menu.getNextTab(),
|
||||
};
|
||||
|
||||
for (tabs) |tab, tab_i| {
|
||||
const curr_tab = main_menu.tab_list[tab];
|
||||
const wsize = self.renderer.getOutputSize();
|
||||
const screen_width = @intCast(i32, wsize.width);
|
||||
const screen_height = @intCast(i32, wsize.height);
|
||||
|
||||
for (tabs) |u_tab, u_tab_i| {
|
||||
//const tab = @intCast(i32, u_tab);
|
||||
const tab_i = @intCast(i32, u_tab_i);
|
||||
const curr_tab = main_menu.tab_list[u_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;
|
||||
|
||||
//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);
|
||||
const n_sel_below = @intCast(usize, @divExact((screen_height - sel_y_offset), (height + y_spacing)));
|
||||
// Number of items below selection
|
||||
//const n_sel_above = (sel_y_offset) / (height + y_spacing);
|
||||
const n_sel_above = @intCast(usize, @divExact((sel_y_offset), (height + y_spacing)));
|
||||
|
||||
// Move it from the left to the center
|
||||
const centering = (screen_width - (total_width + total_spacing)) / 2;
|
||||
const centering : i32 = @divExact((screen_width - (total_width + total_spacing)), 2);
|
||||
|
||||
const x = @intCast(i32, tab_i * (width + x_spacing) + centering);
|
||||
|
||||
// Transparency depending on tab at the middle
|
||||
var alpha: u8 = 100;
|
||||
var alpha: u8 = 255;
|
||||
if (tab_i == 1) {
|
||||
alpha = 255;
|
||||
}
|
||||
|
@ -73,51 +76,32 @@ pub fn render(self: Self, main_menu: MainMenu) void {
|
|||
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 (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 - (skew * aux_sel), y, curr_tab, curr_sel, alpha, false);
|
||||
}
|
||||
}
|
||||
|
||||
// for (curr_tab.contents) |_, sel_i| {
|
||||
// const y = @intCast(i32, 10 + (height + y_spacing) * sel_i) + 100;
|
||||
{
|
||||
for (range(n_sel_above)) |_, 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);
|
||||
}
|
||||
}
|
||||
|
||||
// // 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);
|
||||
}
|
||||
|
||||
self.renderer.setColor(0, 0, 0, 127);
|
||||
self.renderer.fillRectangleEx(-150, 0, @divTrunc(wsize.width, 3), wsize.height, skew);
|
||||
self.renderer.fillRectangleEx(screen_width - 300, 0, @divTrunc(wsize.width, 3), wsize.height, skew);
|
||||
}
|
||||
|
||||
fn renderMenu(self: Self, x: i32, y: i32, tab: MenuTab, sel: usize, a: u8, selected: bool) void {
|
||||
|
|
Loading…
Reference in New Issue