Include results in spectate mode

src/components/GameOverview.vue

@@ -57,9 +57,34 @@
  @undo="emit('undo')"
  ></component>
  </div>
+
+ <div v-if="game && somePlayersFinished">
+ <button v-if="allPlayersFinished && showInput" @click="emit('undo')">
+ &#x232B;
+ </button>
+ <h2>Results</h2>
+ <ol>
+ <li
+ v-for="(id, i) in gameState?.rank"
+ style="display: flex; justify-content: space-between"
+ >
+ <span> {{ i + 1 }}. {{ gameState?.getUserResultText(id) }} </span>
+ <span
+ v-if="getEloText && getEloColor"
+ style="margin-left: 1em"
+ :style="{ color: getEloColor(id) }"
+ >{{ getEloText(id) }}</span
+ >
+ </li>
+ </ol>
+ <div v-if="showInput" class="col">
+ <button @click="emit('save')">Save Game</button>
+ </div>
+ </div>
 </template>
 
 <script lang="ts" setup>
+import { speak } from '@/functions/speak'
 import { getGameDisplayName, getInputComponent } from '@/games/games'
 import { useModalStore } from '@/stores/modal'
 import { useUsersStore } from '@/stores/users'
@@ -70,20 +95,23 @@ import {
  Segment,
  getLegOfUser,
 } from '@/types/game'
-import { computed } from 'vue'
+import { computed, watch } from 'vue'
 import InGameSummary from './InGameSummary.vue'
 
 const props = defineProps<{
  game: Game
  gameState: GameState
  gameController: GameController<GameState>
  showInput: boolean
+ getEloText?: (id: string) => string
+ getEloColor?: (id: string) => string
 }>()
 
 const emit = defineEmits<{
  hit: [segment: Segment]
  miss: []
  undo: []
+ save: []
 }>()
 
 const usersStore = useUsersStore()
@@ -92,6 +120,10 @@ const allPlayersFinished = computed(
  () => (props.game?.legs.length ?? 0) == (props.gameState?.rank.length ?? 0)
 )
 
+const somePlayersFinished = computed(
+ () => (props.gameState?.rank.length ?? 0) > 0
+)
+
 const displayVisit = computed(() => {
  if (!props.game || !props.gameState?.player)
  return { visit: [null, null, null], isPrev: false }
@@ -112,4 +144,44 @@ const clickUser = (userId: string) => {
  if (!leg || !user) return
  useModalStore().push(InGameSummary, { leg, user }, {})
 }
+
+watch(
+ () => props.gameState?.player,
+ (userId) => {
+ if (userId) {
+ const btn = document.getElementById(userId)
+ btn?.scrollIntoView({ behavior: 'smooth', inline: 'center' })
+ }
+ }
+)
+
+watch(
+ () => props.gameState?.getTopRightText(),
+ (text) => {
+ if (text) setTimeout(() => speak(text), 1000)
+ },
+ { immediate: true }
+)
 </script>
+
+<style scoped>
+.grid-users {
+ display: grid;
+ column-gap: 1em;
+ row-gap: 1em;
+ grid-template-columns: 1fr 1fr;
+}
+
+button {
+ flex: 1;
+}
+
+.outlined {
+ outline: 1px solid var(--c-green);
+}
+
+li {
+ font-size: 14pt;
+ padding-bottom: 0.5em;
+}
+</style>

src/views/GameView.vue

@@ -22,40 +22,19 @@
  :game="gameStore.game"
  :game-state="gameStore.gameState"
  :game-controller="gameStore.getController()"
+ :get-elo-text="getEloText"
+ :get-elo-color="getEloColor"
  @hit="gameStore.getController().recordHit($event)"
  @miss="gameStore.getController().recordMiss()"
  @undo="gameStore.undoScore()"
+ @save="saveGame"
  ></GameOverview>
-
- <div v-if="gameStore.game && somePlayersFinished">
- <button v-if="allPlayersFinished" @click="gameStore.undoScore()">
- &#x232B;
- </button>
- <h2>Results</h2>
- <ol>
- <li
- v-for="(id, i) in gameStore.gameState?.rank"
- style="display: flex; justify-content: space-between"
- >
- <span>
- {{ i + 1 }}. {{ gameStore.gameState?.getUserResultText(id) }}
- </span>
- <span style="margin-left: 1em" :style="{ color: getEloColor(id) }">{{
- getEloText(id)
- }}</span>
- </li>
- </ol>
- <div class="col">
- <button @click="saveGame">Save Game</button>
- </div>
- </div>
 </template>
 
 <script lang="ts" setup>
 import GameOverview from '@/components/GameOverview.vue'
 import Prompt from '@/components/Prompt.vue'
 import Youtube from '@/components/Youtube.vue'
-import { speak } from '@/functions/speak'
 import { router } from '@/router'
 import { useAuthStore } from '@/stores/auth'
 import { useEloStore } from '@/stores/elo'
@@ -65,7 +44,7 @@ import { useModalStore } from '@/stores/modal'
 import { useOnlineStore } from '@/stores/online'
 import { useOptionsStore } from '@/stores/options'
 import { roundToNDecimals } from '@/stores/stats'
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
 
 const gameStore = useGameStore()
 const loadingStore = useLoadingStore()
@@ -74,16 +53,6 @@ const authStore = useAuthStore()
 
 const eloDeltas = ref<{ userId: string; eloDelta: number }[]>([])
 
-const allPlayersFinished = computed(
- () =>
- (gameStore.game?.legs.length ?? 0) ==
- (gameStore.gameState?.rank.length ?? 0)
-)
-
-const somePlayersFinished = computed(
- () => (gameStore.gameState?.rank.length ?? 0) > 0
-)
-
 onMounted(async () => {
  if (!gameStore.game) {
  quit()
@@ -153,24 +122,6 @@ const saveGame = async () => {
  })
 }
 
-watch(
- () => gameStore.gameState?.player,
- (userId) => {
- if (userId) {
- const btn = document.getElementById(userId)
- btn?.scrollIntoView({ behavior: 'smooth', inline: 'center' })
- }
- }
-)
-
-watch(
- () => gameStore.gameState?.getTopRightText(),
- (text) => {
- if (text) setTimeout(() => speak(text), 1000)
- },
- { immediate: true }
-)
-
 watch(
  () => gameStore.gameState?.rank.length,
  async () => {
@@ -195,25 +146,3 @@ const getEloColor = (userId: string) => {
  return eloDelta > 0 ? '#127a16' : '#ad1717'
 }
 </script>
-
-<style scoped>
-.grid-users {
- display: grid;
- column-gap: 1em;
- row-gap: 1em;
- grid-template-columns: 1fr 1fr;
-}
-
-button {
- flex: 1;
-}
-
-.outlined {
- outline: 1px solid var(--c-green);
-}
-
-li {
- font-size: 14pt;
- padding-bottom: 0.5em;
-}
-</style>

src/views/SpectateView.vue

@@ -13,7 +13,10 @@
  :game-controller="gameController"
  ></GameOverview>
  </template>
- <p v-else>{{ name }} is not in game.</p>
+ <p v-else-if="onlineStore.getSpectating">
+ {{ name }} is playing. Waiting for update..
+ </p>
+ <p v-else>{{ name }} is active, but not currently playing.</p>
 </template>
 
 <script lang="ts" setup>