feat: ai's first take...

.gitignore

@@ -0,0 +1,6 @@
+node_modules/
+dist/
+*.log
+.DS_Store
+.env
+.env.local

README.md

@@ -0,0 +1,69 @@
+# TTRPG Tools
+
+一个基于 `solid.js` 和 `rsbuild` 的 `ttrpg` 工具箱。
+
+## 功能
+
+- **CLI**: 提供一个 cli 工具，用于将目录内的各种 ttrpg 文档编译为 html。
+- **Markdown**: 解析以各种格式编写的 ttrpg 内容，并支持扩展的语法。
+- **TTRPG 组件**: 用于 ttrpg 内容的各种 UI 组件，且可以在 markdown 中通过扩展语法插入。
+
+## CLI 命令
+
+```bash
+# 预览模式
+npx ttrpg serve [dir] -p 3000
+
+# 编译模式
+npx ttrpg compile [dir] -o ./dist/output
+```
+
+## 组件语法
+
+### 骰子组件
+
+```markdown
+:dice[2d6+d8]
+:dice[1d20+5]{key="attack"}
+```
+
+### 表格组件
+
+```markdown
+:table[./sparks.csv]
+:table[./sparks.csv]{roll=true}
+:table[./sparks.csv]{roll=true remix=true}
+```
+
+## 开发
+
+```bash
+# 安装依赖
+npm install
+
+# 开发模式
+npm run dev
+
+# 构建
+npm run build
+
+# 预览
+npm run preview
+```
+
+## 项目结构
+
+```
+ttrpg-tools/
+├── src/
+│   ├── cli/           # CLI 工具源码
+│   ├── components/    # TTRPG 组件
+│   ├── markdown/      # Markdown 解析器
+│   ├── App.tsx        # 主应用组件
+│   ├── main.tsx       # 入口文件
+│   └── styles.css     # 样式文件
+├── content/           # 示例内容
+├── package.json
+├── tsconfig.json
+└── rsbuild.config.ts
+```

content/index.md

@@ -0,0 +1,23 @@
+# 欢迎使用 TTRPG Tools
+
+这是一个用于 TTRPG 文档的工具箱。
+
+## 示例
+
+### 骰子组件
+
+点击下面的骰子来掷骰：
+
+:dice[2d6]
+
+:dice[1d20+d8]
+
+:dice[3d6+5]{key="attack"}
+
+### 表格组件
+
+:table[./sparks.csv]
+
+:table[./sparks.csv]{roll=true}
+
+:table[./sparks.csv]{roll=true remix=true}

content/sparks.csv

@@ -0,0 +1,6 @@
+label,body,description,icon
+🔥 火焰火花，你召唤出一朵小小的火焰，可以点燃蜡烛或篝火。,造成 1d4 点火焰伤害。,🔥
+💧 水流，你制造一股水流，可以扑灭小型火焰或弄湿目标。,造成 1d4 点水击伤害。,💧
+🌪️ 旋风，你制造一阵小旋风，可以吹散烟雾或轻小物体。,推开目标 5 尺。,🌪️
+🌱 生长，你让一颗种子迅速发芽，长成小植物。,创造一个小植物障碍。,🌱
+⚡ 电击，你释放一道微弱的电流，可以麻痹目标。,造成 1d4 点闪电伤害。,⚡

package.json

