feat: 전투 시뮬레이터를 브라우저 Worker로 이관

서버가 권위 환경과 반복 seed를 준비하고 공용 logic 프로세서를 브라우저와 기존 서버 fallback이 함께 사용하도록 변경한다. production Chromium에서 고정 seed와 1000회 Node 결과 동등성을 검증한다.

app/game-frontend/src/utils/battleSimulatorWorkerClient.ts

@@ -0,0 +1,81 @@
+import type { BattleSimJobPayload, BattleSimResultPayload } from '@sammo-ts/logic';
+
+import type { BattleSimulatorWorkerRequest, BattleSimulatorWorkerResponse } from './battleSimulatorWorkerProtocol';
+
+type PendingRequest = {
+    resolve: (result: BattleSimResultPayload) => void;
+    reject: (error: Error) => void;
+};
+
+export class BattleSimulatorWorkerClient {
+    private worker: Worker | null = null;
+    private nextRequestId = 1;
+    private readonly pending = new Map<number, PendingRequest>();
+
+    private ensureWorker(): Worker {
+        if (this.worker) {
+            return this.worker;
+        }
+
+        const worker = new Worker(new URL('../workers/battleSimulator.worker.ts', import.meta.url), {
+            type: 'module',
+            name: 'sammo-battle-simulator',
+        });
+        worker.addEventListener('message', this.handleMessage);
+        worker.addEventListener('error', this.handleWorkerError);
+        this.worker = worker;
+        return worker;
+    }
+
+    private readonly handleMessage = (event: MessageEvent<BattleSimulatorWorkerResponse>): void => {
+        const pending = this.pending.get(event.data.requestId);
+        if (!pending) {
+            return;
+        }
+        this.pending.delete(event.data.requestId);
+        if (event.data.ok) {
+            pending.resolve(event.data.result);
+            return;
+        }
+        pending.reject(new Error(event.data.error));
+    };
+
+    private readonly handleWorkerError = (event: ErrorEvent): void => {
+        const error = new Error(event.message || '전투 시뮬레이션 worker 오류');
+        for (const pending of this.pending.values()) {
+            pending.reject(error);
+        }
+        this.pending.clear();
+        this.disposeWorker();
+    };
+
+    public run(payload: BattleSimJobPayload): Promise<BattleSimResultPayload> {
+        const requestId = this.nextRequestId;
+        this.nextRequestId += 1;
+        const request: BattleSimulatorWorkerRequest = { requestId, payload };
+        const promise = new Promise<BattleSimResultPayload>((resolve, reject) => {
+            this.pending.set(requestId, { resolve, reject });
+        });
+        this.ensureWorker().postMessage(request);
+        return promise;
+    }
+
+    private disposeWorker(): void {
+        if (!this.worker) {
+            return;
+        }
+        this.worker.removeEventListener('message', this.handleMessage);
+        this.worker.removeEventListener('error', this.handleWorkerError);
+        this.worker.terminate();
+        this.worker = null;
+    }
+
+    public dispose(): void {
+        const error = new Error('전투 시뮬레이션이 취소되었습니다.');
+        for (const pending of this.pending.values()) {
+            pending.reject(error);
+        }
+        this.pending.clear();
+        this.disposeWorker();
+    }
+}

app/game-frontend/src/utils/battleSimulatorWorkerProtocol.ts

@@ -0,0 +1,18 @@
+import type { BattleSimJobPayload, BattleSimResultPayload } from '@sammo-ts/logic';
+
+export interface BattleSimulatorWorkerRequest {
+    requestId: number;
+    payload: BattleSimJobPayload;
+}
+
+export type BattleSimulatorWorkerResponse =
+    | {
+          requestId: number;
+          ok: true;
+          result: BattleSimResultPayload;
+      }
+    | {
+          requestId: number;
+          ok: false;
+          error: string;
+      };

app/game-frontend/src/views/BattleSimulatorView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref } from 'vue';
+import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
 import type { BattleSimRequestPayload, BattleSimResultPayload } from '@sammo-ts/game-api';
 import PanelCard from '../components/ui/PanelCard.vue';
 import SkeletonLines from '../components/ui/SkeletonLines.vue';
@@ -7,6 +7,7 @@ import BattleGeneralCard from '../components/battle/BattleGeneralCard.vue';
 import { trpc } from '../utils/trpc';
 import { getNpcColor } from '../utils/npcColor';
 import type { BattleSimOptions, GeneralDraft, InheritBuff } from '../utils/battleSimulatorTypes';
+import { BattleSimulatorWorkerClient } from '../utils/battleSimulatorWorkerClient';
 
 type GeneralExport = Omit<GeneralDraft, 'id'>;
 
@@ -67,6 +68,11 @@ const defenders = ref<GeneralDraft[]>([]);
 
 const isSimulating = ref(false);
 const statusMessage = ref<string | null>(null);
+const simulationWorker = new BattleSimulatorWorkerClient();
+
+onBeforeUnmount(() => {
+    simulationWorker.dispose();
+});
 
 const importOpen = ref(false);
 const importTarget = ref<GeneralDraft | null>(null);
@@ -567,20 +573,6 @@ const buildBattlePayload = (action: BattleSimRequestPayload['action']): BattleSi
     };
 };
 
-const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
-
-const waitForSimulationResult = async (jobId: string): Promise<BattleSimResultPayload> => {
-    const deadline = Date.now() + 15000;
-    while (Date.now() < deadline) {
-        const response = await trpc.battle.getSimulation.query({ jobId });
-        if ('payload' in response && response.payload) {
-            return response.payload;
-        }
-        await delay(800);
-    }
-    throw new Error('simulation_timeout');
-};
-
 const runSimulation = async (action: BattleSimRequestPayload['action']) => {
     if (!options.value) {
         return;
@@ -595,11 +587,8 @@ const runSimulation = async (action: BattleSimRequestPayload['action']) => {
 
     try {
         const payload = buildBattlePayload(action);
-        const response = await trpc.battle.simulate.mutate(payload);
-        const result =
-            'payload' in response && response.payload
-                ? response.payload
-                : await waitForSimulationResult(response.jobId);
+        const preparedPayload = await trpc.battle.prepareSimulation.mutate(payload);
+        const result = await simulationWorker.run(preparedPayload);
 
         if (!result.result) {
             error.value = result.reason || 'battle_failed';

app/game-frontend/src/workers/battleSimulator.worker.ts

@@ -0,0 +1,32 @@
+/// <reference lib="webworker" />
+
+import type {
+    BattleSimulatorWorkerRequest,
+    BattleSimulatorWorkerResponse,
+} from '../utils/battleSimulatorWorkerProtocol';
+
+const workerScope: DedicatedWorkerGlobalScope = self as DedicatedWorkerGlobalScope;
+
+const loadProcessor = () => import('@sammo-ts/logic');
+let processorPromise: ReturnType<typeof loadProcessor> | null = null;
+
+workerScope.addEventListener('message', async (event: MessageEvent<BattleSimulatorWorkerRequest>) => {
+    const { requestId, payload } = event.data;
+    let response: BattleSimulatorWorkerResponse;
+    try {
+        processorPromise ??= loadProcessor();
+        const { processBattleSimJob } = await processorPromise;
+        response = {
+            requestId,
+            ok: true,
+            result: processBattleSimJob(payload),
+        };
+    } catch (error) {
+        response = {
+            requestId,
+            ok: false,
+            error: error instanceof Error ? error.message : '전투 시뮬레이션 오류',
+        };
+    }
+    workerScope.postMessage(response);
+});