Implement rectangle rendering & more improvements

src/MainMenu/Renderer.zig

@@ -31,12 +31,7 @@ pub fn render(self: Self, main_menu: MainMenu) void {
         main_menu.getNextTab(),
     };
 
-    // const wsize = self.renderer.getOutputSize();
-    // const screen_width = @as(i32, @intCast(wsize.width));
-    // const screen_height = @as(i32, @intCast(wsize.height));
-
-    const screen_width = 640;
-    const screen_height = 480;
+    const wsize = self.renderer.getOutputSize();
 
     for (tabs, 0..) |u_tab, u_tab_i| {
         //const tab = @intCast(i32, u_tab);
@@ -50,12 +45,12 @@ pub fn render(self: Self, main_menu: MainMenu) void {
         // Current selection vertical offset
         const sel_y_offset = y_spacing * 12;
         // Number of items below selection
-        const n_sel_below = @as(usize, @intCast(@divExact((screen_height - sel_y_offset), (height + y_spacing))));
+        const n_sel_below = @as(usize, @intCast(@divExact((wsize.height - sel_y_offset), (height + y_spacing))));
         // Number of items below selection
         const n_sel_above = @as(usize, @intCast(@divExact((sel_y_offset), (height + y_spacing))));
 
         // Move it from the left to the center
-        const centering = @divExact((screen_width - (total_width + total_spacing)), 2);
+        const centering = @divExact((wsize.width - (total_width + total_spacing)), 2);
 
         const x = tab_i * (width + x_spacing) + centering;
 
@@ -100,9 +95,9 @@ pub fn render(self: Self, main_menu: MainMenu) void {
     }
 
     // TODO: Set the Color depending on the Main Menu color
-    //self.renderer.setColorF(0.91, 0.85, 0.65, 0.50);
-    //self.renderer.fillRectangleEx(-150, 0, @divTrunc(wsize.width, 3), wsize.height, skew);
-    //self.renderer.fillRectangleEx(@as(i32, @intCast(screen_width)) - 300, 0, @divTrunc(wsize.width, 3), wsize.height, skew);
+    self.renderer.setColor(.{ 232, 217, 166, 127 });
+    self.renderer.fillRectangleEx(-150, 0, @divTrunc(wsize.width, 3), wsize.height, skew);
+    self.renderer.fillRectangleEx(wsize.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 {

src/Renderer.zig

@@ -6,8 +6,9 @@ const std = @import("std");
 const rl = @import("raylib.zig");
 
 const Self = @This();
+const Color = [4]u8;
 
-color: [4]f32 = .{ 0, 0, 0, 0 },
+color: Color = .{ 0, 0, 0, 0 },
 
 // There's a vbo for each shader program
 vbo: [max_objects]f32 = .{0.0} ** max_objects,
@@ -28,26 +29,60 @@ pub fn init() !Self {
 }
 
 pub fn render(self: *Self) void {
-    _ = self;
+    //_ = self;
 
     rl.endDrawing();
     rl.beginDrawing();
 
-    rl.clearBackground(232, 216, 166, 255);
+    rl.clearBackground(.{232, 216, 166, 255});
+
+    //self.setColor(.{0,0,0,255});
+    self.fillRectangle(10, 10, 100, 100);
 }
 
 pub fn deinit(self: *Self) void {
     _ = self;
+
+    rl.closeWindow();
 }
 
-//pub const OutputSize = struct { width: c_int, height: c_int };
-//pub fn getOutputSize(self: Self) OutputSize {
-//    var wsize = self.window.getSize();
-//    return OutputSize{
-//        .width = wsize.width,
-//        .height = wsize.height,
-//    };
-//}
+pub fn fillRectangle(self: *Self, x: i32, y: i32, w: i32, h: i32) void {
+    self.fillRectangleEx(x, y, w, h, 0);
+}
+
+pub fn fillRectangleEx(self: *Self, x: i32, y: i32, w: i32, h: i32, skew_x: i32) void {
+    var xf: f32 = @floatFromInt(x);
+    var yf: f32 = @floatFromInt(y);
+    var wf: f32 = @floatFromInt(w);
+    var hf: f32 = @floatFromInt(h);
+
+    const skew_x_offset = @as(f32, @floatFromInt(skew_x)) * hf / 100;
+
+    const upLeft = [_]f32{ xf + skew_x_offset, yf };
+    const upRight = [_]f32{ xf + wf + skew_x_offset, yf };
+    const downLeft = [_]f32{ xf - skew_x_offset, yf + hf };
+    const downRight = [_]f32{ xf + wf - skew_x_offset, yf + hf };
+
+    const color = Color{0,0,0,255};
+
+    _ = self;
+
+    rl.drawTriangle(upLeft, downLeft, upRight, color);
+    rl.drawTriangle(downLeft, downRight, upRight, color);
+}
+
+pub fn setColor(self: *Self, color: Color) void {
+    self.color = color;
+}
+
+pub const OutputSize = struct { width: i32, height: i32 };
+pub fn getOutputSize(self: Self) OutputSize {
+    _ = self;
+    return OutputSize{
+        .width = rl.getScreenWidth(),
+        .height = rl.getScreenHeight(),
+    };
+}
 
 //pub const Texture = struct {
 //    texture: gl.Texture,

src/raylib.zig

@@ -27,10 +27,27 @@ pub fn endDrawing() void {
     c.EndDrawing();
 }
 
-pub fn drawText(text: [*c]const u8, x: i32, y: i32, fontSize: i32, r: u8, g: u8, b: u8, a: u8) void {
-    c.DrawText(text, x, y, fontSize, c.Color{ .r = r, .g = g, .b = b, .a = a});
+pub fn drawText(text: [*c]const u8, x: i32, y: i32, fontSize: i32, color: [4]u8) void {
+    c.DrawText(text, x, y, fontSize, .{ .r = color[0], .g = color[1], .b = color[2], .a = color[3] });
 }
 
-pub fn clearBackground(r: u8, g: u8, b: u8, a: u8) void {
-    c.ClearBackground(c.Color{ .r = r, .g = g, .b = b, .a = a});
+pub fn clearBackground(color: [4]u8) void {
+    c.ClearBackground(.{ .r = color[0], .g = color[1], .b = color[2], .a = color[3] });
+}
+
+pub fn drawTriangle(v1: [2]f32, v2: [2]f32, v3: [2]f32, color: [4]u8) void {
+    c.DrawTriangle(
+        .{ .x = v1[0], .y = v1[1] },
+        .{ .x = v2[0], .y = v2[1] },
+        .{ .x = v3[0], .y = v3[1] },
+        .{ .r = color[0], .g = color[1], .b = color[2], .a = color[3] },
+    );
+}
+
+pub fn getScreenWidth() i32 {
+    return c.GetScreenWidth();
+}
+
+pub fn getScreenHeight() i32 {
+    return c.GetScreenHeight();
 }