@@ -0,0 +1,50 @@
+{
+  "name": "ttrpg-tools",
+  "version": "0.0.1",
+  "description": "A TTRPG toolbox based on solid.js and rsbuild",
+  "type": "module",
+  "bin": {
+    "ttrpg": "./dist/cli.js"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./components": "./dist/components/index.js",
+    "./markdown": "./dist/markdown/index.js"
+  },
+  "scripts": {
+    "dev": "rsbuild dev",
+    "build": "rsbuild build",
+    "preview": "rsbuild preview",
+    "cli:dev": "tsc -p tsconfig.cli.json --watch",
+    "cli:build": "tsc -p tsconfig.cli.json",
+    "ttrpg": "node --loader ts-node/esm ./src/cli/index.ts"
+  },
+  "keywords": [
+    "ttrpg",
+    "solid-js",
+    "markdown",
+    "toolbox"
+  ],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@solidjs/router": "^0.15.0",
+    "commander": "^12.1.0",
+    "csv-parse": "^5.5.6",
+    "marked": "^14.1.0",
+    "marked-directive": "^1.0.7",
+    "solid-js": "^1.9.3"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "^1.1.8",
+    "@rsbuild/plugin-solid": "^1.0.7",
+    "@tailwindcss/typography": "^0.5.15",
+    "@tailwindcss/vite": "^4.0.0",
+    "@types/node": "^22.10.2",
+    "tailwindcss": "^4.0.0",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.7.2"
+  }
+}

rsbuild.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginSolid } from '@rsbuild/plugin-solid';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+  plugins: [
+    pluginSolid(),
+  ],
+  tools: {
+    vite: {
+      plugins: [
+        tailwindcss(),
+      ],
+    },
+  },
+  html: {
+    template: './src/index.html',
+  },
+  source: {
+    entry: {
+      index: './src/main.tsx',
+    },
+  },
+  output: {
+    distPath: {
+      root: 'dist/web',
+    },
+  },
+});

src/App.tsx

@@ -0,0 +1,39 @@
+import { Component, createSignal, onMount } from 'solid-js';
+import { useLocation } from '@solidjs/router';
+import { parseMarkdown } from './markdown';
+
+const App: Component = () => {
+  const location = useLocation();
+  const [content, setContent] = createSignal('');
+
+  onMount(async () => {
+    // 根据路由加载对应的 markdown 文件
+    const path = location.pathname.slice(1) || 'index';
+    try {
+      const response = await fetch(`/content/${path}.md`);
+      if (response.ok) {
+        const text = await response.text();
+        setContent(text);
+      } else {
+        setContent('# 欢迎使用 TTRPG Tools\n\n没有找到对应的内容文件。');
+      }
+    } catch (error) {
+      setContent('# 欢迎使用 TTRPG Tools\n\n这是一个 TTRPG 文档工具箱。\n\n## 功能\n\n- 使用 `:dice[2d6+d8]` 插入骰子组件\n- 使用 `:table[./data.csv]` 插入表格组件');
+    }
+  });
+
+  return (
+    <div class="min-h-screen bg-gray-50">
+      <header class="bg-white shadow">
+        <div class="max-w-4xl mx-auto px-4 py-4">
+          <h1 class="text-2xl font-bold text-gray-900">TTRPG Tools</h1>
+        </div>
+      </header>
+      <main class="max-w-4xl mx-auto px-4 py-8">
+        <article class="prose prose-lg" innerHTML={parseMarkdown(content())} />
+      </main>
+    </div>
+  );
+};
+
+export default App;

src/cli/commands/compile.ts

@@ -0,0 +1,14 @@
+import type { CommandHandler } from '../types.js';
+
+export const compileCommand: CommandHandler = async (dir, options) => {
+  console.log(`开始编译...`);
+  console.log(`目录：${dir}`);
+  console.log(`输出目录：${options.output}`);
+  
+  // TODO: 实现编译逻辑
+  // 1. 扫描目录下的所有 .md 文件
+  // 2. 解析 markdown 并生成路由
+  // 3. 打包为带 hash 路由的单个 HTML 入口
+  
+  console.log('编译完成！');
+};

src/cli/commands/serve.ts

