diff --git a/Transcendence/Makefile b/Transcendence/Makefile index 0581e43..d17874f 100644 --- a/Transcendence/Makefile +++ b/Transcendence/Makefile @@ -1,6 +1,8 @@ -all : up +all : + @docker compose -f ./docker-compose.yml up -d -up : +no_cache : + @docker compose -f ./docker-compose.yml build --no-cache @docker compose -f ./docker-compose.yml up -d clean : @@ -10,5 +12,6 @@ fclean : @docker compose -f ./docker-compose.yml down -v -t 1 @docker system prune -af --volumes -re : fclean up +re : fclean no_cache +.PHONY : all no_cache clean fclean re diff --git a/Transcendence/srcs/frontend/src/app.js b/Transcendence/srcs/frontend/src/app.js index b260673..c6f3913 100644 --- a/Transcendence/srcs/frontend/src/app.js +++ b/Transcendence/srcs/frontend/src/app.js @@ -16,10 +16,12 @@ import { StatsWindow } from './stats.js'; */ class App { constructor() { + console.log("APP STARTED"); this.initWindows(); this.initMenu(); this.initPage(); this.initEasterEgg(); + this.colorizeUI(); } /** @@ -105,6 +107,38 @@ class App { }); } } + + colorizeUI() { + const elements = document.querySelectorAll(".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 @@ -112,4 +146,4 @@ if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => new App()); } else { new App(); -} +} \ No newline at end of file diff --git a/Transcendence/srcs/frontend/src/assets/Frame1.png b/Transcendence/srcs/frontend/src/assets/Frame1.png new file mode 100644 index 0000000..3710be2 Binary files /dev/null and b/Transcendence/srcs/frontend/src/assets/Frame1.png differ diff --git a/Transcendence/srcs/frontend/src/game.css b/Transcendence/srcs/frontend/src/game.css index 6e424fd..f4503d6 100644 --- a/Transcendence/srcs/frontend/src/game.css +++ b/Transcendence/srcs/frontend/src/game.css @@ -11,16 +11,17 @@ --app-background-base: radial-gradient( circle at top, - #1b2735, - #090a0f + #3fc9ff, + #21fcc5 + ); - /* --app-background-image: url("./assets/background.png"); */ + --app-background-image: url("./assets/Frame1.png"); - --color-surface: #222; - --color-surface-light: #333; - --color-text: #fff; - --color-text-muted: #aaa; + --color-surface: #f5f52d; + --color-surface-light: #eff870; + --color-text: #000000; + --color-text-muted: #353535; --font-size-base: 10px; --font-size-sm: 1.2rem; @@ -63,7 +64,9 @@ html { height: 100%; background-image: + var(--app-background-image), var(--app-background-base); + background-size: contain, @@ -93,54 +96,129 @@ 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 { + +/* .title { position: absolute; - top: 0; + 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: var(--color-success); + font-family: "Patrick Hand", cursive; + color: #ff0055; + text-shadow: + 2px 2px 0 #000, + -2px -2px 0 #000, + 2px -2px 0 #000, + -2px 2px 0 #000; + + animation: wobble 2s infinite ease-in-out; + 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; +} */ + +.title { + position: absolute; + 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; } + /* ============================================ MENU ============================================ */ .menu { position: fixed; - top: 0; + top: var(--spacing-lg); left: 50px; - padding: 0; - margin: 0; - z-index: var(--z-menu); + display: flex; flex-direction: column; - gap: var(--spacing-xs); + gap: var(--spacing-lg); + + z-index: var(--z-menu); } .menu__item { background: var(--color-surface); - color: var(--color-text); + border-radius: var(--radius-lg); 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; + text-align: center; } .menu__item:hover { @@ -159,25 +237,22 @@ body { .game { position: fixed; - top: 0; + top: var(--spacing-lg); 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-radius: var(--radius-lg); 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; + text-align: center; } .game__item:hover { @@ -208,6 +283,8 @@ body { } .page__item { + + border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-surface-light); @@ -215,7 +292,7 @@ body { font-size: var(--font-size-md); cursor: pointer; transition: all var(--transition-fast); - text-align: right; + text-align: center; } .page__item:hover { diff --git a/Transcendence/srcs/frontend/src/game.html b/Transcendence/srcs/frontend/src/game.html index c836d29..7e5a3de 100644 --- a/Transcendence/srcs/frontend/src/game.html +++ b/Transcendence/srcs/frontend/src/game.html @@ -9,8 +9,15 @@ + -

Lobby

+

+ L + o + b + b + y +