dendy
/
usg
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Skewed menu WIP

This commit is contained in:
Dusk 2022-08-27 13:40:54 +02:00
parent fc44bb3456
commit 8d47cb26f5
1 changed files with 34 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/MainMenu/Renderer.zig
View File

@ -12,10 +12,10 @@ const Self = @This();
renderer: *Renderer, renderer: *Renderer,
const skew = 20; const skew = 13;
const y_spacing = 20; const y_spacing = 20;
const x_spacing = 300; const x_spacing = 300;
const width = 200; const width = 300;
const height = 60; const height = 60;
pub fn init(renderer: *Renderer) Self { pub fn init(renderer: *Renderer) Self {
@ -30,30 +30,33 @@ pub fn render(self: Self, main_menu: MainMenu) void {
main_menu.getNextTab(), main_menu.getNextTab(),
}; };
for (tabs) |tab, tab_i| { const wsize = self.renderer.getOutputSize();
const curr_tab = main_menu.tab_list[tab]; 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 // 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 total_width = tabs.len * width;
//const screen_height = @intCast(usize, wsize.height);
// Current selection vertical offset // Current selection vertical offset
const sel_y_offset = y_spacing * 12; const sel_y_offset = y_spacing * 12;
// Number of items below selection // 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 // 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 // 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); const x = @intCast(i32, tab_i * (width + x_spacing) + centering);
// Transparency depending on tab at the middle // Transparency depending on tab at the middle
var alpha: u8 = 100; var alpha: u8 = 255;
if (tab_i == 1) { if (tab_i == 1) {
alpha = 255; 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); self.renderMenu(x, y, curr_tab, curr_tab.sel, alpha, true);
} }
// { {
// for (range(n_sel_below)) |_, i| { for (range(n_sel_below)) |_, i| {
// const aux_sel: i32 = @intCast(i32, i + 1); const aux_sel: i32 = @intCast(i32, i + 1);
// const curr_sel: usize = main_menu.getSelIdx(aux_sel); const curr_sel: usize = main_menu.getSelIdx(aux_sel);
// const y = @intCast(i32, sel_y_offset + ((y_spacing + height) * (aux_sel))); const y = @intCast(i32, sel_y_offset + ((y_spacing + height) * (aux_sel)));
// self.renderMenu(x, y, curr_tab, curr_sel, alpha, false); 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 // Tab header
self.renderer.setColor(curr_tab.color[0], curr_tab.color[1], curr_tab.color[2], alpha); 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.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 { fn renderMenu(self: Self, x: i32, y: i32, tab: MenuTab, sel: usize, a: u8, selected: bool) void {