@@ -0,0 +1,14 @@
+import type { CommandHandler } from '../types.js';
+
+export const serveCommand: CommandHandler = async (dir, options) => {
+  console.log(`启动开发服务器...`);
+  console.log(`目录：${dir}`);
+  console.log(`端口：${options.port}`);
+  
+  // TODO: 实现开发服务器逻辑
+  // 1. 扫描目录下的所有 .md 文件
+  // 2. 启动 rsbuild 开发服务器
+  // 3. 监听文件变化
+  
+  console.log('开发服务器已启动：http://localhost:' + options.port);
+};

src/cli/index.ts

@@ -0,0 +1,27 @@
+#!/usr/bin/env node
+import { Command } from 'commander';
+import { serveCommand } from './commands/serve.js';
+import { compileCommand } from './commands/compile.js';
+
+const program = new Command();
+
+program
+  .name('ttrpg')
+  .description('TTRPG 工具箱 - 用于编译和预览 TTRPG 文档')
+  .version('0.0.1');
+
+program
+  .command('serve')
+  .description('运行一个 web 服务器预览目录中的内容，并实时监听更新')
+  .argument('[dir]', '要预览的目录', '.')
+  .option('-p, --port <port>', '端口号', '3000')
+  .action(serveCommand);
+
+program
+  .command('compile')
+  .description('将目录中的内容输出为带 hash 路由、单个 html 入口的 web 应用')
+  .argument('[dir]', '要编译的目录', '.')
+  .option('-o, --output <dir>', '输出目录', './dist/output')
+  .action(compileCommand);
+
+program.parse();

src/cli/types.ts

@@ -0,0 +1,15 @@
+export interface ServeOptions {
+  port: string;
+}
+
+export interface CompileOptions {
+  output: string;
+}
+
+export type CommandHandler = (dir: string, options: ServeOptions | CompileOptions) => Promise<void>;
+
+export interface MarkdownFile {
+  path: string;
+  route: string;
+  content: string;
+}

src/components/dice.tsx

@@ -0,0 +1,66 @@
+import { Component, createSignal, Show } from 'solid-js';
+
+export interface DiceProps {
+  formula: string;
+  key?: string;
+}
+
+function rollDice(formula: string): number {
+  // 解析骰子公式，例如：2d6+d8
+  const parts = formula.split('+').map(p => p.trim());
+  let total = 0;
+
+  for (const part of parts) {
+    const match = part.match(/^(\d+)?d(\d+)$/i);
+    if (match) {
+      const count = parseInt(match[1] || '1');
+      const sides = parseInt(match[2]);
+      for (let i = 0; i < count; i++) {
+        total += Math.floor(Math.random() * sides) + 1;
+      }
+    } else {
+      // 处理固定数字
+      const num = parseInt(part);
+      if (!isNaN(num)) {
+        total += num;
+      }
+    }
+  }
+
+  return total;
+}
+
+export const Dice: Component<DiceProps> = (props) => {
+  const [result, setResult] = createSignal<number | null>(null);
+  const [isRolled, setIsRolled] = createSignal(false);
+
+  const handleClick = () => {
+    if (isRolled()) {
+      // 重置为公式
+      setResult(null);
+      setIsRolled(false);
+    } else {
+      // 掷骰子
+      const rollResult = rollDice(props.formula);
+      setResult(rollResult);
+      setIsRolled(true);
+    }
+  };
+
+  const displayText = () => (isRolled() ? `${result()}` : props.formula);
+  const queryParams = () => (props.key && isRolled() ? `?dice-${props.key}=${result()}` : '');
+
+  return (
+    <a
+      href={queryParams()}
+      onClick={(e) => {
+        e.preventDefault();
+        handleClick();
+      }}
+      class="inline-flex items-center gap-1 text-blue-600 hover:text-blue-800 cursor-pointer"
+    >
+      <span>🎲</span>
+      <span>{displayText()}</span>
+    </a>
+  );
+};

src/components/index.ts

@@ -0,0 +1,5 @@
+export { Dice } from './dice';
+export type { DiceProps } from './dice';
+
+export { Table } from './table';
+export type { TableProps } from './table';

