gamekit777 0.1.0

package/create-game/template/src/state/game.svelte.ts.tmpl

@@ -0,0 +1,45 @@
+/* 单局状态。
+
+   设置来自平台（只读投影），结果来自 round()，这里只放「演到哪一步了」。
+   做成可实例化的类而不是模块级单例：同页挂两个实例时各自一套状态。 */
+import type { ViewSettings } from 'gamekit777/sdk';
+import type { __PASCAL__Config, __PASCAL__Outcome } from '../rules/types.ts';
+import { schema } from '../rules/schema.ts';
+
+export type Phase = 'idle' | 'playing' | 'over';
+
+const DEFAULT_CONFIG: __PASCAL__Config = { side: schema.side.default };
+const DEFAULT_VIEW: ViewSettings = {
+  sound: true, volume: 1, turbo: false, reducedMotion: false,
+  skin: 'default', locale: 'zh-CN', autoActive: false
+};
+
+export class Game {
+  #config = $state<__PASCAL__Config>(DEFAULT_CONFIG);
+  #view = $state<ViewSettings>(DEFAULT_VIEW);
+
+  /* 影响结果的参数，来自 host.config */
+  get side(): __PASCAL__Config['side'] { return this.#config.side; }
+
+  /* 不影响结果的表现参数，来自 host.view */
+  get turbo(): boolean { return this.#view.turbo; }
+  get sound(): boolean { return this.#view.sound; }
+  get reducedMotion(): boolean { return this.#view.reducedMotion; }
+  get autoActive(): boolean { return this.#view.autoActive; }
+
+  phase = $state<Phase>('idle');
+  /** 作废令牌：开新局时 +1，旧的演出协程醒来发现对不上号就退出 */
+  rid = $state(0);
+  /** 演出过程中翻动的那一面 */
+  face = $state<'heads' | 'tails'>('heads');
+  last = $state<__PASCAL__Outcome | null>(null);
+  lastPayout = $state(0);
+
+  live = $derived(this.phase === 'playing');
+
+  /* 只有 view/mount 的订阅回调会调这两个 */
+  applyConfig(c: __PASCAL__Config): void { this.#config = c; }
+  applyView(v: ViewSettings): void { this.#view = v; }
+
+  invalidate(): void { this.rid++; this.phase = 'idle'; }
+}

package/create-game/template/src/styles/animations.css

@@ -0,0 +1,4 @@
+/* 名字起得通用没关系：namespace-css 插件会在构建时把它们改成 <name>-<游戏 id>，
+   同页两个游戏才不会互相覆盖 */
+@keyframes flash{from{opacity:.5}to{opacity:0}}
+@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}

package/create-game/template/src/styles/global.css

@@ -0,0 +1,18 @@
+/* 游戏自己的设计变量和 reset。
+
+   构建时 @gamekit/vite-config 的 namespace-css 插件会把这里的 :root / html / body
+   收敛到游戏根元素 .gk-<id>，@keyframes 也会改名。原因是同页可能挂着两个游戏，
+   而 @keyframes 是全局命名空间、后定义覆盖先定义——撞名不报错，只是动画播成别人的。
+
+   页面外框（body 的底色、外边距）不放这里：那是平台的地盘。 */
+:root{
+  --bg:#0E1116; --panel:#161B23; --line:#232B36;
+  --ink:#E8EDF4; --dim:#8A97A8;
+  --win:#31D07A; --lose:#F0554A; --mark:#FFC93C;
+  --num:ui-monospace,SFMono-Regular,Menlo,monospace;
+  --txt:system-ui,-apple-system,"Noto Sans SC",sans-serif;
+}
+*,*::before,*::after{box-sizing:border-box}
+button,input{font:inherit;color:inherit}
+button{cursor:pointer}
+button:disabled{cursor:not-allowed}

package/create-game/template/src/view/bridge.svelte.ts

@@ -0,0 +1,33 @@
+/* 平台的 store ↔ Svelte runes 的桥。
+
+   平台可能是 React / Vue / 原生，所以契约层用的是框架中立的 Readable
+   （subscribe 立即同步回调一次、返回退订函数）。这里把它接到 runes 上。 */
+import type { Readable } from 'gamekit777/sdk';
+
+/** 外部 store → runes。必须在 $effect.root 或组件内调用 */
+export function fromStore<T>(src: Readable<T>): { readonly value: T } {
+  let v = $state(src.get());
+  // subscribe 的返回值正好是 cleanup，$effect 会在销毁时调它
+  $effect(() => src.subscribe(n => { v = n; }));
+  return { get value() { return v; } };
+}
+
+/** runes → 外部 store。read 里读 $state/$derived，变化自动推给订阅者 */
+export function toStore<T>(read: () => T): Readable<T> & { dispose(): void } {
+  const subs = new Set<(v: T) => void>();
+  let first = true;
+  const stop = $effect.root(() => {
+    $effect(() => {
+      const v = read();
+      // 首帧的值由 get() 供应，这里再推一次就重复了
+      if (first) { first = false; return; }
+      for (const f of [...subs]) f(v);
+    });
+  });
+  return {
+    // 在 effect 外读 $state 是合法的，只是不建立依赖——get() 正是这种用法
+    get: read,
+    subscribe(run) { run(read()); subs.add(run); return () => { subs.delete(run); }; },
+    dispose: stop
+  };
+}

package/create-game/template/src/view/mount.svelte.ts.tmpl

@@ -0,0 +1,86 @@
+/* 把游戏挂起来，并把平台的状态接进来。
+
+   放在 .svelte.ts 里是因为要用 $effect.root——status 是从 runes 派生出来
+   推给平台的。 */
+import { mount as svelteMount, unmount } from 'svelte';
+import { ensureFonts, loadAssets, prefetchLazy, type LoadProgress } from 'gamekit777/runtime';
+import type { GameInstance, GameStatus, Host, PresentOptions, Readable, RoundResult } from 'gamekit777/sdk';
+import App from '../components/App.svelte';
+import buildMeta from '../../game.meta.json' with { type: 'json' };
+import { assets } from '../assets/registry.ts';
+import { loadManifest } from '../assets/manifest.ts';
+import { createInstance } from '../context.svelte.ts';
+import type { __PASCAL__Config, __PASCAL__Outcome } from '../rules/types.ts';
+import { present } from './present.ts';
+import { toStore } from './bridge.svelte.ts';
+
+export interface MountOptions {
+  /** 资源加载进度。平台拿它渲染自己的加载条 */
+  onProgress?(p: LoadProgress): void;
+  signal?: AbortSignal;
+}
+
+export async function mountGame(
+  host: Host<__PASCAL__Config>, el: HTMLElement, opts: MountOptions = {}
+): Promise<GameInstance<__PASCAL__Outcome>> {
+  /* 每次 mount 造一棵全新的状态树，同页挂两个实例是安全的 */
+  const inst = createInstance(host);
+  const { game } = inst;
+
+  /* CSS 变量和命名空间挂在容器上，不写 document.documentElement：
+     同页两个游戏时写全局会互相覆盖 */
+  el.classList.add(`gk-${buildMeta.id}`);
+
+  const teardown: Array<() => void> = [];
+  teardown.push(host.config.subscribe(c => game.applyConfig(c)));
+  teardown.push(host.view.subscribe(v => game.applyView(v)));
+
+  const manifest = await loadManifest(opts.signal);
+  const urls = Object.fromEntries(assets.keys.map(k => [k, assets.url(k)]));
+  let progress = 0;
+  await Promise.all([
+    ensureFonts(buildMeta.fonts ?? []),
+    loadAssets({ manifest, urls, signal: opts.signal,
+                 onProgress: p => { progress = p.ratio; opts.onProgress?.(p); } })
+  ]);
+  progress = 1;
+
+  const status = toStore<GameStatus>(() => ({
+    phase: game.phase === 'playing' ? 'playing' : game.phase === 'over' ? 'settling' : 'idle',
+    busy: game.live,
+    canBet: !game.live,
+    canSkip: game.live,
+    /* 和游戏画布内的控件用同一个判断，两边不会打架 */
+    canEditConfig: !game.live && !game.autoActive,
+    progress,
+    lastPayout: game.lastPayout
+  }));
+  teardown.push(status.dispose);
+
+  const app = svelteMount(App, { target: el, props: { instance: inst } });
+  prefetchLazy(manifest, urls);
+  host.emit({ type: 'ready' });
+
+  const play = async (r: RoundResult<__PASCAL__Outcome>, o?: PresentOptions): Promise<void> => {
+    host.emit({ type: 'present:start' });
+    await present(game, r.outcome, r.payout, o?.rate ?? 1);
+    host.emit({ type: 'present:end', payout: r.payout });
+  };
+
+  return {
+    status: status as Readable<GameStatus>,
+    present: play,
+    /** 回看：有了种子，回看就是拿同一份输入重算一遍再演 */
+    preview: play,
+    skip() { if (game.live) game.rid++; },
+    reset() { game.invalidate(); game.last = null; },
+    resize() {},
+    destroy() {
+      game.invalidate();
+      while (teardown.length) teardown.pop()!();
+      void unmount(app);
+      el.classList.remove(`gk-${buildMeta.id}`);
+      el.replaceChildren();
+    }
+  };
+}

package/create-game/template/src/view/present.ts.tmpl

@@ -0,0 +1,36 @@
+/* 演出：把已经算好的结果播出来。
+
+   判定一行都不在这里——outcome 是传进来的。turbo / reducedMotion 只改这段的
+   时长，改不了结果，因为它们根本不在 round() 的入参里。 */
+import type { Game } from '../state/game.svelte';
+import type { __PASCAL__Outcome } from '../rules/types.ts';
+
+const sleep = (ms: number) => new Promise(r => setTimeout(r, ms));
+
+export async function present(
+  game: Game, o: __PASCAL__Outcome, payout: number, rate = 1
+): Promise<void> {
+  const id = ++game.rid;
+  game.phase = 'playing';
+  game.last = null;
+  game.lastPayout = 0;
+
+  const instant = game.reducedMotion || rate === Infinity;
+  const dur = instant ? 0 : (game.turbo ? 320 : 800) / rate;
+
+  /* 翻动几下再定格。翻动次数是装饰性的，不占用可复现的随机数 */
+  if (dur > 0) {
+    const steps = Math.max(2, Math.round(dur / 90));
+    for (let i = 0; i < steps; i++) {
+      if (game.rid !== id) return;
+      game.face = i % 2 === 0 ? 'tails' : 'heads';
+      await sleep(dur / steps);
+    }
+    if (game.rid !== id) return;
+  }
+
+  game.face = o.landed;
+  game.last = o;
+  game.lastPayout = payout;
+  game.phase = 'over';
+}

package/create-game/template/test/e2e.test.ts.tmpl

@@ -0,0 +1,81 @@
+/* 端到端：参考平台 → 本地表模型算钱 → restore 还原 → 游戏演出。
+
+   跑在 happy-dom 里，整条链路都真的执行，而不只是「构建通过」。
+   平台来自 gamekit777/dev-host，是泛型的——所有游戏共用同一份。
+   服务端也是真平台那条路：浏览器里就地建表、按权重抽行、restore 还原。 */
+import { test, expect, afterEach } from 'vitest';
+import { tick } from 'svelte';
+import { createPlatform, localServer } from 'gamekit777/dev-host';
+import { defineGame } from 'gamekit777/sdk';
+import game from '../src/index.ts';
+import type { __PASCAL__Config as C, __PASCAL__Outcome as O } from '../src/rules/types.ts';
+
+const live: { destroy(): void }[] = [];
+afterEach(() => { while (live.length) { try { live.pop()!.destroy(); } catch { /* 已经拆过了 */ } } });
+
+const boot = async () => {
+  const p = createPlatform<C, O>(game);
+  await p.init();
+  const el = document.createElement('div');
+  document.body.appendChild(el);
+  const inst = await game.mount(p.host(), el);
+  live.push(inst);
+  inst.status.subscribe(s => p.setGameStatus(s));
+  p.bindGame({ present: r => inst.present(r), status: () => p.game });
+  return { p, el, inst };
+};
+
+test('挂载 → 下注 → 演完 → 余额按 payout 变化', async () => {
+  const { p, el } = await boot();
+  expect(p.game.phase).toBe('idle');
+  expect(el.querySelector('.coin')).toBeTruthy();
+
+  p.setView({ reducedMotion: true });
+  p.setBet(1000);
+
+  const before = p.balance;
+  expect(await p.playOne()).toBeTruthy();
+  expect(p.balance).toBe(before - 1000 + (p.game.lastPayout ?? 0));
+});
+
+test('平台改配置 → 游戏画布跟着变', async () => {
+  const { p, el } = await boot();
+  p.requestConfig({ side: 'tails' });
+  await tick();
+  expect(el.querySelector('.head b')?.textContent).toBe('反');
+});
+
+test('表模型：还原出的赔付必须等于平台记账，差一分也要拦住', async () => {
+  const srv = localServer<C, O>({ spec: game, sims: 500 });
+  const before = (await srv.init()).balance;
+  const r = await srv.place({ config: { side: 'heads' }, bet: 1000, clientSeed: 'c' });
+  expect(r.ok).toBe(true);
+  if (!r.ok) return;
+  expect(r.round.result!.payout).toBe((1000 / 100) * r.round.row!.payoutCenti);
+  expect(r.round.wallet.balance).toBe(before - 1000 + r.round.result!.payout);
+
+  const tampered = defineGame<C, O>({ ...game, restore: (i) => { const x = game.restore(i); return { ...x, payout: x.payout + 1 }; } });
+  const bad = localServer<C, O>({ spec: tampered, sims: 500 });
+  await bad.init();
+  const v = await bad.place({ config: { side: 'heads' }, bet: 1000, clientSeed: 'c' });
+  expect(v.ok).toBe(false);
+  if (!v.ok) expect(v.error).toMatch(/不符/);
+});
+
+test('同页两个实例互不干扰', async () => {
+  const a = await boot();
+  const b = await boot();
+  a.p.setView({ reducedMotion: true });
+  b.p.setView({ reducedMotion: true });
+
+  a.p.requestConfig({ side: 'heads' });
+  b.p.requestConfig({ side: 'tails' });
+  await tick();
+  expect(a.el.querySelector('.head b')?.textContent).toBe('正');
+  expect(b.el.querySelector('.head b')?.textContent).toBe('反');
+
+  a.p.setBet(1000);
+  await a.p.playOne();
+  expect(b.p.balance).toBe(100_000);          // b 的钱包没被动过
+  expect(b.p.game.phase).toBe('idle');
+});

package/create-game/template/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitOverride": true,
+    "noFallthroughCasesInSwitch": true,
+    "noEmit": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowImportingTsExtensions": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src", "test", "scripts", "*.ts"]
+}

package/create-game/template/vite.config.ts

@@ -0,0 +1,4 @@
+import { defineGameConfig } from 'gamekit777/vite-config';
+import meta from './game.meta.json' with { type: 'json' };
+
+export default defineGameConfig({ meta });

package/create-game/template/vitest.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vitest/config';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+
+/* 测试必须走 Vite 管线：assets/registry.ts 用了 import.meta.glob（Vite 特性），
+   组件和 .svelte.ts 里的 runes 也要 Svelte 编译器处理。 */
+export default defineConfig({
+  plugins: [svelte({ hot: false })],
+  test: { environment: 'happy-dom', include: ['test/**/*.test.ts'], testTimeout: 30_000 },
+  resolve: { conditions: ['browser'] }
+});