Add hold piece feature

- Added holdPiece and canHold state to TetrisGame class
- Implemented hold() method to swap current piece with held piece
- Added player-hold socket event on server
- Added HOLD preview canvas showing held piece (grayed when unavailable)
- Added C key keyboard shortcut and touch button for hold
- Fixed canHold reset on piece spawn for proper swap functionality

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-20 08:50:52 -07:00
parent cde1643606
commit 4a49c76cdc
8 changed files with 410 additions and 8 deletions
+19 -6
View File
@@ -7,7 +7,7 @@
<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?v=2">
<link rel="stylesheet" href="css/style.css?v=6">
</head>
<body>
<div id="app">
@@ -36,6 +36,19 @@
</div>
<div id="battle-grid"></div>
<div id="game-status"></div>
<!-- Touch Controls -->
<div id="touch-controls">
<div id="touch-dpad">
<button id="btn-left" class="touch-btn"></button>
<button id="btn-down" class="touch-btn"></button>
<button id="btn-right" class="touch-btn"></button>
</div>
<div id="touch-actions">
<button id="btn-rotate" class="touch-btn action-btn"></button>
<button id="btn-drop" class="touch-btn drop-btn"></button>
<button id="btn-hold" class="touch-btn hold-btn">HOLD</button>
</div>
</div>
</div>
<!-- Game Over Screen (Overlay) -->
@@ -48,10 +61,10 @@
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="js/network.js?v=2"></script>
<script src="js/game.js?v=2"></script>
<script src="js/renderer.js?v=2"></script>
<script src="js/ui.js?v=2"></script>
<script src="js/app.js?v=2"></script>
<script src="js/network.js?v=3"></script>
<script src="js/game.js?v=3"></script>
<script src="js/renderer.js?v=3"></script>
<script src="js/ui.js?v=3"></script>
<script src="js/app.js?v=3"></script>
</body>
</html>