From 8d47cb26f5b6491a29c74697b87f71ec0c57fd3d Mon Sep 17 00:00:00 2001
From: Strangedusk <strangealt@protonmail.com>
Date: Sat, 27 Aug 2022 13:40:54 +0200
Subject: [PATCH] Skewed menu WIP

---
 src/MainMenu/Renderer.zig | 84 ++++++++++++++++-----------------------
 1 file changed, 34 insertions(+), 50 deletions(-)

diff --git a/src/MainMenu/Renderer.zig b/src/MainMenu/Renderer.zig
index f95e409..f8d30a7 100644
--- a/src/MainMenu/Renderer.zig
+++ b/src/MainMenu/Renderer.zig
@@ -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 {