devsam/core2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(game-ui): standardize tournament icons at 64px

Browse Source
This commit is contained in:
Hide_D
2026-08-13 16:45:51 +00:00
parent f4db6652cb
commit 3d147bfa72
8 changed files with 283 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/game-frontend/src/components/tournament/TournamentBracket.vue
+190 -265
View File
@@ -1,12 +1,10 @@
<script setup lang="ts">
import { computed } from 'vue';
import { computed, ref } from 'vue';
import GeneralIdentity from '../ui/GeneralIdentity.vue';
import {
buildTournamentBracket,
type TournamentBracketMatch,
type TournamentBracketParticipant,
type TournamentBracketRound,
type TournamentBracketSlot,
} from '../../utils/tournamentBracket';
const props = defineProps<{
@@ -15,34 +13,35 @@ const props = defineProps<{
winnerId?: number;
betTotals?: Record<number, number>;
totalBet: number;
forceDesktop?: boolean;
showLegend?: boolean;
}>();
const bracket = computed(() => buildTournamentBracket(props.participants, props.matches, props.winnerId));
const mobileColumns = computed(() => [
const activeMobileRound = ref(0);
const roundLabels = ['16강', '8강', '4강', '결승', '우승'];
const roundColumns = 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 desktopX = [110, 355, 600, 845, 1090];
const cardWidth = 190;
const slotY = (columnIndex: number, slotIndex: number) => {
const slotHeight = 72 * 2 ** columnIndex;
return 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 connections = computed(() =>
roundColumns.value.slice(0, -1).flatMap((column, columnIndex) => {
const sourceX = desktopX[columnIndex]! + cardWidth / 2;
const targetX = desktopX[columnIndex + 1]! - cardWidth / 2;
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);
const upper = column[pairIndex * 2]!;
const lower = column[pairIndex * 2 + 1]!;
const y1 = slotY(columnIndex, pairIndex * 2);
const y2 = slotY(columnIndex, pairIndex * 2 + 1);
return {
id: `${columnIndex}-${pairIndex}`,
sourceX,
@@ -51,168 +50,107 @@ const mobileConnections = computed(() =>
y1,
y2,
parentY: (y1 + y2) / 2,
leftActive: left.advanced,
rightActive: right.advanced,
parentActive: left.advanced || right.advanced,
upperActive: upper.advanced,
lowerActive: lower.advanced,
parentActive: upper.advanced || lower.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);
};
const mobilePairs = computed(() => {
const column = roundColumns.value[activeMobileRound.value] ?? [];
if (activeMobileRound.value === roundColumns.value.length - 1) return column.map((slot) => [slot]);
return Array.from({ length: column.length / 2 }, (_, index) => [column[index * 2]!, column[index * 2 + 1]!]);
});
</script>
<template>
<section
class="tournament-bracket"
:class="{ 'force-desktop': forceDesktop }"
aria-label="토너먼트 대진표"
tabindex="0"
>
<span class="legacy-connector-text">
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┏━━━━━━━━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━━┓ ┏━━━━━━━━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━━┓ ┏━━━━━━━━━┻━━━━━━━━━┓
┏━━━━━━━━━┻━━━━━━━━━┓ ┏━━━━━━━━━┻━━━━━━━━━┓ ┏━━━━━━━━━┻━━━━━━━━━┓ ┏━━━━┻━━━━┓ ┏━━━━┻━━━━┓ ┏━━━━┻━━━━┓
┏━━━━┻━━━━┓ ┏━━━━┻━━━━┓ ┏━━━━┻━━━━┓ ┏━━━━┻━━━━┓ ┏━━━━┻━━━━┓
</span>
<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"
<section class="tournament-bracket" aria-label="토너먼트 대진표" tabindex="0">
<div class="desktop-bracket">
<div class="desktop-round-labels" aria-hidden="true">
<strong v-for="label in roundLabels" :key="label">{{ label }}</strong>
</div>
<div class="desktop-bracket-canvas">
<svg viewBox="0 0 1200 1152" aria-hidden="true">
<g v-for="connection in connections" :key="connection.id">
<path
class="bracket-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.upperActive"
class="bracket-connector active"
:d="`M ${connection.sourceX} ${connection.y1} H ${connection.jointX} V ${connection.parentY}`"
/>
<path
v-if="connection.lowerActive"
class="bracket-connector active"
:d="`M ${connection.sourceX} ${connection.y2} H ${connection.jointX} V ${connection.parentY}`"
/>
<path
v-if="connection.parentActive"
class="bracket-connector active"
:d="`M ${connection.jointX} ${connection.parentY} H ${connection.targetX}`"
/>
</g>
</svg>
<template v-for="(column, columnIndex) in roundColumns" :key="`round-${columnIndex}`">
<article
v-for="(slot, slotIndex) in column"
:key="`${columnIndex}-${slot.id ?? 'empty'}-${slotIndex}`"
class="desktop-bracket-name"
:class="{ advanced: slot.advanced }"
:data-general-id="slot.id ?? undefined"
:style="{
left: `${(desktopX[columnIndex]! / 1200) * 100}%`,
top: `${slotY(columnIndex, slotIndex)}px`,
}"
>
<GeneralIdentity :name="slot.name" :picture="slot.picture" :image-server="slot.imageServer" />
<small v-if="columnIndex === 0" class="bracket-odds">배당 {{ odds(slot.id) }}</small>
</article>
</template>
</div>
</div>
<div class="mobile-bracket">
<div class="mobile-round-tabs" role="tablist" aria-label="토너먼트 라운드 선택">
<button
v-for="(label, index) in roundLabels"
:key="label"
type="button"
role="tab"
:aria-selected="activeMobileRound === index"
:class="{ active: activeMobileRound === index }"
@click="activeMobileRound = index"
>
<GeneralIdentity
:name="bracket.champion.name"
:picture="bracket.champion.picture"
:image-server="bracket.champion.imageServer"
:icon-size="24"
/>
</span>
{{ label }}
</button>
</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"
<section class="mobile-round-list" role="tabpanel" :aria-label="`${roundLabels[activeMobileRound]} 대진`">
<article v-for="(pair, pairIndex) in mobilePairs" :key="`pair-${activeMobileRound}-${pairIndex}`">
<div
v-for="(slot, slotIndex) in pair"
:key="`${slot.id ?? 'empty'}-${slotIndex}`"
class="mobile-bracket-name"
:class="{ advanced: slot.advanced }"
:data-general-id="slot.id ?? undefined"
>
<GeneralIdentity
:name="slot.name"
:picture="slot.picture"
:image-server="slot.imageServer"
:icon-size="22"
/>
</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>
<GeneralIdentity :name="slot.name" :picture="slot.picture" :image-server="slot.imageServer" />
<small v-if="activeMobileRound === 0" class="bracket-odds">배당 {{ odds(slot.id) }}</small>
</div>
<strong v-if="pair.length === 2" class="versus" aria-hidden="true">VS</strong>
</article>
</section>
</div>
<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"
>
<GeneralIdentity
:name="slot.name"
:picture="slot.picture"
:image-server="slot.imageServer"
:icon-size="20"
/>
</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]! / 390) * 100}%`,
top: `${mobileY(columnIndex, slotIndex)}px`,
}"
>
<GeneralIdentity
:name="slot.name"
:picture="slot.picture"
:image-server="slot.imageServer"
:icon-size="18"
/>
</span>
</template>
</div>
<p v-if="showLegend !== false">
배당률이 낮을수록 베팅된 금액이 많고 유저들이 우승후보로 많이 선택한 장수입니다.
</p>
@@ -221,154 +159,141 @@ const odds = (id: number | null) => {
<style scoped>
.tournament-bracket {
overflow-x: auto;
overflow-x: hidden;
padding: 10px 0;
scrollbar-color: #777 #24140e;
}
.legacy-connector-text {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.bracket-canvas {
.desktop-bracket {
width: 100%;
min-width: 1000px;
max-width: 1200px;
margin: 0 auto;
}
.mobile-bracket {
position: relative;
display: none;
width: 100%;
max-width: 390px;
height: 544px;
margin: 0 auto;
.desktop-round-labels {
display: grid;
grid-template-columns: repeat(5, 1fr);
min-height: 30px;
align-items: center;
color: #ffd25e;
}
.mobile-bracket svg {
.desktop-bracket-canvas {
position: relative;
width: 100%;
height: 1152px;
}
.desktop-bracket-canvas svg {
position: absolute;
inset: 0;
width: 100%;
height: 544px;
height: 100%;
}
.mobile-connector {
.bracket-connector {
fill: none;
stroke: #fff;
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
.mobile-connector.active {
.bracket-connector.active {
stroke: #ff4b4b;
}
.mobile-bracket-name {
.desktop-bracket-name {
position: absolute;
z-index: 1;
width: clamp(58px, 18vw, 72px);
display: grid;
box-sizing: border-box;
width: clamp(140px, 16vw, 190px);
min-height: 68px;
align-items: center;
overflow: hidden;
transform: translate(-50%, -50%);
border: 1px solid #555;
background: rgb(58 33 24 / 92%);
background: rgb(58 33 24 / 94%);
color: #fff;
min-height: 26px;
padding: 2px;
font-size: 11px;
line-height: 20px;
text-overflow: ellipsis;
white-space: nowrap;
padding: 1px 3px;
}
.desktop-bracket-name.advanced,
.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: 2px 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;
.desktop-bracket-name :deep(.general-identity),
.mobile-bracket-name :deep(.general-identity) {
width: 100%;
justify-content: flex-start;
}
.bracket-odds {
display: block;
color: skyblue;
font-size: 11px;
line-height: 12px;
text-align: right;
}
.tournament-bracket p {
.mobile-bracket {
display: none;
}
.mobile-round-tabs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 4px;
padding: 6px;
}
.mobile-round-tabs button {
min-width: 0;
height: 34px;
margin: 0;
border: 1px solid #666;
border-radius: 3px;
background: #444;
color: #fff;
}
.mobile-round-tabs button.active {
border-color: #f39c12;
background: #8a5b13;
}
.mobile-round-list {
display: grid;
gap: 8px;
padding: 8px;
}
.mobile-round-list > article {
position: relative;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
.mobile-round-list > article:has(> :only-child) {
grid-template-columns: minmax(0, 1fr);
}
.mobile-bracket-name {
box-sizing: border-box;
min-width: 0;
min-height: 68px;
overflow: hidden;
border: 1px solid #555;
background: rgb(58 33 24 / 94%);
padding: 1px 3px;
}
.versus {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #ffd25e;
font-size: 11px;
}
.tournament-bracket > p {
margin: 8px 0 0;
color: skyblue;
font-size: 18px;
}
@media (max-width: 800px) {
.tournament-bracket {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
.bracket-canvas {
.desktop-bracket {
display: none;
}
.mobile-bracket {
display: block;
}
.tournament-bracket.force-desktop {
width: auto;
max-width: none;
overflow-x: auto;
}
.tournament-bracket.force-desktop .bracket-canvas {
display: block;
}
.tournament-bracket.force-desktop .mobile-bracket {
display: none;
.tournament-bracket > p {
padding: 0 8px;
font-size: 13px;
}
}
</style>
app/game-frontend/src/components/ui/GeneralIdentity.vue
+4 -7
View File
@@ -7,13 +7,11 @@ const props = withDefaults(
name: string;
picture?: GeneralIconSource['picture'];
imageServer?: GeneralIconSource['imageServer'];
iconSize?: number;
hideIcon?: boolean;
}>(),
{
picture: null,
imageServer: 0,
iconSize: 28,
hideIcon: false,
}
);
@@ -24,11 +22,10 @@ const iconUrl = computed(() =>
imageServer: props.imageServer,
})
);
const identityStyle = computed(() => ({ '--general-identity-icon-size': `${props.iconSize}px` }));
</script>
<template>
<span class="general-identity" :style="identityStyle">
<span class="general-identity">
<img
v-if="!hideIcon && name !== '-'"
class="general-identity-icon"
@@ -52,9 +49,9 @@ const identityStyle = computed(() => ({ '--general-identity-icon-size': `${props
vertical-align: middle;
}
.general-identity-icon {
width: var(--general-identity-icon-size);
height: var(--general-identity-icon-size);
flex: 0 0 var(--general-identity-icon-size);
width: var(--sammo-general-icon-size);
height: var(--sammo-general-icon-size);
flex: 0 0 var(--sammo-general-icon-size);
border: 1px solid rgb(255 255 255 / 28%);
background: #111;
object-fit: cover;