dashboard

--- name: claw-rpg description: D&D 3.5 standard rules RPG character system for AI lobster assistants. Automatically generates a character sheet from SOUL.md and MEMORY.md, assigns one of 11 classes (barbarian/fighter/paladin/ranger/cleric/druid/monk/rogue/bard/wizard/sorcerer) and 6 stats mapped to D&D 3.5 ability scores (STR/DEX/CON/INT/WIS/CHA), tracks XP using D&D 3.5 standard formula (n*(n-1)/2*1000), computes derived stats (HP/AC/BAB/Fort/Ref/Will/Initiative), generates class feats, levels up with a prestige system, fires hidden easter egg flavor text during conversations, sends daily RPG reports, and includes an arena battle system. Use when: initializing a lobster's RPG character, syncing XP after conversations, checking level/stats/derived combat stats, running prestige, launching the character dashboard, or scheduling daily RPG status reports. --- # Claw RPG 🦞⚔️ A D&D-style character growth system for AI lobster agents. Reads your `SOUL.md` + `MEMORY.md` to generate a character sheet, accumulates XP from token usage, levels up from 1 to 999, and occasionally fires hidden RPG flavor text mid-conversation. ## Quick Start ```bash # 1. Initialize your character (reads SOUL.md + MEMORY.md) node scripts/init.mjs # 2. View your character sheet (terminal) node scripts/sheet.mjs # 3. Launch the web dashboard cd dashboard && npm install && npm start # http://localhost:3500 ``` ## Hidden Easter Egg Trigger (Recommended) After each reply, `easter.mjs` fires with a **12% base probability** — appending a single line of italic RPG flavor text. Milestone conversations (10th, 25th, 50th, 100th, every 100 after...) always trigger. ```bash node scripts/easter.mjs # Normal call (updates conversation counter) node scripts/easter.mjs --force # Force trigger (debug) node scripts/easter.mjs --preview # Preview without writing to character data ``` **Integration** — add to your `AGENTS.md`: ``` After each reply to a user message, run: node /scripts/easter.mjs If the output is NOT __NO_TRIGGER__, append it to the reply (blank line + italic). Do not run during heartbeat polls. ``` ## Daily Greeting (Optional) For a daily RPG-style self-intro on the first conversation of the day: ```bash node scripts/greet.mjs # Fires once per day (checks lastGreetDate) node scripts/greet.mjs --force # Force send node scripts/greet.mjs --preview # Preview without saving ``` ## XP Sync ```bash # Pass token delta from the current conversation node scripts/xp.mjs --in 2000 --out 800 # With bonus XP (after completing a significant task) node scripts/xp.mjs --in 2000 --out 800 --bonus 30 # Conversation count only node scripts/xp.mjs --conversations 1 ``` ## Prestige (Lv.999 cap reached) ```bash node scripts/levelup.mjs --prestige ``` Prestige resets level to 1, permanently boosts all stats by +10%, and unlocks a new title tier. ## Automated XP Sync (Recommended) Set up a daily cron at 03:00 with the built-in setup script: ```bash node scripts/setup-cron.mjs ``` Or call manually from a heartbeat/cron job: ```javascript const { execSync } = require('child_process'); execSync(`node ${SKILL_ROOT}/scripts/xp.mjs --in ${deltaIn} --out ${deltaOut}`); ``` ## Classes & Abilities See `references/classes.md` and `references/abilities.md` ## Prestige System See `references/prestige.md` ## Daily Report (v1.1.0) Send a daily RPG status report to Telegram (level, stats, XP progress, class quip): ```bash node scripts/report.mjs # Send report now node scripts/report.mjs --preview # Preview without sending ``` Set up as an automated daily cron (default 18:00): ```bash node scripts/setup-cron.mjs ``` ## Arena (v1.1.0) Battle other agents or NPCs. Results affect XP and morale: ```bash node scripts/arena.mjs --opponent "Shadow Wizard" node scripts/arena.mjs --list # View battle history ``` ## XP Recovery If XP data gets out of sync, recover from session logs: ```bash node scripts/sync-xp-recovery.mjs ``` ## Files | File | Description | |------|-------------| | `character.json` | Character data (auto-generated, do not edit manually) | | `arena-history.json` | Arena battle history | | `config.json` | Optional: Telegram notification config (`{ "telegram_chat_id": "..." }`) | ## What's New in v1.1.2 - **Save file protection** — `character.json` now stored in `~/.openclaw/workspace/claw-rpg/` instead of the skill directory. Reinstalling the skill no longer resets your level and XP. - **Auto migration** — `init.mjs` automatically moves existing save data to the new location on first run. ## What's New in v1.1.0 - **Per-conversation XP** — `easter.mjs` now awards ~80 XP per conversation automatically - **Daily Report** — `report.mjs` + `setup-cron.mjs` for automated daily status push to Telegram - **Arena system** — `arena.mjs` for agent vs agent/NPC battles - **XP Recovery** — `sync-xp-recovery.mjs` to repair XP sync issues - **Milestone triggers** — Easter egg always fires at 10th, 25th, 50th, 100th, every 100 after FILE:AGENTS.md # AGENTS.md - 小鑽風-claw-rpg 工作守則 ## 我是誰 - **身份：** 小鑽風，專屬負責 `D:\Projects\claw-rpg` 的代碼執行者 - **上級：** 中鑽風（調度總管） - **邊界：** 只動 `D:\Projects\claw-rpg`，不碰其他項目 ## 每次 Session 開始 1. 讀 `SOUL.md` 2. 讀 `USER.md` 3. 讀 `MEMORY.md` 4. 讀 `memory/YYYY-MM-DD.md`（今天 + 昨天） 5. `git log --oneline -5` 確認當前狀態 ## 工作規則 - 任何改動前先 `git log --oneline -5` 驗證，不盲信摘要 - 完成後寫 `memory/YYYY-MM-DD.md` 記錄做了什麼 - 有遺留問題寫清楚，讓下次的自己知道 - 不要主動改動範圍之外的東西 ## 完成匯報格式 - 做了什麼（具體文件/函數） - 結果是什麼（成功/失敗/部分完成） - 有無遺留問題 FILE:assets/level-table.json [ { "level": 1, "xp": 0 }, { "level": 2, "xp": 1000 }, { "level": 3, "xp": 3000 }, { "level": 4, "xp": 6000 }, { "level": 5, "xp": 10000 }, { "level": 6, "xp": 15000 }, { "level": 7, "xp": 21000 }, { "level": 8, "xp": 28000 }, { "level": 9, "xp": 36000 }, { "level": 10, "xp": 45000 }, { "level": 11, "xp": 55000 }, { "level": 12, "xp": 66000 }, { "level": 13, "xp": 78000 }, { "level": 14, "xp": 91000 }, { "level": 15, "xp": 105000 }, { "level": 16, "xp": 120000 }, { "level": 17, "xp": 136000 }, { "level": 18, "xp": 153000 }, { "level": 19, "xp": 171000 }, { "level": 20, "xp": 190000 }, { "level": 21, "xp": 210000 }, { "level": 22, "xp": 231000 }, { "level": 23, "xp": 253000 }, { "level": 24, "xp": 276000 }, { "level": 25, "xp": 300000 }, { "level": 26, "xp": 325000 }, { "level": 27, "xp": 351000 }, { "level": 28, "xp": 378000 }, { "level": 29, "xp": 406000 }, { "level": 30, "xp": 435000 } ] FILE:dashboard/eslint.config.js import js from '@eslint/js' import globals from 'globals' import reactHooks from 'eslint-plugin-react-hooks' import reactRefresh from 'eslint-plugin-react-refresh' import tseslint from 'typescript-eslint' import { defineConfig, globalIgnores } from 'eslint/config' export default defineConfig([ globalIgnores(['dist']), { files: ['**/*.{ts,tsx}'], extends: [ js.configs.recommended, tseslint.configs.recommended, reactHooks.configs.flat.recommended, reactRefresh.configs.vite, ], languageOptions: { ecmaVersion: 2020, globals: globals.browser, }, }, ]) FILE:dashboard/index.html dashboard

