diff --git a/Transcendence/Makefile b/Transcendence/Makefile index 1761412..b415e10 100644 --- a/Transcendence/Makefile +++ b/Transcendence/Makefile @@ -1,6 +1,7 @@ all : up up : + @docker compose -f ./docker-compose.yml build --no-cache @docker compose -f ./docker-compose.yml up -d clean : diff --git a/Transcendence/srcs/frontend/dockerfile b/Transcendence/srcs/frontend/dockerfile index 8688288..d09e460 100644 --- a/Transcendence/srcs/frontend/dockerfile +++ b/Transcendence/srcs/frontend/dockerfile @@ -1,4 +1,5 @@ FROM nginx:alpine + RUN apk add --no-cache openssl && \ mkdir -p /etc/nginx/ssl && \ openssl req -x509 -nodes -days 365 -newkey rsa:2048 \ @@ -6,7 +7,14 @@ RUN apk add --no-cache openssl && \ -out /etc/nginx/ssl/cert.pem \ -subj "/CN=localhost" \ -addext "subjectAltName=DNS:localhost,IP:127.0.0.1" + +#ADDED +RUN rm -f /etc/nginx/conf.d/default.conf + COPY src /usr/share/nginx/html + COPY nginx.conf /etc/nginx/conf.d/default.conf + EXPOSE 443 + CMD ["nginx", "-g", "daemon off;"] \ No newline at end of file diff --git a/Transcendence/srcs/frontend/src/trans/app.js b/Transcendence/srcs/frontend/src/app.js similarity index 89% rename from Transcendence/srcs/frontend/src/trans/app.js rename to Transcendence/srcs/frontend/src/app.js index 9070d38..2620cb8 100644 --- a/Transcendence/srcs/frontend/src/trans/app.js +++ b/Transcendence/srcs/frontend/src/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 diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/facebook_logo.png b/Transcendence/srcs/frontend/src/assets/facebook_logo.png similarity index 100% rename from Transcendence/srcs/frontend/src/webcat/web_cat_img/facebook_logo.png rename to Transcendence/srcs/frontend/src/assets/facebook_logo.png diff --git a/Transcendence/srcs/frontend/src/assets/grwweg.png b/Transcendence/srcs/frontend/src/assets/grwweg.png deleted file mode 100644 index 716affb..0000000 Binary files a/Transcendence/srcs/frontend/src/assets/grwweg.png and /dev/null differ diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/insta_logo.png b/Transcendence/srcs/frontend/src/assets/insta_logo.png similarity index 100% rename from Transcendence/srcs/frontend/src/webcat/web_cat_img/insta_logo.png rename to Transcendence/srcs/frontend/src/assets/insta_logo.png diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/twitter_logo.png b/Transcendence/srcs/frontend/src/assets/twitter_logo.png similarity index 100% rename from Transcendence/srcs/frontend/src/webcat/web_cat_img/twitter_logo.png rename to Transcendence/srcs/frontend/src/assets/twitter_logo.png diff --git a/Transcendence/srcs/frontend/src/webcat/web_cat_img/wiskas-the-third.jpg b/Transcendence/srcs/frontend/src/assets/wiskas-the-third.jpg similarity index 100% rename from Transcendence/srcs/frontend/src/webcat/web_cat_img/wiskas-the-third.jpg rename to Transcendence/srcs/frontend/src/assets/wiskas-the-third.jpg diff --git a/Transcendence/srcs/frontend/src/game2/doodle.css b/Transcendence/srcs/frontend/src/game/doodle.css similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodle.css rename to Transcendence/srcs/frontend/src/game/doodle.css diff --git a/Transcendence/srcs/frontend/src/game2/doodle.js b/Transcendence/srcs/frontend/src/game/doodle.js similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodle.js rename to Transcendence/srcs/frontend/src/game/doodle.js diff --git a/Transcendence/srcs/frontend/src/game2/doodles/ball.png b/Transcendence/srcs/frontend/src/game/doodles/ball.png similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodles/ball.png rename to Transcendence/srcs/frontend/src/game/doodles/ball.png diff --git a/Transcendence/srcs/frontend/src/game2/doodles/batman.png b/Transcendence/srcs/frontend/src/game/doodles/batman.png similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodles/batman.png rename to Transcendence/srcs/frontend/src/game/doodles/batman.png diff --git a/Transcendence/srcs/frontend/src/game2/doodles/building.png b/Transcendence/srcs/frontend/src/game/doodles/building.png similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodles/building.png rename to Transcendence/srcs/frontend/src/game/doodles/building.png diff --git a/Transcendence/srcs/frontend/src/game2/doodles/butterfly.png b/Transcendence/srcs/frontend/src/game/doodles/butterfly.png similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodles/butterfly.png rename to Transcendence/srcs/frontend/src/game/doodles/butterfly.png diff --git a/Transcendence/srcs/frontend/src/game2/doodles/car.png b/Transcendence/srcs/frontend/src/game/doodles/car.png similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodles/car.png rename to Transcendence/srcs/frontend/src/game/doodles/car.png diff --git a/Transcendence/srcs/frontend/src/game2/doodles/cat.png b/Transcendence/srcs/frontend/src/game/doodles/cat.png similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodles/cat.png rename to Transcendence/srcs/frontend/src/game/doodles/cat.png diff --git a/Transcendence/srcs/frontend/src/game2/doodles/clouds.png b/Transcendence/srcs/frontend/src/game/doodles/clouds.png similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodles/clouds.png rename to Transcendence/srcs/frontend/src/game/doodles/clouds.png diff --git a/Transcendence/srcs/frontend/src/game2/doodles/controls.png b/Transcendence/srcs/frontend/src/game/doodles/controls.png similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodles/controls.png rename to Transcendence/srcs/frontend/src/game/doodles/controls.png diff --git a/Transcendence/srcs/frontend/src/game2/doodles/dead.png b/Transcendence/srcs/frontend/src/game/doodles/dead.png similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodles/dead.png rename to Transcendence/srcs/frontend/src/game/doodles/dead.png diff --git a/Transcendence/srcs/frontend/src/game2/doodles/diamant.png b/Transcendence/srcs/frontend/src/game/doodles/diamant.png similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodles/diamant.png rename to Transcendence/srcs/frontend/src/game/doodles/diamant.png diff --git a/Transcendence/srcs/frontend/src/game2/doodles/dice.png b/Transcendence/srcs/frontend/src/game/doodles/dice.png similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodles/dice.png rename to Transcendence/srcs/frontend/src/game/doodles/dice.png diff --git a/Transcendence/srcs/frontend/src/game2/doodles/earth.png b/Transcendence/srcs/frontend/src/game/doodles/earth.png similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodles/earth.png rename to Transcendence/srcs/frontend/src/game/doodles/earth.png diff --git a/Transcendence/srcs/frontend/src/game2/doodles/egypt.png b/Transcendence/srcs/frontend/src/game/doodles/egypt.png similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodles/egypt.png rename to Transcendence/srcs/frontend/src/game/doodles/egypt.png diff --git a/Transcendence/srcs/frontend/src/game2/doodles/fire.png b/Transcendence/srcs/frontend/src/game/doodles/fire.png similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodles/fire.png rename to Transcendence/srcs/frontend/src/game/doodles/fire.png diff --git a/Transcendence/srcs/frontend/src/game2/doodles/fish.png b/Transcendence/srcs/frontend/src/game/doodles/fish.png similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodles/fish.png rename to Transcendence/srcs/frontend/src/game/doodles/fish.png diff --git a/Transcendence/srcs/frontend/src/game2/doodles/flag.png b/Transcendence/srcs/frontend/src/game/doodles/flag.png similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodles/flag.png rename to Transcendence/srcs/frontend/src/game/doodles/flag.png diff --git a/Transcendence/srcs/frontend/src/game2/doodles/hearts.png b/Transcendence/srcs/frontend/src/game/doodles/hearts.png similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodles/hearts.png rename to Transcendence/srcs/frontend/src/game/doodles/hearts.png diff --git a/Transcendence/srcs/frontend/src/game2/doodles/house.png b/Transcendence/srcs/frontend/src/game/doodles/house.png similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodles/house.png rename to Transcendence/srcs/frontend/src/game/doodles/house.png diff --git a/Transcendence/srcs/frontend/src/game2/doodles/idol.png b/Transcendence/srcs/frontend/src/game/doodles/idol.png similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodles/idol.png rename to Transcendence/srcs/frontend/src/game/doodles/idol.png diff --git a/Transcendence/srcs/frontend/src/game2/doodles/lotus.png b/Transcendence/srcs/frontend/src/game/doodles/lotus.png similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodles/lotus.png rename to Transcendence/srcs/frontend/src/game/doodles/lotus.png diff --git a/Transcendence/srcs/frontend/src/game2/doodles/mail.png b/Transcendence/srcs/frontend/src/game/doodles/mail.png similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodles/mail.png rename to Transcendence/srcs/frontend/src/game/doodles/mail.png diff --git a/Transcendence/srcs/frontend/src/game2/doodles/moon.png b/Transcendence/srcs/frontend/src/game/doodles/moon.png similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodles/moon.png rename to Transcendence/srcs/frontend/src/game/doodles/moon.png diff --git a/Transcendence/srcs/frontend/src/game2/doodles/pokeball.png b/Transcendence/srcs/frontend/src/game/doodles/pokeball.png similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodles/pokeball.png rename to Transcendence/srcs/frontend/src/game/doodles/pokeball.png diff --git a/Transcendence/srcs/frontend/src/game2/doodles/runes.png b/Transcendence/srcs/frontend/src/game/doodles/runes.png similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodles/runes.png rename to Transcendence/srcs/frontend/src/game/doodles/runes.png diff --git a/Transcendence/srcs/frontend/src/game2/doodles/shield.png b/Transcendence/srcs/frontend/src/game/doodles/shield.png similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodles/shield.png rename to Transcendence/srcs/frontend/src/game/doodles/shield.png diff --git a/Transcendence/srcs/frontend/src/game2/doodles/shiny.png b/Transcendence/srcs/frontend/src/game/doodles/shiny.png similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodles/shiny.png rename to Transcendence/srcs/frontend/src/game/doodles/shiny.png diff --git a/Transcendence/srcs/frontend/src/game2/doodles/snail.png b/Transcendence/srcs/frontend/src/game/doodles/snail.png similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodles/snail.png rename to Transcendence/srcs/frontend/src/game/doodles/snail.png diff --git a/Transcendence/srcs/frontend/src/game2/doodles/sound.png b/Transcendence/srcs/frontend/src/game/doodles/sound.png similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodles/sound.png rename to Transcendence/srcs/frontend/src/game/doodles/sound.png diff --git a/Transcendence/srcs/frontend/src/game2/doodles/spiral.png b/Transcendence/srcs/frontend/src/game/doodles/spiral.png similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodles/spiral.png rename to Transcendence/srcs/frontend/src/game/doodles/spiral.png diff --git a/Transcendence/srcs/frontend/src/game2/doodles/star.png b/Transcendence/srcs/frontend/src/game/doodles/star.png similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodles/star.png rename to Transcendence/srcs/frontend/src/game/doodles/star.png diff --git a/Transcendence/srcs/frontend/src/game2/doodles/stop.png b/Transcendence/srcs/frontend/src/game/doodles/stop.png similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodles/stop.png rename to Transcendence/srcs/frontend/src/game/doodles/stop.png diff --git a/Transcendence/srcs/frontend/src/game2/doodles/sun.png b/Transcendence/srcs/frontend/src/game/doodles/sun.png similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodles/sun.png rename to Transcendence/srcs/frontend/src/game/doodles/sun.png diff --git a/Transcendence/srcs/frontend/src/game2/doodles/tree.png b/Transcendence/srcs/frontend/src/game/doodles/tree.png similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodles/tree.png rename to Transcendence/srcs/frontend/src/game/doodles/tree.png diff --git a/Transcendence/srcs/frontend/src/game2/doodles/triskel.png b/Transcendence/srcs/frontend/src/game/doodles/triskel.png similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodles/triskel.png rename to Transcendence/srcs/frontend/src/game/doodles/triskel.png diff --git a/Transcendence/srcs/frontend/src/game2/doodles/yin_yang.png b/Transcendence/srcs/frontend/src/game/doodles/yin_yang.png similarity index 100% rename from Transcendence/srcs/frontend/src/game2/doodles/yin_yang.png rename to Transcendence/srcs/frontend/src/game/doodles/yin_yang.png diff --git a/Transcendence/srcs/frontend/src/game/game.css b/Transcendence/srcs/frontend/src/game/game.css index 6e424fd..03d0a00 100644 --- a/Transcendence/srcs/frontend/src/game/game.css +++ b/Transcendence/srcs/frontend/src/game/game.css @@ -1,26 +1,25 @@ :root { - --color-primary: #0066cc; - --color-primary-hover: #0052a3; + --color-primary: #ffc75e; + --color-primary-hover: #ffc75e; --color-success: #3cff01; - --color-success-dark: #28a745; + --color-success-dark: #ffc75e; --color-error: #ff4d4d; - --color-warning: #ffc107; - --color-github: #24292e; + --color-warning: #ffc75e; + --color-github: #ffc75e; - --color-bg: #000; + --color-bg: #ffe5b5; --app-background-base: radial-gradient( circle at top, - #1b2735, - #090a0f + #3fc9ff, + #21fcc5 + ); - /* --app-background-image: url("./assets/background.png"); */ - - --color-surface: #222; - --color-surface-light: #333; - --color-text: #fff; - --color-text-muted: #aaa; + --color-surface: #ffcc00; + --color-surface-light: #feffa6; + --color-text: #000000; + --color-text-muted: #353535; --font-size-base: 10px; --font-size-sm: 1.2rem; @@ -62,19 +61,22 @@ html { height: 100%; - background-image: + 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, center; background-repeat: - no-repeat, no-repeat; } @@ -93,102 +95,69 @@ body { } +/* ============================================ + 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; - top: 0; - 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: var(--color-success); - margin: 0; - padding: var(--spacing-md); + 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; } -/* ============================================ - MENU - ============================================ */ +.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); -.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); + animation: bounce 1.2s infinite alternate; + animation-timing-function: ease-in-out; } -.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; -} +.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; } -.menu__item:hover { - background: var(--color-surface-light); - font-size: var(--font-size-lg); -} +.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; } -.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); -} +.title span { will-change: transform; } /* ============================================ PAGES @@ -208,14 +177,17 @@ body { } .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: right; + text-align: center; } .page__item:hover { @@ -229,9 +201,87 @@ body { } /* ============================================ - BUTTONS + 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; @@ -256,7 +306,7 @@ body { } .btn--primary { - background: var(--color-primary); + background: var(--color-surface); color: var(--color-text); } @@ -265,7 +315,7 @@ body { } .btn--secondary { - background: var(--color-surface-light); + background: var(--color-surface); color: var(--color-text); } @@ -328,13 +378,15 @@ body { 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); + border-radius: 5px; + border-color: #aa1f1f; + border: 6px solid #faac37; } .window--visible { @@ -395,7 +447,8 @@ body { .message { font-size: var(--font-size-sm); padding: var(--spacing-xs); - border-radius: var(--radius-sm); + border-radius: var(--radius-lg); + border-color: #000; } .message--success { @@ -415,6 +468,11 @@ body { ============================================ */ .login { width: 320px; + border-radius: 5px; + border-color: #aa1f1f; + border: 6px solid #faac37; + background: #ffffff; + color: #000; } .login__form { @@ -533,7 +591,7 @@ body { border-radius: var(--radius-full); border: 3px solid var(--color-text); box-shadow: var(--shadow-md); - background: var(--color-surface); + background: var(--color-surface-light); align-self: center; } @@ -557,28 +615,74 @@ body { } /* ============================================ - EASTER EGG BUTTON + STATS WINDOW ============================================ */ -/* .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); +.stats-window { + width: 320px; } -.easter-egg:hover { - background: var(--color-error); - border-color: var(--color-error); -} */ +.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 @@ -626,7 +730,7 @@ body { flex: 1; padding: var(--spacing-sm); background: var(--color-surface); - border: 1px solid var(--color-surface-light); + border: 1px solid var(--color-surface); color: var(--color-text); cursor: pointer; font-size: var(--font-size-sm); @@ -709,9 +813,10 @@ body { /* ============================================ GAME ROOM WINDOW ============================================ */ + .gameroom-window { - width: 600px; - height: 800px; + width: 800px; + height: 900px; } .gameroom__tabs { @@ -1019,3 +1124,4 @@ body { .gameroom__game-buttons .btn { flex: 1; } + diff --git a/Transcendence/srcs/frontend/src/game/game.html b/Transcendence/srcs/frontend/src/game/game.html index 6738dee..88c1528 100644 --- a/Transcendence/srcs/frontend/src/game/game.html +++ b/Transcendence/srcs/frontend/src/game/game.html @@ -3,14 +3,24 @@ - Lobby + Skkribl.io + + + + -

Lobby

+

+ L + o + b + b + y +