Front started

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

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();
-}
+}

Transcendence/srcs/frontend/src/game.css

@@ -11,16 +11,17 @@
 
     --app-background-base: radial-gradient(
         circle at top,
-        #1b2735,
+        #3fc9ff,
-        #090a0f
+        #21fcc5
+
     );
 
-    /* --app-background-image: url("./assets/background.png"); */
+    --app-background-image: url("./assets/Frame1.png");
 
-    --color-surface: #222;
+    --color-surface: #f5f52d;
-    --color-surface-light: #333;
+    --color-surface-light: #eff870;
-    --color-text: #fff;
+    --color-text: #000000;
-    --color-text-muted: #aaa;
+    --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;
+    font-family: "Patrick Hand", cursive;
-    color: var(--color-success);
+    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 {

Transcendence/srcs/frontend/src/game.html

@@ -9,8 +9,15 @@
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 		<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&display=swap" rel="stylesheet" />
 	</head>
+	<script type="module" src="app.js"></script>
 	<body>
-		<h1 class="title">Lobby</h1>
+		<h1 class="title">
+		  <span>L</span>
+		  <span>o</span>
+		  <span>b</span>
+		  <span>b</span>
+		  <span>y</span>
+		</h1>
 
 		<nav class="menu" aria-label="Menu principal">
 			<button class="menu__item" data-action="login" aria-label="Login">Login</button>
@@ -27,8 +34,5 @@
     <div class="page" aria-label="Page">
       <button class="page__item" data-action="gameroom" aria-label="Game Rooms">Game Rooms</button>
     </div>
-
-
-		<script type="module" src="app.js"></script>
 	</body>
 </html>

Transcendence/srcs/frontend/src/index.css

@@ -117,7 +117,7 @@ body {
     text-align: center;
     text-shadow: 2px 2px 10px black;
     z-index: 1;
-    font-family: "Cinzel Decorative", cursive;
+    font-family: "Patrick Hand", cursive;
     color: rgba(248, 252, 2, 0.6);
 
     margin: 0;
@@ -154,7 +154,7 @@ body {
     font-size: var(--font-size-md);
     cursor: pointer;
     transition: all var(--transition-fast);
-    text-align: left;
+    text-align: center;
 }
 
 .menu__item:hover {
@@ -191,7 +191,7 @@ body {
     font-size: var(--font-size-md);
     cursor: pointer;
     transition: all var(--transition-fast);
-    text-align: right;
+    text-align: center;
 }
 
 .game__item:hover {

Transcendence/srcs/frontend/src/index.html

@@ -20,8 +20,8 @@
 		</nav>
 
 		<nav class="game" aria-label="Game">
-			<button class="game__item" data-action="new_game" aria-label="Start new game"
+			<button class="game__item" data-action="new_game" aria-label="Skkrrribl.io"
-			onclick="window.location.href='game.html'">Start new game</button>
+			onclick="window.location.href='game.html'">Skkrrribl.io</button>
 			<button class="game__item" data-action="tetris" aria-label="Tetris"
 			onclick="window.location.href='tetris.html'">Tetris</button>
 		</nav>