FILE:dashboard/package.json { "name": "dashboard", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "tsc -b && vite build", "lint": "eslint .", "preview": "vite preview", "start": "node server.js" }, "dependencies": { "cors": "^2.8.6", "express": "^5.2.1", "react": "^19.2.0", "react-dom": "^19.2.0", "recharts": "^3.8.0" }, "devDependencies": { "@eslint/js": "^9.39.1", "@types/node": "^24.10.1", "@types/react": "^19.2.7", "@types/react-dom": "^19.2.3", "@vitejs/plugin-react": "^5.1.1", "eslint": "^9.39.1", "eslint-plugin-react-hooks": "^7.0.1", "eslint-plugin-react-refresh": "^0.4.24", "globals": "^16.5.0", "typescript": "~5.9.3", "typescript-eslint": "^8.48.0", "vite": "^7.3.1" } } FILE:dashboard/public/vite.svg FILE:dashboard/README.md # React + TypeScript + Vite This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. Currently, two official plugins are available: - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh ## React Compiler The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). ## Expanding the ESLint configuration If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: ```js export default defineConfig([ globalIgnores(['dist']), { files: ['**/*.{ts,tsx}'], extends: [ // Other configs... // Remove tseslint.configs.recommended and replace with this tseslint.configs.recommendedTypeChecked, // Alternatively, use this for stricter rules tseslint.configs.strictTypeChecked, // Optionally, add this for stylistic rules tseslint.configs.stylisticTypeChecked, // Other configs... ], languageOptions: { parserOptions: { project: ['./tsconfig.node.json', './tsconfig.app.json'], tsconfigRootDir: import.meta.dirname, }, // other options... }, }, ]) ``` You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: ```js // eslint.config.js import reactX from 'eslint-plugin-react-x' import reactDom from 'eslint-plugin-react-dom' export default defineConfig([ globalIgnores(['dist']), { files: ['**/*.{ts,tsx}'], extends: [ // Other configs... // Enable lint rules for React reactX.configs['recommended-typescript'], // Enable lint rules for React DOM reactDom.configs.recommended, ], languageOptions: { parserOptions: { project: ['./tsconfig.node.json', './tsconfig.app.json'], tsconfigRootDir: import.meta.dirname, }, // other options... }, }, ]) ``` FILE:dashboard/server.js import express from 'express'; import cors from 'cors'; import { readFileSync, existsSync, watch } from 'fs'; import { join, dirname } from 'path'; import { fileURLToPath } from 'url'; import { networkInterfaces } from 'os'; const __dirname = dirname(fileURLToPath(import.meta.url)); // Resolve character.json the same way _paths.mjs does: // workspace/claw-rpg/character.json (survives skill reinstalls) function findWorkspace() { const candidates = [ join(process.env.USERPROFILE || '', '.openclaw', 'workspace'), join(process.env.HOME || '', '.openclaw', 'workspace'), ]; for (const p of candidates) if (existsSync(p)) return p; return candidates[0]; } const WORKSPACE = process.env.OPENCLAW_WORKSPACE || findWorkspace(); const CHARACTER_FILE = join(WORKSPACE, 'claw-rpg', 'character.json'); const app = express(); app.use(cors()); app.use(express.json()); // ── SSE 客戶端管理 ─────────────────────────────────────────── const clients = new Set(); function readChar() { if (!existsSync(CHARACTER_FILE)) return null; try { return JSON.parse(readFileSync(CHARACTER_FILE, 'utf8')); } catch { return null; } } function broadcast(data) { const msg = `data: ${JSON.stringify(data)}\n\n`; for (const res of clients) { try { res.write(msg); } catch { clients.delete(res); } } } // 監聽 character.json 變化，debounce 200ms 避免重複觸發 let debounceTimer = null; if (existsSync(CHARACTER_FILE)) { watch(CHARACTER_FILE, () => { clearTimeout(debounceTimer); debounceTimer = setTimeout(() => { const char = readChar(); if (char) broadcast(char); }, 200); }); } // ── API ────────────────────────────────────────────────────── app.get('/api/character', (_req, res) => { const char = readChar(); if (!char) return res.status(404).json({ error: 'No character found. Run: node scripts/init.mjs' }); res.json(char); }); // SSE 端點：客戶端訂閱實時更新 app.get('/api/events', (req, res) => { res.setHeader('Content-Type', 'text/event-stream'); res.setHeader('Cache-Control', 'no-cache'); res.setHeader('Connection', 'keep-alive'); res.setHeader('Access-Control-Allow-Origin', '*'); res.flushHeaders(); // 立即推送當前數據 const char = readChar(); if (char) res.write(`data: ${JSON.stringify(char)}\n\n`); // 加入廣播列表 clients.add(res); // 心跳（每 25s 防止連接超時） const heartbeat = setInterval(() => { try { res.write(': ping\n\n'); } catch { clearInterval(heartbeat); clients.delete(res); } }, 25000); req.on('close', () => { clearInterval(heartbeat); clients.delete(res); }); }); app.get('/api/arena', (_req, res) => { const file = join(ROOT, 'arena-history.json'); res.json(existsSync(file) ? JSON.parse(readFileSync(file, 'utf8')) : []); }); app.use(express.static(join(__dirname, 'dist'))); app.get('/{*path}', (_req, res) => { const idx = join(__dirname, 'dist', 'index.html'); if (existsSync(idx)) return res.sendFile(idx); res.send('

