62 lines
2.6 KiB
Markdown
62 lines
2.6 KiB
Markdown
# TTRPG-Tools
|
||
|
||
一个基于`solid.js`和`rsbuild`的`ttrpg`工具箱。
|
||
|
||
具有以下功能：
|
||
|
||
- cli: 提供一个cli工具，用于将目录内的各种ttrpg文档编译为html。
|
||
- markdown：解析以各种格式编写的ttrpg内容，并支持扩展的语法。
|
||
- ttrpg组件：用于ttrpg内容的各种UI组件，且可以在markdown中通过扩展语法插入。
|
||
|
||
## cli功能
|
||
|
||
cli使用子命令组织：
|
||
|
||
- `serve`: 运行一个web服务器预览目录中的内容，并实时侦听更新。
|
||
- `compile`: 将目录中的内容输出为带hash路由、单个html入口的web应用。
|
||
|
||
## 输入文件
|
||
|
||
cli应当搜索目录下的所有`.md`文件，并为每个文件创建一条路由。
|
||
使用`marked`解析，`marked-directive`来支持通过`@solidjs/element`添加的UI组件。
|
||
|
||
若通过相对路径引用了其他文件，则相关的文件应当被cli发现并在打包时引用。
|
||
|
||
## ttrpg组件
|
||
|
||
`:md-dice[2d6+d8]`：骰子组件。将内容显示为链接，并在链接前添加一个骰子图标。
|
||
点击骰子会将链接文本替换为一次骰点结果，再次点击文本会重置为骰点公式。
|
||
若提供`{key="blah"}`则会将骰点结果记录在链接中`(?dice-blah=10)`，以允许跳转。
|
||
|
||
:md-table[./sparks.csv]：表格组件。将内容显示为标签页，并根据`csv`表头显示内容：
|
||
|
||
- `label`: 生成为tab label的内容。
|
||
- `body`：生成为tab body的内容。同样使用`marked`解析。
|
||
支持`{{prop}}`语法，来引用同一行内的其他列，其中prop为其他列的表头。
|
||
|
||
另外，支持一些可选属性：
|
||
|
||
- `{roll=true}`：添加一个骰子标签，点击会随机切换到一个tab。
|
||
- `{remix=true}`：`body`的内容每次引用`{{prop}}`时，使用随机行的内容，而不是同一行。
|
||
|
||
:md-pin[A]{x=40 y=40}: 在图片特定位置添加一个标记。
|
||
|
||
:md-pin-editor: 为图片添加一个pin editor overlay.
|
||
|
||
## 样式
|
||
|
||
使用`@tailwindcss/typography`来管理`markdown`样式。
|
||
|
||
编写自定义UI组件时，不要使用`shadow dom`，并且尽可能继承`tailwindcss`指定的样式。
|
||
|
||
## LLM开发须知
|
||
|
||
开发环境主要在windows上，编辑时需要注意windows的换行符，以及命令行工具。
|
||
|
||
完成开发后，不仅要使用`npm run build`检查验证，还应该检查是否有类型错误。
|
||
|
||
若遇到bug且可以通过独立测试样例来检验，则在开发中自行创建临时测试样例测试。
|
||
|
||
solid.js倾向于使用`createEffect`和/或`createMemo`，以及在jsx中inline引用`props`，来实现响应式处理。
|
||
|
||
如果可以，优先使用`createEffect`和`createMemo`，而不是`onMount`+`createSignal`。 |