Fix bug where fixtures were being auto-completed incorrectly

src/components/play/DebugButtons.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue"
+import { computed, watch } from "vue"
 
 import { useFixtureList } from "@/composables/useFixtureList"
 import { useFlyer } from "@/composables/useFlyer"
@@ -11,6 +11,8 @@ import { useTables } from "@/composables/useTables"
 
 import { FixtureStatus } from "@/data/FixtureStatus"
 
+import { useFixture } from "@/composables/useFixture"
+import { useRounds } from "@/composables/useRounds"
 import { useFlyerStore } from "@/stores/flyer"
 import { useUiStore } from "@/stores/ui"
 
@@ -28,18 +30,25 @@ const {
 const phaseEvents = usePhaseEvents(currentPhase.value)
 
 const {
-    phase,
     freeTables,
     getFixtureStatus,
 } = usePhase(currentPhase.value)
 
+const {
+    getRound,
+} = useRounds(currentPhase.value)
+
 const {
     remainingCount,
     nextFixture,
-} = useFixtureList(phase.value)
+} = useFixtureList(currentPhase.value)
 
 const {
+    round,
     raceTo,
+} = useFixture("debug", nextFixture.value, getRound(nextFixture.value?.id || ""), currentPhase.value)
+
+const {
     fixturesCanBeDrawn,
 } = usePhaseSpecification(currentPhase.value)
 
@@ -51,6 +60,10 @@ const {
     tables,
 } = useTables(currentPhase.value)
 
+watch(nextFixture, () => {
+    round.value = getRound(nextFixture.value?.id || "")
+})
+
 const isFixtures = computed(() => uiStore.isFixtures)
 
 const showAutoStartButton = computed(() => {
@@ -111,6 +124,7 @@ const autoCompleteRemaining = () => {
         return
     }
 
+    // BUG: this could be different for each fixture
     const fixtureRaceTo = raceTo.value || 1
 
     flyerStore.autoCompletePhase(

src/composables/useFixture.ts

@@ -1,6 +1,6 @@
-import { ref, computed, watch } from "vue"
 import { useArrayUnique } from "@vueuse/core"
 import { differenceInMilliseconds } from "date-fns"
+import { computed, ref, watch } from "vue"
 
 import { useArray } from "./useArray"
 import { useClock } from "./useClock"
@@ -16,6 +16,7 @@ import type { Round } from "@/data/Round"
 // where the argument can currently be undefined (see FixtureModal.vue)
 export const useFixture = (name: string, f: Fixture | undefined, r: Round | undefined, p: Phase | null) => {
     const fixture = ref(f)
+    const round = ref(r)
 
     const {
         clockable,
@@ -25,9 +26,13 @@ export const useFixture = (name: string, f: Fixture | undefined, r: Round | unde
     } = useClock("FixtureClock " + name, fixture.value || null)
 
     const {
-        round,
+        round: roundInternal,
         raceTo,
-    } = useRound(r, p)
+    } = useRound(round.value, p)
+
+    watch(round, () => {
+        roundInternal.value = round.value
+    })
 
     const {
         settings,