crosswords js
v0.1.14
هام : هذا العمل مستمر! قد تتغير واجهة برمجة التطبيقات (API) بشكل كبير أثناء تحديد ما هو أكثر ملاءمة.
تحكم صغير وخفيف الوزن في الكلمات المتقاطعة للويب. الكلمات المتقاطعة-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 من ملف 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 إلى مُنشئ وحدة التحكم :
let controller = newCrosswordController (
crosswordDefinition ,
gridParent ,
cluesParent ,
) ;يؤدي هذا إلى ربط عرض الكلمات المتقاطعة GridView anf ClionsView بصفحة الويب 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 . يمارس تقريبا جميع الوظائف المتاحة. تم العثور على الكود في دليل التطوير لهذا المستودع.
# 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، فيمكنك إضافة توزيعة Linux إلى جهاز الكمبيوتر الخاص بك باستخدام 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 . قم بإجراء الاختبارات باستخدام:
npm testيتم توفير عملية الفحص بواسطة 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 الخاص بنا. يؤدي هذا إلى تمكين بادئة إرشادات التزام المشروع برسالة التزام 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 للكلمات المتقاطعة سيعرض النص الكامل للجزء الأول (الرأس) من الدليل (ولا شيء للقطاعات الخلفية).
يوجد مثال على الكلمات المتقاطعة التي تحتوي على العديد من الأدلة متعددة المقاطع على: https://www.theguardian.com/crosswords/cryptic/28038 - لقد استخدمت هذه الكلمات المتقاطعة للاختبار (ولكن لم أدرج التعريف في قاعدة التعليمات البرمجية لأنني لا أفعل ذلك) ليس لديك أذونات لتوزيعه).
نحن ندعم مجموعة فرعية من تخفيض السعر.
**bold** text . يتم تحويل علامات Markdown هذه إلى أنماط 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. | يتم الجمع بين الفئات المذكورة أعلاه. |
نحدد أبعاد GridView ديناميكيًا عندما يتم تحميل CrosswordSource .
يتبع تصميم هذا المشروع نمط تصميم وحدة التحكم في العرض (MVC). تتبع تسمية الملفات والعناصر البرمجية من هذا النمط.
هذا المشروع هو حاليا في التقدم. أهداف التصميم الشاملة هي:
هناك نوعان من سير العمل يتم تشغيلهما للمشروع:
كلما تم رفع طلب سحب، يتم تشغيل سير عمل طلب السحب. هذا سوف:
يتم تشغيل كل مرحلة على جميع إصدارات Node الحديثة، باستثناء مرحلة تغطية التحميل التي تعمل فقط على إصدار Node.js LTS. عندما يتم دمج طلب سحب في الفرع main ، إذا أدت التغييرات إلى إصدار جديد، فسيقوم الإصدار من فضلك بفتح طلب سحب الإصدار. عند دمج هذا الطلب، يتم تشغيل سير العمل الرئيسي.
عند دمج طلب سحب الإصدار من فضلك في الملف الرئيسي، يتم تشغيل سير العمل الرئيسي. هذا سوف:
NPM_TOKENيتم تشغيل كل مرحلة على جميع إصدارات Node الحديثة، باستثناء مرحلة تغطية التحميل التي تعمل فقط على إصدار Node.js LTS.
️ لاحظ أن خطوة نشر NPM تجعل الحزمة عامة - لا تنس تغيير هذا إذا كان لديك وحدة نمطية خاصة.
لإضافة مساهمين، استخدم تعليقًا مثل ما يلي في طلب السحب anNode.jsy:
@all-contributors please add @<username> for docs, code, tests
مزيد من الوثائق التفصيلية متاحة على:
allcontributors.org/docs/en/bot/usage
عند إجراء تغييرات على main ، ستعمل مرحلة "الإصدار الرجاء" في سير العمل على تحديد ما إذا كان يجب إنشاء إصدار جديد (من خلال التحقق مما إذا كانت هناك تغييرات تواجه المستخدم) وأيضًا رقم الإصدار الجديد (من خلال التحقق من سجل الإصدارات التقليدية) يرتكب). بمجرد الانتهاء من ذلك، إذا كان الإصدار مطلوبًا، فسيتم فتح طلب سحب جديد سيؤدي إلى إنشاء الإصدار.
فرض إصدار إصدار محدد باستخدام هذا الأمر:
# 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:
a أو d across أو down في نص الدليل (بمعنى أننا لا نحتاج إلى مصفوفتين من القرائن) 
