^^._, work in progress, small changes

Transcendence/srcs/frontend/src/doodle.css

@@ -1,20 +1,11 @@
-body, html {
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    height: 100%;
-    background-color: #003366; /* Your monochrome blue background */
-    overflow: hidden; /* Prevents scrollbars if shapes move off-screen */
-}
 
 .shape {
     /* The "Physical" properties */
     position: fixed;
     /* transform: translate(-50%, -50%); Optional: This makes 'left/top' refer to the CENTER of the doodle */
 
-    width: 300px;
+    width: 142px;
-    height: 300px;
+    height: 142px;
-    
 
     /* The "Stenciling" instructions (but no image yet!) */
     -webkit-mask-size: contain;
@@ -26,24 +17,52 @@ body, html {
     background-color: white; 
 }
 
-.doodle-1 {
+.shape:hover {
-    -webkit-mask-image: url('assets/doodle/doodle1.png');
+    transform: scale(1.2); /* Grow by 20% when you hover the mouse over it */
-    mask-image: url('assets/doodle/doodle1.png');
+    transition: transform 0.3s ease; /* Make it a smooth grow */
-    /* Set initial position here */
-    left: 50vw;
-    top: 30vw;
 }
 
-.doodle-2 {
+/* Individual Doodle Definitions */
-    -webkit-mask-image: url('assets/doodle/doodle1.png');
+.doodle-1  { -webkit-mask-image: url('assets/doodles/ball.png');      mask-image: url('assets/doodles/ball.png');      left: 10vw; top: 10vh; }
-    mask-image: url('assets/doodle/doodle1.png');
+.doodle-2  { -webkit-mask-image: url('assets/doodles/batman.png');    mask-image: url('assets/doodles/batman.png');    left: 20vw; top: 15vh; }
-    left: 20vw;
+.doodle-3  { -webkit-mask-image: url('assets/doodles/building.png');  mask-image: url('assets/doodles/building.png');  left: 30vw; top: 20vh; }
-    top: 70vw;
+.doodle-4  { -webkit-mask-image: url('assets/doodles/butterfly.png'); mask-image: url('assets/doodles/butterfly.png'); left: 40vw; top: 25vh; }
-}
+.doodle-5  { -webkit-mask-image: url('assets/doodles/car.png');       mask-image: url('assets/doodles/car.png');       left: 50vw; top: 30vh; }
+.doodle-6  { -webkit-mask-image: url('assets/doodles/cat.png');       mask-image: url('assets/doodles/cat.png');       left: 60vw; top: 35vh; }
+.doodle-7  { -webkit-mask-image: url('assets/doodles/clouds.png');    mask-image: url('assets/doodles/clouds.png');    left: 70vw; top: 40vh; }
+.doodle-8  { -webkit-mask-image: url('assets/doodles/controls.png');  mask-image: url('assets/doodles/controls.png');  left: 80vw; top: 45vh; }
+.doodle-9  { -webkit-mask-image: url('assets/doodles/dead.png');      mask-image: url('assets/doodles/dead.png');      left: 90vw; top: 50vh; }
+.doodle-10 { -webkit-mask-image: url('assets/doodles/diamant.png');   mask-image: url('assets/doodles/diamant.png');   left: 15vw; top: 55vh; }
+.doodle-11 { -webkit-mask-image: url('assets/doodles/dice.png');      mask-image: url('assets/doodles/dice.png');      left: 25vw; top: 60vh; }
+.doodle-12 { -webkit-mask-image: url('assets/doodles/earth.png');     mask-image: url('assets/doodles/earth.png');     left: 35vw; top: 65vh; }
+.doodle-13 { -webkit-mask-image: url('assets/doodles/egypt.png');     mask-image: url('assets/doodles/egypt.png');     left: 45vw; top: 70vh; }
+.doodle-14 { -webkit-mask-image: url('assets/doodles/fire.png');      mask-image: url('assets/doodles/fire.png');      left: 55vw; top: 75vh; }
+.doodle-15 { -webkit-mask-image: url('assets/doodles/fish.png');      mask-image: url('assets/doodles/fish.png');      left: 65vw; top: 80vh; }
+.doodle-16 { -webkit-mask-image: url('assets/doodles/flag.png');      mask-image: url('assets/doodles/flag.png');      left: 75vw; top: 85vh; }
+.doodle-17 { -webkit-mask-image: url('assets/doodles/hearts.png');    mask-image: url('assets/doodles/hearts.png');    left: 85vw; top: 90vh; }
+.doodle-18 { -webkit-mask-image: url('assets/doodles/house.png');     mask-image: url('assets/doodles/house.png');     left: 5vw;  top: 45vh; }
+.doodle-19 { -webkit-mask-image: url('assets/doodles/idol.png');      mask-image: url('assets/doodles/idol.png');      left: 12vw; top: 22vh; }
+.doodle-20 { -webkit-mask-image: url('assets/doodles/lotus.png');     mask-image: url('assets/doodles/lotus.png');     left: 22vw; top: 32vh; }
+.doodle-21 { -webkit-mask-image: url('assets/doodles/mail.png');      mask-image: url('assets/doodles/mail.png');      left: 32vw; top: 42vh; }
+.doodle-22 { -webkit-mask-image: url('assets/doodles/moon.png');      mask-image: url('assets/doodles/moon.png');      left: 42vw; top: 52vh; }
+.doodle-23 { -webkit-mask-image: url('assets/doodles/pokeball.png');  mask-image: url('assets/doodles/pokeball.png');  left: 52vw; top: 62vh; }
+.doodle-24 { -webkit-mask-image: url('assets/doodles/runes.png');     mask-image: url('assets/doodles/runes.png');     left: 62vw; top: 72vh; }
+.doodle-25 { -webkit-mask-image: url('assets/doodles/shield.png');    mask-image: url('assets/doodles/shield.png');    left: 72vw; top: 82vh; }
+.doodle-26 { -webkit-mask-image: url('assets/doodles/shiny.png');     mask-image: url('assets/doodles/shiny.png');     left: 82vw; top: 12vh; }
+.doodle-27 { -webkit-mask-image: url('assets/doodles/snail.png');     mask-image: url('assets/doodles/snail.png');     left: 92vw; top: 22vh; }
+.doodle-28 { -webkit-mask-image: url('assets/doodles/sound.png');     mask-image: url('assets/doodles/sound.png');     left: 18vw; top: 82vh; }
+.doodle-29 { -webkit-mask-image: url('assets/doodles/spiral.png');    mask-image: url('assets/doodles/spiral.png');    left: 28vw; top: 72vh; }
+.doodle-30 { -webkit-mask-image: url('assets/doodles/star.png');      mask-image: url('assets/doodles/star.png');      left: 38vw; top: 62vh; }
+.doodle-31 { -webkit-mask-image: url('assets/doodles/stop.png');      mask-image: url('assets/doodles/stop.png');      left: 48vw; top: 52vh; }
+.doodle-32 { -webkit-mask-image: url('assets/doodles/sun.png');       mask-image: url('assets/doodles/sun.png');       left: 58vw; top: 42vh; }
+.doodle-33 { -webkit-mask-image: url('assets/doodles/tree.png');      mask-image: url('assets/doodles/tree.png');      left: 68vw; top: 32vh; }
+.doodle-34 { -webkit-mask-image: url('assets/doodles/triskel.png');   mask-image: url('assets/doodles/triskel.png');   left: 78vw; top: 22vh; }
+.doodle-35 { -webkit-mask-image: url('assets/doodles/yin_yang.png');  mask-image: url('assets/doodles/yin_yang.png');  left: 88vw; top: 12vh; }
+
 
 /* 3. A quick animation for the color loop */
 .loop-color {
-    animation: colorShift 24s infinite alternate ease-in-out;
+    animation: colorShift 12s infinite alternate ease-in-out;
 }
 @keyframes colorShift {
     /* 0% and 100% are identical to create the "Infinite Circle" effect */

Transcendence/srcs/frontend/src/doodle.js

@@ -36,51 +36,52 @@ function moveRandomly(id) {
 // To make it move every 2 seconds automatically:
 // setInterval(() => moveRandomly('shape1'), 2000);
 // setInterval(() => moveRandomly('shape2'), 2000);
-
-// Store the state of our moving shapes
-const movingShapes = {};
 function startSmoothRandomMove(id, speed = 2) {
     const el = document.getElementById(id);
     if (!el) return;
 
-    // We store position as 0.0 to 1.0 (percentage of screen)
+    // 1. Get initial pixel position or pick random if CSS isn't loaded yet
-    // This makes it "Resolution Independent"
+    const rect = el.getBoundingClientRect();
+    
     const state = {
-        percentX: parseFloat(el.style.left) / 100 || Math.random(),
+        x: rect.left || Math.random() * (window.innerWidth - 142),
-        percentY: parseFloat(el.style.top) / 100 || Math.random(),
+        y: rect.top || Math.random() * (window.innerHeight - 142),
         angle: Math.random() * Math.PI * 2,
         speed: speed 
     };
 
     function update() {
-        // 1. Get current pixel dimensions of the window
+        // 2. Refresh screen boundaries every frame
-        const width = window.innerWidth;
+        const screenW = window.innerWidth;
-        const height = window.innerHeight;
+        const screenH = window.innerHeight;
-        
+        const shapeSize = 142; // Matches your CSS width/height
-        // 2. Convert speed (pixels) into a "percentage" of this specific screen
-        const vx = (Math.cos(state.angle) * state.speed) / width;
-        const vy = (Math.sin(state.angle) * state.speed) / height;
 
-        state.percentX += vx;
+        // 3. Calculate next step
-        state.percentY += vy;
+        state.x += Math.cos(state.angle) * state.speed;
+        state.y += Math.sin(state.angle) * state.speed;
 
-        // 3. Bounce logic (Keep between 0% and 100%)
+        // 4. BOUNCE LOGIC (Corrected)
-        // We subtract a little (e.g., 0.1) so the 300px shape doesn't go off-edge
+        // Horizontal check
-        const bufferX = 300 / width; 
+        if (state.x <= 0) {
-        const bufferY = 300 / height;
+            state.x = 0;
-
+            state.angle = Math.PI - state.angle;
-        if (state.percentX < 0 || state.percentX > (1 - bufferX)) {
+        } else if (state.x + shapeSize >= screenW) {
+            state.x = screenW - shapeSize;
             state.angle = Math.PI - state.angle;
-            state.percentX = Math.max(0, Math.min(state.percentX, 1 - bufferX));
-        }
-        if (state.percentY < 0 || state.percentY > (1 - bufferY)) {
-            state.angle = -state.angle;
-            state.percentY = Math.max(0, Math.min(state.percentY, 1 - bufferY));
         }
 
-        // 4. Apply as percentages
+        // Vertical check
-        el.style.left = (state.percentX * 100) + "vw";
+        if (state.y <= 0) {
-        el.style.top = (state.percentY * 100) + "vh";
+            state.y = 0;
+            state.angle = -state.angle;
+        } else if (state.y + shapeSize >= screenH) {
+            state.y = screenH - shapeSize;
+            state.angle = -state.angle;
+        }
+
+        // 5. Apply position using pixels for precision
+        el.style.left = state.x + "px";
+        el.style.top = state.y + "px";
 
         requestAnimationFrame(update);
     }
@@ -88,61 +89,23 @@ function startSmoothRandomMove(id, speed = 2) {
     requestAnimationFrame(update);
 }
 
-// function startSmoothRandomMove(id, speed = 2) {
-//     const el = document.getElementById(id);
-//     if (!el) return;
-
-//     // Initial state: Start in the center, pick a random angle
-//     movingShapes[id] = {
-//         x: parseFloat(el.style.left) || 500,
-//         y: parseFloat(el.style.top) || 300,
-//         angle: Math.random() * Math.PI * 2, // Random direction in radians
-//         speed: speed
-//     };
-
-//     function update() {
-//         const state = movingShapes[id];
-
-//         // 1. Calculate new position based on angle and speed
-//         state.x += Math.cos(state.angle) * state.speed;
-//         state.y += Math.sin(state.angle) * state.speed;
-
-//         // 2. "Bounce" logic: Change direction if hitting screen edges
-//         if (state.x < 0 || state.x > window.innerWidth - 300) {
-//             state.angle = Math.PI - state.angle; // Flip horizontal
-//         }
-//         if (state.y < 0 || state.y > window.innerHeight - 300) {
-//             state.angle = -state.angle; // Flip vertical
-//         }
-
-//         // 3. Randomly change direction slightly (the "Wander" effect)
-//         // 1% chance every frame to pivot slightly
-//         if (Math.random() < 0.01) {
-//             state.angle += (Math.random() - 0.5) * 1; 
-//         }
-
-//         // 4. Apply to the element
-//         el.style.left = state.x + "px";
-//         el.style.top = state.y + "px";
-
-//         // Keep the loop going
-//         requestAnimationFrame(update);
-//     }
-
-//     // Start the first "heartbeat"
-//     requestAnimationFrame(update);
-// }
-
-startSmoothRandomMove('shape1', 3); // Moves at speed 3
-startSmoothRandomMove('shape2', 1.5); // Moves slower
 
+// This loop runs 35 times, once for each shape ID
+for (let i = 1; i <= 35; i++) {
+    // Generate a random speed between 1 and 4 for each shape
+    // so they don't all move at the exact same pace
+    const randomSpeed = 1 + Math.random() * 3; 
+    
+    // Call your function using the ID 'shape1', 'shape2', etc.
+    startSmoothRandomMove(`shape${i}`, randomSpeed);
+}
 
 function randomizeAnimationStarts() {
     const shapes = document.querySelectorAll('.loop-color');
     
     shapes.forEach(shape => {
         // Pick a random number between 0 and 10 (since your loop is 10s)
-        const randomDelay = Math.random() * -10; 
+        const randomDelay = Math.random() * - 12; 
         
         // Apply it directly to the element's style
         shape.style.animationDelay = randomDelay + "s";

Transcendence/srcs/frontend/src/game.css

@@ -16,8 +16,6 @@
 
     );
 
-    --app-background-image: url("./assets/Frame1.png");
-
     --color-surface: #ffcc00;
     --color-surface-light: #feffa6;
     --color-text: #000000;
@@ -63,12 +61,9 @@
 
 html {
     height: 100%;
-    background-image:
+    background-image:  
-        var(--app-background-image),    
         var(--app-background-base);
 
-    animation: bg-animation 12s steps(1) infinite;
-
     background-size: contain, cover;
     background-position: center, center;
     background-repeat: no-repeat, no-repeat;
@@ -119,54 +114,13 @@ body {
     100% { transform: translateY(0) rotate(var(--rot)); }
 }
 
-@keyframes bg-animation {
-    0% {
-        background-image: url("./assets/Frame1.png"), var(--app-background-base);
-    }
-    8.33% {
-        background-image: url("./assets/Frame2.png"), var(--app-background-base);
-    }
-    16.66% {
-        background-image: url("./assets/Frame3.png"), var(--app-background-base);
-    }
-    25% {
-        background-image: url("./assets/Frame4.png"), var(--app-background-base);
-    }
-    33.33% {
-        background-image: url("./assets/Frame5.png"), var(--app-background-base);
-    }
-    41.66% {
-        background-image: url("./assets/Frame6.png"), var(--app-background-base);
-    }
-    50% {
-        background-image: url("./assets/Frame7.png"), var(--app-background-base);
-    }
-    58.33% {
-        background-image: url("./assets/Frame8.png"), var(--app-background-base);
-    }
-    66.66% {
-        background-image: url("./assets/Frame9.png"), var(--app-background-base);
-    }
-    75% {
-        background-image: url("./assets/Frame10.png"), var(--app-background-base);
-    }
-    83.33% {
-        background-image: url("./assets/Frame11.png"), var(--app-background-base);
-    }
-    91.66% {
-        background-image: url("./assets/Frame12.png"), var(--app-background-base);
-    }
-    100% {
-        background-image: url("./assets/Frame1.png"), var(--app-background-base);
-    }
-}
-
 /* ============================================
    TYPOGRAPHY
    ============================================ */
 
 .title {
     position: absolute;
+    z-index: 999;
     top: 20px;
     left: 50%;
     translate: -50% 0;

Transcendence/srcs/frontend/src/game.html

@@ -4,10 +4,13 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<title>Lobby</title>
+		<link rel="stylesheet" href="doodle.css">
 		<link rel="stylesheet" href="game.css" />
 		<link rel="preconnect" href="https://fonts.googleapis.com" />
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 		<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&display=swap" rel="stylesheet" />
+
+		<script src="doodle.js" defer></script>
 	</head>
 	<script type="module" src="app.js"></script>
 	<body>
@@ -34,5 +37,43 @@
     <div class="page" aria-label="Page">
       <button class="page__item" data-action="gameroom" aria-label="Game Rooms">Game Rooms</button>
     </div>
+
+
+	<div class="shape doodle-1 loop-color" id="shape1"></div>
+	<div class="shape doodle-2 loop-color" id="shape2"></div>
+	<div class="shape doodle-3 loop-color" id="shape3"></div>
+	<div class="shape doodle-4 loop-color" id="shape4"></div>
+	<div class="shape doodle-5 loop-color" id="shape5"></div>
+	<div class="shape doodle-6 loop-color" id="shape6"></div>
+	<div class="shape doodle-7 loop-color" id="shape7"></div>
+	<div class="shape doodle-8 loop-color" id="shape8"></div>
+	<div class="shape doodle-9 loop-color" id="shape9"></div>
+	<div class="shape doodle-10 loop-color" id="shape10"></div>
+	<div class="shape doodle-11 loop-color" id="shape11"></div>
+	<div class="shape doodle-12 loop-color" id="shape12"></div>
+	<div class="shape doodle-13 loop-color" id="shape13"></div>
+	<div class="shape doodle-14 loop-color" id="shape14"></div>
+	<div class="shape doodle-15 loop-color" id="shape15"></div>
+	<div class="shape doodle-16 loop-color" id="shape16"></div>
+	<div class="shape doodle-17 loop-color" id="shape17"></div>
+	<div class="shape doodle-18 loop-color" id="shape18"></div>
+	<div class="shape doodle-19 loop-color" id="shape19"></div>
+	<div class="shape doodle-20 loop-color" id="shape20"></div>
+	<div class="shape doodle-21 loop-color" id="shape21"></div>
+	<div class="shape doodle-22 loop-color" id="shape22"></div>
+	<div class="shape doodle-23 loop-color" id="shape23"></div>
+	<div class="shape doodle-24 loop-color" id="shape24"></div>
+	<div class="shape doodle-25 loop-color" id="shape25"></div>
+	<div class="shape doodle-26 loop-color" id="shape26"></div>
+	<div class="shape doodle-27 loop-color" id="shape27"></div>
+	<div class="shape doodle-28 loop-color" id="shape28"></div>
+	<div class="shape doodle-29 loop-color" id="shape29"></div>
+	<div class="shape doodle-30 loop-color" id="shape30"></div>
+	<div class="shape doodle-31 loop-color" id="shape31"></div>
+	<div class="shape doodle-32 loop-color" id="shape32"></div>
+	<div class="shape doodle-33 loop-color" id="shape33"></div>
+	<div class="shape doodle-34 loop-color" id="shape34"></div>
+	<div class="shape doodle-35 loop-color" id="shape35"></div>
+
 	</body>
 </html>

Transcendence/srcs/frontend/src/test.html

@@ -8,9 +8,40 @@
 	<script src="doodle.js" defer></script>
 </head>
 <body>
-
+	<div class="shape doodle-1 loop-color" id="shape1"></div>
-    <div class="shape doodle-1 loop-color" id="shape1"></div>
+	<div class="shape doodle-2 loop-color" id="shape2"></div>
-    <div class="shape doodle-2 loop-color" id="shape2"></div>
+	<div class="shape doodle-3 loop-color" id="shape3"></div>
-
+	<div class="shape doodle-4 loop-color" id="shape4"></div>
+	<div class="shape doodle-5 loop-color" id="shape5"></div>
+	<div class="shape doodle-6 loop-color" id="shape6"></div>
+	<div class="shape doodle-7 loop-color" id="shape7"></div>
+	<div class="shape doodle-8 loop-color" id="shape8"></div>
+	<div class="shape doodle-9 loop-color" id="shape9"></div>
+	<div class="shape doodle-10 loop-color" id="shape10"></div>
+	<div class="shape doodle-11 loop-color" id="shape11"></div>
+	<div class="shape doodle-12 loop-color" id="shape12"></div>
+	<div class="shape doodle-13 loop-color" id="shape13"></div>
+	<div class="shape doodle-14 loop-color" id="shape14"></div>
+	<div class="shape doodle-15 loop-color" id="shape15"></div>
+	<div class="shape doodle-16 loop-color" id="shape16"></div>
+	<div class="shape doodle-17 loop-color" id="shape17"></div>
+	<div class="shape doodle-18 loop-color" id="shape18"></div>
+	<div class="shape doodle-19 loop-color" id="shape19"></div>
+	<div class="shape doodle-20 loop-color" id="shape20"></div>
+	<div class="shape doodle-21 loop-color" id="shape21"></div>
+	<div class="shape doodle-22 loop-color" id="shape22"></div>
+	<div class="shape doodle-23 loop-color" id="shape23"></div>
+	<div class="shape doodle-24 loop-color" id="shape24"></div>
+	<div class="shape doodle-25 loop-color" id="shape25"></div>
+	<div class="shape doodle-26 loop-color" id="shape26"></div>
+	<div class="shape doodle-27 loop-color" id="shape27"></div>
+	<div class="shape doodle-28 loop-color" id="shape28"></div>
+	<div class="shape doodle-29 loop-color" id="shape29"></div>
+	<div class="shape doodle-30 loop-color" id="shape30"></div>
+	<div class="shape doodle-31 loop-color" id="shape31"></div>
+	<div class="shape doodle-32 loop-color" id="shape32"></div>
+	<div class="shape doodle-33 loop-color" id="shape33"></div>
+	<div class="shape doodle-34 loop-color" id="shape34"></div>
+	<div class="shape doodle-35 loop-color" id="shape35"></div>
 </body>
 </html>