improve: show all players stats in room (closes #27) (#46)

* improve(i9): show all players' stats in room (closes #27)

* chore: add screenshot

---------

Co-authored-by: its-clawdia <clawdia@mailbox.org>

Author: its-clawdia

client/css/main.css

@@ -376,3 +376,19 @@ svg pattern path { stroke-width: 2; }
     padding: 2px 6px;
 }
 #tutorialClose:hover { color: #000; }
+
+/* ── Player stats bar (multiplayer) ───────────────────── */
+#playerStats {
+    display: flex;
+    gap: 12px;
+    justify-content: center;
+    flex-wrap: wrap;
+    padding: 6px 12px;
+    font-size: 0.8em;
+    color: #555;
+}
+#playerStats .pstat {
+    background: #f0f0f0;
+    border-radius: 12px;
+    padding: 3px 10px;
+}

client/index.html

@@ -28,6 +28,7 @@
 			<span id="cardsLeft">0</span>
 		</div>
 	</div>
+	<div id="playerStats" style="display:none"></div>
 	<div id="board">
 		<div class="card"></div>
 		<div class="card"></div>

client/js/app.js

@@ -28,6 +28,7 @@ $(function () {
             }, 300)
             renderBoardUpdate(null, data.board)
             renderStatsUpdate(data.stats)
+            renderPlayerStats(data.allPlayerStats)
             if(!welcomeBack) {
                 showTutorial()
                 localStorage.setItem('welcomeBack_' + location.hostname, 'hell yeah')
@@ -70,6 +71,7 @@ $(function () {
         try {
             var data = JSON.parse(json)
             if(data.correct) {
+                renderPlayerStats(data.allPlayerStats)
                 var reason = 'good solution'
                 //handle correct solution
                 console.log(data)
@@ -135,6 +137,7 @@ $(function () {
             })
             renderBoardUpdate(data.oldCardsCids, data.newCards)
             $('.card.selected').removeClass('selected')
+            renderPlayerStats(data.allPlayerStats)
             if(data.stats && data.stats.cardsLeft !== undefined) {
                 $('#cardsLeft').html(data.stats.cardsLeft)
             }
@@ -203,6 +206,14 @@ $(function () {
             prompt('Share this link:', url)
         }
     })
+    function renderPlayerStats(allStats) {
+        if(!allStats || allStats.length <= 1) { $('#playerStats').hide(); return; }
+        var html = allStats.map(function(p) {
+            return '<span class="pstat">P' + p.playerNum + ': <strong>' + p.points + '</strong>pt (' + p.goodAttempts + '✓ ' + p.badAttempts + '✗)</span>';
+        }).join('');
+        $('#playerStats').html(html).show();
+    }
+
     var _turnToastEl = null
     var _turnToastInterval = null
 

screenshot.png

@@ -184,6 +184,13 @@ Session.prototype.getStatsFor = function(pid) {
 	stats.cardsLeft = this.deck.cards.length;
 	return stats
 }
+Session.prototype.getAllPlayerStats = function() {
+	var cardsLeft = this.deck.cards.length;
+	return Object.keys(this.players).map(function(pid, i) {
+		var s = this.players[pid].stats;
+		return { playerNum: i + 1, points: s.points, goodAttempts: s.goodAttempts, badAttempts: s.badAttempts, cardsLeft: cardsLeft };
+	}, this);
+}
 Session.prototype.drawCards = function(cidsToDelete, count) {
 	var that = this;
 	count = count || 3;
@@ -340,6 +347,7 @@ io.on('connection', function(socket){
 		else if(session.isSolution(solutionCids)) {
 			var newCards = session.drawCards(solutionCids);
 			stats = session.turnEnd('good solution');
+			var allStats = session.getAllPlayerStats();
 			//needs a check if this has worked!
 
 			// Auto-deal if no valid set remains on board
@@ -353,14 +361,16 @@ io.on('connection', function(socket){
 				oldCardsCids: solutionCids,
 				newCards: newCards,
 				autoDeal: autoDeal,
-				stats: stats
+				stats: stats,
+				allPlayerStats: allStats
 			}));
 
 			socket.broadcast.emit('solution_found', JSON.stringify({
 				oldCardsCids: solutionCids,
 				newCards: newCards,
 				autoDeal: autoDeal,
-				stats: { cardsLeft: session.deck.cards.length }
+				stats: { cardsLeft: session.deck.cards.length },
+				allPlayerStats: allStats
 			}));
 		}
 		else {