src/components/table.tsx

@@ -0,0 +1,91 @@
+import { Component, createSignal, For, Show } from 'solid-js';
+import { parse } from 'csv-parse/sync';
+
+export interface TableProps {
+  src: string;
+  roll?: boolean;
+  remix?: boolean;
+}
+
+interface TableRow {
+  label: string;
+  body: string;
+  [key: string]: string;
+}
+
+export const Table: Component<TableProps> = (props) => {
+  const [rows, setRows] = createSignal<TableRow[]>([]);
+  const [activeTab, setActiveTab] = createSignal(0);
+
+  // 解析 CSV 内容
+  const parseCSV = (content: string) => {
+    const records = parse(content, {
+      columns: true,
+      skip_empty_lines: true,
+    });
+    setRows(records as TableRow[]);
+  };
+
+  // 加载 CSV 文件
+  const loadCSV = async () => {
+    try {
+      const response = await fetch(props.src);
+      const content = await response.text();
+      parseCSV(content);
+    } catch (error) {
+      console.error('Failed to load CSV:', error);
+    }
+  };
+
+  // 初始化加载
+  loadCSV();
+
+  // 随机切换 tab
+  const handleRoll = () => {
+    const randomIndex = Math.floor(Math.random() * rows().length);
+    setActiveTab(randomIndex);
+  };
+
+  // 处理 body 内容中的 {{prop}} 语法
+  const processBody = (body: string, currentRow: TableRow): string => {
+    if (!props.remix) {
+      // 不启用 remix 时，只替换当前行的引用
+      return body.replace(/\{\{(\w+)\}\}/g, (_, key) => currentRow[key] || '');
+    } else {
+      // 启用 remix 时，每次引用使用随机行的内容
+      return body.replace(/\{\{(\w+)\}\}/g, (_, key) => {
+        const randomRow = rows()[Math.floor(Math.random() * rows().length)];
+        return randomRow?.[key] || '';
+      });
+    }
+  };
+
+  return (
+    <div class="ttrpg-table">
+      <div class="flex gap-2 border-b border-gray-200">
+        <For each={rows()}>
+          {(row, index) => (
+            <button
+              onClick={() => setActiveTab(index())}
+              class={`px-4 py-2 font-medium transition-colors ${
+                activeTab() === index()
+                  ? 'text-blue-600 border-b-2 border-blue-600'
+                  : 'text-gray-500 hover:text-gray-700'
+              }`}
+            >
+              <Show when={props.roll}>
+                <span class="mr-1">🎲</span>
+              </Show>
+              {row.label}
+            </button>
+          )}
+        </For>
+      </div>
+      <div class="p-4 prose max-w-none">
+        <Show when={rows().length > 0}>
+          <div innerHTML={processBody(rows()[activeTab()].body, rows()[activeTab()])} />
+        </Show>
+      </div>
+    </div>
+  );
+};

src/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TTRPG Tools</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

src/main.tsx

@@ -0,0 +1,15 @@
+import { render } from 'solid-js/web';
+import { Router, Route } from '@solidjs/router';
+import App from './App';
+import './styles.css';
+
+const root = document.getElementById('root');
+
+if (root) {
+  render(() => (
+    <Router>
+      <Route path="/" component={App} />
+      <Route path="/:path*" component={App} />
+    </Router>
+  ), root);
+}

src/markdown/index.ts

@@ -0,0 +1,11 @@
+import { Marked } from 'marked';
+import { createDirectives } from 'marked-directive';
+
+// 使用 marked-directive 来支持通过 @solidjs/element 添加的 UI 组件
+const marked = new Marked().use(createDirectives());
+
+export function parseMarkdown(content: string): string {
+  return marked.parse(content) as string;
+}
+
+export { marked };

src/styles.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";

tsconfig.cli.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "declaration": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"]
+  },
+  "include": ["src/cli/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["node"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}