crosswords js
v0.1.14
PENTING : Pekerjaan ini sedang dalam proses! API mungkin berubah secara dramatis saat saya mencari tahu mana yang paling sesuai.
Kontrol teka-teki silang yang kecil dan ringan untuk web. teka-teki silang-js adalah:
Terinspirasi oleh teka-teki silang online gratis yang luar biasa di The Guardian Crosswords.
Demo: dwmkerr.github.io/crosswords-js/
Dokumentasi proyek ditulis dalam Markdown dan terletak di repositori di ./docs .
Instal paket:
npm install crosswords-jsSertakan sumber paket JavaScript yang diperkecil dan CSS di halaman web Anda:
< link
href =" node_modules/crosswords-js/dist/crosswords.css "
rel =" stylesheet "
/>
< script src =" node_modules/crosswords-js/dist/crosswords.js " > </ script > Untuk membuat teka-teki silang, cari atau edit CrosswordSource , yang dapat import dari file JSON sederhana untuk membuat 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) "
},
...
]
}Contoh file CrosswordSource lengkap dapat ditemukan di sini, di sana atau di mana saja.
Selanjutnya, CrosswordDefinition perlu dikompilasi menjadi CrosswordModel . Kompilasi memvalidasi CrosswordDefinition , memastikan tidak ada ketidaksesuaian dalam struktur, misalnya:
Dalam kode JavaScript Anda, muat paket crosswords-js dan CrosswordDefinition :
import { compileCrossword , newCrosswordController } from 'crosswords-js' ;
import crosswordDefinition from 'node_modules/crosswords-js/data/ftimes_17095.json' ;Sekarang dapatkan elemen DOM yang akan menjadi induk dari kotak teka-teki silang dan blok petunjuk:
Misalnya, jika kita memiliki elemen
divplaceholder di suatu tempat di halaman web kita:... < div id =" crossword-grid-placeholder " /> ... < div id =" crossword-clues-placeholder " />Kami menemukan elemen melalui halaman web DOM:
const gridParent = document . getElementById ( 'crossword-grid-placeholder' ) ; const cluesParent = document . getElementById ( 'crossword-clues-placeholder' ) ;
Dan teruskan elemen crosswordDefinition , gridParent dan viewParent ke konstruktor Controller :
let controller = newCrosswordController (
crosswordDefinition ,
gridParent ,
cluesParent ,
) ;Ini mengikat gridView dan petunjuk silang ke DOM halaman web.
Anda dapat menggunakan controller untuk memanipulasi gridView secara terprogram - elemen DOM kisi teka-teki silang.
Panggil metode pengendali kejadian pengguna controller secara langsung dalam kode
// Check the current clue answer against the solution.
controller . testCurrentClue ( ) ; Ikat metode pengendali peristiwa pengguna melalui atribut id atau class pada elemen DOM di markup HTML Anda, seperti tombol .
< 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" ] ) ;Untuk informasi lebih lanjut mengenai topik ini, lihat dokumentasi modul API.
Misalnya, lihat kode server pengembangan.
Pustaka dikirimkan dengan beberapa gaya default sederhana, tetapi bertujuan agar mudah disesuaikan. Lihat crossword-styling.md untuk detailnya.
Server pengembangan adalah aplikasi Node.js murni dari paket crosswords-js . Ini menjalankan hampir semua fungsi yang tersedia. Kode ini ditemukan di direktori dev repositori ini.
# Open the development server on http://localhost:5173
npm startKami sangat menyarankan Anda mengikuti alur kerja "segitiga" yang populer, seperti yang direkomendasikan oleh GitHub, saat mengerjakan proyek ini. Ini membantu kolaborasi dengan:
- menghasilkan urutan komit linier yang sederhana untuk permintaan tarik, dan
- dengan mudah menggabungkan perubahan dalam repo upstream.
Periksa kodenya dan buka direktori root repositori...
git clone https://github.com/dwmkerr/crosswords-js.git &&
cd crosswords-jsKemudian...
# From the repository root, bootstrap the package and all tools
bin/bootstrap-posix-ish.sh
# Open the development server
npm startJika Anda menjalankan Windows versi modern, Anda dapat menambahkan distro Linux ke komputer Anda menggunakan WSL dan kemudian ikuti petunjuk Linux di atas.
Jika skrip di atas gagal atau tidak sesuai dengan lingkungan Anda...
# 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 startJika Anda telah menginstal Node Version Manager (nvm) dengan mengikuti prosedur yang disarankan, Anda dapat mengikuti versi terbaru nvm, npm, node LTS, dan versi paket terbaru untuk modul ini dengan menjalankan secara rutin:
# Update the tools and packages used in this environment
npm run updateAnda dapat mengotomatiskan pemeriksaan manual di bagian bawah pada setiap komit ke repositori git lokal Anda.
npm run qa:installJika Anda perlu melewati pemeriksaan otomatis, lakukan perubahan lalu jalankan:
git commit --no-verify
Kami menggunakan MochaJS untuk pengujian unit. Kode sumber pengujian terletak di repositori di ./test . Jalankan tes dengan:
npm testLinting disediakan oleh ESLint, yang juga dikonfigurasi untuk menggunakan Prettier untuk pemformatan kode:
# Lint the code.
npm run lint
# Lint and fix the code.
npm run lint:fixDokumentasi dan HTML dapat diperiksa kesesuaian standarnya menggunakan Prettier:
# Check html and docs for correctness.
npm run prettier
# Check and fix html and docs for correctness.
npm run prettier:fixEjaan dapat diperiksa menggunakan 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:allPastikan Anda membangun dan menata aset produksi
# Build and stage the production assets
npm run build && git add dist/Silakan instal templat git commit kami. Hal ini memungkinkan pedoman penerapan proyek diawali dengan pesan git commit standar. Dari direktori root repositori Anda:
git config --local commit.template ./.git-commit-template.txt Aset produksi lingkungan dev dibangun oleh ViteJS di dev/dist . Folder dist dibuat saat aset dibuat.
# Build the assets under dev/dist
npm run dev:build Anda dapat melihat pratinjau aset produksi dengan menjalankan perintah berikut dan membuka browser di http://localhost:4173/
# Build the assets and preview locally at http://locahost:4173
npm run dev:previewAnda juga dapat menemukan pintasan keyboard ini di dokumentasi
Ini adalah pintasan default:
Anda dapat mengganti pintasan default dengan membuat set eventBinding Anda sendiri. Hal ini dijelaskan dalam kasus penggunaan API.
Ini sedikit rumit. Saya telah mencoba memastikan sintaksisnya sedekat mungkin dengan apa yang pembaca lihat di teka-teki silang tercetak untuk membuatnya sejelas mungkin. Berikut ini contohnya:
{
"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) "
}]
} Perhatikan bahwa PanjangTeks (yang akan menjadi (9,3,5) dalam petunjuk linier) telah terpisah. Namun, teka-teki silang GridView akan menampilkan Panjang Teks lengkap untuk segmen petunjuk (kepala) pertama (dan tidak ada apa pun untuk segmen ekor).
Contoh teka-teki silang dengan banyak petunjuk multi-segmen ada di: https://www.theguardian.com/crosswords/cryptic/28038 - Saya telah menggunakan teka-teki silang ini untuk pengujian (tetapi tidak menyertakan definisinya dalam basis kode karena saya tidak' tidak memiliki izin untuk mendistribusikannya).
Kami mendukung sebagian dari penurunan harga.
**bold** text . Tag Markdown ini diubah menjadi gaya CSS diclusesView , atau di mana pun petunjuk ditampilkan.partial*italic*sa _comp**lic**ated_ example| Gaya | Tag penurunan harga | Contoh | Kelas CSS terkait |
|---|---|---|---|
| miring | _ atau * | Some _italic_ text. | .cw-italic { font-style: italic; } |
| berani | __ atau ** | Some **bold** text. | .cw-bold { font-weight: bold; } |
| tebal-miring | ___ atau *** | Some ___bold, italic___ text. | Kelas-kelas di atas digabungkan. |
Kami menentukan dimensi GridView secara dinamis setiap kali CrosswordSource dimuat.
Perancangan proyek ini mengikuti pola desain Model-view-controller (MVC). Penamaan file dan artefak kode mengikuti pola ini.
Proyek ini saat ini sedang dalam proses. Tujuan desain secara keseluruhan adalah:
Ada dua alur kerja yang dijalankan untuk proyek ini:
Setiap kali permintaan tarik dimunculkan, Alur Kerja Permintaan Tarik dijalankan. Ini akan:
Setiap tahap dijalankan pada semua versi Node terbaru, kecuali tahap cakupan upload yang hanya berjalan untuk versi Node.js LTS. Ketika permintaan tarik digabungkan ke cabang main , jika perubahan memicu rilis baru, maka Tolong Rilis akan membuka Permintaan Tarik Rilis. Saat permintaan ini digabungkan, Alur Kerja Utama dijalankan.
Ketika permintaan tarik Rilis Harap digabungkan ke utama, Alur Kerja Utama dijalankan. Ini akan:
NPM_TOKEN disetelSetiap tahap dijalankan pada semua versi Node terbaru, kecuali tahap cakupan upload yang hanya berjalan untuk versi Node.js LTS.
️ Perhatikan bahwa langkah NPM Publish menyetel paket ke publik - jangan lupa mengubahnya jika Anda memiliki modul pribadi.
Untuk menambahkan kontributor, gunakan komentar seperti di bawah ini dalam permintaan tarik anNode.jsy:
@all-contributors please add @<username> for docs, code, tests
Dokumentasi lebih rinci tersedia di:
allcontributors.org/docs/en/bot/usage
Ketika perubahan pada main dibuat, tahapan alur kerja Release Please akan menentukan apakah rilis baru harus dibuat (dengan memeriksa apakah ada perubahan yang dihadapi pengguna) dan juga berapa nomor versi baru yang seharusnya (dengan memeriksa log konvensional berkomitmen). Setelah ini selesai, jika rilis diperlukan, permintaan penarikan baru akan dibuka yang akan membuat rilis.
Paksa versi rilis tertentu dengan perintah ini:
# 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} " Dave Kerr | Paulus Spanyol | Misha Kaletsky ? |
Ini adalah daftar hal-hal yang harus dikerjakan, setelah sebagian besar telah selesai, bagian yang lebih besar dapat dipindahkan ke Masalah GitHub:
a atau d untuk across atau down dalam teks petunjuk (artinya kita tidak harus memiliki dua susunan petunjuk) 
