Add set-based scoring support for matches (#43)

Copilot · davidohnee · Copilot · web-flow · commit 3dd47f23bfaa · 2025-10-26T19:33:34.000+01:00
* Initial plan * Initial exploration of codebase Co-authored-by: davidohnee <48208462+davidohnee@users.noreply.github.com> * Add set-based scoring support to data types and UI Co-authored-by: davidohnee <48208462+davidohnee@users.noreply.github.com> * refactor sets implementation (#42) * Update src/components/modals/MatchEditorModal.vue Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update src/components/modals/MatchEditorModal.vue Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Apply suggestions from code review --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: davidohnee <48208462+davidohnee@users.noreply.github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/assets/css/dialogs.css b/src/assets/css/dialogs.css
@@ -1,6 +1,7 @@
 dialog[open] {
     border-radius: 1em;
     border: 1px solid var(--color-border);
+    max-height: 80vh;
 
     &::backdrop {
         background-color: rgba(0, 0, 0, 0.5);
@@ -25,6 +26,7 @@ dialog[open] {
         top: 0.5em;
         right: 0.5em;
         cursor: pointer;
+        font-size: 1.5em;
     }
 }
 
diff --git a/src/components/modals/MatchEditorModal.vue b/src/components/modals/MatchEditorModal.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { formatPlacement } from "@/helpers/common";
-import type { Match, MatchTeam, Tournament, Ref, MatchStatus } from "@/types/tournament";
+import type { Match, MatchTeam, Tournament, Ref, MatchStatus, SetScore } from "@/types/tournament";
 import { computed, ref } from "vue";
 import SegmentPicker from "../SegmentPicker.vue";
+import { calculateScoresFromSets } from "@/helpers/scoring";
 
 const props = defineProps<{
     modelValue: Match;
@@ -24,9 +25,59 @@ const onStatusChanged = () => {
 const scores = ref(match.value.teams.map((team) => team.score) ?? []);
 const onScoreChanged = (teamIndex: number) => {
     match.value.teams[teamIndex]!.score = scores.value[teamIndex]!;
+    if (useSets.value && sets.value.length > 0) {
+        scoreInSyncWithSets.value = false;
+    }
     onChanged();
 };
 
+const useSets = computed(() => props.tournament.config.useSets ?? false);
+const sets = ref<SetScore[]>(match.value.sets ?? []);
+
+const addSet = () => {
+    sets.value.push({ team1: 0, team2: 0 });
+    onSetsChanged();
+};
+
+const removeSet = (index: number) => {
+    sets.value.splice(index, 1);
+    onSetsChanged();
+};
+
+const scoreFromSets = computed(() => {
+    return calculateScoresFromSets(sets.value);
+});
+
+const scoreInSyncWithSets = ref(
+    sets.value.length > 0
+        ? scores.value.every((score, index) => score === scoreFromSets.value[index])
+        : true,
+);
+
+const onSetsChanged = () => {
+    match.value.sets = sets.value;
+    if (sets.value.length > 0 && scoreInSyncWithSets.value) {
+        // Auto-calculate scores from sets
+        const [team1Score, team2Score] = scoreFromSets.value;
+        scores.value = [team1Score, team2Score];
+
+        match.value.teams[0]!.score = team1Score;
+        match.value.teams[1]!.score = team2Score;
+    }
+    onChanged();
+};
+
+const syncScoresWithSets = () => {
+    scoreInSyncWithSets.value = true;
+    onSetsChanged();
+};
+
+const scoresOutOfSync = computed(() => {
+    if (!useSets.value || sets.value.length === 0) return false;
+    const [team1Score, team2Score] = scoreFromSets.value;
+    return scores.value[0] !== team1Score || scores.value[1] !== team2Score;
+});
+
 const matcheditor = ref<HTMLDialogElement | null>(null);
 const openMatchEditor = () => {
     if (matcheditor.value) {
@@ -95,6 +146,64 @@ defineExpose({
                     </div>
                 </div>
 
+                <div
+                    v-if="useSets"
+                    class="sets-section card"
+                >
+                    <div class="set-and-sync">
+                        <h3>Sets</h3>
+                        <button
+                            v-if="scoresOutOfSync"
+                            class="ghost text-sm"
+                            @click="syncScoresWithSets"
+                        >
+                            Sync Scores
+                        </button>
+                    </div>
+                    <div class="sets-list">
+                        <div
+                            v-for="(set, index) in sets"
+                            :key="index"
+                            class="set-row"
+                        >
+                            <span class="set-label">Set {{ index + 1 }}</span>
+                            <div class="set-scores">
+                                <input
+                                    type="number"
+                                    min="0"
+                                    v-model.number="set.team1"
+                                    @input="onSetsChanged"
+                                    class="set-score-input"
+                                />
+                                <span class="separator">:</span>
+                                <input
+                                    type="number"
+                                    min="0"
+                                    v-model.number="set.team2"
+                                    @input="onSetsChanged"
+                                    class="set-score-input"
+                                />
+                            </div>
+                            <button
+                                class="ghost"
+                                @click="removeSet(index)"
+                                title="Remove set"
+                            >
+                                <ion-icon name="trash-outline"></ion-icon>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="add-set">
+                        <button
+                            class="ghost"
+                            @click="addSet"
+                        >
+                            <ion-icon name="add-outline"></ion-icon>
+                            Add Set
+                        </button>
+                    </div>
+                </div>
+
                 <div class="match-status">
                     <SegmentPicker
                         v-model="match.status"
@@ -160,6 +269,66 @@ defineExpose({
     }
 }
 
+.sets-section {
+    margin-top: 2em;
+    padding-top: 1em;
+
+    h3 {
+        margin-bottom: 1em;
+        font-size: var(--typography-heading-fontSize-m);
+    }
+
+    .set-and-sync {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+    }
+
+    .add-set {
+        display: flex;
+        justify-content: center;
+    }
+}
+
+.sets-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75em;
+    margin-bottom: 1em;
+}
+
+.set-row {
+    display: grid;
+    grid-template-columns: 4rem 1fr auto;
+    align-items: center;
+    gap: 1em;
+
+    .set-label {
+        font-size: 0.9em;
+        color: var(--color-text-secondary);
+    }
+
+    .set-scores {
+        display: flex;
+        align-items: center;
+        gap: 0.5em;
+        justify-content: center;
+
+        .set-score-input {
+            width: 5ch;
+            text-align: center;
+            padding: 0.25em;
+            font-size: 1.1em;
+            margin-bottom: 0;
+        }
+
+        .separator {
+            font-size: 1.1em;
+            color: var(--color-text-secondary);
+        }
+    }
+}
+
 .match-status {
     width: max-content;
     margin-left: auto;
diff --git a/src/helpers/defaults.ts b/src/helpers/defaults.ts
@@ -8,16 +8,22 @@ interface Default {
     icon: string;
     matchDuration: number;
     breakDuration: number;
-    courtLabel: string;
-    courtLabelPlural?: string;
+    courtLabel: {
+        singular: string;
+        plural: string;
+    };
+    sets: {
+        supported: boolean;
+        default: boolean;
+    };
 }
 
 export const getCourtType = (sport: string, plural: boolean, capitalised: boolean): string => {
     const sportDefaults = DEFAULTS[sport] || DEFAULTS.other!;
 
     const courtLabel = plural
-        ? sportDefaults.courtLabelPlural || sportDefaults.courtLabel + "s"
-        : sportDefaults.courtLabel;
+        ? sportDefaults.courtLabel.plural || sportDefaults.courtLabel.singular + "s"
+        : sportDefaults.courtLabel.singular;
     return capitalised ? capitalise(courtLabel) : courtLabel;
 };
 
@@ -29,8 +35,14 @@ export const DEFAULTS: Record<string, Default> = {
         icon: "beer-outline",
         matchDuration: 10,
         breakDuration: 5,
-        courtLabel: "table",
-        courtLabelPlural: "tables",
+        courtLabel: {
+            singular: "table",
+            plural: "tables",
+        },
+        sets: {
+            supported: false,
+            default: false,
+        },
     },
     foosball: {
         name: "Foosball",
@@ -39,8 +51,14 @@ export const DEFAULTS: Record<string, Default> = {
         icon: "football-outline",
         matchDuration: 15,
         breakDuration: 5,
-        courtLabel: "table",
-        courtLabelPlural: "tables",
+        courtLabel: {
+            singular: "table",
+            plural: "tables",
+        },
+        sets: {
+            supported: true,
+            default: true,
+        },
     },
     other: {
         name: "Other",
@@ -49,8 +67,14 @@ export const DEFAULTS: Record<string, Default> = {
         icon: "help-outline",
         matchDuration: 15,
         breakDuration: 5,
-        courtLabel: "court",
-        courtLabelPlural: "courts",
+        courtLabel: {
+            singular: "court",
+            plural: "courts",
+        },
+        sets: {
+            supported: true,
+            default: false,
+        },
     },
 };
 
diff --git a/src/helpers/scoring.ts b/src/helpers/scoring.ts
@@ -1,4 +1,4 @@
-import type { TeamScore } from "@/types/tournament";
+import type { TeamScore, SetScore } from "@/types/tournament";
 
 export const calculateTeamPoints = (teamScore: TeamScore): number => {
     return teamScore.wins * 3 + teamScore.draws;
@@ -11,3 +11,18 @@ export const calculateDifference = (teamScore: TeamScore): string => {
     }
     return diff.toString();
 };
+
+export const calculateScoresFromSets = (sets: SetScore[]): [number, number] => {
+    let team1Score = 0;
+    let team2Score = 0;
+    
+    for (const set of sets) {
+        if (set.team1 > set.team2) {
+            team1Score++;
+        } else if (set.team2 > set.team1) {
+            team2Score++;
+        }
+    }
+    
+    return [team1Score, team2Score];
+};
diff --git a/src/types/tournament.ts b/src/types/tournament.ts
@@ -36,6 +36,11 @@ export type DynamicTeamRef = {
     fromRound?: number;
 };
 
+export type SetScore = {
+    team1: number;
+    team2: number;
+};
+
 export type MatchTeam = {
     ref?: Ref;
     score: number;
@@ -55,6 +60,7 @@ export interface Match {
     date: Date;
     status: MatchStatus;
     round?: MatchRound; // used only for group phase matches
+    sets?: SetScore[]; // set scores when using set-based scoring
 }
 
 export interface RichMatch {
@@ -82,6 +88,7 @@ export interface TournamentConfigV2 {
     knockoutBreakDuration: number;
     startTime: Date;
     sport: string;
+    useSets?: boolean; // whether to use set-based scoring
 }
 
 export interface TournamentConfigV1 extends TournamentConfigV2 {
diff --git a/src/views/Create/BasicsView.vue b/src/views/Create/BasicsView.vue

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`dialog[open] {`
`2`	`2`	`border-radius: 1em;`
`3`	`3`	`border: 1px solid var(--color-border);`
	`4`	`+ max-height: 80vh;`
`4`	`5`
`5`	`6`	`&::backdrop {`
`6`	`7`	`background-color: rgba(0, 0, 0, 0.5);`
`@@ -25,6 +26,7 @@ dialog[open] {`
`25`	`26`	`top: 0.5em;`
`26`	`27`	`right: 0.5em;`
`27`	`28`	`cursor: pointer;`
	`29`	`+ font-size: 1.5em;`
`28`	`30`	`}`
`29`	`31`	`}`
`30`	`32`