From bd9272f4cea0a826066a05d247f336d9b264a39a Mon Sep 17 00:00:00 2001 From: EJClaw Date: Tue, 6 Oct 2026 13:32:28 +0900 Subject: [PATCH] =?UTF-8?q?M9:=20=EC=BB=B4=ED=93=A8=ED=84=B0=EC=99=80=20?= =?UTF-8?q?=EC=97=B0=EC=8A=B5=ED=95=98=EA=B8=B0=20=ED=99=94=EB=A9=B4?= =?UTF-8?q?=EA=B3=BC=20E2E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 게임 상세·홈 [🤖 컴퓨터와 연습하기], 대기실 [🤖 컴퓨터 넣기]·[✕], 🤖 아바타·배지, 연습 게임 안내, 한 판 더는 사람만 세기 - e2e/bots.e2e.ts: 오목 연습(컴퓨터가 여러 번 받음), 원카드 컴퓨터 2명 여러 턴 Co-Authored-By: Claude Opus 5.5 --- apps/web/src/components/ui.tsx | 4 +- apps/web/src/net/api.ts | 2 + apps/web/src/pages/GamePage.tsx | 7 +- apps/web/src/pages/Home.tsx | 28 ++++-- apps/web/src/pages/RoomPage.tsx | 51 ++++++++-- e2e/bots.e2e.ts | 170 ++++++++++++++++++++++++++++++++ 6 files changed, 242 insertions(+), 20 deletions(-) create mode 100644 e2e/bots.e2e.ts diff --git a/apps/web/src/components/ui.tsx b/apps/web/src/components/ui.tsx index 345eb32..13b1d97 100644 --- a/apps/web/src/components/ui.tsx +++ b/apps/web/src/components/ui.tsx @@ -1,7 +1,7 @@ /** Shared UI primitives (docs/07 §4). */ import { useEffect, useRef, useState, type ReactNode } from 'react'; import type { PublicUser } from '@bg/shared/lite'; -import { formatRoomCode } from '@bg/shared/lite'; +import { formatRoomCode, isBotId } from '@bg/shared/lite'; import { useToasts, toast } from '../store/toast'; import { useRoom } from '../net/socket'; import { haptic } from '../lib/feedback'; @@ -14,7 +14,7 @@ export function Avatar({ user, size = 40 }: { user: Pick - {user.avatar ? : [...user.nickname][0]} + {user.avatar ? : isBotId(user.id) ? '🤖' : [...user.nickname][0]} ); } diff --git a/apps/web/src/net/api.ts b/apps/web/src/net/api.ts index cd1a690..9a54792 100644 --- a/apps/web/src/net/api.ts +++ b/apps/web/src/net/api.ts @@ -67,6 +67,8 @@ export const api = { deleteMe: () => call<{ ok: true }>('DELETE', '/api/me', { confirm: '탈퇴' }), stats: () => call<{ stats: { gameId: string; played: number; wins: number; draws: number }[] }>('GET', '/api/me/stats'), createRoom: (gameId: string, visibility?: 'private' | 'public') => call<{ code: string }>('POST', '/api/rooms', { gameId, visibility }), + /** 컴퓨터와 연습: a private room with enough computer players to start (docs/06 §12). */ + practice: (gameId: string) => call<{ code: string }>('POST', '/api/rooms', { gameId, practice: true }), quickPlay: (gameId: string) => call<{ code: string }>('POST', `/api/quick/${gameId}`, {}), room: (code: string) => call('GET', `/api/rooms/${code}`), allPublicRooms: () => call<{ rooms: { code: string; gameId: string; host: string; seated: number; max: number }[] }>('GET', '/api/public-rooms'), diff --git a/apps/web/src/pages/GamePage.tsx b/apps/web/src/pages/GamePage.tsx index 91f5148..34fb6c5 100644 --- a/apps/web/src/pages/GamePage.tsx +++ b/apps/web/src/pages/GamePage.tsx @@ -1,7 +1,7 @@ /** 게임 소개 + 방 만들기 / 빠른 시작 / 규칙 / 공개 방 목록 (docs/06 §2, §7, §10). */ import { useEffect, useState } from 'react'; import { Link, useNavigate, useParams } from 'react-router'; -import { catalogById, formatRoomCode } from '@bg/shared/lite'; +import { botsAllowed, catalogById, formatRoomCode } from '@bg/shared/lite'; import { Sheet, TopBar } from '../components/ui'; import { NicknameForm } from '../components/NicknameForm'; import { api } from '../net/api'; @@ -64,6 +64,11 @@ export default function GamePage() { + {botsAllowed(g.id) && ( + + )} 📖 규칙 보기 diff --git a/apps/web/src/pages/Home.tsx b/apps/web/src/pages/Home.tsx index ddcf1c7..aa2ba95 100644 --- a/apps/web/src/pages/Home.tsx +++ b/apps/web/src/pages/Home.tsx @@ -1,7 +1,7 @@ /** 홈 (PC 기준, docs/07-ui-ux.md §3.3): 큰 행동 줄 + 게임 격자 + 열린 공개 방. */ import { useEffect, useState } from 'react'; import { Link, useNavigate } from 'react-router'; -import { CATALOG, formatRoomCode } from '@bg/shared/lite'; +import { CATALOG, botsAllowed, formatRoomCode } from '@bg/shared/lite'; import { Sheet } from '../components/ui'; import { NicknameForm } from '../components/NicknameForm'; import { CodeInput } from '../components/CodeInput'; @@ -16,12 +16,13 @@ export function Home() { const { me, activeRoom } = useSession(); const catalog = useSession((s) => (s.catalog.length ? s.catalog : CATALOG)); const nav = useNavigate(); - const [picker, setPicker] = useState(false); + const [picker, setPicker] = useState(null); const [needName, setNeedName] = useState void)>(null); const [busy, setBusy] = useState(false); const [rooms, setRooms] = useState<{ code: string; gameId: string; host: string; seated: number; max: number }[]>([]); const [codeKey, setCodeKey] = useState(0); const available = catalog.filter((g) => g.available); + const practiceGames = available.filter((g) => botsAllowed(g.id)); useEffect(() => { const load = () => api.allPublicRooms().then((r) => setRooms(r.rooms), () => {}); @@ -31,11 +32,11 @@ export function Home() { }, []); const withName = (fn: () => void) => (me ? fn() : setNeedName(() => fn)); - const create = (gameId: string) => + const create = (gameId: string, practice = false) => withName(async () => { setBusy(true); try { - const { code } = await api.createRoom(gameId); + const { code } = await (practice ? api.practice(gameId) : api.createRoom(gameId)); nav(`/r/${code}`); } catch (e) { toast((e as Error).message, 'error'); @@ -70,7 +71,7 @@ export function Home() { className="btn btn-primary btn-block" style={{ minHeight: 72, fontSize: '1.3rem' }} disabled={busy} - onClick={() => (available.length === 1 ? create(available[0]!.id) : setPicker(true))} + onClick={() => (available.length === 1 ? create(available[0]!.id) : setPicker('room'))} > ＋ 방 만들기 @@ -80,6 +81,15 @@ export function Home() {

받은 숫자 6자리를 넣으면 바로 들어가요.

+ {practiceGames.length > 0 && ( +
+

혼자 연습하기

+

컴퓨터와 바로 한 판 해 봐요. 기록에는 남지 않아요.

+ +
+ )}
@@ -111,10 +121,10 @@ export function Home() {
{picker && ( - setPicker(false)} label="게임 고르기"> -

어떤 게임을 할까요?

- {available.map((g) => ( - ))} diff --git a/apps/web/src/pages/RoomPage.tsx b/apps/web/src/pages/RoomPage.tsx index 5f4ac00..dbdcc82 100644 --- a/apps/web/src/pages/RoomPage.tsx +++ b/apps/web/src/pages/RoomPage.tsx @@ -1,7 +1,7 @@ /** 방: 대기실 ↔ 게임 ↔ 결과를 한 주소에서 전환 (docs/06 §5–§9). */ import { useEffect, useMemo, useRef, useState } from 'react'; import { useNavigate, useParams } from 'react-router'; -import { formatRoomCode, type PublicUser, type RoomView } from '@bg/shared/lite'; +import { botsAllowed, formatRoomCode, isBotId, type PublicUser, type RoomView } from '@bg/shared/lite'; import { Avatar, CodeLabel, ConfirmSheet, CopyButton, ShareButton, Sheet, TopBar } from '../components/ui'; import { NicknameForm } from '../components/NicknameForm'; import { GameNotice, gameName } from '../components/GameNotice'; @@ -268,6 +268,11 @@ function Lobby({ room, ui, me }: { room: RoomView; ui: GameUI; me: PublicUser }) const shareText = `${host}님이 ${gName} 방에 초대했어요! 코드 ${formatRoomCode(room.code)}`; const notReady = room.seats.filter((s) => s && !s.ready && s.user.id !== room.hostId).length; const [askStart, setAskStart] = useState(false); + // Computer players (docs/06 §12): the host fills empty seats; a room with them is a practice room. + const canAddBot = isHost && botsAllowed(room.gameId); + const practice = room.seats.some((s) => s && isBotId(s.user.id)); + // Offered on the first empty seat only, so big rooms don't show a column of the same button. + const firstEmpty = room.seats.findIndex((s) => s === null); const wide = useWide(); const invite = ( @@ -293,7 +298,22 @@ function Lobby({ room, ui, me }: { room: RoomView; ui: GameUI; me: PublicUser })
4 ? '1fr 1fr' : '1fr', gap: 10 }}> {room.seats.map((s, i) => - s ? ( + s && isBotId(s.user.id) ? ( +
+ +
+
{s.user.nickname}
+
+ 🤖 컴퓨터 +
+
+ {isHost && ( + + )} +
+ ) : s ? (
@@ -311,9 +331,16 @@ function Lobby({ room, ui, me }: { room: RoomView; ui: GameUI; me: PublicUser }) {isHost && s.user.id !== me.id && }
) : ( - +
+ + {canAddBot && i === firstEmpty && ( + + )} +
), )}
@@ -339,6 +366,7 @@ function Lobby({ room, ui, me }: { room: RoomView; ui: GameUI; me: PublicUser }) )}

{room.visibility === 'public' ? '공개 방 (누구나 들어올 수 있어요)' : '친구만 (코드·링크로만 들어와요)'}

+ {practice &&

🤖 연습 게임이에요. 기록에는 남지 않아요.

} {room.lockedOptions.length > 0 &&

🔒 일부 규칙은 관리자가 정해 두어서 바꿀 수 없어요.

} {isHost && wide && } @@ -478,7 +506,11 @@ function SettingsForm({ room, ui, inline, onDone }: { room: RoomView; ui: GameUI
방 공개 - {seg(visibility === 'public', (v) => setVisibility(v ? 'public' : 'private'), '누구나', '친구만')} + {room.seats.some((s) => s && isBotId(s.user.id)) ? ( +

컴퓨터가 있는 방은 친구만 들어와요.

+ ) : ( + seg(visibility === 'public', (v) => setVisibility(v ? 'public' : 'private'), '누구나', '친구만') + )}
관전 @@ -563,8 +595,10 @@ function ResultPanel({ room, me, players, onLeave }: { room: RoomView; me: Publi const result = useRoom((s) => s.result)!; const [hidden, setHidden] = useState(false); const played = useRef(false); - const seated = room.seats.filter(Boolean).map((s) => s!.user.id); - const amSeated = seated.includes(me.id); + const seatedAll = room.seats.filter(Boolean).map((s) => s!.user.id); + const amSeated = seatedAll.includes(me.id); + // Computer players always agree to a rematch. + const seated = seatedAll.filter((u) => !isBotId(u)); const voted = room.rematchVotes.includes(me.id); // Solo games (e.g. 요트 다이스) have one ranked player: neither a draw nor a win. const solo = result.ranking.flat().length === 1; @@ -592,6 +626,7 @@ function ResultPanel({ room, me, players, onLeave }: { room: RoomView; me: Publi setHidden(true)} label="게임 결과">

{allFirst ? '무승부예요' : won ? '🎉 이겼어요!' : lost ? '아쉽게 졌어요' : '게임이 끝났어요'}

{result.summary}

+ {seatedAll.length > seated.length &&

🤖 연습 게임이라 기록에는 남지 않아요.

}
{result.ranking.map((group, i) => group.map((u) => ( diff --git a/e2e/bots.e2e.ts b/e2e/bots.e2e.ts new file mode 100644 index 0000000..66c0415 --- /dev/null +++ b/e2e/bots.e2e.ts @@ -0,0 +1,170 @@ +/** + * E2E (docs/06 §12): practice against computer players from the UI. + * 1) PC: 오목 상세 → [컴퓨터와 연습하기] → 대기실(컴퓨터 1) → 시작 → 컴퓨터가 여러 번 받아 둔다. + * 2) 휴대폰: 원카드 연습 → [컴퓨터 넣기]로 2명, 하나 더 넣었다 빼기 → 시작 → 사람·컴퓨터가 여러 턴. + * Run: E2E_PORT=4534 bun e2e/bots.e2e.ts (needs apps/web/dist built) + */ +import { chromium, type Page } from 'playwright-core'; +import { mkdirSync, mkdtempSync } from 'node:fs'; +import { join } from 'node:path'; +import { loadConfig } from '../apps/server/src/config'; +import { startServer } from '../apps/server/src/server'; + +const PORT = Number(process.env.E2E_PORT ?? 4534); +const ORIGIN = `http://localhost:${PORT}`; +const SHOTS = process.env.E2E_SHOTS ?? join(import.meta.dir, '../test-results'); +mkdirSync(SHOTS, { recursive: true }); + +const dbDir = mkdtempSync(join(process.env.TMPDIR ?? '/tmp', 'bg-e2e-')); +const app = startServer({ + config: loadConfig({ PORT: String(PORT), DB_PATH: join(dbDir, 'app.db'), PUBLIC_ORIGIN: ORIGIN }), + log: () => {}, + staticDir: join(import.meta.dir, '../apps/web/dist'), +}); + +const browser = await chromium.launch({ executablePath: process.env.CHROME ?? '/usr/bin/google-chrome', headless: true }); +let failed = false; +const step = async (name: string, fn: () => Promise) => { + const t0 = performance.now(); + try { + await fn(); + console.log(`✓ ${name} (${Math.round(performance.now() - t0)}ms)`); + } catch (e) { + failed = true; + console.log(`✗ ${name}: ${(e as Error).message.split('\n')[0]}`); + throw e; + } +}; + +const status = (p: Page) => p.locator('.turn-status').innerText().catch(() => ''); +const resultShown = async (p: Page) => (await p.getByRole('dialog', { name: '게임 결과' }).count()) > 0; + +async function startPractice(p: Page, gameId: string, nick: string) { + await p.goto(`${ORIGIN}/g/${gameId}`); + await p.getByRole('button', { name: '🤖 컴퓨터와 연습하기' }).click(); + await p.getByLabel('내 이름(닉네임)').fill(nick); + await p.getByRole('button', { name: '이 이름으로 시작하기' }).click(); + await p.waitForURL(/\/r\/\d{6}$/); + await p.getByLabel('자리').getByText('컴퓨터 1').waitFor(); + await p.getByText('연습 게임이에요. 기록에는 남지 않아요.').first().waitFor(); +} + +// ---------------------------------------------------------------- omok (PC) +const PAD = 0.9; // board viewBox padding (coordinate labels) +async function stones(p: Page): Promise> { + const pts = await p.locator('svg[role="grid"] circle[r="0.46"]').evaluateAll((els) => + els.filter((e) => e.closest('g')?.getAttribute('opacity') !== '0.55').map((e) => [Number(e.getAttribute('cx')), Number(e.getAttribute('cy'))]), + ); + return new Set(pts.map(([x, y]) => y! * 15 + x!)); +} +async function clickCell(p: Page, x: number, y: number) { + const box = (await p.locator('svg[role="grid"]').boundingBox())!; + const span = 14 + 2 * PAD; + const px = box.x + ((x + PAD) / span) * box.width; + const py = box.y + ((y + PAD) / span) * box.height; + await p.mouse.move(px, py); + await p.mouse.click(px, py); +} + +try { + const pc = await browser.newContext({ viewport: { width: 1440, height: 900 }, locale: 'ko-KR' }); + const phone = await browser.newContext({ viewport: { width: 390, height: 844 }, deviceScaleFactor: 2, isMobile: true, hasTouch: true, locale: 'ko-KR' }); + const a = await pc.newPage(); + const b = await phone.newPage(); + const errors: string[] = []; + for (const p of [a, b]) p.on('pageerror', (e) => errors.push(e.message)); + + await step('오목: 상세 → 컴퓨터와 연습하기 → 대기실', async () => { + await startPractice(a, 'omok', '호랑이'); + await a.getByText('🤖 컴퓨터').first().waitFor(); + // The host is seated first, the computer next; no public toggle in a practice room. + await a.getByText('컴퓨터가 있는 방은 친구만 들어와요.').waitFor(); + await a.screenshot({ path: join(SHOTS, 'bots-1-lobby-pc.png') }); + }); + + await step('오목: 시작 → 컴퓨터가 5번 받아 둔다', async () => { + await a.getByRole('button', { name: '▶ 게임 시작' }).click(); + await a.locator('svg[role="grid"]').waitFor(); + let answers = 0; + // Cells around the centre, nearest first. + const order = Array.from({ length: 225 }, (_, i) => i).sort((i, j) => Math.hypot((i % 15) - 7, Math.floor(i / 15) - 7) - Math.hypot((j % 15) - 7, Math.floor(j / 15) - 7)); + for (let turn = 0; turn < 8 && answers < 5; turn++) { + await a.waitForFunction(() => /내 차례예요|게임이 끝|이겼|졌/.test(document.querySelector('.turn-status')?.textContent ?? ''), null, { timeout: 8000 }); + if (await resultShown(a)) break; + const before = await stones(a); + const cell = order.find((i) => !before.has(i) && (i % 15) % 2 === turn % 2)!; + await clickCell(a, cell % 15, Math.floor(cell / 15)); + // Our stone, then the computer's answer (it thinks ~1 s). + await a.waitForFunction((n) => document.querySelectorAll('svg[role="grid"] g:not([opacity="0.55"]) > circle[r="0.46"]').length >= n + 2 || !!document.querySelector('[role="dialog"]'), before.size, { timeout: 8000 }); + if (await resultShown(a)) break; + answers++; + if (answers === 2) await a.screenshot({ path: join(SHOTS, 'bots-2-omok-pc.png') }); + } + if (answers < 3) throw new Error(`the computer answered only ${answers} times`); + console.log(` omok: computer answered ${answers} times`); + }); + + // ---------------------------------------------------------------- one-card (phone) + await step('원카드: 연습 방 → 컴퓨터 넣기·빼기 → 3명', async () => { + await startPractice(b, 'one-card', '고양이'); + const seats = b.getByLabel('자리'); + await seats.getByRole('button', { name: '🤖 컴퓨터 넣기' }).click(); + await seats.getByText('컴퓨터 2').waitFor(); + await seats.getByRole('button', { name: '🤖 컴퓨터 넣기' }).click(); + await seats.getByText('컴퓨터 3').waitFor(); + await seats.getByRole('button', { name: '컴퓨터 3 빼기' }).click(); + await seats.getByText('컴퓨터 3').waitFor({ state: 'detached' }); + await b.screenshot({ path: join(SHOTS, 'bots-3-lobby-phone.png'), fullPage: true }); + }); + + await step('원카드: 시작 → 내 차례 4번, 컴퓨터도 둔다', async () => { + await b.getByRole('button', { name: '▶ 게임 시작' }).click(); + await b.locator('.turn-status').waitFor(); + let mine = 0; + let botTurns = 0; + let last = ''; + for (let t = 0; t < 400 && mine < 4; t++) { + if (await resultShown(b)) break; + const one = b.locator('.oc-onebtn'); + if ((await one.count()) && (await one.isEnabled().catch(() => false))) await one.click({ timeout: 1000 }).catch(() => {}); + const s = await status(b); + if (s !== last && /컴퓨터 \d님 차례예요/.test(s)) botTurns++; + last = s; + if (!s.startsWith('내 차례예요')) { + const next = b.getByRole('button', { name: /다음 판/ }); + if (await next.count()) await next.first().click().catch(() => {}); + await b.waitForTimeout(150); + continue; + } + const accept = b.getByRole('button', { name: /^받아들이기/ }); + const card = b.locator('button.oc-card[data-legal="true"]').first(); + if (await accept.count()) await accept.click(); + else if (await card.count()) { + await card.click(); + await card.click(); + const pick = b.locator('.oc-pick button').first(); + if (await pick.waitFor({ timeout: 400 }).then(() => true, () => false)) await pick.click(); + } else { + const pass = b.getByRole('button', { name: '넘기기' }); + if (await pass.count()) await pass.click(); + else await b.getByRole('button', { name: /장 먹기$/ }).first().click(); + } + await b.waitForFunction((x) => document.querySelector('.turn-status')?.textContent?.trim() !== x, s.trim(), { timeout: 8000 }); + mine++; + if (mine === 2) await b.screenshot({ path: join(SHOTS, 'bots-4-one-card-phone.png') }); + } + if (mine < 4 && !(await resultShown(b))) throw new Error(`only ${mine} of my turns were played`); + if (botTurns < 2) throw new Error(`computers took only ${botTurns} turns`); + console.log(` one-card: my turns ${mine}, computer turns seen ${botTurns}`); + }); + + if (errors.length) throw new Error(`page errors: ${errors.join(' | ')}`); +} catch (e) { + failed = true; + console.error(e); +} finally { + await browser.close(); + await app.stop(); +} +console.log(failed ? 'E2E FAILED' : 'E2E PASSED'); +process.exit(failed ? 1 : 0);