gamekit777 0.1.1 → 0.1.3

package/README.md

@@ -16,7 +16,7 @@
 ```sh
 bunx gamekit777 new                        # 一个能跑的抛硬币（my-game）+ bun install；名字改 game.meta.json
 cd my-game
-bun run dev                                # 参考平台：本地表模型，就地建表、抽行、restore 还原
+bun run dev                                # 起 studio：http://127.0.0.1:4301/ ，预览 / 调参 / 建表 / Case / 发布
 ```
 
 接 Claude Code：

package/create-game/template/CLAUDE.md.tmpl

@@ -157,7 +157,7 @@ mount(host: Host<Config>, el: HTMLElement): Promise<GameInstance<Outcome>>
 - 长任务返回 `jobId` 就用 `job_status` 轮询。
 - `case_run` 任何结果变化都是 `fail`。是有意改的规则且这个 mode 没发布过，`case_bless` 接受；已发布过的 mode 解码逻辑**不能改**，要改就换 slug。
 - `preview_set` 被否决会在 `rejected` 里说明——那是平台的否决权在起作用，不是 bug。
-- 手动：`bun run dev`（参考平台，5173）、`bun run verify`、`bun run test`、`bun run build`。
+- 手动：`bun run dev` 起 studio（页面 `http://127.0.0.1:4301/`，左边是预览机台，右边是状态 / 调参 / 建表 / Case / 发布 / 日志）；`bun run verify`、`bun run test`、`bun run build`。
 
 ## 不要做的事
 

package/create-game/template/package.json.tmpl

@@ -4,7 +4,7 @@
   "version": "1.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "gamekit777 studio --no-mcp",
     "build": "svelte-check --tsconfig ./tsconfig.json && vite build",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "test": "vitest run",

package/create-game/template/src/components/App.svelte.tmpl

@@ -16,32 +16,41 @@
   const { game } = inst;
 
   const label = (s: 'heads' | 'tails') => (s === 'heads' ? '正' : '反');
+  const money = (minor: number) => (minor / 100).toFixed(2);
 </script>
 
-<div class="game" class:flash={game.phase === 'over' && game.last?.win}>
+<div class="game">
   <p class="head">押 <b>{label(game.side)}</b> · 猜中赔 {MULT.toFixed(2)}×</p>
 
   <div class="coin" class:spin={game.live} aria-live="polite">
     <span>{label(game.face)}</span>
   </div>
 
