Add ghost piece preview showing where block will land

- Add getGhostY() method to TetrisGame class (game.js)
- Add ghostY to getState() output
- Add getGhostY() helper to server (server/index.js)
- Include ghostY in getStates() broadcast
- Add drawGhostPiece() and drawGhostCell() methods (renderer.js)
- Ghost renders as semi-transparent outline at landing position
This commit is contained in:
2026-03-20 09:37:41 -07:00
parent 708b1466d6
commit 164ed790ed
4 changed files with 62 additions and 6 deletions
+6 -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=6">
<link rel="stylesheet" href="css/style.css?v=7">
</head>
<body>
<div id="app">
@@ -61,10 +61,10 @@
</div>
<script src="/socket.io/socket.io.js"></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>
<script src="js/network.js?v=4"></script>
<script src="js/game.js?v=4"></script>
<script src="js/renderer.js?v=4"></script>
<script src="js/ui.js?v=4"></script>
<script src="js/app.js?v=4"></script>
</body>
</html>