^^._, work in progress, small changes

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) */
+}

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

Transcendence/srcs/frontend/src/game2/game.html

@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="fr">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>Lobby</title>
+		<link rel="stylesheet" href="doodle.css">
+		<link rel="stylesheet" href="game.css" />
+		<!-- <link rel="preconnect" href="https://fonts.googleapis.com" />
+		<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" /> -->
+
+		<script src="doodle.js" defer></script>
+		<script type="module" src="../trans/app.js"></script>
+	</head>
+	<body>
+		<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>
+			<button class="menu__item" data-action="chat" aria-label="Global chat">Global chat</button>
+			<button class="menu__item" data-action="avatar" aria-label="Avatar">Avatar</button>
+			<button class="menu__item" data-action="friends" aria-label="Amis">Amis</button>
+		</nav>
+
+		<nav class="game" aria-label="Game">
+			<button class="game__item" data-action="Home page" aria-label="Home Page"
+			onclick="window.location.href='index.html'">Home Page</button>
+		</nav>
+
+    <div class="page" aria-label="Page">
+      <button class="page__item" data-action="gameroom" aria-label="Game Rooms">Game Rooms</button>
+    </div>
+
+
+	</body>
+</html>

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

Transcendence/srcs/frontend/src/index.html

@@ -1,24 +1,13 @@
 <!DOCTYPE html>
 <head>
-	<link rel="stylesheet" href="./style.css" />
+	<link rel="stylesheet" href="./index.css" />
 	<script type="module" src="./index.js"></script>
 </head>
 <body>
 
 
-	<div>
-		<span id="button-play">play</span>
-		<div id="title" style="display: inline-block;">title</div>
-		<span id="button-login">login</span>
+	<div id="top-header">
 	</div>
 
-
-<div class="header">
-  <span id="button-play">play</span>
-  <div id="title">title</div>
-  <span id="button-login">login</span>
-</div>
-
-	<div class="inherit"></div>
 </body>
 </html>

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);
+
+// 
+let wiskas = document.createElement('img')
+wiskas.src = './webcat/web_cat_img/wiskas-the-third.jpg'
+document.body.append(wiskas)

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

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";

Transcendence/srcs/frontend/src/style.css

@@ -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;
-}

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

Transcendence/srcs/frontend/src/test/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<head>
+	<link rel="stylesheet" href="./style.css" />
+	<script type="module" src="./index.js"></script>
+</head>
+<body>
+<!-- 
+	<div class="container">
+	<div class="item item-1">Item 1</div>
+	<div class="item item-2">Item 2</div>
+	<div class="item item-3">Item 3</div>
+	</div> -->
+</body>
+</html>

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

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

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

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
+}

Transcendence/srcs/frontend/src/tetris/tetris.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>TETRIS</title>
-    <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">
+    <!-- <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet"> -->
     <link rel="stylesheet" href="tetris.css">
 </head>
 <body>

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

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

Transcendence/srcs/frontend/src/trans/index2.html

@@ -3,14 +3,14 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<title>Transcendence.io</title>
+		<title>Transcendence</title>
 		<link rel="stylesheet" href="index.css" />
 		<link rel="preconnect" href="https://fonts.googleapis.com" />
 		<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>
 	<body>
-		<h1 class="title">Transcendence.io</h1>
+		<h1 class="title">Transcendence</h1>
 
 		<nav class="menu" aria-label="Menu principal">
 			<button class="menu__item" data-action="login" aria-label="Login">Login</button>
@@ -21,10 +21,12 @@
 		</nav>
 
 		<nav class="game" aria-label="Game">
-			<button class="game__item" data-action="new_game" aria-label="Start new game"
-			onclick="window.location.href='game/game.html'">Start new game</button>
+			<button class="game__item" data-action="new_game" aria-label="Skkrrribl.io"
+			onclick="window.location.href='game/game.html'">Skkrrribl.io</button>
 			<button class="game__item" data-action="tetris" aria-label="Tetris"
-			onclick="window.location.href='tetris/tetris.html'">Tetris</button>
+			onclick="window.location.href='tetris.html'">Tetris</button>
+			<button class="game__item" data-action="wiscat" aria-label="Wiscat"
+			onclick="window.location.href='wiscat.html'">Wiscat</button>
 		</nav>
 		
 		<script type="module" src="app.js"></script>