diff --git a/Transcendence/srcs/frontend/src/game2/doodle.css b/Transcendence/srcs/frontend/src/game2/doodle.css new file mode 100644 index 0000000..2995ebc --- /dev/null +++ b/Transcendence/srcs/frontend/src/game2/doodle.css @@ -0,0 +1,87 @@ + +.shape { + /* The "Physical" properties */ + position: fixed; + /* transform: translate(-50%, -50%); Optional: This makes 'left/top' refer to the CENTER of the doodle */ + + width: 142px; + height: 142px; + + /* The "Stenciling" instructions (but no image yet!) */ + -webkit-mask-size: contain; + mask-size: contain; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + + /* The default "Paint" color */ + background-color: white; +} + +.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 */ +} + +/* Individual Doodle Definitions */ +.doodle-0 { -webkit-mask-image: url('doodles/cat.png'); mask-image: url('doodles/cat.png'); left: 60vw; top: 35vh; } +.doodle-1 { -webkit-mask-image: url('doodles/ball.png'); mask-image: url('doodles/ball.png'); left: 10vw; top: 10vh; } +.doodle-2 { -webkit-mask-image: url('doodles/batman.png'); mask-image: url('doodles/batman.png'); left: 20vw; top: 15vh; } +.doodle-3 { -webkit-mask-image: url('doodles/building.png'); mask-image: url('doodles/building.png'); left: 30vw; top: 20vh; } +.doodle-4 { -webkit-mask-image: url('doodles/butterfly.png'); mask-image: url('doodles/butterfly.png'); left: 40vw; top: 25vh; } +.doodle-5 { -webkit-mask-image: url('doodles/car.png'); mask-image: url('doodles/car.png'); left: 50vw; top: 30vh; } +.doodle-6 { -webkit-mask-image: url('doodles/yin_yang.png'); mask-image: url('doodles/yin_yang.png'); left: 88vw; top: 12vh; } +.doodle-7 { -webkit-mask-image: url('doodles/clouds.png'); mask-image: url('doodles/clouds.png'); left: 70vw; top: 40vh; } +.doodle-8 { -webkit-mask-image: url('doodles/controls.png'); mask-image: url('doodles/controls.png'); left: 80vw; top: 45vh; } +.doodle-9 { -webkit-mask-image: url('doodles/dead.png'); mask-image: url('doodles/dead.png'); left: 90vw; top: 50vh; } +.doodle-10 { -webkit-mask-image: url('doodles/diamant.png'); mask-image: url('doodles/diamant.png'); left: 15vw; top: 55vh; } +.doodle-11 { -webkit-mask-image: url('doodles/dice.png'); mask-image: url('doodles/dice.png'); left: 25vw; top: 60vh; } +.doodle-12 { -webkit-mask-image: url('doodles/earth.png'); mask-image: url('doodles/earth.png'); left: 35vw; top: 65vh; } +.doodle-13 { -webkit-mask-image: url('doodles/egypt.png'); mask-image: url('doodles/egypt.png'); left: 45vw; top: 70vh; } +.doodle-14 { -webkit-mask-image: url('doodles/fire.png'); mask-image: url('doodles/fire.png'); left: 55vw; top: 75vh; } +.doodle-15 { -webkit-mask-image: url('doodles/fish.png'); mask-image: url('doodles/fish.png'); left: 65vw; top: 80vh; } +.doodle-16 { -webkit-mask-image: url('doodles/flag.png'); mask-image: url('doodles/flag.png'); left: 75vw; top: 85vh; } +.doodle-17 { -webkit-mask-image: url('doodles/hearts.png'); mask-image: url('doodles/hearts.png'); left: 85vw; top: 90vh; } +.doodle-18 { -webkit-mask-image: url('doodles/house.png'); mask-image: url('doodles/house.png'); left: 5vw; top: 45vh; } +.doodle-19 { -webkit-mask-image: url('doodles/idol.png'); mask-image: url('doodles/idol.png'); left: 12vw; top: 22vh; } +.doodle-20 { -webkit-mask-image: url('doodles/lotus.png'); mask-image: url('doodles/lotus.png'); left: 22vw; top: 32vh; } +.doodle-21 { -webkit-mask-image: url('doodles/mail.png'); mask-image: url('doodles/mail.png'); left: 32vw; top: 42vh; } +.doodle-22 { -webkit-mask-image: url('doodles/moon.png'); mask-image: url('doodles/moon.png'); left: 42vw; top: 52vh; } +.doodle-23 { -webkit-mask-image: url('doodles/pokeball.png'); mask-image: url('doodles/pokeball.png'); left: 52vw; top: 62vh; } +.doodle-24 { -webkit-mask-image: url('doodles/runes.png'); mask-image: url('doodles/runes.png'); left: 62vw; top: 72vh; } +.doodle-25 { -webkit-mask-image: url('doodles/shield.png'); mask-image: url('doodles/shield.png'); left: 72vw; top: 82vh; } +.doodle-26 { -webkit-mask-image: url('doodles/shiny.png'); mask-image: url('doodles/shiny.png'); left: 82vw; top: 12vh; } +.doodle-27 { -webkit-mask-image: url('doodles/snail.png'); mask-image: url('doodles/snail.png'); left: 92vw; top: 22vh; } +.doodle-28 { -webkit-mask-image: url('doodles/sound.png'); mask-image: url('doodles/sound.png'); left: 18vw; top: 82vh; } +.doodle-29 { -webkit-mask-image: url('doodles/spiral.png'); mask-image: url('doodles/spiral.png'); left: 28vw; top: 72vh; } +.doodle-30 { -webkit-mask-image: url('doodles/star.png'); mask-image: url('doodles/star.png'); left: 38vw; top: 62vh; } +.doodle-31 { -webkit-mask-image: url('doodles/stop.png'); mask-image: url('doodles/stop.png'); left: 48vw; top: 52vh; } +.doodle-32 { -webkit-mask-image: url('doodles/sun.png'); mask-image: url('doodles/sun.png'); left: 58vw; top: 42vh; } +.doodle-33 { -webkit-mask-image: url('doodles/tree.png'); mask-image: url('doodles/tree.png'); left: 68vw; top: 32vh; } +.doodle-34 { -webkit-mask-image: url('doodles/triskel.png'); mask-image: url('doodles/triskel.png'); left: 78vw; top: 22vh; } + + +/* 3. A quick animation for the color loop */ +.loop-color { + animation: colorShift 12s infinite alternate ease-in-out; +} +@keyframes colorShift { + /* 0% and 100% are identical to create the "Infinite Circle" effect */ + 0% { background-color: #3075ff; } /* Royal Blue (Start) */ + + 8% { background-color: #24a1ff; } /* Sky Blue */ + 17% { background-color: #1ad8ff; } /* Cyan */ + + 25% { background-color: #1bffa7; } /* Seafoam Green */ + 33% { background-color: #1fff4d; } /* Bright Green */ + 42% { background-color: #8bff32; } /* Lime Green */ + + 50% { background-color: #dcff38; } /* Electric Yellow */ + 58% { background-color: #ffbc29; } /* Golden Yellow */ + 67% { background-color: #ff8c4a; } /* Coral Orange */ + + 75% { background-color: #ff1d1d; } /* Hot Red */ + 83% { background-color: #ff2bf3; } /* Magenta Pink */ + 92% { background-color: #ac37ff; } /* Electric Purple */ + + 100% { background-color: #3075ff; } /* Royal Blue (Seamless Loop) */ +} \ No newline at end of file diff --git a/Transcendence/srcs/frontend/src/game2/doodle.js b/Transcendence/srcs/frontend/src/game2/doodle.js new file mode 100644 index 0000000..2a20df4 --- /dev/null +++ b/Transcendence/srcs/frontend/src/game2/doodle.js @@ -0,0 +1,113 @@ +const maxdoodles = 34; + +// /////////////////////////////////////////////////////////////////////////////////////////>\ +// container for all doodles, create them +class DoodleContainer { + + constructor(parent) { + + this.parent = parent; + this.obj = document.createElement('div'); + Object.assign(this.obj.style, { + width: '100vw', + height: '100vw', + }); + + this.createAllDoodles(); + parent.append(this.obj); + this.randomizeAnimationStarts(); + } + + createAllDoodles() { + + for (let i = 0; i <= maxdoodles; i++) { + let d = document.createElement('div'); + d.classList.add('shape', 'doodle-' + i, 'loop-color'); + d.id = 'shape' + i; + this.obj.append(d); + d.addEventListener('click', () => { + console.log(`hi from ${d.id}!`); + }) + } + } + + startSmoothRandomMove(id, speed = 2) { + + const el = document.getElementById(id); + if (!el) + return; + + // 1. Get initial pixel position or pick random if CSS isn't loaded yet + const rect = el.getBoundingClientRect(); + + const state = { + 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() { + // 2. Refresh screen boundaries every frame + const screenW = window.innerWidth; + const screenH = window.innerHeight; + const shapeSize = 142; // Matches your CSS width/height + + // 3. Calculate next step + state.x += Math.cos(state.angle) * state.speed; + state.y += Math.sin(state.angle) * state.speed; + + // 4. BOUNCE LOGIC + // 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; + } + + // 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); + } + + requestAnimationFrame(update); + } + + randomizeAnimationStarts() { + for (let i = 0; i <= maxdoodles; i++) { + const randomSpeed = 1 + Math.random() * 3; + this.startSmoothRandomMove(`shape${i}`, randomSpeed); + } + } +} + +// /////////////////////////////////////////////////////////////////////////////////////////> +// all loop-color have the same @colorShift animation cycle, this disynchronize them +function randomizeColorsStarts() { + 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() * - 15; + + // Apply it directly to the element's style + shape.style.animationDelay = randomDelay + "s"; + }); +} + +const a = new DoodleContainer(document.body); +// Call this once when the script loads +randomizeColorsStarts(); diff --git a/Transcendence/srcs/frontend/src/game2/doodles/ball.png b/Transcendence/srcs/frontend/src/game2/doodles/ball.png new file mode 100644 index 0000000..f01603b Binary files /dev/null and b/Transcendence/srcs/frontend/src/game2/doodles/ball.png differ diff --git a/Transcendence/srcs/frontend/src/game2/doodles/batman.png b/Transcendence/srcs/frontend/src/game2/doodles/batman.png new file mode 100644 index 0000000..b2a3694 Binary files /dev/null and b/Transcendence/srcs/frontend/src/game2/doodles/batman.png differ diff --git a/Transcendence/srcs/frontend/src/game2/doodles/building.png b/Transcendence/srcs/frontend/src/game2/doodles/building.png new file mode 100644 index 0000000..4f6f8f9 Binary files /dev/null and b/Transcendence/srcs/frontend/src/game2/doodles/building.png differ diff --git a/Transcendence/srcs/frontend/src/game2/doodles/butterfly.png b/Transcendence/srcs/frontend/src/game2/doodles/butterfly.png new file mode 100644 index 0000000..8e07155 Binary files /dev/null and b/Transcendence/srcs/frontend/src/game2/doodles/butterfly.png differ diff --git a/Transcendence/srcs/frontend/src/game2/doodles/car.png b/Transcendence/srcs/frontend/src/game2/doodles/car.png new file mode 100644 index 0000000..c795467 Binary files /dev/null and b/Transcendence/srcs/frontend/src/game2/doodles/car.png differ diff --git a/Transcendence/srcs/frontend/src/game2/doodles/cat.png b/Transcendence/srcs/frontend/src/game2/doodles/cat.png new file mode 100644 index 0000000..6127dad Binary files /dev/null and b/Transcendence/srcs/frontend/src/game2/doodles/cat.png differ diff --git a/Transcendence/srcs/frontend/src/game2/doodles/clouds.png b/Transcendence/srcs/frontend/src/game2/doodles/clouds.png new file mode 100644 index 0000000..bac58ea Binary files /dev/null and b/Transcendence/srcs/frontend/src/game2/doodles/clouds.png differ diff --git a/Transcendence/srcs/frontend/src/game2/doodles/controls.png b/Transcendence/srcs/frontend/src/game2/doodles/controls.png new file mode 100644 index 0000000..bc190b8 Binary files /dev/null and b/Transcendence/srcs/frontend/src/game2/doodles/controls.png differ diff --git a/Transcendence/srcs/frontend/src/game2/doodles/dead.png b/Transcendence/srcs/frontend/src/game2/doodles/dead.png new file mode 100644 index 0000000..71b08a8 Binary files /dev/null and b/Transcendence/srcs/frontend/src/game2/doodles/dead.png differ diff --git a/Transcendence/srcs/frontend/src/game2/doodles/diamant.png b/Transcendence/srcs/frontend/src/game2/doodles/diamant.png new file mode 100644 index 0000000..5c37ce1 Binary files /dev/null and b/Transcendence/srcs/frontend/src/game2/doodles/diamant.png differ diff --git a/Transcendence/srcs/frontend/src/game2/doodles/dice.png b/Transcendence/srcs/frontend/src/game2/doodles/dice.png new file mode 100644 index 0000000..0910f5f Binary files /dev/null and b/Transcendence/srcs/frontend/src/game2/doodles/dice.png differ diff --git a/Transcendence/srcs/frontend/src/game2/doodles/earth.png b/Transcendence/srcs/frontend/src/game2/doodles/earth.png new file mode 100644 index 0000000..d212cc1 Binary files /dev/null and b/Transcendence/srcs/frontend/src/game2/doodles/earth.png differ diff --git a/Transcendence/srcs/frontend/src/game2/doodles/egypt.png b/Transcendence/srcs/frontend/src/game2/doodles/egypt.png new file mode 100644 index 0000000..0d63d78 Binary files /dev/null and b/Transcendence/srcs/frontend/src/game2/doodles/egypt.png differ diff --git a/Transcendence/srcs/frontend/src/game2/doodles/fire.png b/Transcendence/srcs/frontend/src/game2/doodles/fire.png new file mode 100644 index 0000000..0ef93cf Binary files /dev/null and b/Transcendence/srcs/frontend/src/game2/doodles/fire.png differ diff --git a/Transcendence/srcs/frontend/src/game2/doodles/fish.png b/Transcendence/srcs/frontend/src/game2/doodles/fish.png new file mode 100644 index 0000000..4e6e441 Binary files /dev/null and b/Transcendence/srcs/frontend/src/game2/doodles/fish.png differ diff --git a/Transcendence/srcs/frontend/src/game2/doodles/flag.png b/Transcendence/srcs/frontend/src/game2/doodles/flag.png new file mode 100644 index 0000000..c866ada Binary files /dev/null and b/Transcendence/srcs/frontend/src/game2/doodles/flag.png differ diff --git a/Transcendence/srcs/frontend/src/game2/doodles/hearts.png b/Transcendence/srcs/frontend/src/game2/doodles/hearts.png new file mode 100644 index 0000000..128ab91 Binary files /dev/null and b/Transcendence/srcs/frontend/src/game2/doodles/hearts.png differ diff --git a/Transcendence/srcs/frontend/src/game2/doodles/house.png b/Transcendence/srcs/frontend/src/game2/doodles/house.png new file mode 100644 index 0000000..f60baeb Binary files /dev/null and b/Transcendence/srcs/frontend/src/game2/doodles/house.png differ diff --git a/Transcendence/srcs/frontend/src/game2/doodles/idol.png b/Transcendence/srcs/frontend/src/game2/doodles/idol.png new file mode 100644 index 0000000..8580784 Binary files /dev/null and b/Transcendence/srcs/frontend/src/game2/doodles/idol.png differ diff --git a/Transcendence/srcs/frontend/src/game2/doodles/lotus.png b/Transcendence/srcs/frontend/src/game2/doodles/lotus.png new file mode 100644 index 0000000..5998344 Binary files /dev/null and b/Transcendence/srcs/frontend/src/game2/doodles/lotus.png differ diff --git a/Transcendence/srcs/frontend/src/game2/doodles/mail.png b/Transcendence/srcs/frontend/src/game2/doodles/mail.png new file mode 100644 index 0000000..1ea8432 Binary files /dev/null and b/Transcendence/srcs/frontend/src/game2/doodles/mail.png differ diff --git a/Transcendence/srcs/frontend/src/game2/doodles/moon.png b/Transcendence/srcs/frontend/src/game2/doodles/moon.png new file mode 100644 index 0000000..18becad Binary files /dev/null and b/Transcendence/srcs/frontend/src/game2/doodles/moon.png differ diff --git a/Transcendence/srcs/frontend/src/game2/doodles/pokeball.png b/Transcendence/srcs/frontend/src/game2/doodles/pokeball.png new file mode 100644 index 0000000..281c79b Binary files /dev/null and b/Transcendence/srcs/frontend/src/game2/doodles/pokeball.png differ diff --git a/Transcendence/srcs/frontend/src/game2/doodles/runes.png b/Transcendence/srcs/frontend/src/game2/doodles/runes.png new file mode 100644 index 0000000..0afdb45 Binary files /dev/null and b/Transcendence/srcs/frontend/src/game2/doodles/runes.png differ diff --git a/Transcendence/srcs/frontend/src/game2/doodles/shield.png b/Transcendence/srcs/frontend/src/game2/doodles/shield.png new file mode 100644 index 0000000..515220c Binary files /dev/null and b/Transcendence/srcs/frontend/src/game2/doodles/shield.png differ diff --git a/Transcendence/srcs/frontend/src/game2/doodles/shiny.png b/Transcendence/srcs/frontend/src/game2/doodles/shiny.png new file mode 100644 index 0000000..1c16355 Binary files /dev/null and b/Transcendence/srcs/frontend/src/game2/doodles/shiny.png differ diff --git a/Transcendence/srcs/frontend/src/game2/doodles/snail.png b/Transcendence/srcs/frontend/src/game2/doodles/snail.png new file mode 100644 index 0000000..11cf068 Binary files /dev/null and b/Transcendence/srcs/frontend/src/game2/doodles/snail.png differ diff --git a/Transcendence/srcs/frontend/src/game2/doodles/sound.png b/Transcendence/srcs/frontend/src/game2/doodles/sound.png new file mode 100644 index 0000000..270f9c7 Binary files /dev/null and b/Transcendence/srcs/frontend/src/game2/doodles/sound.png differ diff --git a/Transcendence/srcs/frontend/src/game2/doodles/spiral.png b/Transcendence/srcs/frontend/src/game2/doodles/spiral.png new file mode 100644 index 0000000..8fa1874 Binary files /dev/null and b/Transcendence/srcs/frontend/src/game2/doodles/spiral.png differ diff --git a/Transcendence/srcs/frontend/src/game2/doodles/star.png b/Transcendence/srcs/frontend/src/game2/doodles/star.png new file mode 100644 index 0000000..4d9a16f Binary files /dev/null and b/Transcendence/srcs/frontend/src/game2/doodles/star.png differ diff --git a/Transcendence/srcs/frontend/src/game2/doodles/stop.png b/Transcendence/srcs/frontend/src/game2/doodles/stop.png new file mode 100644 index 0000000..cfa176f Binary files /dev/null and b/Transcendence/srcs/frontend/src/game2/doodles/stop.png differ diff --git a/Transcendence/srcs/frontend/src/game2/doodles/sun.png b/Transcendence/srcs/frontend/src/game2/doodles/sun.png new file mode 100644 index 0000000..2f00539 Binary files /dev/null and b/Transcendence/srcs/frontend/src/game2/doodles/sun.png differ diff --git a/Transcendence/srcs/frontend/src/game2/doodles/tree.png b/Transcendence/srcs/frontend/src/game2/doodles/tree.png new file mode 100644 index 0000000..9ee2f8a Binary files /dev/null and b/Transcendence/srcs/frontend/src/game2/doodles/tree.png differ diff --git a/Transcendence/srcs/frontend/src/game2/doodles/triskel.png b/Transcendence/srcs/frontend/src/game2/doodles/triskel.png new file mode 100644 index 0000000..e1c34ba Binary files /dev/null and b/Transcendence/srcs/frontend/src/game2/doodles/triskel.png differ diff --git a/Transcendence/srcs/frontend/src/game2/doodles/yin_yang.png b/Transcendence/srcs/frontend/src/game2/doodles/yin_yang.png new file mode 100644 index 0000000..63c1ecc Binary files /dev/null and b/Transcendence/srcs/frontend/src/game2/doodles/yin_yang.png differ diff --git a/Transcendence/srcs/frontend/src/game2/game.css b/Transcendence/srcs/frontend/src/game2/game.css new file mode 100644 index 0000000..03d0a00 --- /dev/null +++ b/Transcendence/srcs/frontend/src/game2/game.css @@ -0,0 +1,1127 @@ +:root { + --color-primary: #ffc75e; + --color-primary-hover: #ffc75e; + --color-success: #3cff01; + --color-success-dark: #ffc75e; + --color-error: #ff4d4d; + --color-warning: #ffc75e; + --color-github: #ffc75e; + + --color-bg: #ffe5b5; + + --app-background-base: radial-gradient( + circle at top, + #3fc9ff, + #21fcc5 + + ); + + --color-surface: #ffcc00; + --color-surface-light: #feffa6; + --color-text: #000000; + --color-text-muted: #353535; + + --font-size-base: 10px; + --font-size-sm: 1.2rem; + --font-size-md: 1.4rem; + --font-size-lg: 1.6rem; + --font-size-xl: 3rem; + + --spacing-xs: 4px; + --spacing-sm: 8px; + --spacing-md: 12px; + --spacing-lg: 16px; + --spacing-xl: 24px; + + --radius-sm: 4px; + --radius-md: 6px; + --radius-lg: 12px; + --radius-full: 50%; + + --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3); + --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5); + --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5); + + --transition-fast: 150ms ease; + --transition-normal: 250ms ease; + + --z-menu: 2; + --z-window: 100; + --z-modal: 200; +} + +/* ============================================ + RESET & BASE + ============================================ */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +html { + height: 100%; + background-image: + var(--app-background-base); + + background-size: contain, cover; + background-position: center, center; + background-repeat: no-repeat, no-repeat; + + + background-size: + contain, + cover; + + background-position: + center; + + background-repeat: + no-repeat; +} + +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + color: var(--color-text); + line-height: 1.5; +} + +.app { + position: relative; + width: 70%; + min-width: 800px; + margin: 0 auto; +} + + +/* ============================================ + ANIMATIONS + ============================================ */ + +@keyframes wobble { + 0% { transform: translate(0%, 0) rotate(0deg); } + 25% { transform: translate(-5%, -1px) rotate(-0.5deg); } + 50% { transform: translate(0%, 1px) rotate(0.5deg); } + 75% { transform: translate(+5%, -1px) rotate(0.5deg); } + 100% { transform: translate(0%, 0) rotate(0deg); } +} + +@keyframes bounce { + 0% { transform: translateY(0) rotate(var(--rot)); } + 33% { transform: translateY(-6px) rotate(var(--rot)); } + 66% { transform: translateY(-8px) rotate(var(--rot)); } + 100% { transform: translateY(0) rotate(var(--rot)); } +} + +/* ============================================ + TYPOGRAPHY + ============================================ */ + +.title { + position: absolute; + z-index: 1; + top: 20px; + left: 50%; + translate: -50% 0; + background: #ffcc00; + color: #000; + + border: 4px solid #feffa6; + border-radius: 18px; + + padding: 0.6rem 1.2rem; + + animation: wobble 2s infinite ease-in-out; +} + +.title span { + display: inline-block; + transform-origin: center; + font-size: 4rem; + font-weight: bold; + text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5); + + animation: bounce 1.2s infinite alternate; + animation-timing-function: ease-in-out; +} + +.title span:nth-child(1) { --rot: -5deg; color: #ff4d4d; } +.title span:nth-child(2) { --rot: 3deg; color: #5beb67; } +.title span:nth-child(3) { --rot: -3deg; color: #ca8dfc; } +.title span:nth-child(4) { --rot: 2deg; color: #6698f5; } +.title span:nth-child(5) { --rot: -4deg; color: #ff66cc; } + +.title span:nth-child(2) { animation-delay: 0.2s; } +.title span:nth-child(3) { animation-delay: 0.4s; } +.title span:nth-child(4) { animation-delay: 0.6s; } +.title span:nth-child(5) { animation-delay: 0.8s; } + +.title span { will-change: transform; } + +/* ============================================ + PAGES + ============================================ */ + +.page { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + display: flex; + flex-direction: column; + gap: var(--spacing-xs); + + z-index: var(--z-menu); +} + +.page__item { + + border-radius: var(--radius-lg); + background: var(--color-surface); + color: var(--color-text); + border: 1px solid var(--color-surface-light); + border-color: #fda725; + padding: var(--spacing-sm) var(--spacing-md); + font-size: var(--font-size-md); + cursor: pointer; + transition: all var(--transition-fast); + text-align: center; +} + +.page__item:hover { + background: var(--color-surface-light); + font-size: var(--font-size-lg); +} + +.page__item--active { + background: var(--color-primary); + border-color: var(--color-primary); +} + +/* ============================================ + MENU + ============================================ */ + +.menu { + position: fixed; + top: var(--spacing-lg); + left: 50px; + + display: flex; + flex-direction: column; + gap: var(--spacing-lg); + + z-index: var(--z-menu); +} + +.menu__item { + background: var(--color-surface); + color: var(--color-text); + border: 1px solid var(--color-surface-light); + border-radius: var(--radius-lg); + border-color: #fda725; + padding: var(--spacing-sm) var(--spacing-md); + font-size: var(--font-size-md); + cursor: pointer; + transition: all var(--transition-fast); + text-align: center; +} + +.menu__item:hover { + background: var(--color-surface-light); + font-size: var(--font-size-lg); +} + +.menu__item--active { + background: var(--color-primary); + border-color: var(--color-primary); +} + +/* ============================================ + GAME + ============================================ */ + + +.game { + position: fixed; + top: var(--spacing-lg); + right: 50px; + + display: flex; + flex-direction: column; + gap: var(--spacing-lg); + + z-index: var(--z-menu); +} + +.game__item { + background: var(--color-surface); + color: var(--color-text); + border: 1px solid var(--color-surface-light); + border-radius: var(--radius-lg); + border-color: #fda725; + padding: var(--spacing-sm) var(--spacing-md); + font-size: var(--font-size-md); + cursor: pointer; + transition: all var(--transition-fast); + text-align: center; +} + +.game__item:hover { + background: var(--color-surface-light); + font-size: var(--font-size-lg); +} + +.game__item--active { + background: var(--color-primary); + border-color: var(--color-primary); +} + +/* ============================================ + BUTTONS + ============================================ */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: var(--spacing-sm) var(--spacing-md); + font-size: var(--font-size-md); + font-weight: 500; + border: none; + border-radius: var(--radius-md); + cursor: pointer; + transition: all var(--transition-fast); + text-decoration: none; +} + +.btn:hover { + opacity: 0.9; + transform: translateY(-1px); +} + +.btn:active { + transform: translateY(0); +} + +.btn--primary { + background: var(--color-surface); + color: var(--color-text); +} + +.btn--primary:hover { + background: var(--color-primary-hover); +} + +.btn--secondary { + background: var(--color-surface); + color: var(--color-text); +} + +.btn--success { + background: var(--color-success-dark); + color: var(--color-text); +} + +.btn--danger { + background: var(--color-error); + color: var(--color-text); +} + +.btn--github { + background: var(--color-github); + color: var(--color-text); +} + +.btn--ghost { + background: transparent; + color: var(--color-text); + border: 1px solid var(--color-surface-light); +} + +/* ============================================ + INPUTS + ============================================ */ +.input { + width: 100%; + padding: var(--spacing-sm) var(--spacing-md); + font-size: var(--font-size-md); + background: var(--color-surface); + color: var(--color-text); + border: 1px solid var(--color-surface-light); + border-radius: var(--radius-md); + transition: border-color var(--transition-fast); +} + +.input:focus { + outline: none; + border-color: var(--color-primary); +} + +.input::placeholder { + color: var(--color-text-muted); +} + +.input-group { + display: flex; + flex-direction: column; + gap: var(--spacing-sm); +} + +/* ============================================ + WINDOWS + ============================================ */ +.window { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: var(--color-bg); + color: var(--color-text); + z-index: var(--z-window); + display: none; + flex-direction: column; + min-width: 280px; + box-shadow: var(--shadow-lg); + border-radius: 5px; + border-color: #aa1f1f; + border: 6px solid #faac37; +} + +.window--visible { + display: flex; +} + +.window--left { + left: 25%; +} + +.window--right { + left: 75%; +} + +.window__header { + display: flex; + justify-content: space-between; + align-items: center; + padding: var(--spacing-sm) var(--spacing-md); + background: var(--color-surface); + cursor: move; + user-select: none; +} + +.window__title { + font-weight: 500; + font-size: var(--font-size-md); +} + +.window__close { + cursor: pointer; + font-size: var(--font-size-lg); + opacity: 0.8; + transition: opacity var(--transition-fast); + background: none; + border: none; + color: var(--color-text); + padding: 0; + line-height: 1; +} + +.window__close:hover { + opacity: 1; +} + +.window__body { + padding: var(--spacing-md); + display: flex; + flex-direction: column; + gap: var(--spacing-sm); + flex: 1; + overflow: auto; +} + +/* ============================================ + MESSAGES + ============================================ */ +.message { + font-size: var(--font-size-sm); + padding: var(--spacing-xs); + border-radius: var(--radius-lg); + border-color: #000; +} + +.message--success { + color: var(--color-success); +} + +.message--error { + color: var(--color-error); +} + +.message--info { + color: var(--color-text-muted); +} + +/* ============================================ + LOGIN WINDOW + ============================================ */ +.login { + width: 320px; + border-radius: 5px; + border-color: #aa1f1f; + border: 6px solid #faac37; + background: #ffffff; + color: #000; +} + +.login__form { + display: flex; + flex-direction: column; + gap: var(--spacing-sm); +} + +.login__actions { + display: flex; + gap: var(--spacing-sm); + margin-top: var(--spacing-xs); +} + +.login__divider { + display: flex; + align-items: center; + gap: var(--spacing-sm); + color: var(--color-text-muted); + font-size: var(--font-size-sm); + margin: var(--spacing-sm) 0; +} + +.login__divider::before, +.login__divider::after { + content: ''; + flex: 1; + height: 1px; + background: var(--color-surface-light); +} + +/* ============================================ + CHAT WINDOW + ============================================ */ +.chat { + width: 380px; + height: 400px; +} + +.chat__output { + flex: 1; + overflow-y: auto; + padding: var(--spacing-sm); + background: var(--color-surface); + border-radius: var(--radius-md); + display: flex; + flex-direction: column; + gap: var(--spacing-sm); + min-height: 150px; +} + +.chat__message { + padding: var(--spacing-xs) var(--spacing-sm); + background: var(--color-surface-light); + border-radius: var(--radius-sm); + font-size: var(--font-size-sm); +} + +.chat__message--own { + background: var(--color-primary); + align-self: flex-end; +} + +.chat__friend-indicator { + display: inline-block; + width: 8px; + height: 8px; + background-color: var(--color-success); + border-radius: 50%; + margin-right: var(--spacing-xs); + vertical-align: middle; +} + +.chat__system { + color: var(--color-text-muted); + font-size: var(--font-size-sm); + font-style: italic; + text-align: center; +} + +.chat__system--error { + color: var(--color-error); +} + +.chat__system--success { + color: var(--color-success); +} + +.chat__input-container { + display: flex; + gap: var(--spacing-sm); + margin-top: var(--spacing-sm); +} + +.chat__input { + flex: 1; +} + +.chat__controls { + display: flex; + gap: var(--spacing-sm); + margin-top: var(--spacing-sm); +} + +/* ============================================ + AVATAR WINDOW + ============================================ */ +.avatar-window { + width: 360px; +} + +.avatar__preview { + width: 120px; + height: 120px; + object-fit: cover; + border-radius: var(--radius-full); + border: 3px solid var(--color-text); + box-shadow: var(--shadow-md); + background: var(--color-surface-light); + align-self: center; +} + +.avatar__username { + font-size: var(--font-size-lg); + font-weight: 600; + text-align: center; + color: var(--color-text); + margin-top: var(--spacing-sm); +} + +.avatar__controls { + display: flex; + flex-direction: column; + gap: var(--spacing-sm); + align-items: center; +} + +.avatar__file-input { + display: none; +} + +/* ============================================ + STATS WINDOW + ============================================ */ +.stats-window { + width: 320px; +} + +.stats__avatar { + width: 72px; + height: 72px; + object-fit: cover; + border-radius: var(--radius-full); + border: 2px solid var(--color-text); + align-self: center; + display: block; + margin: 0 auto var(--spacing-xs); +} + +.stats__username { + font-size: var(--font-size-lg); + font-weight: 600; + text-align: center; + color: #000; + margin-bottom: var(--spacing-md); +} + +.stats__section { + margin-bottom: var(--spacing-md); +} + +.stats__section-title { + font-size: var(--font-size-sm); + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--color-primary); + border-bottom: 1px solid var(--color-surface-light); + padding-bottom: var(--spacing-xs); + margin-bottom: var(--spacing-xs); +} + +.stats__section-body { + display: flex; + flex-direction: column; + gap: 4px; +} + +.stats__row { + display: flex; + justify-content: space-between; + font-size: var(--font-size-sm); + padding: 3px 0; +} + +.stats__label { + color: #333; +} + +.stats__value { + font-weight: 600; + color: #000; +} + +.stats__loading { + font-size: var(--font-size-sm); + color: #333; + text-align: center; + padding: var(--spacing-sm) 0; +} + +/* ============================================ + UTILITIES + ============================================ */ +.hidden { + display: none !important; +} + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} + +.text-center { + text-align: center; +} + +.flex-center { + display: flex; + align-items: center; + justify-content: center; +} + +/* ============================================ + FRIENDS WINDOW + ============================================ */ +.friends-window { + width: 400px; + height: 450px; +} + +.friends__tabs { + display: flex; + gap: var(--spacing-xs); + margin-bottom: var(--spacing-sm); +} + +.friends__tab { + flex: 1; + padding: var(--spacing-sm); + background: var(--color-surface); + border: 1px solid var(--color-surface); + color: var(--color-text); + cursor: pointer; + font-size: var(--font-size-sm); + transition: all var(--transition-fast); +} + +.friends__tab:hover { + background: var(--color-surface-light); +} + +.friends__tab--active { + background: var(--color-primary); + border-color: var(--color-primary); +} + +.friends__content { + display: flex; + flex-direction: column; + flex: 1; + overflow: hidden; +} + +.friends__search { + display: flex; + gap: var(--spacing-sm); + margin-bottom: var(--spacing-sm); +} + +.friends__search .input { + flex: 1; +} + +.friends__list { + flex: 1; + overflow-y: auto; + display: flex; + flex-direction: column; + gap: var(--spacing-sm); +} + +.friends__item { + display: flex; + align-items: center; + gap: var(--spacing-sm); + padding: var(--spacing-sm); + background: var(--color-surface); + border-radius: var(--radius-md); +} + +.friends__avatar { + width: 40px; + height: 40px; + border-radius: var(--radius-full); + object-fit: cover; + border: 2px solid var(--color-surface-light); +} + +.friends__name { + flex: 1; + font-size: var(--font-size-md); + font-weight: 500; +} + +.friends__actions { + display: flex; + gap: var(--spacing-xs); +} + +.friends__actions .btn { + padding: var(--spacing-xs) var(--spacing-sm); + font-size: var(--font-size-sm); +} + +.friends__empty { + text-align: center; + color: var(--color-text-muted); + padding: var(--spacing-lg); +} + +/* ============================================ + GAME ROOM WINDOW + ============================================ */ + +.gameroom-window { + width: 800px; + height: 900px; +} + +.gameroom__tabs { + display: flex; + gap: var(--spacing-xs); + margin-bottom: var(--spacing-sm); +} + +.gameroom__tab { + flex: 1; + padding: var(--spacing-sm); + background: var(--color-surface); + border: 1px solid var(--color-surface-light); + color: var(--color-text); + cursor: pointer; + font-size: var(--font-size-sm); + transition: all var(--transition-fast); +} + +.gameroom__tab:hover { + background: var(--color-surface-light); +} + +.gameroom__tab--active { + background: var(--color-primary); + border-color: var(--color-primary); +} + +.gameroom__content { + display: flex; + flex-direction: column; + flex: 1; + overflow: hidden; +} + +.gameroom__create { + display: flex; + flex-direction: column; + gap: var(--spacing-sm); + margin-bottom: var(--spacing-sm); +} + +.gameroom__list { + flex: 1; + overflow-y: auto; + display: flex; + flex-direction: column; + gap: var(--spacing-sm); +} + +.gameroom__item { + display: flex; + align-items: center; + gap: var(--spacing-sm); + padding: var(--spacing-sm); + background: var(--color-surface); + border-radius: var(--radius-md); +} + +.gameroom__name { + flex: 1; + font-size: var(--font-size-md); + font-weight: 500; +} + +.gameroom__players { + font-size: var(--font-size-sm); + color: var(--color-text-muted); + padding: var(--spacing-xs) var(--spacing-sm); + background: var(--color-surface-light); + border-radius: var(--radius-sm); +} + +.gameroom__actions { + display: flex; + gap: var(--spacing-xs); +} + +.gameroom__actions .btn { + padding: var(--spacing-xs) var(--spacing-sm); + font-size: var(--font-size-sm); +} + +.gameroom__lobby { + display: flex; + flex-direction: column; + flex: 1; + gap: var(--spacing-sm); +} + +.gameroom__lobby-title { + margin: 0; + font-size: var(--font-size-lg); + text-align: center; + color: var(--color-success); +} + +.gameroom__player-list { + flex: 1; + overflow-y: auto; + display: flex; + flex-direction: column; + gap: var(--spacing-sm); + background: var(--color-surface); + border-radius: var(--radius-md); + padding: var(--spacing-sm); +} + +.gameroom__player { + display: flex; + align-items: center; + gap: var(--spacing-sm); + padding: var(--spacing-xs) var(--spacing-sm); + background: var(--color-surface-light); + border-radius: var(--radius-sm); +} + +.gameroom__player-avatar { + width: 32px; + height: 32px; + border-radius: var(--radius-full); + object-fit: cover; + border: 2px solid var(--color-surface-light); +} + +.gameroom__player-name { + flex: 1; + font-size: var(--font-size-md); +} + +.gameroom__player-stats { + display: flex; + flex-direction: column; + align-items: flex-end; + gap: 2px; +} + +.gameroom__player-score { + font-size: var(--font-size-sm); + color: var(--color-success); + font-weight: 500; +} + +.gameroom__player-total { + font-size: var(--font-size-sm); + color: var(--color-text-muted); +} + +.gameroom__empty { + text-align: center; + color: var(--color-text-muted); + padding: var(--spacing-lg); +} + +/* ============================================ + GAME - JEU DU PENDU/DESSIN + ============================================ */ + +.gameroom__lobby-buttons { + display: flex; + gap: var(--spacing-sm); + margin-top: auto; +} + +.gameroom__lobby-buttons .btn { + flex: 1; +} + +.gameroom__game { + display: flex; + flex-direction: column; + gap: var(--spacing-sm); + flex: 1; +} + +.gameroom__game-info { + text-align: center; +} + +.gameroom__drawer-info { + font-size: var(--font-size-md); + color: var(--color-text-muted); + padding: var(--spacing-xs); +} + +.gameroom__scores-display { + font-size: var(--font-size-sm); + color: var(--color-success); + padding: var(--spacing-xs); + background: var(--color-surface); + border-radius: var(--radius-sm); + margin-top: var(--spacing-xs); +} + +.gameroom__drawer-info--winner { + color: var(--color-success); + font-weight: bold; + animation: pulse 0.5s ease-in-out 3; +} + +@keyframes pulse { + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.05); } +} + +.gameroom__word-display { + font-size: var(--font-size-xl); + font-family: monospace; + text-align: center; + letter-spacing: 8px; + padding: var(--spacing-md); + background: var(--color-surface); + border-radius: var(--radius-md); + min-height: 60px; + display: flex; + align-items: center; + justify-content: center; + color: var(--color-success); +} + +.gameroom__canvas-container { + display: flex; + justify-content: center; +} + +.gameroom__canvas { + background: var(--color-surface-light); + border-radius: var(--radius-md); + cursor: crosshair; + border: 2px solid var(--color-surface-light); +} + +.gameroom__draw-tools { + display: flex; + gap: var(--spacing-sm); + justify-content: center; + align-items: center; +} + +.gameroom__color-picker { + width: 40px; + height: 32px; + border: none; + border-radius: var(--radius-sm); + cursor: pointer; + background: transparent; +} + +.gameroom__word-input-container, +.gameroom__guess-container { + display: flex; + gap: var(--spacing-sm); +} + +.gameroom__word-input-container .input, +.gameroom__guess-container .input { + flex: 1; +} + +.gameroom__guess-container .input:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.gameroom__guess-container .btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.gameroom__guess-history { + flex: 1; + min-height: 60px; + max-height: 100px; + overflow-y: auto; + background: var(--color-surface); + border-radius: var(--radius-md); + padding: var(--spacing-sm); + display: flex; + flex-direction: column; + gap: var(--spacing-xs); +} + +.gameroom__guess-item { + font-size: var(--font-size-sm); + padding: var(--spacing-xs) var(--spacing-sm); + border-radius: var(--radius-sm); +} + +.gameroom__guess-item--success { + background: rgba(60, 255, 1, 0.2); + color: var(--color-success); +} + +.gameroom__guess-item--fail { + background: rgba(255, 77, 77, 0.2); + color: var(--color-error); +} + +.gameroom__game-buttons { + display: flex; + gap: var(--spacing-sm); + margin-top: var(--spacing-sm); +} + +.gameroom__game-buttons .btn { + flex: 1; +} + diff --git a/Transcendence/srcs/frontend/src/game2/game.html b/Transcendence/srcs/frontend/src/game2/game.html new file mode 100644 index 0000000..214d68a --- /dev/null +++ b/Transcendence/srcs/frontend/src/game2/game.html @@ -0,0 +1,43 @@ + + + + + + Lobby + + + + + + + + +

+ L + o + b + b + y +

+ + + + + +
+ +
+ + + + \ No newline at end of file diff --git a/Transcendence/srcs/frontend/src/index.css b/Transcendence/srcs/frontend/src/index.css index fdcce5c..4a4aeb3 100644 --- a/Transcendence/srcs/frontend/src/index.css +++ b/Transcendence/srcs/frontend/src/index.css @@ -1,21 +1,8 @@ -/* ============================================ - TRANSCENDENCE - Main Stylesheet - Convention: BEM (Block__Element--Modifier) - ============================================ */ -/* ============================================ - CSS VARIABLES - ============================================ */ + +/* ///////////////////////////////////////////////////////// */ :root { - --color-primary: #0066cc; - --color-primary-hover: #0052a3; - --color-success: #3cff01; - --color-success-dark: #28a745; - --color-error: #ff4d4d; - --color-warning: #ffc107; - --color-github: #24292e; - - --color-bg: #a3a3a3; + --custom-value: hello; --app-background-base: radial-gradient( circle at top, @@ -24,729 +11,37 @@ ); --app-background-image: url("./assets/background.png"); - - --color-surface: #222; - --color-surface-light: #333; - --color-text: #fff; - --color-text-muted: #aaa; - - --font-size-base: 10px; - --font-size-sm: 1.2rem; - --font-size-md: 1.4rem; - --font-size-lg: 1.6rem; - --font-size-xl: 3rem; - - --spacing-xs: 4px; - --spacing-sm: 8px; - --spacing-md: 12px; - --spacing-lg: 16px; - --spacing-xl: 24px; - - --radius-sm: 4px; - --radius-md: 6px; - --radius-lg: 12px; - --radius-full: 50%; - - --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3); - --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5); - --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5); - - --transition-fast: 150ms ease; - --transition-normal: 250ms ease; - - --z-menu: 2; - --z-window: 100; - --z-modal: 200; + --num-value: 10px; + --black: #000000; } -/* ============================================ - RESET & BASE - ============================================ */ -*, -*::before, -*::after { - box-sizing: border-box; -} +/* ///////////////////////////////////////////////////////// */ +*, *::before, *::after { -html { - height: 100%; - background-image: - var(--app-background-image), - var(--app-background-base); - background-size: - contain, - cover; - - background-position: - center, - center; - - background-repeat: - no-repeat, - no-repeat; } body { - margin: 0; - width: 70%; - min-width: 800px; - margin: 0 auto; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; - color: var(--color-text); - line-height: 1.5; -} - -/* ============================================ - TYPOGRAPHY - ============================================ */ - -.title { - position: absolute; - top: 20px; - left: 50%; - transform: translateX(-50%); - text-transform: uppercase; - - display: flex; - align-items: center; - justify-content: center; - gap: 20px; - - font-size: var(--font-size-xl); - text-align: center; - text-shadow: 2px 2px 10px black; - z-index: 1; - font-family: "Cinzel Decorative", cursive; - color: rgba(248, 252, 2, 0.6); - - margin: 0; - padding: var(--spacing-md); - - /* Rectangle + rounded corners */ - background-color: rgba(247, 7, 67, 0.6); - border: 2px solid rgba(0, 0, 0, 0.6); - border-radius: 15px; -} - - -/* ============================================ - MENU - ============================================ */ - -.menu { - position: fixed; - top: 0; - left: 50px; - padding: 0; - margin: 0; - z-index: var(--z-menu); - display: flex; - flex-direction: column; - gap: var(--spacing-xs); -} - -.menu__item { - background: var(--color-surface); - color: var(--color-text); - border: 1px solid var(--color-surface-light); - padding: var(--spacing-sm) var(--spacing-md); - font-size: var(--font-size-md); - cursor: pointer; - transition: all var(--transition-fast); - text-align: left; -} - -.menu__item:hover { - background: var(--color-surface-light); - font-size: var(--font-size-lg); -} - -.menu__item--active { - background: var(--color-primary); - border-color: var(--color-primary); -} - -/* ============================================ - GAME - ============================================ */ - -.game { - position: fixed; - top: 0; - right: 50px; - padding: 0; - margin: 0; - z-index: var(--z-menu); - display: flex; - flex-direction: column; - gap: var(--spacing-xs); -} - -.game__item { - background: var(--color-surface); - color: var(--color-text); - border: 1px solid var(--color-surface-light); - padding: var(--spacing-sm) var(--spacing-md); - font-size: var(--font-size-md); - cursor: pointer; - transition: all var(--transition-fast); - text-align: right; -} - -.game__item:hover { - background: var(--color-surface-light); - font-size: var(--font-size-lg); -} - -.game__item--active { - background: var(--color-primary); - border-color: var(--color-primary); -} - -/* ============================================ - BUTTONS - ============================================ */ -.btn { - display: inline-flex; - align-items: center; - justify-content: center; - padding: var(--spacing-sm) var(--spacing-md); - font-size: var(--font-size-md); - font-weight: 500; - border: none; - border-radius: var(--radius-md); - cursor: pointer; - transition: all var(--transition-fast); - text-decoration: none; -} - -.btn:hover { - opacity: 0.9; - transform: translateY(-1px); -} - -.btn:active { - transform: translateY(0); -} - -.btn--primary { - background: var(--color-primary); - color: var(--color-text); -} - -.btn--primary:hover { - background: var(--color-primary-hover); -} - -.btn--secondary { - background: var(--color-surface-light); - color: var(--color-text); -} - -.btn--success { - background: var(--color-success-dark); - color: var(--color-text); -} - -.btn--danger { - background: var(--color-error); - color: var(--color-text); -} - -.btn--github { - background: var(--color-github); - color: var(--color-text); -} - -.btn--ghost { - background: transparent; - color: var(--color-text); - border: 1px solid var(--color-surface-light); -} - -/* ============================================ - INPUTS - ============================================ */ -.input { - width: 100%; - padding: var(--spacing-sm) var(--spacing-md); - font-size: var(--font-size-md); - background: var(--color-surface); - color: var(--color-text); - border: 1px solid var(--color-surface-light); - border-radius: var(--radius-md); - transition: border-color var(--transition-fast); -} - -.input:focus { - outline: none; - border-color: var(--color-primary); -} - -.input::placeholder { - color: var(--color-text-muted); -} - -.input-group { - display: flex; - flex-direction: column; - gap: var(--spacing-sm); -} - -/* ============================================ - WINDOWS - ============================================ */ -.window { - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background: var(--color-bg); - border: 2px ridge var(--color-text); - color: var(--color-text); - z-index: var(--z-window); - display: none; - flex-direction: column; - min-width: 280px; - box-shadow: var(--shadow-lg); -} - -.window--visible { - display: flex; -} - -.window--left { - left: 25%; -} - -.window--right { - left: 75%; -} - -.window__header { - display: flex; - justify-content: space-between; - align-items: center; - padding: var(--spacing-sm) var(--spacing-md); - background: var(--color-surface); - cursor: move; - user-select: none; -} - -.window__title { - font-weight: 500; - font-size: var(--font-size-md); -} - -.window__close { - cursor: pointer; - font-size: var(--font-size-lg); - opacity: 0.8; - transition: opacity var(--transition-fast); - background: none; - border: none; - color: var(--color-text); - padding: 0; - line-height: 1; -} - -.window__close:hover { - opacity: 1; -} - -.window__body { - padding: var(--spacing-md); - display: flex; - flex-direction: column; - gap: var(--spacing-sm); - flex: 1; - overflow: auto; -} - -/* ============================================ - MESSAGES - ============================================ */ -.message { - font-size: var(--font-size-sm); - padding: var(--spacing-xs); - border-radius: var(--radius-sm); -} - -.message--success { - color: var(--color-success); -} - -.message--error { - color: var(--color-error); -} - -.message--info { - color: var(--color-text-muted); -} - -/* ============================================ - LOGIN WINDOW - ============================================ */ -.login { - width: 320px; -} - -.login__form { - display: flex; - flex-direction: column; - gap: var(--spacing-sm); -} - -.login__actions { - display: flex; - gap: var(--spacing-sm); - margin-top: var(--spacing-xs); -} - -.login__divider { - display: flex; - align-items: center; - gap: var(--spacing-sm); - color: var(--color-text-muted); - font-size: var(--font-size-sm); - margin: var(--spacing-sm) 0; -} - -.login__divider::before, -.login__divider::after { - content: ''; - flex: 1; - height: 1px; - background: var(--color-surface-light); -} - -/* ============================================ - CHAT WINDOW - ============================================ */ -.chat { - width: 380px; - height: 400px; -} - -.chat__output { - flex: 1; - overflow-y: auto; - padding: var(--spacing-sm); - background: var(--color-surface); - border-radius: var(--radius-md); - display: flex; - flex-direction: column; - gap: var(--spacing-sm); - min-height: 150px; -} - -.chat__message { - padding: var(--spacing-xs) var(--spacing-sm); - background: var(--color-surface-light); - border-radius: var(--radius-sm); - font-size: var(--font-size-sm); -} - -.chat__message--own { - background: var(--color-primary); - align-self: flex-end; -} - -.chat__friend-indicator { - display: inline-block; - width: 8px; - height: 8px; - background-color: var(--color-success); - border-radius: 50%; - margin-right: var(--spacing-xs); - vertical-align: middle; -} - -.chat__system { - color: var(--color-text-muted); - font-size: var(--font-size-sm); - font-style: italic; - text-align: center; -} - -.chat__system--error { - color: var(--color-error); -} - -.chat__system--success { - color: var(--color-success); -} - -.chat__input-container { - display: flex; - gap: var(--spacing-sm); - margin-top: var(--spacing-sm); -} - -.chat__input { - flex: 1; -} - -.chat__controls { - display: flex; - gap: var(--spacing-sm); - margin-top: var(--spacing-sm); -} - -/* ============================================ - AVATAR WINDOW - ============================================ */ -.avatar-window { - width: 360px; -} -.avatar__preview { - width: 120px; - height: 120px; - object-fit: cover; - border-radius: var(--radius-full); - border: 3px solid var(--color-text); - box-shadow: var(--shadow-md); - background: var(--color-surface); - align-self: center; -} - -.avatar__username { - font-size: var(--font-size-lg); - font-weight: 600; - text-align: center; - color: var(--color-text); - margin-top: var(--spacing-sm); -} - -.avatar__controls { - display: flex; - flex-direction: column; - gap: var(--spacing-sm); - align-items: center; -} - -.avatar__file-input { - display: none; -} - -/* ============================================ - STATS WINDOW - ============================================ */ -.stats-window { - width: 320px; -} - -.stats__avatar { - width: 72px; - height: 72px; - object-fit: cover; - border-radius: var(--radius-full); - border: 2px solid var(--color-text); - align-self: center; - display: block; - margin: 0 auto var(--spacing-xs); -} - -.stats__username { - font-size: var(--font-size-lg); - font-weight: 600; - text-align: center; - color: #000; - margin-bottom: var(--spacing-md); -} - -.stats__section { - margin-bottom: var(--spacing-md); -} - -.stats__section-title { - font-size: var(--font-size-sm); - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.08em; - color: var(--color-primary); - border-bottom: 1px solid var(--color-surface-light); - padding-bottom: var(--spacing-xs); - margin-bottom: var(--spacing-xs); -} - -.stats__section-body { - display: flex; - flex-direction: column; - gap: 4px; -} - -.stats__row { - display: flex; - justify-content: space-between; - font-size: var(--font-size-sm); - padding: 3px 0; -} - -.stats__label { - color: #333; -} - -.stats__value { - font-weight: 600; - color: #000; -} - -.stats__loading { - font-size: var(--font-size-sm); - color: #333; - text-align: center; - padding: var(--spacing-sm) 0; -} - -/* ============================================ - EASTER EGG BUTTON - ============================================ */ -/* .easter-egg { - position: absolute; - top: 20%; - left: 50%; - transform: translateX(-50%); - z-index: 1; - background: var(--color-surface); - color: var(--color-text); - border: 1px solid var(--color-surface-light); - padding: var(--spacing-sm) var(--spacing-md); - cursor: pointer; - font-size: var(--font-size-md); - border-radius: var(--radius-md); - transition: all var(--transition-fast); -} - -.easter-egg:hover { - background: var(--color-error); - border-color: var(--color-error); -} */ - -/* ============================================ - UTILITIES - ============================================ */ -.hidden { - display: none !important; -} - -.visually-hidden { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - border: 0; -} - -.text-center { - text-align: center; -} - -.flex-center { - display: flex; - align-items: center; - justify-content: center; -} - -/* ============================================ - FRIENDS WINDOW - ============================================ */ -.friends-window { - width: 400px; - height: 450px; -} - -.friends__tabs { - display: flex; - gap: var(--spacing-xs); - margin-bottom: var(--spacing-sm); -} - -.friends__tab { - flex: 1; - padding: var(--spacing-sm); - background: var(--color-surface); - border: 1px solid var(--color-surface-light); - color: var(--color-text); - cursor: pointer; - font-size: var(--font-size-sm); - transition: all var(--transition-fast); -} - -.friends__tab:hover { - background: var(--color-surface-light); -} - -.friends__tab--active { - background: var(--color-primary); - border-color: var(--color-primary); -} - -.friends__content { - display: flex; - flex-direction: column; - flex: 1; - overflow: hidden; -} - -.friends__search { - display: flex; - gap: var(--spacing-sm); - margin-bottom: var(--spacing-sm); -} - -.friends__search .input { - flex: 1; -} - -.friends__list { - flex: 1; - overflow-y: auto; - display: flex; - flex-direction: column; - gap: var(--spacing-sm); -} - -.friends__item { - display: flex; - align-items: center; - gap: var(--spacing-sm); - padding: var(--spacing-sm); - background: var(--color-surface); - border-radius: var(--radius-md); -} - -.friends__avatar { - width: 40px; - height: 40px; - border-radius: var(--radius-full); - object-fit: cover; - border: 2px solid var(--color-surface-light); -} - -.friends__name { - flex: 1; - font-size: var(--font-size-md); - font-weight: 500; -} - -.friends__actions { - display: flex; - gap: var(--spacing-xs); -} - -.friends__actions .btn { - padding: var(--spacing-xs) var(--spacing-sm); - font-size: var(--font-size-sm); -} - -.friends__empty { - text-align: center; - color: var(--color-text-muted); - padding: var(--spacing-lg); -} + line-height: 1.6; /* inherited */ + word-spacing: 1.4px; /* inherited */ + font-size: 100px; + font-family: "Roboto", sans-serif; /* inherited */ + color: var(--black); /* inherited */ + + + margin: 0; + padding: 0; + background-color: var(--black); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +/* ///////////////////////////////////////////////////////// */ + +.button { + color: red; + margin: 5px 50px; + padding: 5px 50px; +} \ No newline at end of file diff --git a/Transcendence/srcs/frontend/src/index.html b/Transcendence/srcs/frontend/src/index.html index 9bea02c..50a05b9 100644 --- a/Transcendence/srcs/frontend/src/index.html +++ b/Transcendence/srcs/frontend/src/index.html @@ -1,24 +1,13 @@ - + -
- play -
title
- login +
- -
- play -
title
- login -
- -
\ No newline at end of file diff --git a/Transcendence/srcs/frontend/src/index.js b/Transcendence/srcs/frontend/src/index.js index ce66c61..93fcdc4 100644 --- a/Transcendence/srcs/frontend/src/index.js +++ b/Transcendence/srcs/frontend/src/index.js @@ -1,43 +1,68 @@ -let a = document.createElement('div'); -document.body.append(a); +// header creation +let h = document.getElementById('top-header') +// document.body.append(h) +Object.assign(h.style, { + display: "flex", + justifyContent: "space-between", + alignItems: "center" +}); -a.textContent = "abc"; -a.style.color = "red"; -a.style.border = "2px solid black"; -a.style.margin = "10px 20px 30px 40px"; -a.style.backgroundColor = "green"; +// top left button +let el = document.createElement('button') +h.append(el) +el.textContent = 'test'; +Object.assign(el.style, { + fontSize: '50px' +}) +el.classList.add('button') -import { Popup } from './webcat/popup.js'; +// middle title +let title = document.createElement('span') +h.append(title) +title.textContent = 'title' -for (let i = 0; i <= 50; i++) { - - let b = document.createElement('span'); - Object.assign(b, { - - }); - b.classList.add("box"); - a.append(b); - - // b.style.color = "blue"; - b.textContent = "hallow-" + i; -} - -let b = document.getElementById('button-login'); -b.style.display = "flex"; +// right button +let b = document.createElement('button') +h.append(b) +b.textContent = 'login' +Object.assign(b.style, { + fontSize: '50px' +}) +b.classList.add('button') -let c = new Popup("MOUHAHAH"); -document.body.appendChild(c.obj); +let div2 = document.createElement('div') +document.body.append(div2) +let button1 = document.createElement('button') +div2.append(button1) +button1.textContent = 'game-lobby' +button1.addEventListener('click', () => { + window.location.href = './game2/game.html'; +}) +let button2 = document.createElement('button') +div2.append(button2) +button2.textContent = 'tetris' +button2.addEventListener('click', () => { + window.location.href = './tetris/tetris.html'; +}) +let button3 = document.createElement('button') +div2.append(button3) +button3.textContent = 'transcendance' +button3.addEventListener('click', () => { + window.location.href = './trans/index2.html'; +}) +let button4 = document.createElement('button') +div2.append(button4) +button4.textContent = 'test' +button4.addEventListener('click', () => { + window.location.href = './test/index.html'; +}) -import {Header} from './webcat/header.js'; -let h = new Header; -document.body.append(h.obj); -// import {LoginWindow} from './windows/login.js'; -// import {LogoutWindow} from './windows/logout.js'; -// let l = new LoginWindow; -// document.body.append(l); -// l = new LogoutWindow; -// document.body.append(l); \ No newline at end of file + +// +let wiskas = document.createElement('img') +wiskas.src = './webcat/web_cat_img/wiskas-the-third.jpg' +document.body.append(wiskas) \ No newline at end of file diff --git a/Transcendence/srcs/frontend/src/notes.css b/Transcendence/srcs/frontend/src/notes.css new file mode 100644 index 0000000..75f9b20 --- /dev/null +++ b/Transcendence/srcs/frontend/src/notes.css @@ -0,0 +1,188 @@ +.test {/* ======================= + 🎨 COLORS & BACKGROUND + ======================= */ + color: red; + background-color: blue; + background-image: url(img.jpg); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + opacity: 0.5; + + /* ======================= + 📏 SIZE & SPACING + ======================= */ + width: 200px; + height: 100px; + min-width: 100px; + max-width: 500px; + padding: 10px; + margin: 20px; + box-sizing: border-box; + + /* shorthand */ + margin: 10px 20px; /* top/bottom left/right */ + padding: 10px 20px 5px 0; /* top right bottom left */ + + /* ======================= + 📍 POSITIONING + ======================= */ + position: static; + position: relative; + position: absolute; + position: fixed; + position: sticky; + + top: 10px; + left: 20px; + right: 0; + bottom: 0; + + z-index: 10; + + /* ======================= + 📦 DISPLAY & LAYOUT + ======================= */ + display: block; + display: inline; + display: inline-block; + display: none; + display: flex; /* children can be controled with: justify-content (horizontal) / align-items (vertical) */ + display: grid; + + /* ======================= + 🔧 FLEXBOX + ======================= */ + display: flex; + flex-direction: row; /* row | column */ + justify-content: center; /* main axis */ + align-items: center; /* cross axis */ + gap: 10px; + + /* common */ + justify-content: space-between; + justify-content: space-around; + justify-content: space-evenly; + + /* ======================= + 🧱 GRID + ======================= */ + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: auto; + gap: 10px; + + /* ======================= + 🔤 TEXT & FONT + ======================= */ + font-size: 16px; + font-weight: bold; + font-family: Arial, sans-serif; + + text-align: center; + text-decoration: underline; + text-transform: uppercase; + + line-height: 1.5; + letter-spacing: 2px; + + /* ======================= + 🟦 BORDER & OUTLINE + ======================= */ + border: 1px solid black; + border-width: 2px; + border-style: dashed; + border-color: red; + + border-radius: 10px; + + outline: 2px solid blue; + + /* ======================= + 👁️ VISIBILITY + ======================= */ + display: none; + visibility: hidden; + + overflow: hidden; + overflow: scroll; + overflow: auto; + + /* ======================= + 🎬 TRANSITIONS & EFFECTS + ======================= */ + transition: all 0.3s ease; + + transform: translateX(50px); + transform: rotate(45deg); + transform: scale(1.1); +} + +/* hover example */ +:hover { +transform: scale(1.1); +} +/* ======================= + 🧠 SELECTORS +======================= */ + +/* basic */ +div {} /* tag */ +.class {} /* class */ +#id {} /* id */ +* {} /* all elements */ + +/* grouping */ +div, p, span {} /* multiple selectors */ + +/* combinators */ +div p {} /* any descendant */ +div > p {} /* direct child */ +div + p {} /* next sibling */ +div ~ p {} /* all following siblings */ + +/* attribute selectors */ +input[type="text"] {} +a[href] {} +button[class*="btn"] {} /* contains */ +button[class^="btn"] {} /* starts with */ +button[class$="btn"] {} /* ends with */ + +/* pseudo-classes (state) */ +button:hover {} +input:focus {} +a:active {} +a:visited {} +input:checked {} +:nth-child(2) {} +:nth-child(odd) {} +:nth-child(even) {} +:not(.active) {} + +/* pseudo-elements (virtual parts) */ +::before {} +::after {} +::placeholder {} +::first-letter {} +::first-line {} + +/* combined examples */ +button.primary:hover {} +div#main.content {} +ul li:first-child {} +input:focus::placeholder {} + +/* universal + pseudo */ +*::before {} +*::after {} + +/* ======================= +⚡ SHORTHANDS +======================= */ +.test2 { + background: red url(img.jpg) no-repeat center/cover; + border: 2px solid black; + font: bold 16px Arial; + margin: 10px 20px; + padding: 5px 10px; +} diff --git a/Transcendence/srcs/frontend/src/notes.js b/Transcendence/srcs/frontend/src/notes.js index 8a9a6f8..1866aed 100644 --- a/Transcendence/srcs/frontend/src/notes.js +++ b/Transcendence/srcs/frontend/src/notes.js @@ -4,6 +4,14 @@ box.style.height = "100px"; box.style.minWidth = "100px"; box.style.maxWidth = "500px"; +{ + display: "flex" // flex | inline-flex | block | inline | none + justifyContent: "flex-start" // flex-start | flex-end | center | space-between | space-around | space-evenly + alignItems: "stretch" // stretch | flex-start | flex-end | center | baseline +} + + + // POSITION box.style.position = "absolute"; box.style.top = "50px"; diff --git a/Transcendence/srcs/frontend/src/style.css b/Transcendence/srcs/frontend/src/style.css deleted file mode 100644 index 0999f3f..0000000 --- a/Transcendence/srcs/frontend/src/style.css +++ /dev/null @@ -1,43 +0,0 @@ -.inherit { - border: 5px solid black; - - -} - -.header { - display: flex; /* enable flex layout */ - align-items: center; /* vertically center items */ -} - -#title { - flex: 1; /* take all available space */ - text-align: center; /* optional: center text inside the div */ -} - -#button-login { - /* stays on the right automatically */ -} - -.popup { - position: fixed; /* stays in same place even on scroll */ - top: 20px; /* distance from top of viewport */ - right: 20px; /* distance from right edge */ - background-color: #222; /* dark background */ - color: #ff0202; /* text color */ - padding: 10px 20px; /* inner spacing */ - border-radius: 8px; /* rounded corners */ - box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* soft shadow */ - z-index: 9999; /* always on top */ - font-family: sans-serif; - font-size: 14px; - pointer-events: auto; /* clickable if needed */ -} - -.box { - display: inline-block; - color: #558f9f; - background-color: #910a25; - border: 5px solid black; - padding: 5px 7px 9px 11px; - margin: 1px 1px 1px 0px; -} \ No newline at end of file diff --git a/Transcendence/srcs/frontend/src/test/a.js b/Transcendence/srcs/frontend/src/test/a.js new file mode 100644 index 0000000..bb65bad --- /dev/null +++ b/Transcendence/srcs/frontend/src/test/a.js @@ -0,0 +1,55 @@ +import fetch from 'node-fetch'; +import express, { response } from 'express'; +import cors from 'cors'; + +const app = express(); +const PORT = 3000//process.env.PORT || 3000; + +app.use(express.json()); +app.use(cors()); + +let token; +async function set_token() +{ + fetch("https://api.intra.42.fr/oauth/token", { + method: "POST", + body: "grant_type=client_credentials&client_id=u-s4t2ud-c226cd35cd1ac08a4c6668deee1c64d7d67a13a766aee672acafd4a1522d483c&client_secret=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", + headers: { + "User-Agent": "agallon", + 'Content-Type': 'application/x-www-form-urlencoded',} + }) + .then(response => { + return response.json(); + }) + .then(data => { + token = data; + setTimeout(set_token, token.expires_in); + }) + .catch(error => { + console.error('Error fetching token:', error); + }); +} +set_token(); + +app.get('/proxy/profile/:login', async (req, res) => { + const { login } = req.params; + const profileURL = `https://api.intra.42.fr/v2/users/${login}`; + try { + const response = await fetch(profileURL, { + headers: { + "Authorization": `Bearer ${token.access_token}`}}); + console.log(`response.status = ${response.status}`); + if (response.status !== 200) { + throw new Error('User not found'); + } + const data = await response.json(); + res.status(200).json(data); + } catch (error) { + console.error('Error fetching profile:', error); + res.status(500).json({ error: 'Failed to fetch profile' }); + } +}); + +app.listen(PORT, () => { + console.log(`Proxy server running on port ${PORT}`); +}); \ No newline at end of file diff --git a/Transcendence/srcs/frontend/src/test/index.html b/Transcendence/srcs/frontend/src/test/index.html new file mode 100644 index 0000000..e73372a --- /dev/null +++ b/Transcendence/srcs/frontend/src/test/index.html @@ -0,0 +1,14 @@ + + + + + + + + + \ No newline at end of file diff --git a/Transcendence/srcs/frontend/src/test/index.js b/Transcendence/srcs/frontend/src/test/index.js new file mode 100644 index 0000000..a2cf621 --- /dev/null +++ b/Transcendence/srcs/frontend/src/test/index.js @@ -0,0 +1,17 @@ +// import { LoginSidebar } from "./loginSidebar.js"; +import { Sidebar } from "./sidebar.js"; +import { updateElement } from "./tools.js"; + +let b = updateElement({ + classList: ['container2'], + additionalStyles: { + display: 'flex', + justifyContent: 'flex-end', + alignItems: 'center' + } +}); +new Sidebar(b); +// new LoginSidebar(); + + +// new Sidebar(); diff --git a/Transcendence/srcs/frontend/src/test/sidebar.js b/Transcendence/srcs/frontend/src/test/sidebar.js new file mode 100644 index 0000000..bdfc57f --- /dev/null +++ b/Transcendence/srcs/frontend/src/test/sidebar.js @@ -0,0 +1,71 @@ +import { updateElement } from "./tools.js"; + +export class Sidebar { + + constructor(parent = document.body) { + this.parent = parent; + this.stateopen = 'closed'; + // this.state = this.checkIfLoggedIn() ? "loggedOut" : "loggedIn"; + + this.obj = updateElement({ + parent: parent + }) + this.createAllButtons(); + // this.render(this.state, this.stateopen); + } + + checkIfLoggedIn() { + return true; + } + + render(stateopen) { + this.obj.textContent = ''; + if (this.stateopen === 'open') { + // Show the menu buttons + this.menu_buttons.forEach(btn => this.obj.appendChild(btn)); + } else { + // Show only main login button + this.obj.appendChild(this.main_button); + } + } + + toggle() { + + this.stateopen = (this.stateopen === 'open') ? 'closed' : 'open'; + console.log(this.stateopen) + this.render(this.stateopen); + } + + handleClickOutside = (event) => { + if (this.stateopen === 'open' && !this.obj.contains(event.target)) { + this.toggle(); // close the menu + } + } + + createAllButtons() { + this.main_button = updateElement({ + parent: this.obj, + textContent: 'button', + classList: [ 'loggin-button' ], + }) + this.main_button.addEventListener('click', () => { + this.toggle(); + }) + + + const items = ['friends', 'chat', 'rooms', 'settings', 'logout']; + this.menu_buttons = []; + + items.forEach(name => { + this[name] = updateElement({ + id: `button-${name}`, + parent: this.obj, + textContent: name, + classList: ['item'], + additionalStyles: { display: 'none'} + }) + this.menu_buttons.push(this[name]); + }) + } + +} \ No newline at end of file diff --git a/Transcendence/srcs/frontend/src/test/style.css b/Transcendence/srcs/frontend/src/test/style.css new file mode 100644 index 0000000..7f1b742 --- /dev/null +++ b/Transcendence/srcs/frontend/src/test/style.css @@ -0,0 +1,116 @@ +/* BASE STYLES */ +:root { + --clr-dark: #0f172a; + --clr-light: #f1f5f9; + --clr-accent: #e11d48; +} + +*, +*::before, +*::after { + box-sizing: border-box; +} + +body { + margin: 0; + padding: 0; + line-height: 1.6; /* inherited */ + word-spacing: 1.4px; /* inherited */ + font-family: "Roboto", sans-serif; /* inherited */ + color: var(--clr-dark); /* inherited */ + background-color: var(--clr-light); + /* display: flex; */ + /* justify-content: center; */ + /* align-items: center; */ + height: 100vh; +} + +.container { + width: 80%; + height: 700px; + margin: 0 auto; + border: 10px solid var(--clr-dark); +} + +.item { + width: 150px; + height: 150px; + background-color: #fb7185; + padding: 1em; + font-weight: 700; + color: var(--clr-light); + text-align: center; + border: 10px solid var(--clr-accent); + border-radius: 10px; + + margin-left: -50px +} + +/* END OF BASE STYLES */ +.item-1 { + font-size: 1.5rem; +} +.container { + display: flex; +} + + +.container2 { + margin: 0 auto; + border: 10px solid var(--clr-dark); +} +/*//////////////////////////////////////////////////////////*/ + + +.button { + padding: 10px 18px; + font-size: 14px; + font-family: inherit; + + color: white; + background-color: #3b82f6; /* blue */ + + border: none; + border-radius: 8px; + + cursor: pointer; + + transition: all 0.2s ease; +} +.button:hover { + background-color: #2563eb; + transform: translateY(-1px); +} +.button:active { + transform: translateY(1px); + background-color: #1d4ed8; +} +.button:focus { + outline: none; + box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4); +} + +/*//////////////////////////////////////////////////////////*/ +.side-bar { + display: flex; + flex-direction: column; + gap: 7px; + + background-color: #3b82f6; /* blue */ + + padding-right: 75px; + padding-bottom: 25px; + padding-top: 25px; + position: fixed; + top: 0; + right: 0; +} + +.loggin-button { + position: relative; + display: inline-block; + border: 5px solid blue; + height: 35px; + min-width: 50px; + +} \ No newline at end of file diff --git a/Transcendence/srcs/frontend/src/test/tools.js b/Transcendence/srcs/frontend/src/test/tools.js new file mode 100644 index 0000000..6ac4762 --- /dev/null +++ b/Transcendence/srcs/frontend/src/test/tools.js @@ -0,0 +1,29 @@ + +export function updateElement({ + el, // existing element or null to create new + parent = document.body, + id = null, + classList = [], // object like { css - classes to add } + textContent = "", + additionalStyles = {} // object like { color: 'red', display: 'flex' } +} = {}) { + // If no element passed, create a div by default + if (!el) { + el = document.createElement('div'); + parent.appendChild(el); + } + + // Set ID if provided + if (id) el.id = id; + + // Manage classes + classList.forEach(cls => el.classList.add(cls)); + + // Set text content + if (textContent !== undefined) el.textContent = textContent; + + // Apply additional styles + Object.assign(el.style, additionalStyles); + + return el; // return element for further use +} \ No newline at end of file diff --git a/Transcendence/srcs/frontend/src/tetris/tetris.html b/Transcendence/srcs/frontend/src/tetris/tetris.html index 45ca2c5..a4c8368 100644 --- a/Transcendence/srcs/frontend/src/tetris/tetris.html +++ b/Transcendence/srcs/frontend/src/tetris/tetris.html @@ -4,7 +4,7 @@ TETRIS - + diff --git a/Transcendence/srcs/frontend/src/app.js b/Transcendence/srcs/frontend/src/trans/app.js similarity index 64% rename from Transcendence/srcs/frontend/src/app.js rename to Transcendence/srcs/frontend/src/trans/app.js index 58adf1f..7a73d79 100644 --- a/Transcendence/srcs/frontend/src/app.js +++ b/Transcendence/srcs/frontend/src/trans/app.js @@ -2,14 +2,14 @@ * Application entry point * Initializes windows and handles menu interactions */ -import { windowRegistry } from './core/windows.js'; -import { LoginWindow } from './windows/login.js'; -import { LogoutWindow } from './windows/logout.js'; -import { GlobalChat } from './windows/global_chat.js'; -import { AvatarWindow } from './windows/avatar.js'; -import { FriendsWindow } from './windows/friends.js'; -import { GameRoomWindow } from './windows/game_room.js'; -import { StatsWindow } from './windows/stats.js'; +import { windowRegistry } from '../core/windows.js'; +import { LoginWindow } from '../windows/login.js'; +import { LogoutWindow } from '../windows/logout.js'; +import { GlobalChat } from '../windows/global_chat.js'; +import { AvatarWindow } from '../windows/avatar.js'; +import { FriendsWindow } from '../windows/friends.js'; +import { GameRoomWindow } from '../windows/game_room.js'; +import { StatsWindow } from '../windows/stats.js'; /** * Main application class @@ -21,6 +21,7 @@ class App { this.initMenu(); this.initPage(); this.initEasterEgg(); + this.colorizeUI(); } /** @@ -108,6 +109,39 @@ class App { }); } } + + colorizeUI() { + + const elements = document.querySelectorAll(".title, .menu__item, .game__item, .page__item"); + + const colorizeText = (el) => { + const text = el.textContent; + el.innerHTML = ""; + + const baseHue = Math.random() * 360; + + // 🎲 random step = makes rainbow "scrambled" + const step = (Math.random() * 60) + 10; // 10 → 70 + + // 🎲 random direction (left or right rainbow) + const direction = Math.random() < 0.5 ? 1 : -1; + + [...text].forEach((char, i) => { + const span = document.createElement("span"); + span.textContent = char; + + const hue = baseHue + (i * step * direction); + + span.style.color = `hsl(${hue}, 90%, 60%)`; + + span.style.textShadow = `1px 1px 0 rgba(0,0,0,0.3)`; + + el.appendChild(span); + }); + }; + elements.forEach(colorizeText); + } + } // Start the application when DOM is ready diff --git a/Transcendence/srcs/frontend/src/trans/index.css b/Transcendence/srcs/frontend/src/trans/index.css new file mode 100644 index 0000000..780db79 --- /dev/null +++ b/Transcendence/srcs/frontend/src/trans/index.css @@ -0,0 +1,771 @@ +/* ============================================ + TRANSCENDENCE - Main Stylesheet + Convention: BEM (Block__Element--Modifier) + ============================================ */ + +/* ============================================ + CSS VARIABLES + ============================================ */ +:root { + --color-primary: #ffc75e; + --color-primary-hover: #ffc75e; + --color-success: #3cff01; + --color-success-dark: #ffc75e; + --color-error: #ff4d4d; + --color-warning: #ffc75e; + --color-github: #ffc75e; + + --color-bg: #ffe5b5; + + --app-background-base: radial-gradient( + circle at top, + #fff787, + #ff8080 + ); + + --app-background-image: url("../assets/background.png"); + + --color-surface: #ffefce; + --color-surface-light: #ffc75e; + --color-text: #000000; + --color-text-muted: #000000; + + --font-size-base: 10px; + --font-size-sm: 1.2rem; + --font-size-md: 1.4rem; + --font-size-lg: 1.6rem; + --font-size-xl: 3rem; + + --spacing-xs: 4px; + --spacing-sm: 8px; + --spacing-md: 12px; + --spacing-lg: 16px; + --spacing-xl: 24px; + + --radius-sm: 4px; + --radius-md: 6px; + --radius-lg: 12px; + --radius-full: 50%; + + --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3); + --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5); + --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5); + + --transition-fast: 150ms ease; + --transition-normal: 250ms ease; + + --z-menu: 2; + --z-window: 100; + --z-modal: 200; +} + +/* ============================================ + RESET & BASE + ============================================ */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +html { + height: 100%; + background-image: + var(--app-background-image), + var(--app-background-base); + + background-size: + contain, + cover; + + background-position: + center, + center; + + background-repeat: + no-repeat, + no-repeat; +} + +body { + margin: 0; + width: 70%; + min-width: 800px; + margin: 0 auto; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + color: var(--color-text); + line-height: 1.5; +} + +/* ============================================ + TYPOGRAPHY + ============================================ */ + +.title { + position: absolute; + top: 20px; + left: 50%; + transform: translateX(-50%); + text-transform: uppercase; + + display: flex; + align-items: center; + justify-content: center; + gap: 20px; + + font-size: var(--font-size-xl); + text-align: center; + text-shadow: 2px 2px 10px black; + z-index: 1; + font-family: "Roboto"; + letter-spacing: -10px; + color: rgba(248, 252, 2, 0.6); + + margin: 0; + padding: 0.6rem 1.2rem; + + background-color: #ffefce; + border: 2px solid rgba(0, 0, 0, 0.6); + border-radius: var(--radius-lg); +} + + +/* ============================================ + MENU + ============================================ */ + +.menu { + position: fixed; + top: var(--spacing-lg); + left: 50px; + + display: flex; + flex-direction: column; + gap: var(--spacing-lg); + + z-index: var(--z-menu); +} + +.menu__item { + background: var(--color-surface); + color: var(--color-text); + border: 1px solid var(--color-surface-light); + border-radius: var(--radius-lg); + border-color: #000; + padding: var(--spacing-sm) var(--spacing-md); + font-size: var(--font-size-md); + cursor: pointer; + transition: all var(--transition-fast); + text-align: center; +} + +.menu__item:hover { + background: var(--color-surface-light); + font-size: var(--font-size-lg); +} + +.menu__item--active { + background: var(--color-primary); + border-color: var(--color-primary); +} + +/* ============================================ + GAME + ============================================ */ + +/* .game { + position: fixed; + top: 0; + right: 50px; + padding: 0; + margin: 0; + z-index: var(--z-menu); + display: flex; + flex-direction: column; + gap: var(--spacing-xs); +} */ + +.game { + position: fixed; + top: var(--spacing-lg); + right: 50px; + + display: flex; + flex-direction: column; + gap: var(--spacing-lg); + + z-index: var(--z-menu); +} + +.game__item { + background: var(--color-surface); + color: var(--color-text); + border: 1px solid var(--color-surface-light); + border-radius: var(--radius-lg); + border-color: #000; + padding: var(--spacing-sm) var(--spacing-md); + font-size: var(--font-size-md); + cursor: pointer; + transition: all var(--transition-fast); + text-align: center; +} + +.game__item:hover { + background: var(--color-surface-light); + font-size: var(--font-size-lg); +} + +.game__item--active { + background: var(--color-primary); + border-color: var(--color-primary); +} + +/* ============================================ + BUTTONS + ============================================ */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: var(--spacing-sm) var(--spacing-md); + font-size: var(--font-size-md); + font-weight: 500; + border: none; + border-radius: var(--radius-md); + cursor: pointer; + transition: all var(--transition-fast); + text-decoration: none; +} + +.btn:hover { + opacity: 0.9; + transform: translateY(-1px); +} + +.btn:active { + transform: translateY(0); +} + +.btn--primary { + background: var(--color-primary); + color: var(--color-text); +} + +.btn--primary:hover { + background: var(--color-primary-hover); +} + +.btn--secondary { + background: var(--color-surface-light); + color: var(--color-text); +} + +.btn--success { + background: var(--color-success-dark); + color: var(--color-text); +} + +.btn--danger { + background: var(--color-error); + color: var(--color-text); +} + +.btn--github { + background: var(--color-github); + color: var(--color-text); +} + +.btn--ghost { + background: transparent; + color: var(--color-text); + border: 1px solid var(--color-surface-light); +} + +/* ============================================ + INPUTS + ============================================ */ +.input { + width: 100%; + padding: var(--spacing-sm) var(--spacing-md); + font-size: var(--font-size-md); + background: var(--color-surface); + color: var(--color-text); + border: 1px solid var(--color-surface-light); + border-radius: var(--radius-md); + transition: border-color var(--transition-fast); +} + +.input:focus { + outline: none; + border-color: var(--color-primary); +} + +.input::placeholder { + color: var(--color-text-muted); +} + +.input-group { + display: flex; + flex-direction: column; + gap: var(--spacing-sm); +} + +/* ============================================ + WINDOWS + ============================================ */ +.window { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: var(--color-bg); + color: var(--color-text); + z-index: var(--z-window); + display: none; + flex-direction: column; + min-width: 280px; + box-shadow: var(--shadow-lg); + border-radius: 5px; + border-color: #aa1f1f; + border: 6px solid #faac37; +} + +.window--visible { + display: flex; +} + +.window--left { + left: 25%; +} + +.window--right { + left: 75%; +} + +.window__header { + display: flex; + justify-content: space-between; + align-items: center; + padding: var(--spacing-sm) var(--spacing-md); + background: var(--color-surface); + cursor: move; + user-select: none; +} + +.window__title { + font-weight: 500; + font-size: var(--font-size-md); +} + +.window__close { + cursor: pointer; + font-size: var(--font-size-lg); + opacity: 0.8; + transition: opacity var(--transition-fast); + background: none; + border: none; + color: var(--color-text); + padding: 0; + line-height: 1; +} + +.window__close:hover { + opacity: 1; +} + +.window__body { + padding: var(--spacing-md); + display: flex; + flex-direction: column; + gap: var(--spacing-sm); + flex: 1; + overflow: auto; +} + +/* ============================================ + MESSAGES + ============================================ */ +.message { + font-size: var(--font-size-sm); + padding: var(--spacing-xs); + border-radius: var(--radius-lg); + border-color: #000; +} + +.message--success { + color: var(--color-success); +} + +.message--error { + color: var(--color-error); +} + +.message--info { + color: var(--color-text-muted); +} + +/* ============================================ + LOGIN WINDOW + ============================================ */ +.login { + width: 320px; +} + +.login__form { + display: flex; + flex-direction: column; + gap: var(--spacing-sm); +} + +.login__actions { + display: flex; + gap: var(--spacing-sm); + margin-top: var(--spacing-xs); +} + +.login__divider { + display: flex; + align-items: center; + gap: var(--spacing-sm); + color: var(--color-text-muted); + font-size: var(--font-size-sm); + margin: var(--spacing-sm) 0; +} + +.login__divider::before, +.login__divider::after { + content: ''; + flex: 1; + height: 1px; + background: var(--color-surface-light); +} + +/* ============================================ + CHAT WINDOW + ============================================ */ +.chat { + width: 380px; + height: 400px; +} + +.chat__output { + flex: 1; + overflow-y: auto; + padding: var(--spacing-sm); + background: var(--color-surface); + border-radius: var(--radius-md); + display: flex; + flex-direction: column; + gap: var(--spacing-sm); + min-height: 150px; +} + +.chat__message { + padding: var(--spacing-xs) var(--spacing-sm); + background: var(--color-surface-light); + border-radius: var(--radius-sm); + font-size: var(--font-size-sm); +} + +.chat__message--own { + background: var(--color-primary); + align-self: flex-end; +} + +.chat__friend-indicator { + display: inline-block; + width: 8px; + height: 8px; + background-color: var(--color-success); + border-radius: 50%; + margin-right: var(--spacing-xs); + vertical-align: middle; +} + +.chat__system { + color: var(--color-text-muted); + font-size: var(--font-size-sm); + font-style: italic; + text-align: center; +} + +.chat__system--error { + color: var(--color-error); +} + +.chat__system--success { + color: var(--color-success); +} + +.chat__input-container { + display: flex; + gap: var(--spacing-sm); + margin-top: var(--spacing-sm); +} + +.chat__input { + flex: 1; +} + +.chat__controls { + display: flex; + gap: var(--spacing-sm); + margin-top: var(--spacing-sm); +} + +/* ============================================ + AVATAR WINDOW + ============================================ */ +.avatar-window { + width: 360px; +} + +.avatar__preview { + width: 120px; + height: 120px; + object-fit: cover; + border-radius: var(--radius-full); + border: 3px solid var(--color-text); + box-shadow: var(--shadow-md); + background: var(--color-surface); + align-self: center; +} + +.avatar__username { + font-size: var(--font-size-lg); + font-weight: 600; + text-align: center; + color: var(--color-text); + margin-top: var(--spacing-sm); +} + +.avatar__controls { + display: flex; + flex-direction: column; + gap: var(--spacing-sm); + align-items: center; +} + +.avatar__file-input { + display: none; +} + +/* ============================================ + STATS WINDOW + ============================================ */ +.stats-window { + width: 320px; +} + +.stats__avatar { + width: 72px; + height: 72px; + object-fit: cover; + border-radius: var(--radius-full); + border: 2px solid var(--color-text); + align-self: center; + display: block; + margin: 0 auto var(--spacing-xs); +} + +.stats__username { + font-size: var(--font-size-lg); + font-weight: 600; + text-align: center; + color: #000; + margin-bottom: var(--spacing-md); +} + +.stats__section { + margin-bottom: var(--spacing-md); +} + +.stats__section-title { + font-size: var(--font-size-sm); + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--color-primary); + border-bottom: 1px solid var(--color-surface-light); + padding-bottom: var(--spacing-xs); + margin-bottom: var(--spacing-xs); +} + +.stats__section-body { + display: flex; + flex-direction: column; + gap: 4px; +} + +.stats__row { + display: flex; + justify-content: space-between; + font-size: var(--font-size-sm); + padding: 3px 0; +} + +.stats__label { + color: #333; +} + +.stats__value { + font-weight: 600; + color: #000; +} + +.stats__loading { + font-size: var(--font-size-sm); + color: #333; + text-align: center; + padding: var(--spacing-sm) 0; +} + +/* ============================================ + EASTER EGG BUTTON + ============================================ */ +/* .easter-egg { + position: absolute; + top: 20%; + left: 50%; + transform: translateX(-50%); + z-index: 1; + background: var(--color-surface); + color: var(--color-text); + border: 1px solid var(--color-surface-light); + padding: var(--spacing-sm) var(--spacing-md); + cursor: pointer; + font-size: var(--font-size-md); + border-radius: var(--radius-md); + transition: all var(--transition-fast); +} + +.easter-egg:hover { + background: var(--color-error); + border-color: var(--color-error); +} */ + +/* ============================================ + UTILITIES + ============================================ */ +.hidden { + display: none !important; +} + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} + +.text-center { + text-align: center; +} + +.flex-center { + display: flex; + align-items: center; + justify-content: center; +} + +/* ============================================ + FRIENDS WINDOW + ============================================ */ +.friends-window { + width: 400px; + height: 450px; +} + +.friends__tabs { + display: flex; + gap: var(--spacing-xs); + margin-bottom: var(--spacing-sm); +} + +.friends__tab { + flex: 1; + padding: var(--spacing-sm); + background: var(--color-surface); + border: 1px solid var(--color-surface-light); + color: var(--color-text); + cursor: pointer; + font-size: var(--font-size-sm); + transition: all var(--transition-fast); +} + +.friends__tab:hover { + background: var(--color-surface-light); +} + +.friends__tab--active { + background: var(--color-primary); + border-color: var(--color-primary); +} + +.friends__content { + display: flex; + flex-direction: column; + flex: 1; + overflow: hidden; +} + +.friends__search { + display: flex; + gap: var(--spacing-sm); + margin-bottom: var(--spacing-sm); +} + +.friends__search .input { + flex: 1; +} + +.friends__list { + flex: 1; + overflow-y: auto; + display: flex; + flex-direction: column; + gap: var(--spacing-sm); +} + +.friends__item { + display: flex; + align-items: center; + gap: var(--spacing-sm); + padding: var(--spacing-sm); + background: var(--color-surface); + border-radius: var(--radius-md); +} + +.friends__avatar { + width: 40px; + height: 40px; + border-radius: var(--radius-full); + object-fit: cover; + border: 2px solid var(--color-surface-light); +} + +.friends__name { + flex: 1; + font-size: var(--font-size-md); + font-weight: 500; +} + +.friends__actions { + display: flex; + gap: var(--spacing-xs); +} + +.friends__actions .btn { + padding: var(--spacing-xs) var(--spacing-sm); + font-size: var(--font-size-sm); +} + +.friends__empty { + text-align: center; + color: var(--color-text-muted); + padding: var(--spacing-lg); +} diff --git a/Transcendence/srcs/frontend/src/index2.html b/Transcendence/srcs/frontend/src/trans/index2.html similarity index 75% rename from Transcendence/srcs/frontend/src/index2.html rename to Transcendence/srcs/frontend/src/trans/index2.html index 32f450c..77a5021 100644 --- a/Transcendence/srcs/frontend/src/index2.html +++ b/Transcendence/srcs/frontend/src/trans/index2.html @@ -3,14 +3,14 @@ - Transcendence.io + Transcendence -

Transcendence.io

+

Transcendence

diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/cat-modern.png b/Transcendence/srcs/frontend/src/webcat/web_cat_img/cat-modern.png new file mode 100644 index 0000000..18253a5 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/cat-modern.png differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/cat-renaissance.png b/Transcendence/srcs/frontend/src/webcat/web_cat_img/cat-renaissance.png new file mode 100644 index 0000000..2524eed Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/cat-renaissance.png differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/cat_hierogpy.png b/Transcendence/srcs/frontend/src/webcat/web_cat_img/cat_hierogpy.png new file mode 100644 index 0000000..bd25184 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/cat_hierogpy.png differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/donate.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/donate.jpg new file mode 100644 index 0000000..cd13c4e Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/donate.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/100.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/100.jpg new file mode 100644 index 0000000..787f4b8 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/100.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/101.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/101.jpg new file mode 100644 index 0000000..58b504c Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/101.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/102.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/102.jpg new file mode 100644 index 0000000..426d50b Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/102.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/103.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/103.jpg new file mode 100644 index 0000000..bd50fcf Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/103.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/200.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/200.jpg new file mode 100644 index 0000000..276550c Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/200.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/201.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/201.jpg new file mode 100644 index 0000000..895385e Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/201.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/202.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/202.jpg new file mode 100644 index 0000000..51b2fcb Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/202.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/203.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/203.jpg new file mode 100644 index 0000000..24ef9e0 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/203.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/204.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/204.jpg new file mode 100644 index 0000000..424deb5 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/204.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/205.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/205.jpg new file mode 100644 index 0000000..807a6a6 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/205.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/206.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/206.jpg new file mode 100644 index 0000000..cd0b415 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/206.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/207.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/207.jpg new file mode 100644 index 0000000..5d7ccf2 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/207.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/208.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/208.jpg new file mode 100644 index 0000000..6cf8c34 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/208.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/226.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/226.jpg new file mode 100644 index 0000000..7907098 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/226.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/300.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/300.jpg new file mode 100644 index 0000000..d39f0d5 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/300.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/301.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/301.jpg new file mode 100644 index 0000000..4383cb9 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/301.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/302.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/302.jpg new file mode 100644 index 0000000..23373c4 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/302.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/303.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/303.jpg new file mode 100644 index 0000000..e4b8797 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/303.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/304.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/304.jpg new file mode 100644 index 0000000..df49286 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/304.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/305.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/305.jpg new file mode 100644 index 0000000..e24354a Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/305.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/307.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/307.jpg new file mode 100644 index 0000000..8018681 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/307.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/308.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/308.jpg new file mode 100644 index 0000000..a8da04d Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/308.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/400.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/400.jpg new file mode 100644 index 0000000..668f415 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/400.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/401.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/401.jpg new file mode 100644 index 0000000..e0c7ff6 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/401.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/402.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/402.jpg new file mode 100644 index 0000000..a3085eb Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/402.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/403.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/403.jpg new file mode 100644 index 0000000..9946e5b Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/403.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/404.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/404.jpg new file mode 100644 index 0000000..ca86718 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/404.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/405.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/405.jpg new file mode 100644 index 0000000..5bbc476 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/405.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/406.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/406.jpg new file mode 100644 index 0000000..a81fb29 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/406.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/407.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/407.jpg new file mode 100644 index 0000000..35327dd Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/407.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/408.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/408.jpg new file mode 100644 index 0000000..967f6d5 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/408.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/409.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/409.jpg new file mode 100644 index 0000000..fcfc254 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/409.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/410.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/410.jpg new file mode 100644 index 0000000..42a0336 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/410.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/411.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/411.jpg new file mode 100644 index 0000000..cccbf20 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/411.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/412.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/412.jpg new file mode 100644 index 0000000..adfee89 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/412.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/413.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/413.jpg new file mode 100644 index 0000000..af95baf Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/413.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/414.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/414.jpg new file mode 100644 index 0000000..9f32b83 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/414.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/415.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/415.jpg new file mode 100644 index 0000000..c706495 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/415.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/416.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/416.jpg new file mode 100644 index 0000000..51212e7 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/416.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/417.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/417.jpg new file mode 100644 index 0000000..076497d Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/417.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/418.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/418.jpg new file mode 100644 index 0000000..9987cda Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/418.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/420.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/420.jpg new file mode 100644 index 0000000..bb225c6 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/420.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/421.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/421.jpg new file mode 100644 index 0000000..2d5fe0e Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/421.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/422.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/422.jpg new file mode 100644 index 0000000..c5ae8e2 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/422.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/423.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/423.jpg new file mode 100644 index 0000000..d80e759 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/423.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/424.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/424.jpg new file mode 100644 index 0000000..b8a08f9 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/424.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/425.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/425.jpg new file mode 100644 index 0000000..ab5d682 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/425.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/426.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/426.jpg new file mode 100644 index 0000000..1ec05f6 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/426.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/428.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/428.jpg new file mode 100644 index 0000000..9262b26 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/428.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/429.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/429.jpg new file mode 100644 index 0000000..afbe56c Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/429.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/431.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/431.jpg new file mode 100644 index 0000000..00e9068 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/431.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/444.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/444.jpg new file mode 100644 index 0000000..bcbce47 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/444.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/450.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/450.jpg new file mode 100644 index 0000000..2dd5d1d Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/450.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/451.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/451.jpg new file mode 100644 index 0000000..48733aa Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/451.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/497.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/497.jpg new file mode 100644 index 0000000..3e81848 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/497.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/498.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/498.jpg new file mode 100644 index 0000000..d78022d Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/498.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/499.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/499.jpg new file mode 100644 index 0000000..d3c4b55 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/499.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/500.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/500.jpg new file mode 100644 index 0000000..633100e Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/500.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/501.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/501.jpg new file mode 100644 index 0000000..942dce1 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/501.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/502.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/502.jpg new file mode 100644 index 0000000..20ed9dd Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/502.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/503.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/503.jpg new file mode 100644 index 0000000..1e34b03 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/503.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/504.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/504.jpg new file mode 100644 index 0000000..ddcd1af Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/504.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/506.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/506.jpg new file mode 100644 index 0000000..b466865 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/506.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/507.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/507.jpg new file mode 100644 index 0000000..5a373db Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/507.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/508.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/508.jpg new file mode 100644 index 0000000..2bd5696 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/508.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/509.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/509.jpg new file mode 100644 index 0000000..930b5fe Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/509.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/510.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/510.jpg new file mode 100644 index 0000000..e4f62e2 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/510.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/511.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/511.jpg new file mode 100644 index 0000000..0a7336d Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/511.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/521.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/521.jpg new file mode 100644 index 0000000..bbeae6a Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/521.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/522.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/522.jpg new file mode 100644 index 0000000..705447a Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/522.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/523.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/523.jpg new file mode 100644 index 0000000..ae30bcc Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/523.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/525.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/525.jpg new file mode 100644 index 0000000..fcbff15 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/525.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/530.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/530.jpg new file mode 100644 index 0000000..6686234 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/530.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/599.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/599.jpg new file mode 100644 index 0000000..e18d269 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/errors/599.jpg differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/facebook_logo.png b/Transcendence/srcs/frontend/src/webcat/web_cat_img/facebook_logo.png new file mode 100644 index 0000000..9bdd717 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/facebook_logo.png differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/insta_logo.png b/Transcendence/srcs/frontend/src/webcat/web_cat_img/insta_logo.png new file mode 100644 index 0000000..da9a8b0 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/insta_logo.png differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/twitter_logo.png b/Transcendence/srcs/frontend/src/webcat/web_cat_img/twitter_logo.png new file mode 100644 index 0000000..1f19c19 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/twitter_logo.png differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/wiskas-the-third.jpg b/Transcendence/srcs/frontend/src/webcat/web_cat_img/wiskas-the-third.jpg new file mode 100644 index 0000000..42efc60 Binary files /dev/null and b/Transcendence/srcs/frontend/src/webcat/web_cat_img/wiskas-the-third.jpg differ diff --git a/Transcendence/srcs/frontend/src/windows/login.js b/Transcendence/srcs/frontend/src/windows/login.js index 6b20546..88e9aff 100644 --- a/Transcendence/srcs/frontend/src/windows/login.js +++ b/Transcendence/srcs/frontend/src/windows/login.js @@ -83,7 +83,8 @@ export class LoginWindow extends Window { bindEvents() { this.loginBtn.addEventListener('click', () => this.handleLogin()); this.registerBtn.addEventListener('click', () => this.handleRegister()); - this.githubBtn.addEventListener('click', () => this.handleGitHubLogin()); + + this.githubBtn.addEventListener('click', () => {console.log(API.AUTH.GITHUB); this.handleGitHubLogin();}); // Login with Enter this.passwordInput.addEventListener('keypress', (e) => { @@ -194,6 +195,8 @@ export class LoginWindow extends Window { const left = (screen.width - width) / 2; const top = (screen.height - height) / 2; + console.log(API.AUTH.GITHUB); + const popup = window.open( API.AUTH.GITHUB, 'githubOAuth',