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/e2e/inGameMenus.spec.ts
+8 -2
View File
@@ -802,8 +802,12 @@ test('내 정보&설정 keeps desktop density and becomes a 390px horizontal-ide
const mobile = await page.locator('#container').evaluate((element) => {
const rect = element.getBoundingClientRect();
const settings = element.querySelector<HTMLElement>('.settings-column')!.getBoundingClientRect();
const icon = element.querySelector<HTMLElement>('[data-general-basic-card] .general-icon')!.getBoundingClientRect();
const name = element.querySelector<HTMLElement>('[data-general-basic-card] .general-title')!.getBoundingClientRect();
const icon = element
.querySelector<HTMLElement>('[data-general-basic-card] .general-icon')!
.getBoundingClientRect();
const name = element
.querySelector<HTMLElement>('[data-general-basic-card] .general-title')!
.getBoundingClientRect();
return {
width: rect.width,
scrollWidth: document.documentElement.scrollWidth,
@@ -882,6 +886,8 @@ test('내 정보에서 사람 장수의 등록 전콘을 골라 변경한다', a
await install(page, state);
await page.goto('my-page');
await expect(page.getByText('전용 아이콘 변경 (24시간에 1회)')).toBeVisible();
await expect(page.locator('.selected-general-icon img')).toHaveCSS('width', '64px');
await expect(page.locator('.selected-general-icon img')).toHaveCSS('height', '64px');
await page.locator('.general-icon-choice input').check();
page.once('dialog', async (dialog) => dialog.accept());
await page.getByRole('button', { name: '아이콘 변경' }).click();
app/game-frontend/e2e/tournamentBracket.spec.ts
+66 -30
View File
@@ -210,46 +210,67 @@ test('desktop bracket connects every real general slot to the next round', async
await page.setViewportSize({ width: 1365, height: 900 });
await openTournament(page);
await expect(page.locator('.bracket-canvas .bracket-name[data-general-id]')).toHaveCount(31);
await expect(page.locator('.bracket-canvas .connector-segment')).toHaveCount(15);
await expect(page.locator('.bracket-canvas .bracket-name.advanced', { hasText: '관우' })).toHaveCount(5);
await expect(page.locator('.desktop-bracket-canvas .desktop-bracket-name[data-general-id]')).toHaveCount(31);
await expect(page.locator('.desktop-bracket-canvas svg > g')).toHaveCount(15);
await expect(
page.locator('.desktop-bracket-canvas .desktop-bracket-name.advanced', { hasText: '관우' })
).toHaveCount(5);
const geometry = await page.locator('.bracket-canvas').evaluate((canvas) => {
const firstConnector = canvas.querySelector<HTMLElement>('.connector-segment')!.getBoundingClientRect();
const champion = canvas.querySelector<HTMLElement>('.bracket-champion .bracket-name')!.getBoundingClientRect();
const finalists = [...canvas.querySelectorAll<HTMLElement>('.bracket-round:nth-of-type(3) .bracket-name')].map(
(element) => element.getBoundingClientRect()
const geometry = await page.locator('.desktop-bracket-canvas').evaluate((canvas) => {
const cards = [...canvas.querySelectorAll<HTMLElement>('.desktop-bracket-name')];
const firstRound = cards.slice(0, 16).map((element) => element.getBoundingClientRect());
const quarterFinal = cards[16]!.getBoundingClientRect();
const icons = cards.map((element) => element.querySelector('img')!.getBoundingClientRect());
const names = cards.map((element) =>
element.querySelector<HTMLElement>('.general-identity-name')!.getBoundingClientRect()
);
const own = canvas.getBoundingClientRect();
return {
canvasWidth: canvas.getBoundingClientRect().width,
connectorCenter: firstConnector.x + firstConnector.width / 2,
championCenter: champion.x + champion.width / 2,
finalistCenters: finalists.map((rect) => rect.x + rect.width / 2),
connectorQuarters: [
firstConnector.x + firstConnector.width / 4,
firstConnector.x + (firstConnector.width * 3) / 4,
],
canvasWidth: own.width,
minX: Math.min(...cards.map((card) => card.getBoundingClientRect().left - own.left)),
maxX: Math.max(...cards.map((card) => card.getBoundingClientRect().right - own.left)),
iconSizes: icons.map((icon) => [icon.width, icon.height]),
horizontalIdentities: icons.every((icon, index) => names[index]!.left >= icon.right - 1),
firstParentY: quarterFinal.y + quarterFinal.height / 2,
firstPairAverageY:
(firstRound[0]!.y + firstRound[0]!.height / 2 + firstRound[1]!.y + firstRound[1]!.height / 2) / 2,
};
});
expect(geometry.canvasWidth).toBeGreaterThanOrEqual(1000);
expect(geometry.canvasWidth).toBeGreaterThanOrEqual(800);
expect(geometry.canvasWidth).toBeLessThanOrEqual(1200);
expect(Math.abs(geometry.connectorCenter - geometry.championCenter)).toBeLessThan(1);
expect(geometry.finalistCenters).toHaveLength(2);
expect(Math.abs(geometry.finalistCenters[0]! - geometry.connectorQuarters[0]!)).toBeLessThan(1);
expect(Math.abs(geometry.finalistCenters[1]! - geometry.connectorQuarters[1]!)).toBeLessThan(1);
expect(geometry.minX).toBeGreaterThanOrEqual(0);
expect(geometry.maxX).toBeLessThanOrEqual(geometry.canvasWidth);
expect(geometry.iconSizes.every(([width, height]) => width === 64 && height === 64)).toBe(true);
expect(geometry.horizontalIdentities).toBe(true);
expect(Math.abs(geometry.firstParentY - geometry.firstPairAverageY)).toBeLessThan(1);
await persistScreenshot(page, 'tournament-desktop', testInfo.outputPath('tournament-bracket-desktop.webp'));
});
test('mobile bracket shows every round and general within the handheld width', async ({ page }, testInfo) => {
test('mobile bracket exposes every round through tabs with standard horizontal identities', async ({
page,
}, testInfo) => {
await page.setViewportSize({ width: 390, height: 844 });
await openTournament(page);
const bracket = page.locator('.mobile-bracket');
await expect(bracket).toBeVisible();
await expect(bracket.locator('.mobile-bracket-name')).toHaveCount(31);
await expect(page.getByRole('tablist', { name: '토너먼트 라운드 선택' })).toBeVisible();
await expect(bracket.locator('.mobile-bracket-name')).toHaveCount(16);
await expect(bracket.locator('.mobile-bracket-name', { hasText: '방덕' })).toBeVisible();
await expect(bracket.locator('.mobile-bracket-name', { hasText: '관우' })).toHaveCount(5);
await expect(bracket.locator('.mobile-bracket-name', { hasText: '관우' })).toHaveCount(1);
for (const [label, count] of [
['8강', 8],
['4강', 4],
['결승', 2],
['우승', 1],
] as const) {
await page.getByRole('tab', { name: label }).click();
await expect(page.getByRole('tab', { name: label })).toHaveAttribute('aria-selected', 'true');
await expect(bracket.locator('.mobile-bracket-name')).toHaveCount(count);
await expect(bracket.locator('.mobile-bracket-name', { hasText: '관우' })).toHaveCount(1);
}
await page.getByRole('tab', { name: '16강' }).click();
const bounds = await bracket.evaluate((element) => {
const names = [...element.querySelectorAll<HTMLElement>('.mobile-bracket-name')].map((name) =>
name.getBoundingClientRect()
@@ -270,10 +291,22 @@ test('mobile bracket shows every round and general within the handheld width', a
.evaluate((element) => {
const icon = element.querySelector('img')!.getBoundingClientRect();
const name = element.querySelector<HTMLElement>('.general-identity-name')!.getBoundingClientRect();
return { iconRight: icon.right, nameLeft: name.left, iconY: icon.y, nameY: name.y };
return {
iconWidth: icon.width,
iconHeight: icon.height,
iconRight: icon.right,
nameLeft: name.left,
iconTop: icon.top,
iconBottom: icon.bottom,
nameTop: name.top,
nameBottom: name.bottom,
};
});
expect(identity.nameLeft).toBeGreaterThanOrEqual(identity.iconRight);
expect(Math.abs(identity.iconY - identity.nameY)).toBeLessThan(8);
expect(identity.iconWidth).toBe(64);
expect(identity.iconHeight).toBe(64);
expect(identity.nameLeft).toBeGreaterThanOrEqual(identity.iconRight - 1);
expect(identity.nameTop).toBeLessThan(identity.iconBottom);
expect(identity.nameBottom).toBeGreaterThan(identity.iconTop);
await expect(page.getByRole('tablist', { name: '본선 조 선택' })).toBeVisible();
await page.getByRole('tab', { name: '二조' }).first().click();
await expect(page.getByRole('tab', { name: '二조' }).first()).toHaveAttribute('aria-selected', 'true');
@@ -299,10 +332,11 @@ test('mobile betting rankings use tabs and keep dedicated icons beside general n
.evaluate((element) => {
const icon = element.querySelector('img')!.getBoundingClientRect();
const name = element.querySelector<HTMLElement>('.general-identity-name')!.getBoundingClientRect();
return { iconRight: icon.right, nameLeft: name.left, iconY: icon.y, nameY: name.y };
return { iconWidth: icon.width, iconHeight: icon.height, iconRight: icon.right, nameLeft: name.left };
});
expect(identity.nameLeft).toBeGreaterThanOrEqual(identity.iconRight);
expect(Math.abs(identity.iconY - identity.nameY)).toBeLessThan(8);
expect(identity.iconWidth).toBe(64);
expect(identity.iconHeight).toBe(64);
expect(identity.nameLeft).toBeGreaterThanOrEqual(identity.iconRight - 1);
expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(390);
await persistScreenshot(page, 'tournament-ranking-mobile', testInfo.outputPath('tournament-ranking-mobile.webp'));
});
@@ -316,6 +350,8 @@ test('desktop betting presents icon-and-name cards and all four rankings without
await expect(page.locator('.candidate-card')).toHaveCount(16);
await expect(page.locator('.ranking-table:visible')).toHaveCount(4);
await expect(page.locator('.general-identity-icon').first()).toHaveCSS('width', '64px');
await expect(page.locator('.general-identity-icon').first()).toHaveCSS('height', '64px');
const columns = await page
.locator('.candidate-grid')
.evaluate((element) => getComputedStyle(element).gridTemplateColumns.split(' ').length);
app/game-frontend/src/assets/styles/tokens.css
+1
View File
@@ -6,6 +6,7 @@
--sammo-color-border: rgba(201, 164, 90, 0.4);
--sammo-color-action-bg: rgba(16, 16, 16, 0.6);
--sammo-color-error: #f5b7b1;
--sammo-general-icon-size: 64px;
--sammo-button-base1-bg: #141c65;
--sammo-button-base1-border: #12195b;
--sammo-button-base1-hover-bg: #101651;
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;
app/game-frontend/src/views/BettingView.vue
+3 -20
View File
@@ -149,7 +149,6 @@ const placeBet = async (targetId: number) => {
:name="candidate.name"
:picture="candidate.picture"
:image-server="candidate.imageServer"
:icon-size="36"
/>
<div class="candidate-return">
<span class="ratio-color">{{ ratio(candidate.id) }}</span>
@@ -241,7 +240,6 @@ const placeBet = async (targetId: number) => {
:name="entry.name"
:picture="entry.picture"
:image-server="entry.imageServer"
:icon-size="24"
/>
</td>
<td>{{ entry.stat }}</td>
@@ -288,24 +286,6 @@ const placeBet = async (targetId: number) => {
line-height: 1.3;
text-align: center;
}
.betting-bracket :deep(.bracket-canvas) {
width: 100%;
min-width: 1000px;
}
.betting-bracket :deep(.bracket-round),
.betting-bracket :deep(.connector-row) {
min-height: 8px;
}
.betting-bracket :deep(.connector-segment) {
height: 8px;
}
.betting-bracket :deep(.connector-segment .stem) {
height: 5px;
}
.betting-bracket :deep(.connector-segment .arm) {
top: 4px;
height: 4px;
}
.betting-footer {
padding-top: 20px;
text-align: left;
@@ -482,6 +462,9 @@ select:disabled {
padding: 1px;
border: 1px solid #555;
}
.ranking-table tbody tr:has(.general-identity) td {
height: 66px;
}
.ranking-table thead tr:first-child th {
height: 18px;
background: #000;
app/game-frontend/src/views/MyPageView.vue
+5 -3
View File
@@ -498,8 +498,8 @@ onMounted(() => {
<div v-if="selectedIcon" class="selected-general-icon" aria-live="polite">
<img
:src="resolveGeneralIconUrl(selectedIcon)"
width="48"
height="48"
width="64"
height="64"
alt=""
@error="useDefaultGeneralIcon"
/>
@@ -878,7 +878,9 @@ button:disabled {
background: rgb(23 42 82 / 70%);
}
.selected-general-icon img {
flex: 0 0 48px;
flex: 0 0 var(--sammo-general-icon-size);
width: var(--sammo-general-icon-size);
height: var(--sammo-general-icon-size);
object-fit: cover;
}
.general-icon-choice {
app/game-frontend/src/views/TournamentView.vue
+6 -11
View File
@@ -232,7 +232,6 @@ const start = async () => {
:name="group[rowIndex - 1]!.name"
:picture="group[rowIndex - 1]!.picture"
:image-server="group[rowIndex - 1]!.imageServer"
:icon-size="24"
/>
</td>
<td>{{ statOf(group[rowIndex - 1]) }}</td>
@@ -294,7 +293,6 @@ const start = async () => {
:name="group[rowIndex - 1]!.name"
:picture="group[rowIndex - 1]!.picture"
:image-server="group[rowIndex - 1]!.imageServer"
:icon-size="24"
/>
</td>
<td>{{ statOf(group[rowIndex - 1]) }}</td>
@@ -370,13 +368,6 @@ const start = async () => {
font-size: 12px;
line-height: 14px;
}
.legacy-page :deep(.tournament-bracket .bracket-round),
.legacy-page :deep(.tournament-bracket .connector-row) {
min-height: 20px;
}
.legacy-page :deep(.tournament-bracket .connector-segment) {
height: 20px;
}
.tournament-footer {
padding-top: 10px;
}
@@ -512,10 +503,14 @@ td {
}
.group-grid th:nth-child(2),
.group-grid td:nth-child(2) {
width: 92px;
width: 130px;
}
.general-cell {
overflow: hidden;
text-align: left;
}
.group-grid tbody tr:has(.general-identity) td {
height: 66px;
}
.group-tabs {
display: none;
@@ -583,7 +578,7 @@ td {
}
.group-grid th:nth-child(2),
.group-grid td:nth-child(2) {
width: 108px;
width: 138px;
}
.tournament-guide {
padding: 10px;