diff --git a/Transcendence/srcs/frontend/src/assets/doodle/doodle1.png b/Transcendence/srcs/frontend/src/assets/doodle/doodle1.png
deleted file mode 100644
index 359bbb2..0000000
Binary files a/Transcendence/srcs/frontend/src/assets/doodle/doodle1.png and /dev/null differ
diff --git a/Transcendence/srcs/frontend/src/assets/doodles/cat.png b/Transcendence/srcs/frontend/src/assets/doodles/cat.png
new file mode 100644
index 0000000..6127dad
Binary files /dev/null and b/Transcendence/srcs/frontend/src/assets/doodles/cat.png differ
diff --git a/Transcendence/srcs/frontend/src/doodle.css b/Transcendence/srcs/frontend/src/doodle.css
index 0155c05..cfbe647 100644
--- a/Transcendence/srcs/frontend/src/doodle.css
+++ b/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;
- height: 300px;
-
+ width: 142px;
+ height: 142px;
/* The "Stenciling" instructions (but no image yet!) */
-webkit-mask-size: contain;
@@ -26,24 +17,52 @@ body, html {
background-color: white;
}
-.doodle-1 {
- -webkit-mask-image: url('assets/doodle/doodle1.png');
- mask-image: url('assets/doodle/doodle1.png');
- /* Set initial position here */
- left: 50vw;
- top: 30vw;
+.shape:hover {
+ transform: scale(1.2); /* Grow by 20% when you hover the mouse over it */
+ transition: transform 0.3s ease; /* Make it a smooth grow */
}
-.doodle-2 {
- -webkit-mask-image: url('assets/doodle/doodle1.png');
- mask-image: url('assets/doodle/doodle1.png');
- left: 20vw;
- top: 70vw;
-}
+/* Individual Doodle Definitions */
+.doodle-1 { -webkit-mask-image: url('assets/doodles/ball.png'); mask-image: url('assets/doodles/ball.png'); left: 10vw; top: 10vh; }
+.doodle-2 { -webkit-mask-image: url('assets/doodles/batman.png'); mask-image: url('assets/doodles/batman.png'); left: 20vw; top: 15vh; }
+.doodle-3 { -webkit-mask-image: url('assets/doodles/building.png'); mask-image: url('assets/doodles/building.png'); left: 30vw; top: 20vh; }
+.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 */
diff --git a/Transcendence/srcs/frontend/src/doodle.js b/Transcendence/srcs/frontend/src/doodle.js
index a478fe3..d7e2ed2 100644
--- a/Transcendence/srcs/frontend/src/doodle.js
+++ b/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)
- // This makes it "Resolution Independent"
+ // 1. Get initial pixel position or pick random if CSS isn't loaded yet
+ const rect = el.getBoundingClientRect();
+
const state = {
- percentX: parseFloat(el.style.left) / 100 || Math.random(),
- percentY: parseFloat(el.style.top) / 100 || Math.random(),
+ x: rect.left || Math.random() * (window.innerWidth - 142),
+ 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
- const width = window.innerWidth;
- const height = window.innerHeight;
-
- // 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;
+ // 2. Refresh screen boundaries every frame
+ const screenW = window.innerWidth;
+ const screenH = window.innerHeight;
+ const shapeSize = 142; // Matches your CSS width/height
- state.percentX += vx;
- state.percentY += vy;
+ // 3. Calculate next step
+ state.x += Math.cos(state.angle) * state.speed;
+ state.y += Math.sin(state.angle) * state.speed;
- // 3. Bounce logic (Keep between 0% and 100%)
- // We subtract a little (e.g., 0.1) so the 300px shape doesn't go off-edge
- const bufferX = 300 / width;
- const bufferY = 300 / height;
-
- if (state.percentX < 0 || state.percentX > (1 - bufferX)) {
+ // 4. BOUNCE LOGIC (Corrected)
+ // Horizontal check
+ if (state.x <= 0) {
+ state.x = 0;
+ state.angle = Math.PI - state.angle;
+ } 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
- el.style.left = (state.percentX * 100) + "vw";
- el.style.top = (state.percentY * 100) + "vh";
+ // Vertical check
+ if (state.y <= 0) {
+ 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";
diff --git a/Transcendence/srcs/frontend/src/game.css b/Transcendence/srcs/frontend/src/game.css
index 058a725..423c46b 100644
--- a/Transcendence/srcs/frontend/src/game.css
+++ b/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:
- var(--app-background-image),
+ 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;
diff --git a/Transcendence/srcs/frontend/src/game.html b/Transcendence/srcs/frontend/src/game.html
index 7e5a3de..ace57d3 100644
--- a/Transcendence/srcs/frontend/src/game.html
+++ b/Transcendence/srcs/frontend/src/game.html
@@ -4,10 +4,13 @@
Lobby
+
+
+
@@ -34,5 +37,43 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+