重要提示:這項工作正在進行中!當我找出最合適的 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 --lts
git 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 test
Linting 由 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.txt
dev
環境生產資產由 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*s
a _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 @ 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
簡化填字遊戲模型(這意味著我們不必有兩個線索數組)