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 . При компиляции проверяется определение кроссворда , гарантируя отсутствие несоответствий в структуре, например:
В свой код 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 и KeysView к 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, при работе над этим проектом. Это способствует сотрудничеству за счет:
- создание простых, линейных последовательностей коммитов для пул-реквестов и
- легко вносить изменения в исходный репозиторий.
Проверьте код и откройте корневой каталог репозитория...
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) "
}]
} Обратите внимание, что длина текста (которая в линейной подсказке будет равна (9,3,5) ) разделилась. Однако GridView кроссворда будет отображать полный текст длины для первого (головного) сегмента подсказки (и ничего для хвостовых сегментов).
Пример кроссворда со множеством многосегментных подсказок находится по адресу: https://www.theguardian.com/crosswords/cryptic/28038. Я использовал этот кроссворд для тестирования (но не включил определение в кодовую базу, поскольку не у меня нет разрешения на его распространение).
Мы поддерживаем подмножество Markdown.
**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 веткой, если изменения вызывают новый выпуск, то Release Please откроет запрос на включение выпуска. При объединении этого запроса запускается основной рабочий процесс.
Когда запрос Release Please объединяется с основным, запускается основной рабочий процесс. Это будет:
NPM_TOKENКаждый этап запускается во всех последних версиях Node, за исключением этапа покрытия загрузки , который работает только для версии Node.js LTS.
️ Обратите внимание, что на этапе публикации 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 Issues:
a « d для across » или down в тексте подсказки (это означает, что нам не обязательно иметь два массива подсказок) 
