fix(frontend): render responsive tournament bracket
This commit is contained in:
@@ -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">┏━━━━━━━━━━┻━━━━━━━━━━┓ ┏━━━━━━━━━━┻━━━━━━━━━━┓</div>
|
||||
<div class="round quarter">
|
||||
<span v-for="(name, index) in quarterFinalists" :key="index">{{ name }}</span>
|
||||
</div>
|
||||
<div class="connector">┏━━━━┻━━━━┓ ┏━━━━┻━━━━┓ ┏━━━━┻━━━━┓ ┏━━━━┻━━━━┓</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;
|
||||
|
||||
Reference in New Issue
Block a user