Merge pull request steam-bell-92#1100 from Alvi24-hub/main

Feature: Add Matrix Calculator implementation to web app

Author: steam-bell-92

web-app/assets/banners/matrix-calculator.webp

@@ -378,6 +378,25 @@ def draw_o(ox, oy):
         v_draw.line([(550, 115), (250, 335)], fill=color_accent_dim, width=3)
         v_draw.rounded_rectangle([305, 160, 495, 290], radius=24, fill=(255,255,255,14), outline=color_accent, width=3)
         v_draw.text((400, 225), "A+3", fill=color_accent, anchor="mm")
+    elif "matrix" in n_lower or "matrix calculator" in n_lower:
+        # Matrix brackets and grid pattern
+        cx, cy = 400, 225
+        # Draw matrix brackets
+        v_draw.line([(200, 140), (200, 310)], fill=color_accent, width=5)
+        v_draw.line([(600, 140), (600, 310)], fill=color_accent, width=5)
+        # Draw matrix grid lines
+        for i in range(3):
+            y = 165 + i * 60
+            v_draw.line([(220, y), (580, y)], fill=color_accent_dim, width=2)
+        # Draw sample numbers
+        sample_nums = [["2", "1"], ["3", "4"]]
+        for i in range(2):
+            for j in range(2):
+                x = 290 + j * 100
+                y = 200 + i * 60
+                v_draw.text((x, y), sample_nums[i][j], fill=color_accent, anchor="mm", font=font_title)
+        # Draw operation symbol
+        v_draw.text((400, 280), "×", fill=color_accent, anchor="mm", font=font_title)
     elif "pet" in n_lower or "productivity" in n_lower:
         # Cute paw print
         cx, cy = 400, 225
@@ -472,6 +491,7 @@ def draw_o(ox, oy):
     ("Binary Search", "math", "binary-search.webp"),
     ("Bubble Sort", "math", "bubble-sort.webp"),
     ("Tower of Hanoi", "math", "tower-of-hanoi.webp"),
+    ("Matrix Calculator", "math", "matrix-calculator.webp"),
 
     # UTILITIES
     ("Morse Code", "utilities", "morse-code.webp"),

web-app/generate_banners.py

@@ -875,6 +875,7 @@ <h3>Legal</h3>
     <script defer src="js/projects/color-palette.js"></script>
     <script defer src="js/projects/resume-analyzer.js"></script>
     <script src="js/projects/caesar-cipher.js"></script>
+    <script src="js/projects/matrix-calculator.js"></script>
     <script defer src="js/projects.js"></script>
     <script defer src="js/cm-editor.js"></script>
     <script defer src="js/playground.js"></script>
@@ -1070,6 +1071,13 @@ <h3>Legal</h3>
             desc: "Recognize sequences",
             tags: "math,sequences",
           },
+          {
+            project: "matrix-calculator",
+            title: "Matrix Calculator",
+            category: "math",
+            desc: "Add, subtract, multiply, transpose, determinant, rank, inverse",
+            tags: "math,matrix,algebra,calculator",
+          },
           {
             project: "coordinate-polar-transform",
             title: "Coordinate Transform",

web-app/index.html

@@ -21,7 +21,8 @@ function getProjectHTML(projectName) {
         'derivative-calculator': getDerivativeCalculatorHTML(),
         'morse-code': getMorseCodeHTML(),
         'tower-of-hanoi': getTowerOfHanoiHTML(),
-        'nqueens' : getNQueensHTML()
+        'nqueens' : getNQueensHTML(),
+        'matrix-calculator': () => getMatrixCalculatorHTML()
     };
 
     return projects[projectName] || '<h2>Project Coming Soon!</h2>';
@@ -47,7 +48,8 @@ function initializeProject(projectName) {
         'derivative-calculator': initDerivativeCalculator,
         'morse-code': initMorseCode,
         'tower-of-hanoi': initTowerOfHanoi,
-        'nqueens' : initNQueens()
+        'nqueens' : initNQueens(),
+        'matrix-calculator': initMatrixCalculator
     };
 
     if (initializers[projectName]) {