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

better theme

Browse Source
This commit is contained in:
H3XploR
2026-03-16 16:11:48 +01:00
parent ad4becc38f
commit e4eb9b0c95
3 changed files with 158 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Transcendence/srcs/frontend/src/renderer.js
+20 -13
View File
@@ -3,7 +3,7 @@
// ─────────────────────────────────────────────
const CELL = 30;
const COLORS = ['#070712','#a855f7','#f97316','#3b82f6','#06b6d4','#ef4444','#22c55e','#eab308','#555577'];
const COLORS = ['#000500','#00ff41','#39ff14','#00e676','#76ff03','#b2ff59','#00ffaa','#ccff00','#2d5a2d'];
const ctxMain = document.getElementById('canvas-main').getContext('2d');
const ctxNext = document.getElementById('canvas-next').getContext('2d');
@@ -12,25 +12,32 @@ const ctxOpponent = document.getElementById('canvas-opponent').getContext('2d');
function drawCell(ctx, x, y, colorIndex, size) {
const p = 1;
ctx.fillStyle = COLORS[colorIndex];
const color = COLORS[colorIndex];
ctx.fillStyle = color;
ctx.fillRect(x * size + p, y * size + p, size - p * 2, size - p * 2);
// Highlight
ctx.fillStyle = 'rgba(255,255,255,0.25)';
ctx.fillRect(x * size + p, y * size + p, size - p * 2, 3);
ctx.fillRect(x * size + p, y * size + p, 3, size - p * 2);
// Ombre
ctx.fillStyle = 'rgba(0,0,0,0.35)';
ctx.fillRect(x * size + p, (y + 1) * size - p - 3, size - p * 2, 3);
ctx.fillRect((x + 1) * size - p - 3, y * size + p, 3, size - p * 2);
// Glow inner
ctx.shadowColor = color;
ctx.shadowBlur = 6;
ctx.fillStyle = color;
ctx.fillRect(x * size + p + 2, y * size + p + 2, size - p * 2 - 4, size - p * 2 - 4);
ctx.shadowBlur = 0;
// Highlight top/left
ctx.fillStyle = 'rgba(200,255,200,0.2)';
ctx.fillRect(x * size + p, y * size + p, size - p * 2, 2);
ctx.fillRect(x * size + p, y * size + p, 2, size - p * 2);
// Shadow bottom/right
ctx.fillStyle = 'rgba(0,0,0,0.5)';
ctx.fillRect(x * size + p, (y + 1) * size - p - 2, size - p * 2, 2);
ctx.fillRect((x + 1) * size - p - 2, y * size + p, 2, size - p * 2);
}
function clearCanvas(ctx, w, h) {
ctx.fillStyle = '#070712';
ctx.fillStyle = '#000500';
ctx.fillRect(0, 0, w, h);
}
function drawGridLines(ctx, cols, rows, size) {
ctx.strokeStyle = 'rgba(255,255,255,0.04)';
ctx.strokeStyle = 'rgba(0,255,65,0.06)';
ctx.lineWidth = 1;
for (let x = 0; x <= cols; x++) {
ctx.beginPath(); ctx.moveTo(x * size, 0); ctx.lineTo(x * size, rows * size); ctx.stroke();
@@ -60,7 +67,7 @@ function drawGhost(ctx, piece, grid) {
if (ghost.y === piece.getPosition().y) return;
ctx.strokeStyle = 'rgba(255,255,255,0.15)';
ctx.strokeStyle = 'rgba(0,255,65,0.25)';
ctx.lineWidth = 1;
for (let row = 0; row < shape.length; row++)
for (let col = 0; col < shape[row].length; col++)
Transcendence/srcs/frontend/src/tetris.css
+107 -35
View File
@@ -1,11 +1,42 @@
:root {
--bg: #070712;
--panel: #0d0d1f;
--border: #1a1a3e;
--accent: #00ffe7;
--accent2:#ff00aa;
--dim: #3a3a6a;
--text: #c0c0e0;
--bg: #000500;
--panel: #000d00;
--border: #004400;
--accent: #00ff41;
--accent2:#39ff14;
--dim: #1a5c1a;
--text: #00cc26;
}
@keyframes flicker {
0%, 89%, 91%, 93%, 95%, 100% { opacity: 1; }
90%, 92%, 94% { opacity: 0.82; }
}
@keyframes glitch-before {
0%, 100% { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transform: translate(0); }
5% { clip-path: polygon(0 15%, 100% 15%, 100% 25%, 0 25%); transform: translate(-4px, 0); color: #ff003c; }
10% { clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%); transform: translate(4px, 0); color: #ff003c; }
15%, 85% { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transform: translate(0); }
90% { clip-path: polygon(0 40%, 100% 40%, 100% 55%, 0 55%); transform: translate(-3px, 0); color: #ff003c; }
}
@keyframes glitch-after {
0%, 100% { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transform: translate(0); }
5% { clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); transform: translate(4px, 0); color: #00ffff; }
10% { clip-path: polygon(0 30%, 100% 30%, 100% 45%, 0 45%); transform: translate(-4px, 0); color: #00ffff; }
15%, 85% { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transform: translate(0); }
90% { clip-path: polygon(0 10%, 100% 10%, 100% 25%, 0 25%); transform: translate(3px, 0); color: #00ffff; }
}
@keyframes cursor-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
@keyframes scan {
0% { background-position: 0 0; }
100% { background-position: 0 100%; }
}
* { margin: 0; padding: 0; box-sizing: border-box; }
@@ -20,32 +51,71 @@ body {
align-items: center;
justify-content: center;
overflow: hidden;
animation: flicker 8s infinite;
}
/* Grid lines */
body::before {
content: '';
position: fixed;
inset: 0;
background-image:
linear-gradient(rgba(0,255,231,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,255,231,0.03) 1px, transparent 1px);
linear-gradient(rgba(0,255,65,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,255,65,0.04) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
z-index: 0;
}
/* Scanlines CRT */
body::after {
content: '';
position: fixed;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0, 0, 0, 0.12) 2px,
rgba(0, 0, 0, 0.12) 4px
);
pointer-events: none;
z-index: 9998;
}
h1 {
font-family: 'Orbitron', monospace;
font-family: 'Share Tech Mono', monospace;
font-weight: 900;
font-size: 2.2rem;
letter-spacing: 0.4em;
color: var(--accent);
text-shadow: 0 0 20px var(--accent), 0 0 40px var(--accent);
text-shadow: 0 0 10px var(--accent), 0 0 30px var(--accent), 0 0 60px rgba(0,255,65,0.4);
margin-bottom: 20px;
position: relative;
z-index: 1;
}
h1::before {
content: attr(data-text);
position: absolute;
top: 0; left: 0; width: 100%;
color: var(--accent);
animation: glitch-before 6s infinite;
}
h1::after {
content: attr(data-text);
position: absolute;
top: 0; left: 0; width: 100%;
color: var(--accent);
animation: glitch-after 6s infinite;
}
.cursor {
animation: cursor-blink 1s step-end infinite;
color: var(--accent);
}
/* ── Zone de jeu globale ── */
#game-area {
display: flex;
@@ -86,10 +156,10 @@ h1 {
.panel {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 6px;
border-radius: 0;
padding: 14px;
width: 130px;
box-shadow: 0 0 20px rgba(0,255,231,0.05);
box-shadow: 0 0 20px rgba(0,255,65,0.07), inset 0 0 20px rgba(0,0,0,0.5);
}
.panel-title {
@@ -102,11 +172,11 @@ h1 {
text-align: center;
}
canvas { display: block; border-radius: 4px; }
canvas { display: block; border-radius: 0; }
#canvas-main {
border: 1px solid var(--border);
box-shadow: 0 0 30px rgba(0,255,231,0.08), inset 0 0 30px rgba(0,0,0,0.5);
border: 1px solid var(--accent);
box-shadow: 0 0 20px rgba(0,255,65,0.15), 0 0 40px rgba(0,255,65,0.06), inset 0 0 30px rgba(0,0,0,0.7);
}
#canvas-next, #canvas-hold {
@@ -117,7 +187,7 @@ canvas { display: block; border-radius: 4px; }
/* ── Canvas adversaire ── */
#canvas-opponent {
border: 1px solid var(--accent2);
box-shadow: 0 0 30px rgba(255,0,170,0.08), inset 0 0 30px rgba(0,0,0,0.5);
box-shadow: 0 0 20px rgba(57,255,20,0.12), inset 0 0 30px rgba(0,0,0,0.5);
}
/* ── Score ── */
@@ -151,16 +221,16 @@ canvas { display: block; border-radius: 4px; }
}
button {
font-family: 'Orbitron', monospace;
font-size: 0.55rem;
letter-spacing: 0.15em;
font-family: 'Share Tech Mono', monospace;
font-size: 0.6rem;
letter-spacing: 0.12em;
font-weight: 700;
text-transform: uppercase;
padding: 10px 8px;
border: 1px solid;
border-radius: 4px;
border-radius: 0;
cursor: pointer;
transition: all 0.2s;
transition: all 0.15s;
background: transparent;
width: 100%;
}
@@ -222,8 +292,8 @@ button:disabled { opacity: 0.3; cursor: not-allowed; }
top: 0; left: 0;
width: 300px;
height: 600px;
background: rgba(7,7,18,0.88);
border-radius: 4px;
background: rgba(0,5,0,0.9);
border-radius: 0;
flex-direction: column;
align-items: center;
justify-content: center;
@@ -235,22 +305,23 @@ button:disabled { opacity: 0.3; cursor: not-allowed; }
#overlay-opponent.visible { display: flex; }
#overlay-title {
font-family: 'Orbitron', monospace;
font-family: 'Share Tech Mono', monospace;
font-size: 1.4rem;
font-weight: 900;
letter-spacing: 0.2em;
color: var(--accent2);
text-shadow: 0 0 20px var(--accent2);
color: #ff003c;
text-shadow: 0 0 20px #ff003c, 0 0 40px #ff003c;
}
#overlay-score {
font-family: 'Orbitron', monospace;
font-family: 'Share Tech Mono', monospace;
font-size: 0.9rem;
color: var(--accent);
text-shadow: 0 0 10px var(--accent);
}
#overlay-opponent-title {
font-family: 'Orbitron', monospace;
font-family: 'Share Tech Mono', monospace;
font-size: 1.4rem;
font-weight: 900;
letter-spacing: 0.2em;
@@ -259,7 +330,7 @@ button:disabled { opacity: 0.3; cursor: not-allowed; }
}
#overlay-opponent-score {
font-family: 'Orbitron', monospace;
font-family: 'Share Tech Mono', monospace;
font-size: 0.9rem;
color: var(--accent2);
}
@@ -268,7 +339,7 @@ button:disabled { opacity: 0.3; cursor: not-allowed; }
#duel-panel {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 6px;
border-radius: 0;
padding: 12px 20px;
margin-bottom: 14px;
position: relative;
@@ -276,7 +347,7 @@ button:disabled { opacity: 0.3; cursor: not-allowed; }
display: flex;
align-items: center;
gap: 14px;
box-shadow: 0 0 20px rgba(255,0,170,0.04);
box-shadow: 0 0 20px rgba(0,255,65,0.04);
}
.duel-row {
@@ -332,9 +403,9 @@ button:disabled { opacity: 0.3; cursor: not-allowed; }
#settings-panel {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 6px;
border-radius: 0;
padding: 14px;
box-shadow: 0 0 20px rgba(0,255,231,0.05);
box-shadow: 0 0 20px rgba(0,255,65,0.05);
display: flex;
flex-direction: column;
gap: 10px;
@@ -437,8 +508,9 @@ button:disabled { opacity: 0.3; cursor: not-allowed; }
margin: 20px auto 30px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 8px;
border-radius: 0;
overflow: hidden;
box-shadow: 0 0 20px rgba(0,255,65,0.05);
}
.leaderboard-tabs {
Transcendence/srcs/frontend/src/tetris.html
+31 -1
View File
@@ -9,7 +9,9 @@
</head>
<body>
<h1>TETRIS</h1>
<canvas id="matrix-bg" style="position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:0.13;"></canvas>
<h1 data-text="TETRIS">TETRIS<span class="cursor">_</span></h1>
<!-- Bouton home -->
<div id="btn-home">
@@ -171,5 +173,33 @@
<script src="renderer.js"></script>
<script src="duel.js"></script>
<script src="ui.js"></script>
<script>
(function() {
const canvas = document.getElementById('matrix-bg');
const ctx = canvas.getContext('2d');
function resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }
resize();
window.addEventListener('resize', resize);
const chars = 'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン0123456789ABCDEF>_{}[]|\\/#@$%^&*01';
const fs = 14;
let drops = [];
function initDrops() { drops = Array(Math.floor(canvas.width / fs)).fill(1); }
initDrops();
window.addEventListener('resize', initDrops);
setInterval(function() {
ctx.fillStyle = 'rgba(0,5,0,0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.font = fs + 'px monospace';
for (let i = 0; i < drops.length; i++) {
const ch = chars[Math.floor(Math.random() * chars.length)];
ctx.fillStyle = drops[i] * fs < 50 ? '#aaffaa' : '#00ff41';
ctx.fillText(ch, i * fs, drops[i] * fs);
if (drops[i] * fs > canvas.height && Math.random() > 0.975) drops[i] = 0;
drops[i]++;
}
}, 40);
})();
</script>
</body>
</html>