From 259befc9a58da44d82a3101504ba805a2957949e Mon Sep 17 00:00:00 2001
From: Yuval Adam <_@yuv.al>
Date: Thu, 27 Feb 2025 11:15:18 +0100
Subject: Refactor but still no dice

---
 src/components/IsometricBackground.astro |  83 ++++++++++++
 src/components/IsometricScript.astro     | 143 +++++++++++++++++++++
 src/components/IsometricTriangles.astro  | 211 +++++++++++++++++++++++++++++++
 src/pages/isometric/index.astro          | 100 ++++++++-------
 4 files changed, 493 insertions(+), 44 deletions(-)
 create mode 100644 src/components/IsometricBackground.astro
 create mode 100644 src/components/IsometricScript.astro
 create mode 100644 src/components/IsometricTriangles.astro

(limited to 'src')

diff --git a/src/components/IsometricBackground.astro b/src/components/IsometricBackground.astro
new file mode 100644
index 0000000..68c6205
--- /dev/null
+++ b/src/components/IsometricBackground.astro
@@ -0,0 +1,83 @@
+---
+// Isometric Background Component
+---
+
+<div class="content">
+    <h1>Isometric Triangles</h1>
+</div>
+
+<style>
+    body,
+    html {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        background-color: #000;
+    }
+
+    .triangle {
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-style: solid;
+        opacity: 0.7;
+        transform-origin: center;
+        animation: float 20s infinite ease-in-out;
+    }
+
+    /* Create isometric triangle using clip-path instead of borders */
+    .isometric {
+        width: 100px;
+        height: 100px;
+        background-color: rgba(255, 255, 255, 0.8);
+        border: none;
+        clip-path: polygon(50% 0%, 100% 75%, 0% 75%);
+        transform-style: preserve-3d;
+        perspective: 800px;
+    }
+
+    @keyframes float {
+        0% {
+            transform: translateY(0) rotate(0deg) scale(1);
+        }
+
+        25% {
+            transform: translateY(-20px) rotate(90deg) scale(1.05);
+        }
+
+        50% {
+            transform: translateY(0) rotate(180deg) scale(1);
+        }
+
+        75% {
+            transform: translateY(20px) rotate(270deg) scale(0.95);
+        }
+
+        100% {
+            transform: translateY(0) rotate(360deg) scale(1);
+        }
+    }
+
+    .content {
+        position: relative;
+        z-index: 10;
+        color: white;
+        text-align: center;
+        font-family: "Arial", sans-serif;
+
+        /* Center vertically and horizontally */
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 100%;
+    }
+
+    h1 {
+        font-size: 3rem;
+        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+        margin-bottom: 1rem;
+    }
+</style>
diff --git a/src/components/IsometricScript.astro b/src/components/IsometricScript.astro
new file mode 100644
index 0000000..9b251a9
--- /dev/null
+++ b/src/components/IsometricScript.astro
@@ -0,0 +1,143 @@
+---
+---
+
+<script>
+    // Immediately execute the script
+    console.log("Script running, creating triangles");
+    
+    const colors = [
+        "#FF0000",
+        "#FF00FF",
+        "#FF00AA",
+        "#AA00FF",
+        "#0000FF",
+        "#00AAFF",
+        "#00FFFF",
+        "#00FFAA",
+        "#00FF00",
+        "#AAFF00",
+        "#FFFF00",
+        "#FFAA00",
+        "#FF6600",
+        "#FF0066",
+        "#FFFFFF",
+        "#AAAAFF",
+    ];
+
+    // Wait for DOM to be fully loaded
+    document.addEventListener('DOMContentLoaded', function() {
+        initializeTriangles();
+    });
+
+    function initializeTriangles() {
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+        const triangleCount = Math.max(
+            50,
+            Math.floor((windowWidth * windowHeight) / 10000),
+        );
+
+        console.log(`Creating ${triangleCount} triangles for window size ${windowWidth}x${windowHeight}`);
+
+        // Create triangles using DOM elements with isometric perspective
+        for (let i = 0; i < triangleCount; i++) {
+            createIsometricTriangle();
+        }
+
+        // Add some triangles when mouse moves
+        document.addEventListener("mousemove", function (e) {
+            if (Math.random() < 0.05) {
+                // 5% chance to create a triangle on mouse move
+                const triangle = document.createElement("div");
+                triangle.className = "triangle isometric";
+
+                const size = 50 + Math.random() * 100;
+                const color =
+                    colors[Math.floor(Math.random() * colors.length)];
+
+                // Random rotation for isometric effect
+                const rotateX = -30 + Math.random() * 60;
+                const rotateY = -30 + Math.random() * 60;
+                const rotateZ = Math.random() * 360;
+
+                triangle.style.left = `${e.clientX - size / 2}px`;
+                triangle.style.top = `${e.clientY - size / 2}px`;
+                triangle.style.width = `${size}px`;
+                triangle.style.height = `${size}px`;
+                triangle.style.backgroundColor = color;
+                triangle.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`;
+                triangle.style.animationDuration = `${10 + Math.random() * 40}s`;
+                triangle.style.animationDirection =
+                    Math.random() > 0.5 ? "normal" : "reverse";
+
+                document.body.appendChild(triangle);
+            }
+        });
+
+        // Handle window resize
+        window.addEventListener("resize", function () {
+            // Clear all existing triangles
+            const existingTriangles =
+                document.querySelectorAll(".triangle");
+            existingTriangles.forEach((triangle) => {
+                document.body.removeChild(triangle);
+            });
+
+            // Create new triangles based on new window size
+            const newWindowWidth = window.innerWidth;
+            const newWindowHeight = window.innerHeight;
+            const newTriangleCount = Math.max(
+                50,
+                Math.floor((newWindowWidth * newWindowHeight) / 10000),
+            );
+
+            for (let i = 0; i < newTriangleCount; i++) {
+                createIsometricTriangle();
+            }
+        });
+    }
+
+    function createIsometricTriangle() {
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+        
+        const triangle = document.createElement("div");
+        triangle.className = "triangle isometric";
+
+        // Random size between 50 and 150
+        const size = 50 + Math.random() * 100;
+
+        // Random position
+        const left = Math.random() * windowWidth;
+        const top = Math.random() * windowHeight;
+
+        // Random color
+        const color =
+            colors[Math.floor(Math.random() * colors.length)];
+
+        // Random rotation for isometric effect
+        const rotateX = -30 + Math.random() * 60; // -30 to 30 degrees
+        const rotateY = -30 + Math.random() * 60; // -30 to 30 degrees
+        const rotateZ = Math.random() * 360; // 0 to 360 degrees
+
+        // Random animation duration
+        const duration = 10 + Math.random() * 40;
+
+        // Random direction
+        const direction =
+            Math.random() > 0.5 ? "normal" : "reverse";
+
+        // Set triangle properties
+        triangle.style.left = `${left}px`;
+        triangle.style.top = `${top}px`;
+        triangle.style.width = `${size}px`;
+        triangle.style.height = `${size}px`;
+        triangle.style.backgroundColor = color;
+        triangle.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`;
+        triangle.style.animationDuration = `${duration}s`;
+        triangle.style.animationDirection = direction;
+
+        // Add to body
+        document.body.appendChild(triangle);
+    }
+</script>
diff --git a/src/components/IsometricTriangles.astro b/src/components/IsometricTriangles.astro
new file mode 100644
index 0000000..4c4a091
--- /dev/null
+++ b/src/components/IsometricTriangles.astro
@@ -0,0 +1,211 @@
+---
+// Isometric Triangles Component
+---
+
+<div class="content">
+    <h1>Isometric Triangles</h1>
+</div>
+
+<style>
+    body,
+    html {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        background-color: #000;
+    }
+
+    .triangle {
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-style: solid;
+        opacity: 0.7;
+        transform-origin: center;
+        animation: float 20s infinite ease-in-out;
+    }
+
+    /* Create isometric triangle using clip-path instead of borders */
+    .isometric {
+        width: 100px;
+        height: 100px;
+        background-color: rgba(255, 255, 255, 0.8);
+        border: none;
+        clip-path: polygon(50% 0%, 100% 75%, 0% 75%);
+        transform-style: preserve-3d;
+        perspective: 800px;
+    }
+
+    @keyframes float {
+        0% {
+            transform: translateY(0) rotate(0deg) scale(1);
+        }
+
+        25% {
+            transform: translateY(-20px) rotate(90deg) scale(1.05);
+        }
+
+        50% {
+            transform: translateY(0) rotate(180deg) scale(1);
+        }
+
+        75% {
+            transform: translateY(20px) rotate(270deg) scale(0.95);
+        }
+
+        100% {
+            transform: translateY(0) rotate(360deg) scale(1);
+        }
+    }
+
+    .content {
+        position: relative;
+        z-index: 10;
+        color: white;
+        text-align: center;
+        font-family: "Arial", sans-serif;
+
+        /* Center vertically and horizontally */
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 100%;
+    }
+
+    h1 {
+        font-size: 3rem;
+        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+        margin-bottom: 1rem;
+    }
+</style>
+
+<script is:inline>
+    document.addEventListener("DOMContentLoaded", function () {
+        const colors = [
+            "#FF0000",
+            "#FF00FF",
+            "#FF00AA",
+            "#AA00FF",
+            "#0000FF",
+            "#00AAFF",
+            "#00FFFF",
+            "#00FFAA",
+            "#00FF00",
+            "#AAFF00",
+            "#FFFF00",
+            "#FFAA00",
+            "#FF6600",
+            "#FF0066",
+            "#FFFFFF",
+            "#AAAAFF",
+        ];
+
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+        const triangleCount = Math.max(
+            50,
+            Math.floor((windowWidth * windowHeight) / 10000),
+        );
+
+        // Create triangles using DOM elements with isometric perspective
+        for (let i = 0; i < triangleCount; i++) {
+            createIsometricTriangle();
+        }
+
+        function createIsometricTriangle() {
+            const triangle = document.createElement("div");
+            triangle.className = "triangle isometric";
+
+            // Random size between 50 and 150
+            const size = 50 + Math.random() * 100;
+
+            // Random position
+            const left = Math.random() * windowWidth;
+            const top = Math.random() * windowHeight;
+
+            // Random color
+            const color =
+                colors[Math.floor(Math.random() * colors.length)];
+
+            // Random rotation for isometric effect
+            const rotateX = -30 + Math.random() * 60; // -30 to 30 degrees
+            const rotateY = -30 + Math.random() * 60; // -30 to 30 degrees
+            const rotateZ = Math.random() * 360; // 0 to 360 degrees
+
+            // Random animation duration
+            const duration = 10 + Math.random() * 40;
+
+            // Random direction
+            const direction =
+                Math.random() > 0.5 ? "normal" : "reverse";
+
+            // Set triangle properties
+            triangle.style.left = `${left}px`;
+            triangle.style.top = `${top}px`;
+            triangle.style.width = `${size}px`;
+            triangle.style.height = `${size}px`;
+            triangle.style.backgroundColor = color;
+            triangle.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`;
+            triangle.style.animationDuration = `${duration}s`;
+            triangle.style.animationDirection = direction;
+
+            // Add to body
+            document.body.appendChild(triangle);
+        }
+
+        // Add some triangles when mouse moves
+        document.addEventListener("mousemove", function (e) {
+            if (Math.random() < 0.05) {
+                // 5% chance to create a triangle on mouse move
+                const triangle = document.createElement("div");
+                triangle.className = "triangle isometric";
+
+                const size = 50 + Math.random() * 100;
+                const color =
+                    colors[Math.floor(Math.random() * colors.length)];
+
+                // Random rotation for isometric effect
+                const rotateX = -30 + Math.random() * 60;
+                const rotateY = -30 + Math.random() * 60;
+                const rotateZ = Math.random() * 360;
+
+                triangle.style.left = `${e.clientX - size / 2}px`;
+                triangle.style.top = `${e.clientY - size / 2}px`;
+                triangle.style.width = `${size}px`;
+                triangle.style.height = `${size}px`;
+                triangle.style.backgroundColor = color;
+                triangle.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`;
+                triangle.style.animationDuration = `${10 + Math.random() * 40}s`;
+                triangle.style.animationDirection =
+                    Math.random() > 0.5 ? "normal" : "reverse";
+
+                document.body.appendChild(triangle);
+            }
+        });
+
+        // Handle window resize
+        window.addEventListener("resize", function () {
+            // Clear all existing triangles
+            const existingTriangles =
+                document.querySelectorAll(".triangle");
+            existingTriangles.forEach((triangle) => {
+                document.body.removeChild(triangle);
+            });
+
+            // Create new triangles based on new window size
+            const newWindowWidth = window.innerWidth;
+            const newWindowHeight = window.innerHeight;
+            const newTriangleCount = Math.max(
+                50,
+                Math.floor((newWindowWidth * newWindowHeight) / 10000),
+            );
+
+            for (let i = 0; i < newTriangleCount; i++) {
+                createIsometricTriangle();
+            }
+        });
+    });
+</script>
diff --git a/src/pages/isometric/index.astro b/src/pages/isometric/index.astro
index 649715e..cf627e3 100644
--- a/src/pages/isometric/index.astro
+++ b/src/pages/isometric/index.astro
@@ -1,5 +1,6 @@
 ---
 // Isometric Triangles Experiment
+import IsometricScript from '../../components/IsometricScript.astro';
 ---
 
 <!doctype html>
@@ -84,14 +85,20 @@
             }
         </style>
     </head>
