crosswords js
v0.1.14
중요 : 이 작업은 진행 중입니다! 가장 적합한 것이 무엇인지 알아내면서 API가 크게 변경될 수 있습니다.
작고 가벼운 웹용 크로스워드 컨트롤입니다. crosswords-js는 다음과 같습니다.
The Guardian Crosswords의 뛰어난 무료 온라인 십자말풀이에서 영감을 받았습니다.
데모: 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 > 크로스워드를 만들려면 간단한 JSON 파일에서 import CrosswordDefinition을 생성할 수 있는 CrosswordSource를 찾거나 편집하세요.
{
"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 및 힌트 보기를 웹페이지 DOM에 바인딩합니다.
controller 사용하여 십자말 풀이 그리드 DOM 요소인 GridView를 프로그래밍 방식으로 조작할 수 있습니다.
코드에서 직접 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, 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: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 커밋 템플릿을 설치하세요. 이를 통해 프로젝트 커밋 지침을 표준 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 . 이러한 마크다운 태그는 단서 보기 또는 단서가 표시되는 다른 위치에서 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(Model-view-controller) 디자인 패턴을 따릅니다. 파일 및 코드 아티팩트의 이름은 이 패턴을 따릅니다.
이 프로젝트는 현재 진행 중인 작업입니다. 전반적인 디자인 목표는 다음과 같습니다.
프로젝트에 대해 실행되는 두 가지 워크플로가 있습니다.
풀 요청이 발생할 때마다 풀 요청 워크플로가 실행됩니다. 이는 다음을 수행합니다.
Node.js LTS 버전에서만 실행되는 업로드 적용 범위 단계를 제외하고 각 단계는 모든 최신 Node 버전에서 실행됩니다. 풀 요청이 main 브랜치에 병합될 때 변경 사항으로 인해 새 릴리스가 트리거되면 Release Please가 릴리스 풀 요청을 엽니다. 이 요청이 병합되면 기본 워크플로가 실행됩니다.
Release Please 풀 요청이 기본에 병합되면 기본 워크플로가 실행됩니다. 이는 다음을 수행합니다.
NPM_TOKEN 비밀이 설정된 경우 NPM에 배포Node.js LTS 버전에서만 실행되는 업로드 적용 범위 단계를 제외하고 각 단계는 모든 최신 Node 버전에서 실행됩니다.
️ NPM 게시 단계에서는 패키지를 공개로 설정합니다. 비공개 모듈이 있는 경우 이를 변경하는 것을 잊지 마세요.
기여자를 추가하려면 anNode.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 문제로 이동할 수 있습니다.
across 또는 down 에 a 또는 d 사용하여 십자말 풀이 모델을 단순화합니다(단서 배열이 두 개일 필요가 없음을 의미). 
