Tournament matches

src/App.vue

@@ -35,7 +35,7 @@ onMounted(async () => {
   <Error/>
   <Toast/>
   <div class="flex flex-1 flex-col">
-    <routerView/>
+    <Suspense><routerView/></Suspense>
   </div>
   <Footer v-if="!$route.path.startsWith('/admin/')"/>
 </template>

src/components/GroupTable.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { Group } from '@/models/group';
+import type { Team } from '@/models/team';
+
+const props = defineProps<{
+  group: Group;
+  teams: Record<string, Team[]>;
+}>();
+const get_validated_team_by_id = (id: number) => props.teams.validated_teams.find((team) => team.id === id);
+
+</script>
+<template>
+  <table :key="group.id" border="1" class="text-bold text-3xl">
+    <thead>
+      <tr>
+        <th colspan="2" class="bg-slate-400 p-3 text-black">
+          {{ group.name }}
+        </th>
+      </tr>
+      <tr>
+        <th align="center" class="troncate border-separate border border-slate-500 bg-slate-200 p-4 text-black">
+          Equipe
+        </th>
+        <th align="center" class="border-separate border border-slate-500 bg-slate-200 p-4 text-black">
+          Score
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="team_id in group.teams" :key="team_id">
+        <td align="center" class="border-separate border border-slate-500 p-4">
+          {{
+            get_validated_team_by_id(team_id)?.name }}
+        </td>
+        <td align="center" class="border-separate border border-slate-500 p-4">
+          {{ group.scores[team_id] }}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>

src/components/KnockoutMatchCard.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+
+defineProps<{
+  teamPerMatch: number;
+  teams: Record<string, string | number | boolean | undefined>[];
+  status: string;
+}>();
+</script>
+
+<template>
+  <div v-for="idx in teamPerMatch" :key="idx" class="flex justify-between bg-slate-700 p-2 text-xl" :class="{ 'bg-slate-900': status == 'ONGOING' }">
+    <!-- max-w-lg min-w-[22rem]-->
+    <div class="text-grey-500">
+      {{ teams[idx - 1]?.name || "TBD" }}
+    </div> <div v-if="status == 'COMPLETED'" :class="teams[idx - 1]?.is_winner ? 'text-emerald-300' : 'text-white'" class="text-3xl font-black">
+      {{ teams[idx - 1]?.score }}
+    </div>
+    <div v-else class="text-3xl font-black">
+      0
+    </div>
+  </div>
+</template>

src/components/SwissRoundTable.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import KnockoutMatchCard from '@/components/KnockoutMatchCard.vue';
+
+defineProps<{
+  rounds: Record<string, Record<string, string | Record<string, string | number | boolean | undefined>[]>[]>;
+  teamPerMatch: number;
+  roundCount: number;
+}>();
+</script>
+
+<template>
+  <div class="grid h-full items-center gap-x-20 gap-y-5" :style="{ 'grid-template-columns': `repeat(${roundCount},26rem)` }">
+    <div v-for="round_idx in roundCount" :key="round_idx" class="flex flex-col">
+      <h1 class="text-4xl">
+        Tour {{ round_idx }}
+      </h1>
+    </div>
+    <div v-for="round_idx in roundCount" :key="round_idx" class="flex flex-col">
+      <div v-for="(match, idx) in rounds[round_idx]" :key="idx" class="my-3 divide-y">
+        <KnockoutMatchCard
+          :team-per-match="teamPerMatch"
+          :teams="(match.teams as Record<string, string | number | boolean | undefined>[])"
+          :status="(match.status as string)"
+        />
+      </div>
+    </div>
+  </div>
+</template>

src/main.ts

@@ -1,5 +1,6 @@
 import { library } from '@fortawesome/fontawesome-svg-core';
 import {
+  faArrowLeft,
   faArrowsRotate, faBolt, faChevronDown, faChevronUp,
   faCircle, faCircleCheck, faCirclePlus, faClock,
   faDownload, faEye, faEyeSlash,
@@ -37,6 +38,7 @@ library.add(
   faMagnifyingGlass,
   faTrashCan,
   faBolt,
+  faArrowLeft,
 );
 
 axios.defaults.baseURL = import.meta.env.VITE_API_URL;

src/models/bracket.ts

@@ -0,0 +1,26 @@
+import type { Match } from '@/models/match';
+
+export enum BracketType {
+  SINGLE = 'SINGLE',
+  DOUBLE = 'DOUBLE',
+}
+
+export enum BracketSet {
+  WINNER = 'WINNER',
+  LOOSER = 'LOOSER',
+}
+export interface Bracket {
+  id: number;
+  name: string;
+  tournament: number;
+  bracket_type: BracketType;
+  depth: number;
+  winner: number;
+  teams: number[];
+  matchs: KnockoutMatch[];
+}
+
+export interface KnockoutMatch extends Match {
+  bracket: Bracket;
+  bracket_set: BracketSet;
+}

src/models/game.ts

@@ -3,4 +3,5 @@ export interface Game {
   name: string;
   short_name?: string;
   players_per_team: number;
+  team_per_match: number;
 }

src/models/group.ts

@@ -0,0 +1,12 @@
+import type { Match } from '@/models/match';
+import type { Tournament } from '@/models/tournament';
+
+export interface Group {
+  id: number;
+  name: string;
+  tournament: Tournament;
+  matchs: Match[];
+  teams: number;
+  round_count: number;
+  scores: { [id:string]: number };
+}

src/models/match.ts

@@ -0,0 +1,52 @@
+import type { Team } from '@/models/team';
+
+export enum MatchStatus {
+  SCHEDULED = 'SCHEDULED',
+  ONGOING = 'ONGOING',
+  COMPLETED = 'COMPLETED',
+}
+
+export enum BestofType {
+  BO1 = 1,
+  BO3 = 3,
+  BO5 = 5,
+  BO7 = 7,
+  RANKING = 0,
+}
+export enum MatchTypeEnum {
+  GROUP = 'group',
+  BRACKET = 'bracket',
+  SWISS = 'swiss',
+}
+
+export interface BaseMatch {
+  id: number;
+  round_number: number;
+  score: Record<number, number>;
+  index_in_round: number;
+  status: MatchStatus;
+  bo_type: BestofType;
+}
+
+export interface MatchType {
+  id: number;
+  type: MatchTypeEnum;
+}
+
+export interface Match extends BaseMatch {
+  teams: number[];
+  times: number[];
+}
+export interface ScorePatch {
+  score: { [id: number]: number };
+  times: number[];
+}
+export interface OngoingMatch extends BaseMatch {
+  teams: { id: number; name: string }[];
+  match_type: MatchType;
+}
+export interface Score {
+  team: Team;
+  match: Match;
+  score: number;
+}

src/models/swiss.ts

@@ -0,0 +1,20 @@
+import type { Match } from '@/models/match';
+import type { Team } from '@/models/team';
+
+export interface SwissRound {
+  id: number;
+  tournament: number;
+  min_score: number;
+  teams: Team[];
+  matchs: SwissMatch[];
+}
+
+export interface SwissSeeding {
+  swiss: SwissRound;
+  team: Team;
+  seeding: number;
+}
+
+export interface SwissMatch extends Match {
+  swiss: SwissRound;
+}

src/models/tournament.ts

@@ -1,6 +1,9 @@
+import type { Bracket } from '@/models/bracket';
 import type { Caster } from '@/models/caster';
 import type { EventDeref } from '@/models/event';
 import type { Game } from '@/models/game';
+import type { Group } from '@/models/group';
+import type { SwissRound } from '@/models/swiss';
 import type { Team } from '@/models/team';
 
 interface BaseTournament {
@@ -17,7 +20,6 @@ interface BaseTournament {
   manager_price_online: string;
   manager_price_onsite: string;
   cashprizes: number[];
-  game: Game | Game['id'];
   manager_online_product: number;
   player_online_product: number;
   substitute_online_product: number;
@@ -30,8 +32,16 @@ interface BaseTournament {
 
 export interface TournamentDeref extends BaseTournament {
   event: EventDeref;
+  game: Game;
+  groups: Group[];
+  brackets: Bracket[];
+  swissRounds: SwissRound[];
 }
 
 export interface Tournament extends BaseTournament {
   event: number;
+  game: Game;
+  groups: Group[];
+  brackets: Bracket[];
+  swissRounds: SwissRound[];
 }