Master/Transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Front started

Browse Source
This commit is contained in:
Thomas Fauve-Piot
2026-03-19 23:08:45 +01:00
parent 30e4f04c52
commit 167896aedd
7 changed files with 156 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Transcendence/Makefile
+6 -3
View File
@@ -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
+35 -1
View File
@@ -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/assets/Frame1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 132 KiB

Transcendence/srcs/frontend/src/game.css
+102 -25
View File
@@ -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 {
Transcendence/srcs/frontend/src/game.html
+8 -4
View File
@@ -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
+3 -3
View File
@@ -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
+2 -2
View File
@@ -20,8 +20,8 @@
</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.html'">Start new game</button>
<button class="game__item" data-action="new_game" aria-label="Skkrrribl.io"
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>