Merge branch 'main' into fix/ingame-button-consistency-20260802

2026-08-02 05:10:30 +00:00
parent e645278367 2fef2803e5
commit 62bc1c9121
7 changed files with 663 additions and 83 deletions
@@ -0,0 +1,312 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import {
+    buildTournamentBracket,
+    type TournamentBracketMatch,
+    type TournamentBracketParticipant,
+    type TournamentBracketRound,
+    type TournamentBracketSlot,
+} from '../../utils/tournamentBracket';
+
+const props = defineProps<{
+    participants: TournamentBracketParticipant[];
+    matches: TournamentBracketMatch[];
+    winnerId?: number;
+    betTotals?: Record<number, number>;
+    totalBet: number;
+}>();
+
+const bracket = computed(() => buildTournamentBracket(props.participants, props.matches, props.winnerId));
+
+const mobileColumns = computed(() => [
+    bracket.value.top16.slots,
+    bracket.value.quarter.slots,
+    bracket.value.semi.slots,
+    bracket.value.final.slots,
+    [bracket.value.champion],
+]);
+const mobileX = [38, 118, 198, 278, 352];
+const mobileY = (columnIndex: number, slotIndex: number) => {
+    const slotHeight = 32 * 2 ** columnIndex;
+    return 16 + slotHeight / 2 + slotIndex * slotHeight;
+};
+const mobileConnections = computed(() =>
+    mobileColumns.value.slice(0, -1).flatMap((column, columnIndex) => {
+        const sourceX = mobileX[columnIndex]! + 32;
+        const targetX = mobileX[columnIndex + 1]! - 32;
+        const jointX = (sourceX + targetX) / 2;
+        return Array.from({ length: column.length / 2 }, (_, pairIndex) => {
+            const left = column[pairIndex * 2]!;
+            const right = column[pairIndex * 2 + 1]!;
+            const y1 = mobileY(columnIndex, pairIndex * 2);
+            const y2 = mobileY(columnIndex, pairIndex * 2 + 1);
+            return {
+                id: `${columnIndex}-${pairIndex}`,
+                sourceX,
+                targetX,
+                jointX,
+                y1,
+                y2,
+                parentY: (y1 + y2) / 2,
+                leftActive: left.advanced,
+                rightActive: right.advanced,
+                parentActive: left.advanced || right.advanced,
+            };
+        });
+    })
+);
+
+const roundStyle = (round: TournamentBracketRound) => ({ '--slot-count': round.slots.length });
+const connectorGroups = (slots: TournamentBracketSlot[]) =>
+    Array.from({ length: slots.length / 2 }, (_, index) => [slots[index * 2]!, slots[index * 2 + 1]!] as const);
+const odds = (id: number | null) => {
+    if (id === null) return '0';
+    const amount = props.betTotals?.[id] ?? 0;
+    if (!amount) return '∞';
+    return (props.totalBet / amount).toFixed(2);
+};
+</script>
+
+<template>
+    <section class="tournament-bracket" aria-label="토너먼트 대진표" tabindex="0">
+        <div class="bracket-canvas">
+            <div class="bracket-round bracket-champion" style="--slot-count: 1">
+                <span
+                    class="bracket-name"
+                    :class="{ advanced: bracket.champion.advanced }"
+                    :data-general-id="bracket.champion.id ?? undefined"
+                >
+                    {{ bracket.champion.name }}
+                </span>
+            </div>
+
+            <div class="connector-row" style="--connector-count: 1">
+                <span class="connector-segment">
+                    <i class="stem" :class="{ active: bracket.champion.advanced }"></i>
+                    <i class="arm left" :class="{ active: bracket.final.slots[0]?.advanced }"></i>
+                    <i class="arm right" :class="{ active: bracket.final.slots[1]?.advanced }"></i>
+                </span>
+            </div>
+
+            <template v-for="round in [bracket.final, bracket.semi, bracket.quarter]" :key="round.stage">
+                <div class="bracket-round" :style="roundStyle(round)">
+                    <span
+                        v-for="(slot, index) in round.slots"
+                        :key="`${round.stage}-${slot.id ?? 'empty'}-${index}`"
+                        class="bracket-name"
+                        :class="{ advanced: slot.advanced }"
+                        :data-general-id="slot.id ?? undefined"
+                    >
+                        {{ slot.name }}
+                    </span>
+                </div>
+                <div class="connector-row" :style="{ '--connector-count': round.slots.length }">
+                    <span
+                        v-for="(pair, index) in connectorGroups(
+                            round.stage === 10
+                                ? bracket.semi.slots
+                                : round.stage === 9
+                                  ? bracket.quarter.slots
+                                  : bracket.top16.slots
+                        )"
+                        :key="`${round.stage}-connector-${index}`"
+                        class="connector-segment"
+                    >
+                        <i class="stem" :class="{ active: pair[0].advanced || pair[1].advanced }"></i>
+                        <i class="arm left" :class="{ active: pair[0].advanced }"></i>
+                        <i class="arm right" :class="{ active: pair[1].advanced }"></i>
+                    </span>
+                </div>
+            </template>
+
+            <div class="bracket-round" :style="roundStyle(bracket.top16)">
+                <span
+                    v-for="(slot, index) in bracket.top16.slots"
+                    :key="`7-${slot.id ?? 'empty'}-${index}`"
+                    class="bracket-name"
+                    :class="{ advanced: slot.advanced }"
+                    :data-general-id="slot.id ?? undefined"
+                >
+                    {{ slot.name }}
+                </span>
+            </div>
+            <div class="bracket-round bracket-odds" :style="roundStyle(bracket.top16)">
+                <span
+                    v-for="(slot, index) in bracket.top16.slots"
+                    :key="`odds-${slot.id ?? 'empty'}-${index}`"
+                    :data-candidate="slot.name"
+                >
+                    {{ odds(slot.id) }}
+                </span>
+            </div>
+        </div>
+        <div class="mobile-bracket" aria-label="모바일 토너먼트 대진">
+            <svg viewBox="0 0 390 544" aria-hidden="true">
+                <g v-for="connection in mobileConnections" :key="connection.id">
+                    <path
+                        class="mobile-connector"
+                        :d="`M ${connection.sourceX} ${connection.y1} H ${connection.jointX} V ${connection.y2} M ${connection.sourceX} ${connection.y2} H ${connection.jointX} M ${connection.jointX} ${connection.parentY} H ${connection.targetX}`"
+                    />
+                    <path
+                        v-if="connection.leftActive"
+                        class="mobile-connector active"
+                        :d="`M ${connection.sourceX} ${connection.y1} H ${connection.jointX} V ${connection.parentY}`"
+                    />
+                    <path
+                        v-if="connection.rightActive"
+                        class="mobile-connector active"
+                        :d="`M ${connection.sourceX} ${connection.y2} H ${connection.jointX} V ${connection.parentY}`"
+                    />
+                    <path
+                        v-if="connection.parentActive"
+                        class="mobile-connector active"
+                        :d="`M ${connection.jointX} ${connection.parentY} H ${connection.targetX}`"
+                    />
+                </g>
+            </svg>
+            <template v-for="(column, columnIndex) in mobileColumns" :key="`mobile-column-${columnIndex}`">
+                <span
+                    v-for="(slot, slotIndex) in column"
+                    :key="`mobile-${columnIndex}-${slot.id ?? 'empty'}-${slotIndex}`"
+                    class="mobile-bracket-name"
+                    :class="{ advanced: slot.advanced }"
+                    :style="{ left: `${mobileX[columnIndex]}px`, top: `${mobileY(columnIndex, slotIndex)}px` }"
+                >
+                    {{ slot.name }}
+                </span>
+            </template>
+        </div>
+        <p>배당률이 낮을수록 베팅된 금액이 많고 유저들이 우승후보로 많이 선택한 장수입니다.</p>
+    </section>
+</template>
+
+<style scoped>
+.tournament-bracket {
+    overflow-x: auto;
+    padding: 10px 0;
+    scrollbar-color: #777 #24140e;
+}
+.bracket-canvas {
+    width: 2000px;
+    min-width: 2000px;
+    margin: 0 auto;
+}
+.mobile-bracket {
+    position: relative;
+    display: none;
+    width: 390px;
+    height: 544px;
+    margin: 0 auto;
+}
+.mobile-bracket svg {
+    position: absolute;
+    inset: 0;
+    width: 390px;
+    height: 544px;
+}
+.mobile-connector {
+    fill: none;
+    stroke: #fff;
+    stroke-width: 1;
+    vector-effect: non-scaling-stroke;
+}
+.mobile-connector.active {
+    stroke: #ff4b4b;
+}
+.mobile-bracket-name {
+    position: absolute;
+    z-index: 1;
+    width: 64px;
+    overflow: hidden;
+    transform: translate(-50%, -50%);
+    border: 1px solid #555;
+    background: rgb(58 33 24 / 92%);
+    color: #fff;
+    font-size: 12px;
+    line-height: 22px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.mobile-bracket-name.advanced {
+    border-color: #ff4b4b;
+    color: #ff4b4b;
+}
+.bracket-round,
+.connector-row {
+    display: grid;
+    grid-template-columns: repeat(var(--slot-count, var(--connector-count)), minmax(0, 1fr));
+    align-items: center;
+}
+.bracket-round {
+    min-height: 24px;
+}
+.bracket-name {
+    overflow: hidden;
+    padding: 0 3px;
+    color: #fff;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.bracket-name.advanced {
+    color: #ff4b4b;
+}
+.connector-row {
+    min-height: 24px;
+}
+.connector-segment {
+    position: relative;
+    display: block;
+    height: 24px;
+    color: #fff;
+}
+.connector-segment i {
+    position: absolute;
+    display: block;
+    color: inherit;
+    font-style: normal;
+}
+.connector-segment .stem {
+    top: 0;
+    left: 50%;
+    height: 13px;
+    border-left: 1px solid currentColor;
+}
+.connector-segment .arm {
+    top: 12px;
+    width: 25%;
+    height: 12px;
+    border-top: 1px solid currentColor;
+}
+.connector-segment .arm.left {
+    left: 25%;
+    border-left: 1px solid currentColor;
+}
+.connector-segment .arm.right {
+    right: 25%;
+    border-right: 1px solid currentColor;
+}
+.connector-segment .active {
+    color: #ff4b4b;
+}
+.bracket-odds {
+    color: skyblue;
+}
+.tournament-bracket p {
+    margin: 0;
+    color: skyblue;
+    font-size: 18px;
+}
+@media (max-width: 800px) {
+    .tournament-bracket {
+        width: 100vw;
+        max-width: 100vw;
+        overflow-x: hidden;
+    }
+    .bracket-canvas {
+        display: none;
+    }
+    .mobile-bracket {
+        display: block;
+    }
+}
+</style>
@@ -0,0 +1,76 @@
+export interface TournamentBracketParticipant {
+    id: number;
+    name: string;
+}
+
+export interface TournamentBracketMatch {
+    id: number;
+    stage: number;
+    roundIndex: number;
+    attackerId: number;
+    defenderId: number;
+    winnerId?: number;
+}
+
+export interface TournamentBracketSlot {
+    id: number | null;
+    name: string;
+    advanced: boolean;
+}
+
+export interface TournamentBracketRound {
+    stage: number;
+    slots: TournamentBracketSlot[];
+}
+
+export interface TournamentBracketModel {
+    champion: TournamentBracketSlot;
+    final: TournamentBracketRound;
+    semi: TournamentBracketRound;
+    quarter: TournamentBracketRound;
+    top16: TournamentBracketRound;
+}
+
+const emptySlot = (): TournamentBracketSlot => ({ id: null, name: '-', advanced: false });
+
+export const buildTournamentBracket = (
+    participants: TournamentBracketParticipant[],
+    matches: TournamentBracketMatch[],
+    winnerId?: number
+): TournamentBracketModel => {
+    const participantsById = new Map(participants.map((participant) => [participant.id, participant]));
+    const nameOf = (id: number | null): string =>
+        id === null ? '-' : (participantsById.get(id)?.name ?? `#${id}`);
+
+    const buildRound = (stage: number, slotCount: number): TournamentBracketRound => {
+        const roundMatches = matches
+            .filter((match) => match.stage === stage)
+            .sort((lhs, rhs) => lhs.roundIndex - rhs.roundIndex || lhs.id - rhs.id);
+        const slots: TournamentBracketSlot[] = roundMatches.flatMap((match) =>
+            [match.attackerId, match.defenderId].map((id) => ({
+                id,
+                name: nameOf(id),
+                advanced: match.winnerId === id,
+            }))
+        );
+        while (slots.length < slotCount) {
+            slots.push(emptySlot());
+        }
+        return { stage, slots: slots.slice(0, slotCount) };
+    };
+
+    const final = buildRound(10, 2);
+    const resolvedWinnerId = winnerId ?? matches.find((match) => match.stage === 10)?.winnerId ?? null;
+
+    return {
+        champion: {
+            id: resolvedWinnerId,
+            name: nameOf(resolvedWinnerId),
+            advanced: resolvedWinnerId !== null,
+        },
+        final,
+        semi: buildRound(9, 4),
+        quarter: buildRound(8, 8),
+        top16: buildRound(7, 16),
+    };
+};
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
+import TournamentBracket from '../components/tournament/TournamentBracket.vue';
 import { trpc } from '../utils/trpc';

 type Snapshot = Awaited<ReturnType<typeof trpc.tournament.getSnapshot.query>>;
@@ -60,27 +61,8 @@ const matchesAt = (stage: number) =>
        .filter((match) => match.stage === stage)
        .sort((a, b) => a.roundIndex - b.roundIndex);
 const nameOf = (id?: number) => (id ? (participantsById.value.get(id)?.name ?? `#${id}`) : '-');
-const roundNames = (stage: number, count: number) => {
-    const matches = matchesAt(stage);
-    const ids = matches.flatMap((match) => [match.attackerId, match.defenderId]);
-    return Array.from({ length: count }, (_, index) => nameOf(ids[index]));
-};
-const champion = computed(() => {
-    const winner = snapshot.value?.state?.winnerId ?? matchesAt(10)[0]?.winnerId;
-    return nameOf(winner);
-});
-const finalists = computed(() => roundNames(10, 2));
-const semiFinalists = computed(() => roundNames(9, 4));
-const quarterFinalists = computed(() => roundNames(8, 8));
-const top16 = computed(() => roundNames(7, 16));
 const totalBet = computed(() => betting.value?.totalAmount ?? 0);
-const odds = (id?: number) => {
-    if (!id) return '0';
-    const totals = betting.value?.totals as Record<number, number> | undefined;
-    const amount = totals?.[id] ?? 0;
-    if (!amount) return '∞';
-    return (totalBet.value / amount).toFixed(2);
-};
+const betTotals = computed(() => betting.value?.totals as Record<number, number> | undefined);
 const isParticipant = computed(() =>
    (snapshot.value?.participants ?? []).some((participant) => participant.id === myGeneralId.value)
 );
@@ -172,33 +154,14 @@ const start = async () => {
        </section>
        <section class="section-title bg2">16강 승자전</section>

-        <section class="bracket bg0" aria-label="토너먼트 대진표">
-            <div class="round champion">
-                <span>{{ champion }}</span>
-            </div>
-            <div class="connector">┻</div>
-            <div class="round final">
-                <span v-for="(name, index) in finalists" :key="index">{{ name }}</span>
-            </div>
-            <div class="connector">┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓</div>
-            <div class="round semi">
-                <span v-for="(name, index) in semiFinalists" :key="index">{{ name }}</span>
-            </div>
-            <div class="connector">┏━━━━━━━━━━┻━━━━━━━━━━┓&emsp;┏━━━━━━━━━━┻━━━━━━━━━━┓</div>
-            <div class="round quarter">
-                <span v-for="(name, index) in quarterFinalists" :key="index">{{ name }}</span>
-            </div>
-            <div class="connector">┏━━━━┻━━━━┓&emsp;┏━━━━┻━━━━┓&emsp;┏━━━━┻━━━━┓&emsp;┏━━━━┻━━━━┓</div>
-            <div class="round top16">
-                <span v-for="(name, index) in top16" :key="index">{{ name }}</span>
-            </div>
-            <div class="round odds">
-                <span v-for="(matchName, index) in top16" :key="index" :data-candidate="matchName">
-                    {{ odds(matchesAt(7).flatMap((match) => [match.attackerId, match.defenderId])[index]) }}
-                </span>
-            </div>
-            <p>배당률이 낮을수록 베팅된 금액이 많고 유저들이 우승후보로 많이 선택한 장수입니다.</p>
-        </section>
+        <TournamentBracket
+            class="bg0"
+            :participants="snapshot?.participants ?? []"
+            :matches="snapshot?.matches ?? []"
+            :winner-id="snapshot?.state?.winnerId"
+            :bet-totals="betTotals"
+            :total-bet="totalBet"
+        />

        <section v-if="currentMatch" class="fight bg0">
            <h2>{{ nameOf(currentMatch.attackerId) }} vs {{ nameOf(currentMatch.defenderId) }}</h2>
@@ -353,42 +316,6 @@ button:focus-visible {
    color: magenta;
    font-size: 24px;
 }
-.bracket {
-    padding: 10px 0;
-}
-.round {
-    display: grid;
-    align-items: center;
-    min-height: 24px;
-}
-.champion {
-    grid-template-columns: 1fr;
-}
-.final {
-    grid-template-columns: repeat(2, 1fr);
-}
-.semi {
-    grid-template-columns: repeat(4, 1fr);
-}
-.quarter {
-    grid-template-columns: repeat(8, 1fr);
-}
-.top16,
-.odds {
-    grid-template-columns: repeat(16, 125px);
-}
-.connector {
-    min-height: 24px;
-    white-space: pre;
-    color: #fff;
-}
-.odds {
-    color: skyblue;
-}
-.bracket p {
-    color: skyblue;
-    font-size: 18px;
-}
 .fight {
    padding: 8px;
    text-align: left;