crosswords js
v0.1.14
重要: これは進行中の作業です。何が最適かを検討するにつれて、API が大幅に変更される可能性があります。
小型で軽量な Web 用クロスワード コントロール。クロスワードjsは次のとおりです。
The Guardian Crosswords の優れた無料オンライン クロスワードからインスピレーションを受けています。
デモ: dwmkerr.github.io/crosswords-js/
プロジェクトのドキュメントは Markdown で書かれており、 ./docsのリポジトリにあります。
パッケージをインストールします。
npm install crosswords-js縮小された JavaScript パッケージのソースと CSS を Web ページに含めます。
< 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 要素を取得します。
たとえば、Web ページのどこかにプレースホルダー
div要素があるとします。... < div id =" crossword-grid-placeholder " /> ... < div id =" crossword-clues-placeholder " />Web ページ DOM を介して要素を見つけます。
const gridParent = document . getElementById ( 'crossword-grid-placeholder' ) ; const cluesParent = document . getElementById ( 'crossword-clues-placeholder' ) ;
そして、 crosswordDefinition 、 gridParentおよびviewParent要素をコントローラーコンストラクターに渡します。
let controller = newCrosswordController (
crosswordDefinition ,
gridParent ,
cluesParent ,
) ;これにより、クロスワードのgridViewとclusterViewがWebページのDOMにバインドされます。
controller使用して、 gridView (クロスワード グリッド DOM 要素) をプログラムで操作できます。
controllerのユーザー イベント ハンドラーメソッドをコード内で直接呼び出します。
// Check the current clue answer against the solution.
controller . testCurrentClue ( ) ; HTML マークアップ内の DOM 要素 (ボタンなど) の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推奨手順に従ってノード バージョン マネージャー (nvm)をインストールした場合は、以下を定期的に実行することで、nvm、npm、ノード 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 testLint は ESLint によって提供され、コードのフォーマットに Prettier を使用するように構成されています。
# Lint the code.
npm run lint
# Lint and fix the code.
npm run lint:fixPrettier を使用して、ドキュメントと HTML が標準に準拠しているかどうかをチェックできます。
# Check html and docs for correctness.
npm run prettier
# Check and fix html and docs for correctness.
npm run prettier:fixCSpell を使用してスペルをチェックできます。
# 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 commit テンプレートをインストールしてください。これにより、プロジェクトのコミット ガイドラインを標準の 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 タグは、 cluesViewまたは手がかりが表示される他の場所で 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) 設計パターンに従っています。ファイルとコード成果物の命名は、このパターンに従います。
このプロジェクトは現在進行中です。全体的な設計目標は次のとおりです。
プロジェクトに対して実行されるワークフローは 2 つあります。
プル リクエストが発生するたびに、プル リクエスト ワークフローが実行されます。これにより、次のことが行われます。
各ステージは、Node.js LTS バージョンでのみ実行されるアップロード カバレッジステージを除き、最近のすべての Node バージョンで実行されます。プル リクエストがmainブランチにマージされるときに、変更によって新しいリリースがトリガーされると、「Release Please」によってリリース プル リクエストが開かれます。このリクエストがマージされると、メイン ワークフローが実行されます。
Release Please プル リクエストが main にマージされると、Main ワークフローが実行されます。これにより、次のことが行われます。
NPM_TOKENシークレットが設定されている場合は、NPM にデプロイします各ステージは、Node.js LTS バージョンでのみ実行されるアップロード カバレッジステージを除き、最近のすべての Node バージョンで実行されます。
️ NPM Publish ステップではパッケージがパブリックに設定されることに注意してください。プライベート モジュールがある場合は、これを忘れずに変更してください。
コントリビューターを追加するには、Node.jsy プル リクエストで次のようなコメントを使用します。
@all-contributors please add @ for docs, code, tests
より詳細なドキュメントは次の場所から入手できます。
allcontributors.org/docs/en/bot/usage
mainに変更が加えられると、ワークフローの「 Release Please」ステージで、新しいリリースを生成する必要があるかどうか (ユーザー向けの変更があるかどうかを確認することによって)、および新しいバージョン番号を (従来のバージョンのログを確認することによって) 決定する必要があります。コミットします）。これが完了すると、リリースが必要な場合は、リリースを作成する新しいプル リクエストが開かれます。
次のコマンドを使用して、特定のリリース バージョンを強制します。
# 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 Issues に移動できます。
acrossまたはdown aまたはd使用して、クロスワード モデルを簡素化します (つまり、手がかりの配列を 2 つ用意する必要はありません)。 
