merge: 최종 main을 인게임 폰트 통일에 반영
This commit is contained in:
@@ -118,7 +118,8 @@ const persistScreenshot = async (page: Page, name: string, fallbackPath: string)
|
||||
await page.screenshot({ path: resolve(responsiveArtifactDir, `${name}.webp`), fullPage: true });
|
||||
};
|
||||
|
||||
const installFixture = async (page: Page) => {
|
||||
const installFixture = async (page: Page, options: { applicationOpen?: boolean } = {}) => {
|
||||
let joined = false;
|
||||
await page.addInitScript((profile) => {
|
||||
window.localStorage.setItem('sammo-game-token', 'ga_tournament_bracket_playwright');
|
||||
window.localStorage.setItem('sammo-game-profile', profile);
|
||||
@@ -141,7 +142,7 @@ const installFixture = async (page: Page) => {
|
||||
if (operation === 'tournament.getSnapshot') {
|
||||
return response({
|
||||
state: {
|
||||
stage: 0,
|
||||
stage: options.applicationOpen ? 1 : 0,
|
||||
phase: 0,
|
||||
type: 0,
|
||||
auto: false,
|
||||
@@ -151,11 +152,32 @@ const installFixture = async (page: Page) => {
|
||||
nextAt: '2026-08-02T00:00:00.000Z',
|
||||
winnerId: 1,
|
||||
},
|
||||
participants,
|
||||
participants:
|
||||
options.applicationOpen && !joined
|
||||
? []
|
||||
: options.applicationOpen
|
||||
? [
|
||||
{
|
||||
...participants[0],
|
||||
groupId: 0,
|
||||
groupNo: 0,
|
||||
win: 0,
|
||||
draw: 0,
|
||||
lose: 0,
|
||||
gl: 0,
|
||||
seedRank: 0,
|
||||
finalRank: 0,
|
||||
},
|
||||
]
|
||||
: participants,
|
||||
matches,
|
||||
betCount: 16,
|
||||
});
|
||||
}
|
||||
if (operation === 'tournament.join') {
|
||||
joined = true;
|
||||
return response({ ok: true, count: 1 });
|
||||
}
|
||||
if (operation === 'tournament.getBettingSummary') {
|
||||
return response({
|
||||
totals: Object.fromEntries(
|
||||
@@ -245,9 +267,67 @@ test('desktop bracket connects every real general slot to the next round', async
|
||||
expect(geometry.horizontalIdentities).toBe(true);
|
||||
expect(Math.abs(geometry.firstParentY - geometry.firstPairAverageY)).toBeLessThan(1);
|
||||
|
||||
const controls = await page.locator('#tournament-container').evaluate((container) => {
|
||||
const bounds = (selector: string) => container.querySelector<HTMLElement>(selector)!.getBoundingClientRect();
|
||||
const refresh = bounds('.toolbar button:first-child');
|
||||
const join = bounds('.join-button');
|
||||
const close = bounds('.close-button');
|
||||
return {
|
||||
refresh: { width: refresh.width, height: refresh.height },
|
||||
join: { width: join.width, height: join.height },
|
||||
close: { width: close.width, height: close.height },
|
||||
};
|
||||
});
|
||||
expect(controls.refresh).toEqual({ width: 72, height: 44 });
|
||||
expect(controls.join).toEqual({ width: 72, height: 44 });
|
||||
expect(controls.close).toEqual({ width: 88, height: 44 });
|
||||
|
||||
const firstSlot = page.locator('.desktop-bracket-name').first();
|
||||
const oddsContainment = await firstSlot.evaluate((slot) => {
|
||||
const card = slot.getBoundingClientRect();
|
||||
const odds = slot.querySelector<HTMLElement>('.bracket-odds')!.getBoundingClientRect();
|
||||
return {
|
||||
cardTop: card.top,
|
||||
cardBottom: card.bottom,
|
||||
oddsTop: odds.top,
|
||||
oddsBottom: odds.bottom,
|
||||
cardHeight: card.height,
|
||||
};
|
||||
});
|
||||
expect(oddsContainment.cardHeight).toBeGreaterThanOrEqual(82);
|
||||
expect(oddsContainment.oddsTop).toBeGreaterThanOrEqual(oddsContainment.cardTop);
|
||||
expect(oddsContainment.oddsBottom).toBeLessThanOrEqual(oddsContainment.cardBottom);
|
||||
|
||||
await persistScreenshot(page, 'tournament-desktop', testInfo.outputPath('tournament-bracket-desktop.webp'));
|
||||
});
|
||||
|
||||
test('join refresh shows the assigned preliminary group immediately with accessible controls', async ({ page }) => {
|
||||
await page.setViewportSize({ width: 390, height: 844 });
|
||||
await installFixture(page, { applicationOpen: true });
|
||||
await page.goto('tournament');
|
||||
|
||||
const refresh = page.getByRole('button', { name: '갱신' });
|
||||
const join = page.getByRole('button', { name: '참가' });
|
||||
const close = page.getByRole('button', { name: '창 닫기' }).first();
|
||||
await expect(join).toBeEnabled();
|
||||
await join.click();
|
||||
|
||||
await expect(page.getByRole('status')).toHaveText('참가 신청이 반영되었습니다.');
|
||||
await expect(join).toBeDisabled();
|
||||
await expect(page.locator('.preliminary-grid .general-identity', { hasText: names[0] })).toBeVisible();
|
||||
|
||||
for (const control of [refresh, join, close]) {
|
||||
const box = await control.boundingBox();
|
||||
expect(box?.height).toBe(44);
|
||||
expect(box?.width).toBeGreaterThanOrEqual(72);
|
||||
}
|
||||
await refresh.focus();
|
||||
await expect(refresh).toBeFocused();
|
||||
await refresh.hover();
|
||||
await expect(refresh).toHaveCSS('filter', 'brightness(1.25)');
|
||||
expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(390);
|
||||
});
|
||||
|
||||
test('mobile bracket exposes every round through tabs with standard horizontal identities', async ({
|
||||
page,
|
||||
}, testInfo) => {
|
||||
@@ -325,6 +405,14 @@ test('mobile bracket exposes every round through tabs with standard horizontal i
|
||||
expect(identity.nameLeft).toBeGreaterThanOrEqual(identity.iconRight - 1);
|
||||
expect(identity.nameTop).toBeLessThan(identity.iconBottom);
|
||||
expect(identity.nameBottom).toBeGreaterThan(identity.iconTop);
|
||||
const firstMobileSlot = bracket.locator('.mobile-bracket-name').first();
|
||||
const mobileOddsContainment = await firstMobileSlot.evaluate((slot) => {
|
||||
const card = slot.getBoundingClientRect();
|
||||
const odds = slot.querySelector<HTMLElement>('.bracket-odds')!.getBoundingClientRect();
|
||||
return { cardBottom: card.bottom, oddsBottom: odds.bottom, cardHeight: card.height };
|
||||
});
|
||||
expect(mobileOddsContainment.cardHeight).toBeGreaterThanOrEqual(82);
|
||||
expect(mobileOddsContainment.oddsBottom).toBeLessThanOrEqual(mobileOddsContainment.cardBottom);
|
||||
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');
|
||||
|
||||
@@ -28,8 +28,10 @@ const roundColumns = computed(() => [
|
||||
]);
|
||||
const desktopX = [110, 355, 600, 845, 1090];
|
||||
const cardWidth = 190;
|
||||
const desktopSlotHeight = 88;
|
||||
const desktopCanvasHeight = desktopSlotHeight * 16;
|
||||
const slotY = (columnIndex: number, slotIndex: number) => {
|
||||
const slotHeight = 72 * 2 ** columnIndex;
|
||||
const slotHeight = desktopSlotHeight * 2 ** columnIndex;
|
||||
return slotHeight / 2 + slotIndex * slotHeight;
|
||||
};
|
||||
const connections = computed(() =>
|
||||
@@ -77,8 +79,8 @@ const mobilePairs = computed(() => {
|
||||
<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">
|
||||
<div class="desktop-bracket-canvas" :style="{ height: `${desktopCanvasHeight}px` }">
|
||||
<svg :viewBox="`0 0 1200 ${desktopCanvasHeight}`" aria-hidden="true">
|
||||
<g v-for="connection in connections" :key="connection.id">
|
||||
<path
|
||||
class="bracket-connector"
|
||||
@@ -177,7 +179,6 @@ const mobilePairs = computed(() => {
|
||||
.desktop-bracket-canvas {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 1152px;
|
||||
}
|
||||
.desktop-bracket-canvas svg {
|
||||
position: absolute;
|
||||
@@ -200,7 +201,7 @@ const mobilePairs = computed(() => {
|
||||
display: grid;
|
||||
box-sizing: border-box;
|
||||
width: clamp(140px, 16vw, 190px);
|
||||
min-height: 68px;
|
||||
min-height: 82px;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
transform: translate(-50%, -50%);
|
||||
@@ -265,7 +266,7 @@ const mobilePairs = computed(() => {
|
||||
.mobile-bracket-name {
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
min-height: 68px;
|
||||
min-height: 82px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #555;
|
||||
background: rgb(58 33 24 / 94%);
|
||||
|
||||
@@ -304,16 +304,16 @@ const placeBet = async (targetId: number) => {
|
||||
background: #142b42 var(--sammo-texture-blue);
|
||||
}
|
||||
.title {
|
||||
height: 55.6875px;
|
||||
min-height: 68px;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
line-height: 19.1875px;
|
||||
}
|
||||
.close-button {
|
||||
display: block;
|
||||
width: 62px;
|
||||
height: 35.5px;
|
||||
padding: 8px 12px;
|
||||
width: 88px;
|
||||
height: 44px;
|
||||
padding: 10px 16px;
|
||||
border: 1px solid #375a7f;
|
||||
border-radius: 5.25px;
|
||||
background: #375a7f;
|
||||
@@ -323,10 +323,16 @@ const placeBet = async (targetId: number) => {
|
||||
text-decoration: none;
|
||||
}
|
||||
.toolbar {
|
||||
min-height: 36.5px;
|
||||
min-height: 46px;
|
||||
padding: 1px;
|
||||
text-align: left;
|
||||
}
|
||||
.toolbar button {
|
||||
min-width: 72px;
|
||||
height: 44px;
|
||||
padding: 10px 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.error {
|
||||
min-height: 32px;
|
||||
padding: 5px;
|
||||
|
||||
@@ -385,16 +385,16 @@ const start = async () => {
|
||||
background: #142b42 var(--sammo-texture-blue);
|
||||
}
|
||||
.legacy-title {
|
||||
height: 55.6875px;
|
||||
min-height: 68px;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
line-height: 19.1875px;
|
||||
}
|
||||
.close-button {
|
||||
display: block;
|
||||
width: 62px;
|
||||
height: 35.5px;
|
||||
padding: 8px 12px;
|
||||
width: 88px;
|
||||
height: 44px;
|
||||
padding: 10px 16px;
|
||||
border: 1px solid #375a7f;
|
||||
border-radius: 5.25px;
|
||||
background: #375a7f;
|
||||
@@ -404,9 +404,15 @@ const start = async () => {
|
||||
text-decoration: none;
|
||||
}
|
||||
.toolbar {
|
||||
min-height: 36.5px;
|
||||
min-height: 46px;
|
||||
padding: 1px;
|
||||
}
|
||||
.toolbar button {
|
||||
min-width: 72px;
|
||||
height: 44px;
|
||||
padding: 10px 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.operator-row,
|
||||
.state-row,
|
||||
.error-row,
|
||||
|
||||
Reference in New Issue
Block a user