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 > หากต้องการสร้างคำไขว้ ให้ค้นหาหรือแก้ไข CrosswordSource ซึ่งสามารถ import ed จากไฟล์ JSON แบบธรรมดาเพื่อสร้าง 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 ,
) ;สิ่งนี้จะผูก crossword gridView และ เบาะแส View ลงใน DOM ของหน้าเว็บ
คุณสามารถใช้ controller เพื่อจัดการ gridView โดยทางโปรแกรม - องค์ประกอบ DOM ตารางไขว้
เรียกเมธอด ตัวจัดการเหตุการณ์ผู้ใช้ ของ controller โดยตรงในโค้ด
// Check the current clue answer against the solution.
controller . testCurrentClue ( ) ; ผูกวิธี จัดการเหตุการณ์ผู้ใช้ ผ่าน id หรือแอตทริบิวต์ class บนองค์ประกอบ DOM ในมาร์กอัป HTML ของคุณ เช่น ปุ่ม
< 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 สำหรับรายละเอียด
เซิร์ฟเวอร์การพัฒนา เป็นแอปพลิเคชัน Node.js ของแพ็คเกจ Crosswords-js มันออกกำลังกายฟังก์ชันการทำงานที่มีอยู่เกือบทั้งหมด พบโค้ดได้ในไดเร็กทอรี dev ของที่เก็บนี้
# Open the development server on http://localhost:5173
npm startเราขอแนะนำ อย่างยิ่ง ให้คุณปฏิบัติตามเวิร์กโฟลว์ "สามเหลี่ยม" ยอดนิยม ตามที่ GitHub แนะนำ เมื่อทำงานกับโปรเจ็กต์นี้ มันช่วยเหลือการทำงานร่วมกันโดย:
- การสร้างลำดับการคอมมิตเชิงเส้นอย่างง่ายสำหรับการร้องขอแบบดึงและ
- รวมการเปลี่ยนแปลงใน repo อัพสตรีมได้อย่างง่ายดาย
ตรวจสอบโค้ดและเปิดไดเร็กทอรีรากของที่เก็บ...
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 เวอร์ชันใหม่ คุณสามารถเพิ่ม Linux distro ลงในคอมพิวเตอร์ของคุณโดยใช้ WSL จากนั้นทำตามคำแนะนำของ 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 test รันการทดสอบด้วย:
npm testLinting จัดทำโดย ESLint ซึ่งได้รับการกำหนดค่าให้ใช้ Prettier สำหรับการจัดรูปแบบโค้ด:
# Lint the code.
npm run lint
# Lint and fix the code.
npm run lint:fixสามารถตรวจสอบเอกสารและ HTML เพื่อความสอดคล้องมาตรฐานโดยใช้ Prettier:
# 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 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) "
}]
} โปรดทราบ ว่าความยาวข้อความ (ซึ่งจะเป็น (9,3,5) ในเบาะแสเชิงเส้น) ได้แยกออกจากกัน อย่างไรก็ตาม Crossword GridView จะแสดง ข้อความความยาวแบบ เต็มสำหรับส่วนเบาะแสแรก (ส่วนหัว) (และจะไม่แสดงอะไรเลยสำหรับส่วนท้าย)
ตัวอย่างของคำไขว้ที่มีเบาะแสหลายส่วนอยู่ที่: https://www.theguardian.com/crosswords/cryptic/28038 - ฉันใช้คำไขว้นี้เพื่อทดสอบ (แต่ไม่รวมคำจำกัดความใน codebase เนื่องจากฉันไม่ทำ) ไม่มีสิทธิ์ในการเผยแพร่)
เรารองรับชุดย่อยของ Markdown
**bold** text แท็ก Markdown เหล่านี้จะถูกแปลงเป็นรูปแบบ CSS ใน cluesView หรือที่ใดก็ตามที่แสดงเบาะแสอื่น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. | ชั้นเรียนข้างต้นจะถูกรวมเข้าด้วยกัน |
เรากำหนดขนาด GridView แบบไดนามิกทุกครั้งที่โหลด CrosswordSource
การออกแบบโครงการนี้เป็นไปตามรูปแบบการออกแบบ Model-view-controller (MVC) การตั้งชื่อไฟล์และส่วนโค้ดตามรูปแบบนี้
โครงการนี้อยู่ในระหว่างดำเนินการ เป้าหมายการออกแบบโดยรวมคือ:
มีเวิร์กโฟลว์สองเวิร์กโฟลว์ที่ทำงานสำหรับโปรเจ็กต์:
เมื่อใดก็ตามที่คำขอดึงถูกยกขึ้น เวิร์กโฟลว์คำขอดึงจะถูกรัน สิ่งนี้จะ:
แต่ละขั้นตอนจะรันบนโหนดเวอร์ชันล่าสุดทั้งหมด ยกเว้นระยะ ครอบคลุมการอัปโหลด ซึ่งจะรันสำหรับเวอร์ชัน LTS ของ Node.js เท่านั้น เมื่อคำขอดึงถูกรวมเข้ากับสาขา main หากการเปลี่ยนแปลงทำให้เกิดการเปิดตัวใหม่ Release Please จะเปิด Release Pull Request เมื่อคำขอนี้ถูกรวมเข้าด้วยกัน เวิร์กโฟลว์หลักจะถูกรัน
เมื่อรวมคำขอ Release Please Pull เข้ากับ Main Workflow จะทำงาน สิ่งนี้จะ:
NPM_TOKENแต่ละขั้นตอนจะรันบนโหนดเวอร์ชันล่าสุดทั้งหมด ยกเว้นระยะ ครอบคลุมการอัปโหลด ซึ่งจะรันสำหรับเวอร์ชัน LTS ของ Node.js เท่านั้น
โปรดทราบว่าขั้นตอนการเผยแพร่ NPM จะตั้งค่าแพ็กเกจเป็นแบบสาธารณะ - อย่าลืมเปลี่ยนสิ่งนี้หากคุณมีโมดูลส่วนตัว
หากต้องการเพิ่มผู้มีส่วนร่วม ให้ใช้ความคิดเห็นด้านล่างในคำขอดึง anNode.jsy:
@all-contributors please add @<username> 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} " เดฟ เคอร์ | พอล สเปน | มิชา คาเล็ตสกี้ - |
นี่คือรายการสิ่งที่ต้องทำใน Scattergun เมื่อทำสิ่งเหล่านี้เสร็จแล้ว บิตที่ใหญ่กว่าก็สามารถย้ายไปยังปัญหา GitHub ได้:
a หรือ d สำหรับ across หรือ down ในข้อความเบาะแส (หมายความว่าเราไม่จำเป็นต้องมีเบาะแสสองอาร์เรย์) 
