crosswords js
v0.1.14
WICHTIG : Dies ist in Arbeit! Die API kann sich dramatisch ändern, wenn ich herausfinde, was am besten geeignet ist.
Winzige, leichte Kreuzworträtsel-Steuerung für das Web. Kreuzworträtsel-js ist:
Inspiriert von den hervorragenden kostenlosen Online-Kreuzworträtseln auf The Guardian Crosswords.
Demo: dwmkerr.github.io/crosswords-js/
Die Projektdokumentation ist in Markdown geschrieben und befindet sich im Repository unter ./docs .
Installieren Sie das Paket:
npm install crosswords-jsFügen Sie die minimierte JavaScript-Paketquelle und CSS in Ihre Webseite ein:
< link
href =" node_modules/crosswords-js/dist/crosswords.css "
rel =" stylesheet "
/>
< script src =" node_modules/crosswords-js/dist/crosswords.js " > </ script > Um ein Kreuzworträtsel zu erstellen, suchen oder bearbeiten Sie eine CrosswordSource , die aus einer einfachen JSON-Datei import werden kann, um eine CrosswordDefinition zu erstellen:
{
"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) "
},
...
]
}Vollständige Beispiele für CrosswordSource- Dateien finden Sie hier, dort oder überall.
Anschließend muss die CrosswordDefinition in ein CrosswordModel kompiliert werden. Beim Kompilieren wird die CrosswordDefinition validiert und sichergestellt, dass es keine Unstimmigkeiten in der Struktur gibt, zum Beispiel:
Laden Sie in Ihrem JavaScript-Code das Paket crosswords-js und eine CrosswordDefinition :
import { compileCrossword , newCrosswordController } from 'crosswords-js' ;
import crosswordDefinition from 'node_modules/crosswords-js/data/ftimes_17095.json' ;Holen Sie sich nun die DOM-Elemente, die als übergeordnete Elemente für das Kreuzworträtselgitter und die Hinweisblöcke dienen:
Wenn wir beispielsweise irgendwo auf unserer Webseite Platzhalter-
divElemente haben:... < div id =" crossword-grid-placeholder " /> ... < div id =" crossword-clues-placeholder " />Wir finden das Element über das Webseiten-DOM:
const gridParent = document . getElementById ( 'crossword-grid-placeholder' ) ; const cluesParent = document . getElementById ( 'crossword-clues-placeholder' ) ;
Und übergeben Sie die Elemente crosswordDefinition , gridParent und viewParent an den Controller- Konstruktor:
let controller = newCrosswordController (
crosswordDefinition ,
gridParent ,
cluesParent ,
) ;Dadurch werden die Kreuzworträtsel- GridView und CluesView in das Webseiten-DOM eingebunden.
Sie können den controller verwenden, um die GridView – das Kreuzworträtsel-Raster-DOM-Element – programmgesteuert zu manipulieren.
Rufen Sie die Benutzer-Event-Handler -Methoden des controller direkt im Code auf
// Check the current clue answer against the solution.
controller . testCurrentClue ( ) ; Binden Sie die Benutzer-Event-Handler- Methoden über id oder class an DOM-Elemente in Ihrem HTML-Markup, z. B. Buttons .
< 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" ] ) ;Weitere Informationen zu diesen Themen finden Sie in der Modul-API-Dokumentation.
Beispiele finden Sie im Entwicklungsservercode.
Die Bibliothek wird mit einigen einfachen Standardstilen ausgeliefert, soll aber leicht anpassbar sein. Weitere Informationen finden Sie unter crossword-styling.md .
Der Entwicklungsserver ist eine reine Node.js-Anwendung des Crosswords-js -Pakets. Es übt nahezu alle verfügbaren Funktionen aus. Der Code befindet sich im Dev-Verzeichnis dieses Repositorys.
# Open the development server on http://localhost:5173
npm startWir empfehlen Ihnen dringend , bei der Arbeit an diesem Projekt dem beliebten „dreieckigen“ Workflow zu folgen, wie er von GitHub empfohlen wird. Es unterstützt die Zusammenarbeit durch:
- Erstellen einfacher, linearer Commit-Sequenzen für Pull-Requests und
- Einfache Integration von Änderungen in das Upstream-Repo.
Schauen Sie sich den Code an und öffnen Sie das Repository-Stammverzeichnis ...
git clone https://github.com/dwmkerr/crosswords-js.git &&
cd crosswords-jsDann...
# From the repository root, bootstrap the package and all tools
bin/bootstrap-posix-ish.sh
# Open the development server
npm startWenn Sie eine moderne Version von Windows verwenden, können Sie mithilfe von WSL eine Linux-Distribution zu Ihrem Computer hinzufügen und dann die obigen Linux-Anweisungen befolgen.
Wenn das obige Skript fehlschlägt oder nicht zu Ihrer Umgebung passt ...
# 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 startWenn Sie Node Version Manager (nvm) gemäß dem empfohlenen Verfahren installiert haben, können Sie mit den neuesten Versionen von nvm, npm, node LTS und den neuesten Paketversionen für dieses Modul Schritt halten, indem Sie regelmäßig Folgendes ausführen:
# Update the tools and packages used in this environment
npm run updateSie können die manuellen Prüfungen im folgenden Abschnitt bei jedem Commit in Ihr lokales Git-Repository automatisieren.
npm run qa:installWenn Sie die automatischen Prüfungen jemals umgehen müssen, stellen Sie Ihre Änderungen bereit und führen Sie dann Folgendes aus:
git commit --no-verify
Wir verwenden MochaJS für Unit-Tests. Der Testquellcode befindet sich im Repository unter ./test . Führen Sie die Tests aus mit:
npm testLinting wird von ESLint bereitgestellt, das auch für die Verwendung von Prettier zur Codeformatierung konfiguriert ist:
# Lint the code.
npm run lint
# Lint and fix the code.
npm run lint:fixDokumentation und HTML können mit Prettier auf Standardkonformität überprüft werden:
# Check html and docs for correctness.
npm run prettier
# Check and fix html and docs for correctness.
npm run prettier:fixDie Rechtschreibung kann mit CSpell überprüft werden:
# 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:allStellen Sie sicher, dass Sie die Produktionsanlagen aufbauen und bereitstellen
# Build and stage the production assets
npm run build && git add dist/Bitte installieren Sie unsere Git- Commit-Vorlage . Dadurch können Projekt-Commit-Richtlinien der Standard-Git-Commit-Nachricht vorangestellt werden. Aus dem Stammverzeichnis Ihres Repositorys:
git config --local commit.template ./.git-commit-template.txt Die Produktionsressourcen dev werden von ViteJS unter dev/dist erstellt. Der Ordner dist wird beim Erstellen der Assets erstellt.
# Build the assets under dev/dist
npm run dev:build Sie können eine Vorschau der Produktionsressourcen anzeigen, indem Sie den folgenden Befehl ausführen und einen Browser unter http://localhost:4173/ öffnen.
# Build the assets and preview locally at http://locahost:4173
npm run dev:previewDiese Tastaturkürzel finden Sie auch in der Dokumentation
Dies sind die Standardverknüpfungen:
Sie können die Standardverknüpfungen überschreiben , indem Sie Ihre eigenen eventBinding Sets erstellen. Dies wird in einem API-Anwendungsfall beschrieben.
Das ist etwas fummelig. Ich habe versucht sicherzustellen, dass die Syntax dem entspricht, was ein Leser in einem gedruckten Kreuzworträtsel sehen würde, um dies so klar wie möglich zu machen. Hier ist ein Beispiel:
{
"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) "
}]
} Beachten Sie, dass sich der Längentext (der in einem linearen Hinweis (9,3,5) wäre) getrennt hat. Das Kreuzworträtsel- GridView rendert jedoch den vollständigen Längentext für das erste (Kopf-)Hinweissegment (und nichts für die Endsegmente).
Ein Beispiel für ein Kreuzworträtsel mit vielen Hinweisen aus mehreren Segmenten finden Sie unter: https://www.theguardian.com/crosswords/cryptic/28038 – Ich habe dieses Kreuzworträtsel zum Testen verwendet (aber die Definition nicht in die Codebasis aufgenommen, da ich nicht Ich habe keine Berechtigung, es zu verbreiten).
Wir unterstützen eine Teilmenge von Markdown.
**bold** text . Diese Markdown-Tags werden in der CluesView oder an anderen Stellen, an denen Hinweise angezeigt werden, in CSS-Stile konvertiert.partial*italic*sa _comp**lic**ated_ example| Stil | Markdown-Tag | Beispiel | Zugehörige CSS-Klasse |
|---|---|---|---|
| kursiv | _ oder * | Some _italic_ text. | .cw-italic { font-style: italic; } |
| deutlich | __ oder ** | Some **bold** text. | .cw-bold { font-weight: bold; } |
| fett-kursiv | ___ oder *** | Some ___bold, italic___ text. | Die oben genannten Klassen werden kombiniert. |
Wir bestimmen die GridView-Abmessungen dynamisch, wenn eine CrosswordSource geladen wird.
Der Entwurf dieses Projekts folgt dem Model-View-Controller (MVC)-Entwurfsmuster. Die Benennung von Dateien und Codeartefakten folgt diesem Muster.
Dieses Projekt ist derzeit in Arbeit. Die allgemeinen Designziele sind:
Es gibt zwei Workflows, die für das Projekt ausgeführt werden:
Immer wenn eine Pull-Anfrage ausgelöst wird, wird der Pull-Request-Workflow ausgeführt. Dies wird:
Jede Phase wird auf allen aktuellen Node-Versionen ausgeführt, mit Ausnahme der Upload- Abdeckungsphase, die nur für die LTS-Version von Node.js ausgeführt wird. Wenn ein Pull-Request mit dem main zusammengeführt wird und die Änderungen ein neues Release auslösen, öffnet Release Please einen Release-Pull-Request. Wenn diese Anfrage zusammengeführt wird, wird der Hauptworkflow ausgeführt.
Wenn eine „Release Please“-Pull-Anfrage mit der Haupt-Anforderung zusammengeführt wird, wird der Haupt-Workflow ausgeführt. Dies wird:
NPM_TOKEN Geheimnis festgelegt istJede Phase wird auf allen aktuellen Node-Versionen ausgeführt, mit Ausnahme der Upload- Abdeckungsphase, die nur für die LTS-Version von Node.js ausgeführt wird.
️ Beachten Sie, dass der NPM-Veröffentlichungsschritt das Paket auf öffentlich setzt – vergessen Sie nicht, dies zu ändern, wenn Sie ein privates Modul haben.
Um Mitwirkende hinzuzufügen, verwenden Sie einen Kommentar wie den folgenden in einer Node.jsy-Pull-Anfrage:
@all-contributors please add @<username> for docs, code, tests
Ausführlichere Dokumentation finden Sie unter:
allcontributors.org/docs/en/bot/usage
Wenn Änderungen an main vorgenommen werden, wird in der Phase „Release Please“ des Workflows ermittelt, ob eine neue Version generiert werden soll (durch Überprüfung, ob vom Benutzer vorgenommene Änderungen vorgenommen werden) und auch, wie die neue Versionsnummer lauten soll (durch Überprüfung des Protokolls der herkömmlichen Version). begeht). Sobald dies erledigt ist und ein Release erforderlich ist, wird ein neuer Pull-Request geöffnet, der das Release erstellt.
Erzwingen Sie eine bestimmte Release-Version mit diesem Befehl:
# 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 | Paul Spanien | Mischa Kaletsky ? |
Dies ist eine Liste von Dingen, an denen gearbeitet werden muss. Sobald ein großer Teil davon erledigt ist, können die größeren Teile in die GitHub-Probleme verschoben werden:
a oder d für across oder down verwenden (was bedeutet, dass wir nicht zwei Hinweisreihen haben müssen) 
