From 8caadc3a7de0ca69ca49d155aec8d3a8ebf3150d Mon Sep 17 00:00:00 2001
From: Patrick McDavid <fusionjunky@gmail.com>
Date: Sun, 15 Dec 2024 19:08:14 -0700
Subject: [PATCH] feat: add sorted scoreboard feature to display player scores
 on game board

---
 src/views/gameBoard.vue | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/views/gameBoard.vue b/src/views/gameBoard.vue
index ba6a30f..67dab9c 100644
--- a/src/views/gameBoard.vue
+++ b/src/views/gameBoard.vue
@@ -42,6 +42,15 @@ export default {
             lightningLocations: []
         }
     },
+    computed: {
+        sortedScoreboard() {
+
+            const playersWithPoints = this.game.GamePlayers.filter(player => player.stats.gamePoint !== undefined && player.stats.gamePoint > 0);
+            return playersWithPoints.sort((a, b) => {
+                return b.stats.gamePoint - a.stats.gamePoint
+            })
+        }
+    },
     methods: {
         handleKeypress(event) {
             //console.log('Key pressed:', event.key);
@@ -556,6 +565,21 @@ export default {
                     </button>
                 </div>
             </div>
+            <div class="row" v-if="game.status == 'active'">
+                <div class="col-lg-6 offset-lg-3">
+                    <h2 class="mt-5">Scores</h2>
+                    <p class="small">Points are earned by holding the goal square when the game ticks. First player to <strong>five points</strong> wins!</p>
+                    <ol v-if="sortedScoreboard.length > 0">
+                        <li v-for="gp in sortedScoreboard">
+                            <strong>{{ gp.Player.name }}</strong> {{ gp.stats.gamePoint }} points{{ gp.stats.killedSomeone? `, ${gp.stats.killedSomeone} kills`:`` }}
+                        </li>
+                    </ol>
+                    <div v-else class="alert alert-info">
+                        No points yet! Get to that goal square!
+                    </div>
+                </div>
+
+            </div>
         </div>
     </main>
 </template>