1) Added new Scoreboard component for tallying scores of a different

   game.
2) Added assets for same.
3) Added test coverage for same.

src/components/Scoreboard/Scoreboard.vue

@@ -0,0 +1,82 @@
+<template lang="pug">
+GameContentWithSidebar(:players='players')
+  template(v-slot:content)
+    ChooseItemModal(
+      :items='playerItems'
+      :fragmentItemReveal='fragmentItemReveal'
+      :question='question'
+      :headerImage='headerImage'
+      @guess='pickWinner'
+      :selectedPlayer='null'
+    )
+</template>
+
+<script>
+import { mapActions, mapGetters, mapState } from 'pinia'
+import { useGameStore } from '@/store'
+
+import GameContentWithSidebar from '@/components/base/GameContentWithSidebar.vue'
+import ChooseItemModal from '@/components/base/ChooseItemModal.vue'
+
+export default {
+  name: 'Scoreboard',
+  components: {
+    GameContentWithSidebar,
+    ChooseItemModal
+  },
+  props: {
+    question: String,
+    prize: {
+      default: 1,
+      type: Number
+    },
+    headerImage: {
+      default: '/images/scoreboard.avif',
+      type: String
+    },
+    fragmentItemReveal: {
+      default: false,
+      type: Boolean
+    }
+  },
+  computed: {
+    players () {
+      const players = []
+
+      this.getPlayersByScore.forEach((player) => {
+        players.push({
+          name: player.name,
+          value: player.score
+        })
+      })
+
+      return players
+    },
+    playerItems () {
+      const players = []
+
+      this.game.players.forEach((player) => {
+        players.push({
+          name: player.name,
+          value: player.name,
+          emoji: ''
+        })
+      })
+
+      return players
+    },
+    ...mapState(useGameStore, ['game']),
+    ...mapGetters(useGameStore, ['getPlayersByScore'])
+  },
+  methods: {
+    pickWinner (guess) {
+      this.increasePlayerScore(this.playerItems[guess.value].name, this.prize)
+
+      const audio = new Audio('/sounds/sonic_ring.mp3')
+      audio.volume = 0.2
+      audio.play()
+    },
+    ...mapActions(useGameStore, ['increasePlayerScore'])
+  }
+}
+</script>

tests/unit/Scoreboard/Scoreboard.spec.js

@@ -0,0 +1,87 @@
+import { mount } from '@vue/test-utils'
+
+import { createTestingPinia } from '@pinia/testing'
+
+import Scoreboard from '@/components/Scoreboard/Scoreboard.vue'
+
+describe('Scoreboard Empty', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = mount(Scoreboard, {
+      props: {
+        question: 'Which player answered correctly?'
+      },
+      global: {
+        plugins: [createTestingPinia()]
+      }
+    })
+  })
+
+  it('renders with no players', async () => {
+    expect(wrapper.vm.game.players.length).toBe(0)
+  })
+})
+
+describe('Scoreboard', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = mount(Scoreboard, {
+      props: {
+        question: 'Which player answered correctly?'
+      },
+      global: {
+        plugins: [createTestingPinia({
+          stubActions: false,
+          initialState: {
+            'hack.party game board': {
+              game: {
+                players: [
+                  {
+                    index: 0,
+                    name: 'Morty',
+                    score: 0,
+                    team: undefined
+                  },
+                  {
+                    index: 1,
+                    name: 'noob noob',
+                    score: 0,
+                    team: undefined
+                  },
+                  {
+                    index: 2,
+                    name: 'Rick',
+                    score: 0,
+                    team: undefined
+                  }
+                ]
+              }
+            }
+          }
+        })]
+      }
+    })
+  })
+
+  it('renders with players', async () => {
+    expect(wrapper.vm.game.players.length).toBe(3)
+  })
+
+  it('awards a point to the first player', async () => {
+    const button = await wrapper.find('button')
+    await button.trigger('click')
+
+    debugger
+
+    expect(wrapper.vm.game.players[0].score).toBe(1)
+  })
+
+  it('awards a point to the third player', async () => {
+    const buttons = await wrapper.findAll('button')
+    await buttons[2].trigger('click')
+
+    expect(wrapper.vm.game.players[2].score).toBe(1)
+  })
+})