diff --git a/public/css/style.css b/public/css/style.css index 39aa6ef..30029a8 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -397,6 +397,16 @@ button:active { color: #0f0; } +#final-scores .score-item.eliminated { + border-color: #f00; + opacity: 0.7; +} + +#final-scores .score-item span:last-child { + color: #888; + font-size: 0.7rem; +} + /* Game Over Overlay */ #gameover-screen { position: fixed; diff --git a/public/index.html b/public/index.html index 7abe997..c0634a9 100644 --- a/public/index.html +++ b/public/index.html @@ -7,7 +7,7 @@ - +
diff --git a/public/js/app.js b/public/js/app.js index 65755fd..03e120e 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -214,11 +214,15 @@ function endGame(states) { winner = winnerPlayer.name; } - // Build scores list + // Build scores list with garbage info Object.values(states).forEach(state => { const player = network.getPlayer(state.playerId); if (player) { - scores[player.name] = state.score; + scores[player.name] = { + score: state.score, + garbageReceived: (state.garbageReceived || []).length, + eliminated: state.eliminated + }; } }); diff --git a/public/js/ui.js b/public/js/ui.js index cd4178c..06da636 100644 --- a/public/js/ui.js +++ b/public/js/ui.js @@ -140,12 +140,14 @@ class UIManager { this.displays.winnerDisplay.style.color = winner ? '#0f0' : '#fff'; this.displays.finalScores.innerHTML = ''; - Object.entries(scores).forEach(([name, score], index) => { + Object.entries(scores).forEach(([name, data], index) => { const item = document.createElement('div'); item.className = 'score-item' + (index === 0 ? ' winner' : ''); + if (data.eliminated) item.classList.add('eliminated'); item.innerHTML = ` ${this.escapeHtml(name)} - ${score} + Score: ${data.score} + Garbage: ${data.garbageReceived} `; this.displays.finalScores.appendChild(item); }); diff --git a/server/index.js b/server/index.js index 0f1579f..c3c53a7 100644 --- a/server/index.js +++ b/server/index.js @@ -115,7 +115,8 @@ io.on('connection', (socket) => { eliminated: false, ready: false, dropCounter: 0, - dropInterval: 1000 + dropInterval: 1000, + garbageReceived: [] }; lobby.players.set(socket.id, player); @@ -479,6 +480,9 @@ function addGarbageToPlayer(player, senderName) { garbageRow[gap] = 0; player.board.push(garbageRow); + // Track garbage received + player.garbageReceived.push({ rows: 1, sender: senderName }); + // Push current piece up by 1 row if it exists (y decreases when moving up) if (player.currentPiece) { const oldY = player.currentPiece.y; @@ -519,6 +523,7 @@ function startGame() { player.dropInterval = 1000; player.holdPiece = null; player.canHold = true; + player.garbageReceived = []; lobby.playerSequenceIndex.set(player.id, 0); } @@ -578,7 +583,8 @@ function getStates() { lines: p.lines, level: p.level, eliminated: p.eliminated, - sequenceIndex: lobby.playerSequenceIndex.get(p.id) || 0 + sequenceIndex: lobby.playerSequenceIndex.get(p.id) || 0, + garbageReceived: p.garbageReceived ? JSON.parse(JSON.stringify(p.garbageReceived)) : [] })); }