-  <p class="foot" class:win={game.last?.win}>
+  <p class="foot" class:win={game.last?.win} class:lose={game.last && !game.last.win}>
     {#if game.phase === 'over' && game.last}
-      {game.last.win ? `猜中了，${MULT.toFixed(2)}× 到手` : '没猜中'}
+      {game.last.win ? '猜中了' : '没猜中'}
     {:else if game.live}
       抛出中…
     {:else}
       在左边选一面，下注开始
     {/if}
   </p>
+
+  <!-- 赢了弹一下就走：不遮画面、不用点。key 到局号，连赢两局是两次弹出而不是一次拉长 -->
+  {#if game.toast}
+    {#key game.toast.id}
+      <div class="toast" style:animation-duration="{game.toast.ms}ms" aria-hidden="true">
+        <b>{game.toast.mult.toFixed(2)}×</b><span>+{money(game.toast.payout)}</span>
+      </div>
+    {/key}
+  {/if}
 </div>
 
 <style>
+  /* 不写 border-radius：外框和裁切归平台容器，游戏只管自己那块内容 */
   .game{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
-    height:100%;min-height:240px;padding:28px;border-radius:16px;
+    height:100%;min-height:240px;padding:28px;
     background:var(--bg);color:var(--ink);font-family:var(--txt)}
-  .game.flash::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:16px;
-    background:var(--win);animation:flash var(--d-flash,500ms) ease-out forwards}
   .head{margin:0;font-size:13px;color:var(--dim)}
   .head b{color:var(--ink);font-size:16px}
   .coin{display:grid;place-items:center;width:104px;height:104px;border-radius:50%;
@@ -50,5 +59,14 @@
   .coin.spin{animation:pulse 420ms ease-in-out infinite}
   .foot{margin:0;min-height:1.5em;font-size:13px;color:var(--dim)}
   .foot.win{color:var(--win);font-weight:700}
-  @media (prefers-reduced-motion:reduce){.coin.spin{animation:none}.game.flash::after{animation:none}}
+  .foot.lose{color:var(--lose)}
+
+  .toast{position:absolute;left:50%;top:22%;transform:translate(-50%,0);pointer-events:none;
+    display:flex;align-items:baseline;gap:10px;padding:10px 22px 12px;border-radius:18px;
+    background:var(--panel);color:var(--ink);box-shadow:0 0 0 3px var(--win),0 10px 30px rgba(0,0,0,.45);
+    animation:toast 1400ms ease-out forwards}
+  .toast b{font-family:var(--num);font-size:34px;line-height:1;color:var(--win)}
+  .toast span{font-family:var(--num);font-size:16px;color:var(--ink)}
+
+  @media (prefers-reduced-motion:reduce){.coin.spin{animation:none}.toast{animation-name:toastStill}}
 </style>

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

@@ -34,6 +34,8 @@ export class Game {
   face = $state<'heads' | 'tails'>('heads');
   last = $state<__PASCAL__Outcome | null>(null);
   lastPayout = $state(0);
+  /** 赢面小弹窗。id 让连赢两局弹两次；ms 是它的存活时间，到点自己清空 */
+  toast = $state<{ id: number; mult: number; payout: number; ms: number } | null>(null);
 
   live = $derived(this.phase === 'playing');
 

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

@@ -1,4 +1,13 @@
 /* 名字起得通用没关系：namespace-css 插件会在构建时把它们改成 <name>-<游戏 id>，
    同页两个游戏才不会互相覆盖 */
-@keyframes flash{from{opacity:.5}to{opacity:0}}
 @keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
+/* 赢面小弹窗：弹出 → 停住 → 淡出。时长由演出按 turbo 决定，写在 style 上 */
+@keyframes toast{
+  0%{opacity:0;transform:translate(-50%,10px) scale(.86)}
+  14%{opacity:1;transform:translate(-50%,0) scale(1.04)}
+  22%{transform:translate(-50%,0) scale(1)}
+  78%{opacity:1;transform:translate(-50%,0)}
+  100%{opacity:0;transform:translate(-50%,-10px)}
+}
+/* 减少动态效果：不动，只是出现再消失 */
+@keyframes toastStill{0%,85%{opacity:1}100%{opacity:0}}

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

@@ -33,4 +33,13 @@ export async function present(
   game.last = o;
   game.lastPayout = payout;
   game.phase = 'over';
+
+  /* 赢了弹一个小窗，到点自己消失。present 不等它——弹窗是余韵，不该拖慢下一注（自动模式尤其）。
+     清空前核对 id：这期间可能已经又赢了一局，别把新的那个一起抹掉 */
+  if (o.win) {
+    const ms = instant ? 900 : game.turbo ? 1000 : 1600;
+    game.toast = { id, mult: o.mult, payout, ms };
+    // 比 id 不比引用：$state 存进去的是 Proxy，读出来和原对象不相等
+    setTimeout(() => { if (game.toast?.id === id) game.toast = null; }, ms);
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gamekit777",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "type": "module",
   "bin": {
     "gamekit777": "./studio/cli.ts"

package/studio/app/App.svelte

@@ -65,7 +65,7 @@
 <main>
   <!-- 左：机台。和玩家站点同一台机器，宽度也照那边的 1200 内容宽 + 两侧 16 留白 -->
   <section class="machine">
-    <iframe title="游戏预览" src="/__studio/preview.html"></iframe>
+    <iframe title="游戏预览" src="/preview"></iframe>
   </section>
 
   <!-- 右：编辑区，拉满剩余宽度 -->

package/studio/app/lib/identity.svelte.ts

@@ -1,7 +1,7 @@
 /* studio 页面的身份：始终是**站点上的那个人**，不在这里另建。
  *
  * 页面对 /v1 的请求同源，cookie 落在 127.0.0.1 下；第一次没有 cookie 时把整个窗口
- * 跳到站点的 #/connect 借身份，站点签一个一次性 code 带回 /__studio/connect，这里拿 code
+ * 跳到站点的 #/connect 借身份，站点签一个一次性 code 带回 /connect，这里拿 code
  * 经反代换一个同一用户的新会话。之后发布、下注都用这份 cookie。 */
 import type { SessionView } from 'gamekit777/protocol';
 import { client } from './upload.ts';
@@ -14,11 +14,11 @@ class Identity {
   error = $state<string | null>(null);
 
   connectUrl(site: string): string {
-    const back = `${location.origin}/__studio/connect`;
+    const back = `${location.origin}/connect`;
     return `${site.replace(/\/+$/, '')}/#/connect?return=${encodeURIComponent(back)}`;
   }
 
-  /** 页面启动：/__studio/connect 带 code 就先换会话，然后一律 GET /v1/me */
+  /** 页面启动：/connect 带 code 就先换会话，然后一律 GET /v1/me */
   async boot(site: string): Promise<void> {
     const code = new URLSearchParams(location.search).get('code');
     if (location.pathname.endsWith('/connect') && code) {
@@ -26,7 +26,7 @@ class Identity {
       try {
         await client.pair.claim(code);
         // 去掉地址栏里的 code：刷新不该再换一次（code 已作废，会报错）
-        history.replaceState(null, '', '/__studio/');
+        history.replaceState(null, '', '/');
       } catch (e) {
         this.phase = 'error';
         this.error = `换会话失败：${e instanceof Error ? e.message : String(e)}`;

package/studio/src/game-vite.ts

@@ -4,6 +4,7 @@
  * 这样预览走的就是 `bun run dev` 那条路——同一份 defineGameConfig、同一套 HMR，
  * 不存在「studio 里演得好好的，真 build 出来不一样」的分叉空间。 */
 import { existsSync, readFileSync, realpathSync } from 'node:fs';
+import { createServer as createNetServer } from 'node:net';
 import { join, resolve } from 'node:path';
 import { createLogger, createServer, searchForWorkspaceRoot, type Logger, type ProxyOptions, type ViteDevServer } from 'vite';
 import type { Engine } from './engine.ts';
@@ -75,7 +76,28 @@ function proxyRule(backendUrl: string): ProxyOptions {
   };
 }
 
+/**
+ * 自己挑端口，不用 vite 的 strictPort:false 重试。
+ *
+ * vite 的重试是在第一次 listen 报 EADDRINUSE 后再 listen(++port)，指望第一次挂上的 'listening'
+ * 回调在第二次成功时触发。Bun 的 node:http 兼容层里这个回调在出错后就没了——服务其实起在了新端口，
+ * 但 listen() 的 Promise 永远不 resolve，于是 MCP 不启动、横幅不打印，看上去就是「卡住」。
+ */
+async function freePort(start: number, host: string): Promise<number> {
+  for (let port = start; port < start + 100; port++) {
+    const ok = await new Promise<boolean>((resolve) => {
+      const probe = createNetServer();
+      probe.once('error', () => resolve(false));
+      probe.listen(port, host, () => probe.close(() => resolve(true)));
+    });
+    if (ok) return port;
+  }
+  throw new Error(`${host}:${start} 起连续 100 个端口全被占了`);
+}
+
 export async function startGameServer(o: GameServerOptions): Promise<ViteDevServer> {
+  const port = await freePort(o.port, '127.0.0.1');
+  if (port !== o.port) process.stderr.write(`端口 ${o.port} 被占，改用 ${port}\n`);
   const server = await createServer({
     root: o.gameDir,
     configFile: join(o.gameDir, 'vite.config.ts'),
@@ -87,8 +109,8 @@ export async function startGameServer(o: GameServerOptions): Promise<ViteDevServ
       studioRoot: o.studioRoot,
     })],
     server: {
-      port: o.port,
-      strictPort: false,
+      port,
+      strictPort: true,
       host: '127.0.0.1',
       /* 预览页嵌在 studio 页面的 iframe 里；同源，但照抄 apps/web 的做法放开——
          sandbox 属性一加 Origin 就是 null，默认的 cors 会挡 */

package/studio/src/studio-plugin.ts

@@ -4,7 +4,7 @@
  * 发布要用浏览器 cookie 打反代到 /v1。分开起第二个 server 这三件事全要绕。
  *
  * 不往游戏目录写任何文件：两个 html 从内存吐，入口用 /@fs 指回 studio 包。
- * 为什么不直接用游戏自己的 index.html：那是给 `bun run dev` 的，指向 src/dev.ts。 */
+ * 不依赖游戏目录里有 index.html：脚手架出来的项目没有它，`bun run dev` 就是起 studio。 */
 import type { Plugin } from 'vite';
 import { API_PREFIX, createApi } from './api.ts';
 import type { Engine } from './engine.ts';
@@ -18,10 +18,14 @@ export interface StudioPluginOptions {
 }
 
 export const VIRTUAL_GAME = 'virtual:studio/game';
-export const PREVIEW_PATH = '/__studio/preview.html';
-export const PAGE_PATH = '/__studio/';
+/** 根路径就是工作台；游戏目录里没有 index.html，`/` 不会和 vite 的 html 服务打架 */
+export const PAGE_PATH = '/';
+/** 只要预览机台（嵌在页面左边的那个 iframe） */
+export const PREVIEW_PATH = '/preview';
 /** 站点授权完带 code 回到这里，页面拿 code 换会话 */
-export const CONNECT_PATH = '/__studio/connect';
+export const CONNECT_PATH = '/connect';
+/** 早期版本的路径，留作别名 */
+const LEGACY = { page: ['/__studio', '/__studio/', '/__studio/index.html'], preview: ['/__studio/preview.html'], connect: ['/__studio/connect'] };
 
 const page = (title: string, entry: string): string => `<!doctype html>
 <html lang="zh-CN">
@@ -52,9 +56,9 @@ export function studioPlugin(o: StudioPluginOptions): Plugin {
     configureServer(server) {
       server.middlewares.use(api);
       server.middlewares.use((req, res, next) => {
-        const path = req.url?.split('?')[0];
-        const html = path === PREVIEW_PATH ? previewHtml
-          : path === PAGE_PATH || path === '/__studio' || path === '/__studio/index.html' || path === CONNECT_PATH ? appHtml
+        const path = req.url?.split('?')[0] ?? '/';
+        const html = path === PREVIEW_PATH || LEGACY.preview.includes(path) ? previewHtml
+          : path === PAGE_PATH || path === CONNECT_PATH || path === '/index.html' || LEGACY.page.includes(path) || LEGACY.connect.includes(path) ? appHtml
           : null;
         if (!html) return next();
         void server.transformIndexHtml(req.url!, html).then((out) => {

package/create-game/template/index.html.tmpl

@@ -1,11 +0,0 @@
-<!doctype html>
-<html lang="zh-CN">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-<title>__TITLE__</title>
-<script type="module" src="/src/dev.ts"></script>
-</head>
-<body>
-</body>
-</html>

package/create-game/template/src/dev.ts

@@ -1,8 +0,0 @@
-/* 本地开发的宿主。index.html 指向它。
-
-   外壳来自 gamekit777/dev-host——一个**泛型**参考平台，驱动任何符合契约的游戏。
-   它不认识这个游戏：设置控件按 schema 渲染，赔率表来自清单的 paytable。 */
-import { runDevShell } from 'gamekit777/dev-host';
-import game from './index.ts';
-
-runDevShell(game);