-
     <body>
         <div class="content">
             <h1>Isometric Triangles</h1>
         </div>
 
         <script is:inline>
-            document.addEventListener("DOMContentLoaded", function () {
+            // Wait for the page to be fully loaded
+            window.addEventListener('load', function() {
+                setTimeout(initializeTriangles, 100);
+            });
+
+            function initializeTriangles() {
+                console.log("Script running, creating triangles");
+                
                 const colors = [
                     "#FF0000",
                     "#FF00FF",
@@ -118,52 +125,13 @@
                     Math.floor((windowWidth * windowHeight) / 10000),
                 );
 
+                console.log(`Creating ${triangleCount} triangles for window size ${windowWidth}x${windowHeight}`);
+
                 // Create triangles using DOM elements with isometric perspective
                 for (let i = 0; i < triangleCount; i++) {
                     createIsometricTriangle();
                 }
 
-                function createIsometricTriangle() {
-                    const triangle = document.createElement("div");
-                    triangle.className = "triangle isometric";
-
-                    // Random size between 50 and 150
-                    const size = 50 + Math.random() * 100;
-
-                    // Random position
-                    const left = Math.random() * windowWidth;
-                    const top = Math.random() * windowHeight;
-
-                    // Random color
-                    const color =
-                        colors[Math.floor(Math.random() * colors.length)];
-
-                    // Random rotation for isometric effect
-                    const rotateX = -30 + Math.random() * 60; // -30 to 30 degrees
-                    const rotateY = -30 + Math.random() * 60; // -30 to 30 degrees
-                    const rotateZ = Math.random() * 360; // 0 to 360 degrees
-
-                    // Random animation duration
-                    const duration = 10 + Math.random() * 40;
-
-                    // Random direction
-                    const direction =
-                        Math.random() > 0.5 ? "normal" : "reverse";
-
-                    // Set triangle properties
-                    triangle.style.left = `${left}px`;
-                    triangle.style.top = `${top}px`;
-                    triangle.style.width = `${size}px`;
-                    triangle.style.height = `${size}px`;
-                    triangle.style.backgroundColor = color;
-                    triangle.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`;
-                    triangle.style.animationDuration = `${duration}s`;
-                    triangle.style.animationDirection = direction;
-
-                    // Add to body
-                    document.body.appendChild(triangle);
-                }
-
                 // Add some triangles when mouse moves
                 document.addEventListener("mousemove", function (e) {
                     if (Math.random() < 0.05) {
@@ -215,7 +183,51 @@
                         createIsometricTriangle();
                     }
                 });
-            });
+            }
+
+            function createIsometricTriangle() {
+                const windowWidth = window.innerWidth;
+                const windowHeight = window.innerHeight;
+                
+                const triangle = document.createElement("div");
+                triangle.className = "triangle isometric";
+
+                // Random size between 50 and 150
+                const size = 50 + Math.random() * 100;
+
+                // Random position
+                const left = Math.random() * windowWidth;
+                const top = Math.random() * windowHeight;
+
+                // Random color
+                const color =
+                    colors[Math.floor(Math.random() * colors.length)];
+
+                // Random rotation for isometric effect
+                const rotateX = -30 + Math.random() * 60; // -30 to 30 degrees
+                const rotateY = -30 + Math.random() * 60; // -30 to 30 degrees
+                const rotateZ = Math.random() * 360; // 0 to 360 degrees
+
+                // Random animation duration
+                const duration = 10 + Math.random() * 40;
+
+                // Random direction
+                const direction =
+                    Math.random() > 0.5 ? "normal" : "reverse";
+
+                // Set triangle properties
+                triangle.style.left = `${left}px`;
+                triangle.style.top = `${top}px`;
+                triangle.style.width = `${size}px`;
+                triangle.style.height = `${size}px`;
+                triangle.style.backgroundColor = color;
+                triangle.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`;
+                triangle.style.animationDuration = `${duration}s`;
+                triangle.style.animationDirection = direction;
+
+                // Add to body
+                document.body.appendChild(triangle);
+            }
         </script>
     </body>
 </html>
-- 
cgit v1.3.1