Initial commit: Tetris Battle Royale multiplayer game

Features: - 2-8 player multiplayer via Socket.io WebSocket - Real-time board synchronization - all players see all boards - Battle royale mechanic: clearing rows sends garbage to opponents - Classic Tetris gameplay with all 7 tetrominoes - Retro visual styling with CRT scanlines and pixel font - Automatic level progression and speed increase - Player elimination and winner announcement Files: - server/index.js: Node.js + Socket.io game server - public/js/: Frontend game logic, rendering, network, and UI - public/css/style.css: Retro Tetris styling - README.md: Setup and usage instructions - PLAN.md: Implementation plan with all phases completed
2026-03-20 00:34:06 -07:00
commit 5da6033704
13 changed files with 3203 additions and 0 deletions
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Tetris Battle Royale</title>
+  <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=Press+Start+2P&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+  <div id="app">
+    <!-- Room Selection Screen -->
+    <div id="room-screen" class="screen active">
+      <h1>TETRIS<br>BATTLE ROYALE</h1>
+      <div class="form-group">
+        <label for="room-name">Room Name</label>
+        <input type="text" id="room-name" placeholder="Enter room name">
+      </div>
+      <div class="form-group">
+        <label for="player-name">Your Name</label>
+        <input type="text" id="player-name" placeholder="Enter your name">
+      </div>
+      <button id="join-btn">JOIN ROOM</button>
+    </div>
+
+    <!-- Lobby Screen -->
+    <div id="lobby-screen" class="screen">
+      <h2>Room: <span id="lobby-room-name"></span></h2>
+      <div id="player-list"></div>
+      <button id="ready-btn">READY</button>
+    </div>
+
+    <!-- Game Screen -->
+    <div id="game-screen" class="screen">
+      <div id="game-header">
+        <span id="game-room-name"></span>
+        <button id="leave-btn">LEAVE</button>
+      </div>
+      <div id="battle-grid"></div>
+      <div id="game-status"></div>
+    </div>
+
+    <!-- Game Over Screen -->
+    <div id="gameover-screen" class="screen">
+      <h2>GAME OVER</h2>
+      <h3 id="winner-display"></h3>
+      <div id="final-scores"></div>
+      <button id="back-to-lobby">BACK TO LOBBY</button>
+    </div>
+  </div>
+
+  <script src="/socket.io/socket.io.js"></script>
+  <script src="js/network.js"></script>
+  <script src="js/game.js"></script>
+  <script src="js/renderer.js"></script>
+  <script src="js/ui.js"></script>
+  <script src="js/app.js"></script>
+</body>
+</html>