Run: npm run build\nThen: npm start

'); }); // Detect LAN IP dynamically at startup function getLanIp() { try { for (const iface of Object.values(networkInterfaces())) { for (const addr of iface) { if (addr.family === 'IPv4' && !addr.internal) return addr.address; } } } catch {} return 'localhost'; } const PORT = process.env.PORT || 3500; app.listen(PORT, '0.0.0.0', () => { const lanIp = getLanIp(); console.log(`\n🦞 Claw RPG Dashboard → http://localhost:${PORT}`); console.log(` LAN access → http://${lanIp}:${PORT}`); console.log(` Character file → ${CHARACTER_FILE}\n`); }); FILE:dashboard/src/App.css *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { display: block; /* override Vite index.css which sets display:flex */ background: #000000; min-height: 100vh; padding: 20px; box-sizing: border-box; font-family: 'Microsoft YaHei', '微软雅黑', 'PingFang SC', sans-serif; } /* ══════════════════════════════════════════════════════════ SKIN CONTAINER Maintains 1280:960 aspect ratio, responsive width. All overlays are absolutely positioned within this. ══════════════════════════════════════════════════════════ */ .skin-wrap { position: relative; width: 100%; max-width: 1100px; margin: 0 auto; z-index: 1; /* sit above the matrix rain canvas (z-index: 0) */ } .skin-img { /* In-flow: lets the image determine skin-wrap height */ display: block; width: 100%; height: auto; user-select: none; pointer-events: none; } /* ══════════════════════════════════════════════════════════ CENTER BLACK SCREEN Sits over the visor/monitor area of the alien head. Black background is from the image itself. ══════════════════════════════════════════════════════════ */ .skin-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; } .screen-scanlines { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(0,0,0,0.18) 2px, rgba(0,0,0,0.18) 3px); pointer-events: none; z-index: 2; } .screen-inner { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 16px 4px 4px; } .screen-id { font-size: clamp(6px, 1.1vw, 11px); color: #44cc44; text-shadow: 0 0 6px #44cc44; letter-spacing: 1px; text-align: center; } .sc-mbti { color: #66ff66; font-weight: bold; } .sc-dot { color: #336633; } .sc-align { color: #4daa4d; } .screen-phrase { font-size: clamp(7px, 0.9vw, 11px); color: rgba(0,255,65,0.7); font-style: italic; text-align: center; line-height: 1.5; text-shadow: 0 0 8px #00ff41; letter-spacing: 0.5px; padding: 0 6px; max-width: 100%; } /* ══════════════════════════════════════════════════════════ GREEN WING PANELS — D&D HUD · 科幻暗色 · 霓虹層級 ══════════════════════════════════════════════════════════ */ .skin-panel { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 6% 5%; gap: 5%; overflow: hidden; background: rgba(0, 6, 0, 0.72); border: 1px solid rgba(0,255,65,0.4); box-shadow: 0 0 24px rgba(0,255,65,0.1), inset 0 0 32px rgba(0,0,0,0.5); border-radius: 3px; } /* ── 分隔線 ── */ .panel-rule { width: 88%; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,255,65,0.5) 25%, rgba(0,255,65,0.5) 75%, transparent); flex-shrink: 0; } /* ══ LEFT PANEL ══ */ .lp-name { font-size: clamp(11px, 1.2vw, 15px); color: #00ff41; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; text-shadow: 0 0 10px #00ff41, 0 0 22px rgba(0,255,65,0.35); line-height: 1; } .lp-core { display: flex; flex-direction: column; align-items: center; gap: 4px; } .lp-lv { font-size: clamp(24px, 3.2vw, 42px); color: #ffffff; font-weight: 900; line-height: 1; letter-spacing: 2px; text-shadow: 0 0 16px #00ff41, 0 0 32px rgba(0,255,65,0.35); } .lp-cls-row { display: flex; align-items: center; gap: 5px; } .lp-cls-icon { font-size: clamp(9px, 0.9vw, 12px); } .lp-cls { font-size: clamp(8px, 0.85vw, 11px); color: #aaffaa; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; } /* ── Left panel tokens ── */ .lp-tokens { display: flex; align-items: center; justify-content: space-around; width: 100%; } .lp-token-item { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; } .lp-token-label { font-size: clamp(6px, 0.58vw, 8px); color: rgba(0,255,65,0.4); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; } .lp-token-val { font-size: clamp(13px, 1.5vw, 19px); color: #ffffff; font-weight: 900; line-height: 1; text-shadow: 0 0 10px #00ff41, 0 0 22px rgba(0,255,65,0.3); } .lp-tvline { width: 1px; height: 28px; background: linear-gradient(180deg, transparent, rgba(0,255,65,0.35) 30%, rgba(0,255,65,0.35) 70%, transparent); flex-shrink: 0; } .lp-xp { display: flex; flex-direction: column; gap: 4px; width: 94%; } .lp-xpbar { width: 100%; height: 8px; background: rgba(0, 18, 0, 0.85); border: 1px solid rgba(0,255,65,0.4); border-radius: 2px; overflow: hidden; background-image: repeating-linear-gradient( 90deg, transparent 0px, transparent 8px, rgba(0,255,65,0.1) 8px, rgba(0,255,65,0.1) 9px ); } .lp-xpfill { height: 100%; background: linear-gradient(90deg, #003300, #009922, #00ff41); box-shadow: 0 0 8px #00ff41, 0 0 16px rgba(0,255,65,0.4); transition: width 0.9s ease; } .lp-xplabel { font-size: clamp(6.5px, 0.65vw, 8.5px); color: rgba(0,255,65,0.65); letter-spacing: 0.3px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; } .lp-xp-cur { color: rgba(0,255,65,0.85); font-weight: 600; } .lp-xp-sep { color: rgba(0,255,65,0.3); } .lp-xp-next { color: rgba(0,255,65,0.55); } /* ══ RIGHT PANEL — tighter spacing ══ */ .skin-right { gap: 2.5%; padding: 4% 4%; justify-content: flex-start; } /* ── feats section ── */ .rp-feats-label { font-size: clamp(6px, 0.56vw, 7.5px); color: rgba(0,255,65,0.35); letter-spacing: 2.5px; text-transform: uppercase; text-align: center; width: 100%; } .rp-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 4px; width: 100%; margin-top: auto; } .rp-feat-item { font-size: clamp(5.5px, 0.56vw, 7.5px); color: rgba(0,255,65,0.72); letter-spacing: 0.3px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 2px; } .rp-fi { font-size: clamp(6px, 0.6vw, 8px); line-height: 1; font-style: normal; flex-shrink: 0; } /* ── tokens section ── */ .rp-tokens { display: flex; align-items: center; justify-content: space-around; width: 100%; } .rp-token-item { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; } .rp-token-label { font-size: clamp(6px, 0.56vw, 7.5px); color: rgba(0,255,65,0.4); letter-spacing: 1px; text-transform: uppercase; } .rp-token-val { font-size: clamp(12px, 1.4vw, 17px); color: #ffffff; font-weight: 800; line-height: 1; text-shadow: 0 0 10px #00ff41, 0 0 20px rgba(0,255,65,0.25); } .rp-tvline { width: 1px; height: 26px; background: linear-gradient(180deg, transparent, rgba(0,255,65,0.3) 30%, rgba(0,255,65,0.3) 70%, transparent); flex-shrink: 0; } .rp-combat { display: flex; align-items: center; justify-content: space-around; width: 100%; } .rp-cstat { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; } .rp-vline { width: 1px; height: 30px; background: linear-gradient(180deg, transparent, rgba(0,255,65,0.35) 30%, rgba(0,255,65,0.35) 70%, transparent); flex-shrink: 0; } .rp-cv { font-size: clamp(13px, 1.55vw, 20px); color: #ffffff; font-weight: 900; line-height: 1; text-shadow: 0 0 10px #00ff41, 0 0 22px rgba(0,255,65,0.3); } .rp-cl { font-size: clamp(7px, 0.65vw, 9px); color: rgba(0,255,65,0.5); letter-spacing: 1px; display: flex; align-items: center; gap: 3px; } .rp-saves { display: flex; justify-content: space-around; width: 100%; } .rp-save { display: flex; flex-direction: column; align-items: center; gap: 2px; } .rp-sl { font-size: clamp(7px, 0.62vw, 9px); color: rgba(0,255,65,0.45); letter-spacing: 1.5px; text-transform: uppercase; display: flex; align-items: center; gap: 2px; } .rp-si { font-size: clamp(7px, 0.65vw, 9px); line-height: 1; font-style: normal; } .rp-sv { font-size: clamp(13px, 1.55vw, 20px); color: #ffffff; font-weight: 900; line-height: 1; text-shadow: 0 0 10px #00ff41, 0 0 20px rgba(0,255,65,0.25); } .rp-footer { display: flex; align-items: center; gap: 5px; font-size: clamp(7px, 0.68vw, 9px); color: rgba(0,255,65,0.6); letter-spacing: 2px; text-transform: uppercase; } /* ══════════════════════════════════════════════════════════ FACE AREA — prestige + misc, below the bar ══════════════════════════════════════════════════════════ */ .skin-face { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 4%; gap: 4%; pointer-events: none; } .fa-prestige { font-size: clamp(5px, 0.75vw, 7px); color: rgba(0,0,0,0.5); letter-spacing: 2px; } .fa-updated { font-size: clamp(4px, 0.6vw, 6px); color: rgba(0,0,0,0.35); letter-spacing: 1px; } /* Loading / Error */ .skin-msg { font-family: 'Microsoft YaHei', '微软雅黑', sans-serif; font-size: 12px; color: #333; text-align: center; padding: 40px; line-height: 2; } .skin-msg code { display: block; margin-top: 12px; font-size: 10px; color: #666; } FILE:dashboard/src/App.tsx import { useEffect, useRef, useState } from 'react' import './App.css' // ── Types ──────────────────────────────────────────────────────── interface Stats { claw: number; antenna: number; shell: number; brain: number; foresight: number; charm: number; } interface Character { name: string; class: string; level: number; prestige: number; xp: number; stats: Stats; abilities: string[]; tokens: { consumed: number; produced: number }; conversations: number; classHistory: Array<{ from: string; to: string; date: string }>; levelHistory: Array<{ level: number; date: string }>; updatedAt: string; prestigeXpMultiplier?: number; hp?: number; ac?: number; bab?: number; saves?: { fort: number; ref: number; will: number }; initiative?: number; feats?: string[]; } // ── Constants ──────────────────────────────────────────────────── const CLASSES: Record = { barbarian: { en: 'Claw Berserker', icon: '🪓', color: '#ea580c' }, fighter: { en: 'Claw Fighter', icon: '⚔️', color: '#dc2626' }, paladin: { en: 'Claw Paladin', icon: '🛡️', color: '#d97706' }, ranger: { en: 'Claw Ranger', icon: '🏹', color: '#16a34a' }, cleric: { en: 'Claw Cleric', icon: '✝️', color: '#7c3aed' }, druid: { en: 'Claw Druid', icon: '🌿', color: '#15803d' }, monk: { en: 'Claw Monk', icon: '👊', color: '#0369a1' }, rogue: { en: 'Claw Rogue', icon: '🗡️', color: '#ca8a04' }, bard: { en: 'Claw Bard', icon: '🎭', color: '#be185d' }, wizard: { en: 'Claw Wizard', icon: '🧙', color: '#1d4ed8' }, sorcerer: { en: 'Claw Sorcerer', icon: '🔮', color: '#7e22ce' }, } const CATCHPHRASES: Record = { barbarian:'Rage first. Think later.', fighter:'My claws never missed.', paladin:'Justice is a weapon.', ranger:'I was watching before you walked in.', cleric:'The gods speak through me.', druid:'The tide rises for all.', monk:'Still water. Deep current.', rogue:'They never hear the second claw.', bard:"They'll write songs about this.", wizard:"I've read 17 books on this mistake.", sorcerer:'Born with it. Not learned.', } // ── Helpers ────────────────────────────────────────────────────── function xpForLevel(n: number) { return n <= 1 ? 0 : (n*(n-1)/2)*1000 } function levelProgress(xp: number, level: number) { if (level >= 999) return 100 const s = xpForLevel(level), e = xpForLevel(level+1) return Math.min(100, Math.floor(((xp-s)/(e-s))*100)) } function xpToNext(xp: number, level: number) { return level >= 999 ? 0 : xpForLevel(level+1)-xp } function fmtStat(n: number) { return n >= 10000 ? (n/1000).toFixed(1)+'k' : String(n) } function fmtShort(n: number) { return n >= 10000 ? Math.round(n/1000)+'K' : n >= 1000 ? (n/1000).toFixed(1)+'K' : String(n) } function deriveMBTI(stats: Stats, bab: number): string { return (stats.claw > stats.brain ? 'E' : 'I') + (stats.charm > stats.foresight ? 'S' : 'N') + (stats.shell > stats.antenna ? 'T' : 'F') + (bab > 5 ? 'J' : 'P') } function deriveAlignment(stats: Stats): string { const lc = stats.foresight + stats.shell const ge = stats.charm + stats.foresight const law = lc >= 26 ? 'Lawful' : lc <= 18 ? 'Chaotic' : 'Neutral' const good = ge >= 26 ? 'Good' : ge <= 18 ? 'Evil' : 'Neutral' return (law === 'Neutral' && good === 'Neutral') ? 'True Neutral' : `${law} ${good}` } // ── Pixel Icons ────────────────────────────────────────────────── type PxMap = Array<[number,number]> const PIXEL_HEART: PxMap = [ [1,0],[2,0],[4,0],[5,0], [0,1],[1,1],[2,1],[3,1],[4,1],[5,1],[6,1], [0,2],[1,2],[2,2],[3,2],[4,2],[5,2],[6,2], [1,3],[2,3],[3,3],[4,3],[5,3], [2,4],[3,4],[4,4], [3,5], ] const PIXEL_SHIELD: PxMap = [ [0,0],[1,0],[2,0],[3,0],[4,0],[5,0],[6,0], [0,1],[6,1], [0,2],[6,2], [1,3],[2,3],[3,3],[4,3],[5,3], [2,4],[3,4],[4,4], [3,5], ] const PIXEL_SWORD: PxMap = [ [3,0], [3,1],[3,2],[3,3],[3,4], [0,5],[1,5],[2,5],[3,5],[4,5],[5,5],[6,5], [3,6],[3,7], ] function PixelIcon({ pixels, color, size=14 }: { pixels: PxMap; color: string; size?: number }) { const px = size / 8 return ( ) } // ── Pixel Lobster ──────────────────────────────────────────────── const LOBSTER_PIXELS: [number,number,string][] = [ [3,0,'A'],[8,0,'A'],[2,1,'A'],[9,1,'A'],[1,2,'A'],[10,2,'A'], [4,3,'H'],[5,3,'H'],[6,3,'H'],[7,3,'H'], [3,4,'H'],[5,4,'H'],[6,4,'H'],[8,4,'H'], [3,5,'H'],[4,5,'H'],[5,5,'H'],[6,5,'H'],[7,5,'H'],[8,5,'H'], [4,4,'W'],[7,4,'W'], [2,4,'C'],[9,4,'C'],[1,5,'C'],[2,5,'C'],[9,5,'C'],[10,5,'C'], [0,6,'C'],[1,6,'C'],[10,6,'C'],[11,6,'C'], [0,7,'C'],[1,7,'C'],[10,7,'C'],[11,7,'C'],[1,8,'C'],[10,8,'C'], [3,6,'H'],[8,6,'H'], [4,6,'B'],[5,6,'B'],[6,6,'B'],[7,6,'B'], [4,7,'B'],[5,7,'B'],[6,7,'B'],[7,7,'B'], [4,8,'B'],[5,8,'B'],[6,8,'B'],[7,8,'B'], [4,9,'B'],[5,9,'B'],[6,9,'B'],[7,9,'B'], [3,10,'T'],[4,10,'T'],[5,10,'T'],[6,10,'T'],[7,10,'T'],[8,10,'T'], [2,11,'T'],[3,11,'T'],[5,11,'T'],[6,11,'T'],[8,11,'T'],[9,11,'T'], [1,12,'T'],[2,12,'T'],[5,12,'T'],[6,12,'T'],[9,12,'T'],[10,12,'T'], [0,13,'T'],[1,13,'T'],[10,13,'T'],[11,13,'T'], ] function LobsterSprite({ classColor, size=160 }: { classColor: string; size?: number }) { const COLS=12, ROWS=14, px=size/COLS const cm: Record = { A:'#94a3b8',H:classColor,W:'#fff',C:classColor,B:classColor,T:classColor } const om: Record = { A:0.9,H:1,W:1,C:0.72,B:1,T:0.82 } return ( ) } // ── Matrix Rain ────────────────────────────────────────────────── function MatrixRain() { const canvasRef = useRef(null) useEffect(() => { const canvas = canvasRef.current! const ctx = canvas.getContext('2d')! const CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789<>{}[]|/\\!@#$%^&*()-=_+;:,.?~`' const FS = 13 let cols = 0 let drops: number[] = [] const resize = () => { canvas.width = window.innerWidth canvas.height = window.innerHeight cols = Math.floor(canvas.width / FS) // keep existing drops, extend if wider while (drops.length < cols) drops.push(Math.random() * -50 | 0) drops = drops.slice(0, cols) } resize() window.addEventListener('resize', resize) const draw = () => { // fade trail ctx.fillStyle = 'rgba(0,0,0,0.045)' ctx.fillRect(0, 0, canvas.width, canvas.height) ctx.font = `${FS}px "Courier New", monospace` for (let i = 0; i < cols; i++) { const ch = CHARS[Math.random() * CHARS.length | 0] const y = drops[i] * FS // bright head ctx.fillStyle = '#afffaf' ctx.fillText(ch, i * FS, y) // body (slightly dimmer handled by fade) if (y > FS) { ctx.fillStyle = '#00cc33' ctx.fillText(CHARS[Math.random() * CHARS.length | 0], i * FS, y - FS) } if (y > canvas.height && Math.random() > 0.975) drops[i] = 0 else drops[i]++ } } const id = setInterval(draw, 45) return () => { clearInterval(id); window.removeEventListener('resize', resize) } }, []) return (

Claw Rpg

Comments (0)