responsive tetris

Transcendence/srcs/frontend/src/tetris.css

@@ -49,11 +49,21 @@ body {
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     overflow: hidden;
     animation: flicker 8s infinite;
 }
 
+#scale-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: max-content;
+    position: relative;
+    z-index: 1;
+    /* transform et margin-bottom gérés par JS */
+}
+
 /* Grid lines */
 body::before {
     content: '';
@@ -536,7 +546,7 @@ button:disabled { opacity: 0.3; cursor: not-allowed; }
 
 .lb-tab--active {
     color: var(--accent);
-    background: rgba(0,255,231,0.05);
+    background: rgba(0,255,65,0.05);
     border-bottom: 2px solid var(--accent);
 }
 
@@ -605,4 +615,4 @@ button:disabled { opacity: 0.3; cursor: not-allowed; }
     color: var(--accent2);
 }
 
-body { overflow-y: auto; }
+body { overflow: hidden; }

Transcendence/srcs/frontend/src/tetris.html

@@ -11,6 +11,8 @@
 
 <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>
 
+<div id="scale-container">
+
 <h1 data-text="TETRIS">TETRIS<span class="cursor">_</span></h1>
 
 <!-- Bouton home -->
@@ -166,6 +168,7 @@
     </div>
 </div>
 
+</div><!-- #scale-container -->
 
 <script src="/socket.io/socket.io.js"></script>
 <script src="pieces.js"></script>
@@ -175,6 +178,31 @@
 <script src="ui.js"></script>
 
 <script>
+// ── Responsive scaling ──────────────────────────
+(function() {
+    const container = document.getElementById('scale-container');
+    // Dimensions naturelles du contenu (single-player)
+    const NAT_W = 640;
+    const NAT_H = 1020;
+
+    function resize() {
+        const s = Math.min(
+            window.innerWidth  / NAT_W,
+            window.innerHeight / NAT_H
+        );
+        container.style.transform       = 'scale(' + s + ')';
+        container.style.transformOrigin = 'top center';
+        // Compense l'espace de layout non affecté par transform
+        container.style.marginBottom    = ((s - 1) * NAT_H) + 'px';
+    }
+
+    resize();
+    window.addEventListener('resize', resize);
+})();
+</script>
+
+<script>
+// ── Matrix rain ──────────────────────────────────
 (function() {
     const canvas = document.getElementById('matrix-bg');
     const ctx = canvas.getContext('2d');