crosswords js
v0.1.14
重要提示：这项工作正在进行中！当我找出最合适的 API 时，API 可能会发生巨大变化。
微型、轻量级的网络填字游戏控件。填字游戏-js是：
受到卫报填字游戏上优秀的免费在线填字游戏的启发。
演示：dwmkerr.github.io/crosswords-js/
项目文档是用 Markdown 编写的，位于存储库中./docs 。
安装包：
npm install crosswords-js在您的网页中包含缩小的 JavaScript 包源代码和 CSS：
< link
href =" node_modules/crosswords-js/dist/crosswords.css "
rel =" stylesheet "
/>
< script src =" node_modules/crosswords-js/dist/crosswords.js " > </ script >要创建填字游戏，请找到或编辑CrosswordSource ，可以从简单的 JSON 文件import该文件以创建CrosswordDefinition ：
{
"width" : 15 ,
"height" : 15 ,
"acrossClues" : [
{
"x" : 1 ,
"y" : 1 ,
"clue" : " 1. Conspicuous influence exerted by active troops (8,5) "
},
...
],
"downClues" : [
{
"x" : 3 ,
"y" : 1 ,
"clue" : " 1. A coy sort of miss pointlessly promoting lawlessness (9) "
},
...
]
}完整的CrosswordSource文件示例可以在此处、那里或任何地方找到。
此外，需要将CrosswordDefinition编译为CrosswordModel 。编译会验证CrosswordDefinition ，确保结构中没有不一致的地方，例如：
在 JavaScript 代码中，加载crosswords-js包和CrosswordDefinition ：
import { compileCrossword , newCrosswordController } from 'crosswords-js' ;
import crosswordDefinition from 'node_modules/crosswords-js/data/ftimes_17095.json' ;现在获取 DOM 元素，它将成为填字游戏网格和线索块的父元素：
例如，如果我们网页中的某处有占位符
div元素：... < div id =" crossword-grid-placeholder " /> ... < div id =" crossword-clues-placeholder " />我们通过网页 DOM 定位元素：
const gridParent = document . getElementById ( 'crossword-grid-placeholder' ) ; const cluesParent = document . getElementById ( 'crossword-clues-placeholder' ) ;
并将crosswordDefinition 、 gridParent和viewParent元素传递到Controller构造函数中：
let controller = newCrosswordController (
crosswordDefinition ,
gridParent ,
cluesParent ,
) ;这会将填字游戏gridView和cluesView绑定到网页 DOM 中。
您可以使用controller以编程方式操作gridView - 填字游戏网格 DOM 元素。
直接在代码中调用controller的用户事件处理方法
// Check the current clue answer against the solution.
controller . testCurrentClue ( ) ;通过 HTML 标记中 DOM 元素（例如Button）上的id或class属性绑定用户事件处理程序方法。
< div id =" clue-buttons " >
< p > Clue </ p >
< button id =" test-clue " > Test </ button >
< button id =" clean-clue " > Clean </ button >
< button id =" reveal-clue " > Reveal </ button >
< button class =" reset-clue " > Reset </ button >
< button class =" reset-clue " > MoSet </ button >
</ div > // Bind one element with id "test-clue"
controller . bindEventHandlerToId ( "test-clue" , "click" , document ) ;
// Using default arguments for
// eventName ("click") and dom (document)
controller . bindEventHandlerToId ( "reveal-clue" ) ;
// Bind event handler to multiple elements with class "reset-clue"
// default arguments are available as before
controller . bindEventHandlerToClass ( "reset-clue" , "click" , document ) ;
} ) ;
// Bind ALL the user event handlers, using defaults
controller . bindEventHandlersToIds ( ) ;
// Bind the user event handlers to ALL elements with
// the given class(es), passing an array of one or more class names
controller . bindEventHandlersToClass ( [ "reset-clue" ] ) ;有关这些主题的更多信息，请参阅模块 API 文档。
示例请参考开发服务器代码。
该库附带了一些开箱即用的简单默认样式，但旨在轻松定制。有关详细信息，请参阅crossword-styling.md 。
开发服务器是crosswords-js包的纯 Node.js 应用程序。它几乎使用了所有可用的功能。该代码可以在此存储库的 dev 目录中找到。
# Open the development server on http://localhost:5173
npm start我们强烈建议您在处理此项目时遵循 GitHub 推荐的流行“三角”工作流程。它通过以下方式帮助协作：
- 为拉取请求生成简单的线性提交序列，以及
- 轻松合并上游存储库中的更改。
查看代码并打开存储库根目录...
git clone https://github.com/dwmkerr/crosswords-js.git &&
cd crosswords-js然后...
# From the repository root, bootstrap the package and all tools
bin/bootstrap-posix-ish.sh
# Open the development server
npm start如果您运行的是现代版本的 Windows，则可以使用 WSL 将 Linux 发行版添加到您的计算机，然后按照上面的 Linux 说明进行操作。
如果上面的脚本失败或不适合您的环境...
# Install/update node to latest long-term-support (LTS) version, and install/update npm to latest version.
nvm install --lts --latest-npm
nvm use --ltsgit clone https://github.com/dwmkerr/crosswords-js.git cd crosswords-js
# Fetch all dependent packages
npm install
# Start the development server
npm start如果您按照推荐的过程安装了Node Version Manager (nvm) ，则可以通过定期运行以下命令来了解 nvm、npm、node LTS 的最新版本以及该模块的最新软件包版本：
# Update the tools and packages used in this environment
npm run update您可以在下面的部分中对每次提交到本地 git 存储库时自动进行手动检查。
npm run qa:install如果您需要绕过自动检查，请暂存更改然后运行：
git commit --no-verify
我们使用 MochaJS 进行单元测试。测试源代码位于存储库中./test 。使用以下命令运行测试：
npm testLinting 由 ESLint 提供，它还配置为使用 Prettier 进行代码格式化：
# Lint the code.
npm run lint
# Lint and fix the code.
npm run lint:fix可以使用 Prettier 检查文档和 HTML 是否符合标准：
# Check html and docs for correctness.
npm run prettier
# Check and fix html and docs for correctness.
npm run prettier:fix可以使用 CSpell 检查拼写：
# Check _staged_ files for spelling.
npm run spell
# Check new and changed files for spelling.
npm run spell:changed
# Check all files for spelling.
npm run spell:all确保您构建并准备生产资产
# Build and stage the production assets
npm run build && git add dist/请安装我们的 git提交模板。这使得项目提交指南能够作为标准 git 提交消息的前缀。从存储库的根目录：
git config --local commit.template ./.git-commit-template.txtdev环境生产资产由 ViteJS 在dev/dist构建。 dist文件夹是在构建资产时创建的。
# Build the assets under dev/dist
npm run dev:build您可以通过运行以下命令并在http://localhost:4173/上打开浏览器来预览生产资源
# Build the assets and preview locally at http://locahost:4173
npm run dev:preview您还可以在文档中找到这些键盘快捷键
这些是默认快捷键：
您可以通过创建自己的eventBinding集来覆盖默认快捷方式。 API 用例对此进行了描述。
这有点繁琐。我试图确保语法与读者在打印的填字游戏中看到的语法尽可能接近，以使其尽可能清晰。这是一个例子：
{
"downClues" : [{
"x" : 6 , "y" : 1
"clue" : " 4,21. The king of 7, this general axed threat strategically (9) "
}],
"acrossClues" : [{
"x" : 1 , "y" : 11 ,
"clue" : " 21. See 4 (3,5) "
}]
}请注意， LengthText （在线性线索中为(9,3,5) ）已分离。但是，填字游戏GridView将渲染第一个（头）线索段的完整LengthText （尾部段不渲染任何内容）。
具有许多多段线索的填字游戏的示例位于：https://www.theguardian.com/crosswords/cryptic/28038 - 我已使用此填字游戏进行测试（但未将定义包含在代码库中，因为我不这样做）没有权限分发它）。
我们支持 Markdown 的一个子集。
**bold** text 。这些 Markdown 标签会在线索视图或其他显示线索的地方转换为 CSS 样式。partial*italic*sa _comp**lic**ated_ example| 风格 | 降价标签 | 例子 | 相关 CSS 类 |
|---|---|---|---|
| 斜体 | _或者* | Some _italic_ text. | .cw-italic { font-style: italic; } |
| 大胆的 | __或者** | Some **bold** text. | .cw-bold { font-weight: bold; } |
| 粗斜体 | ___或者*** | Some ___bold, italic___ text. | 上面的类是合并的。 |
每当加载CrosswordSource时，我们就会动态确定 GridView 尺寸。
该项目的设计遵循模型-视图-控制器（MVC）设计模式。文件和代码工件的命名遵循此模式。
该项目目前正在进行中。总体设计目标是：
该项目有两个运行的工作流程：
每当提出拉取请求时，拉取请求工作流程就会运行。这将：
每个阶段都在所有最新 Node 版本上运行，上传覆盖阶段除外，该阶段仅针对 Node.js LTS 版本运行。当拉取请求合并到main分支时，如果更改触发新版本，则Release Please将打开一个发布拉取请求。合并此请求后，将运行主工作流程。
当 Release Please 拉取请求合并到 main 时，主工作流程将运行。这将：
NPM_TOKEN密钥，则部署到 NPM每个阶段都在所有最新 Node 版本上运行，上传覆盖阶段除外，该阶段仅针对 Node.js LTS 版本运行。
️ 请注意，NPM 发布步骤将包设置为公共 - 如果您有私有模块，请不要忘记更改此设置。
要添加贡献者，请在 anNode.jsy 拉取请求中使用如下注释：
@all-contributors please add @<username> for docs, code, tests
更详细的文档可在以下位置找到：
allcontributors.org/docs/en/bot/usage
当对main进行更改时，工作流的“请发布”阶段将确定是否应生成新版本（通过检查是否存在面向用户的更改）以及新版本号应该是什么（通过检查常规版本的日志）提交）。完成此操作后，如果需要发布，则会打开一个新的拉取请求来创建该发布。
使用以下命令强制使用特定的发行版本：
# Specify your version. We use Semantic Versioning (https://semver.org/)
version= " 0.1.0 "
git commit --allow-empty -m " chore: release ${version} " -m " Release-As: ${version} " 戴夫·科尔 | 保罗·西班牙 | 米莎·卡列茨基 ？ |
这是一个需要处理的事情的分散列表，一旦完成其中大部分工作，较大的部分就可以移至 GitHub 问题：
a或d表示across或down简化填字游戏模型（这意味着我们不必有两个线索数组） 
