crosswords js
v0.1.14
IMPORTANTE : ¡Este es un trabajo en progreso! La API puede cambiar drásticamente a medida que decida cuál es la más adecuada.
Control de crucigramas pequeño y liviano para la web. crucigramas-js es:
Inspirado en los excelentes crucigramas en línea gratuitos de The Guardian Crosswords.
Demostración: dwmkerr.github.io/crosswords-js/
La documentación del proyecto está escrita en Markdown y se encuentra en el repositorio en ./docs .
Instale el paquete:
npm install crosswords-jsIncluya la fuente del paquete JavaScript minimizado y CSS en su página web:
< link
href =" node_modules/crosswords-js/dist/crosswords.css "
rel =" stylesheet "
/>
< script src =" node_modules/crosswords-js/dist/crosswords.js " > </ script > Para crear un crucigrama, localice o edite un CrosswordSource , que se puede import desde un archivo JSON simple para crear un 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) "
},
...
]
}Se pueden encontrar ejemplos completos de archivos CrosswordSource aquí, allá o en todas partes.
Más adelante, CrosswordDefinition debe compilarse en un CrosswordModel . La compilación valida el CrosswordDefinition , asegurándose de que no haya incongruencias en la estructura, por ejemplo:
En su código JavaScript, cargue el paquete crosswords-js y un CrosswordDefinition :
import { compileCrossword , newCrosswordController } from 'crosswords-js' ;
import crosswordDefinition from 'node_modules/crosswords-js/data/ftimes_17095.json' ;Ahora obtenga los elementos DOM que serán los padres de la cuadrícula de crucigramas y los bloques de pistas:
Por ejemplo, si tenemos elementos
divde marcador de posición en algún lugar de nuestra página web:... < div id =" crossword-grid-placeholder " /> ... < div id =" crossword-clues-placeholder " />Localizamos el elemento a través de la página web DOM:
const gridParent = document . getElementById ( 'crossword-grid-placeholder' ) ; const cluesParent = document . getElementById ( 'crossword-clues-placeholder' ) ;
Y pase los elementos crosswordDefinition , gridParent y viewParent al constructor del Controlador :
let controller = newCrosswordController (
crosswordDefinition ,
gridParent ,
cluesParent ,
) ;Esto vincula el crucigrama gridView y CluesView al DOM de la página web.
Puede utilizar el controller para manipular mediante programación gridView , el elemento DOM de la cuadrícula de crucigramas.
Llame a los métodos del controlador de eventos del usuario del controller directamente en el código
// Check the current clue answer against the solution.
controller . testCurrentClue ( ) ; Vincule los métodos del controlador de eventos del usuario mediante atributos de id o class en elementos DOM en su marcado HTML, como botones .
< 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" ] ) ;Para obtener más información sobre estos temas, consulte la documentación de la API del módulo.
Para ver ejemplos, consulte el código del servidor de desarrollo.
La biblioteca viene con algunos estilos predeterminados simples listos para usar, pero pretende ser fácilmente personalizable. Consulte crossword-styling.md para obtener más detalles.
El servidor de desarrollo es una aplicación Node.js pura del paquete crosswords-js . Ejerce casi todas las funciones disponibles. El código se encuentra en el directorio de desarrollo de este repositorio.
# Open the development server on http://localhost:5173
npm startLe recomendamos encarecidamente que siga el popular flujo de trabajo "triangular", recomendado por GitHub, cuando trabaje en este proyecto. Ayuda a la colaboración mediante:
- producir secuencias de confirmación simples y lineales para solicitudes de extracción, y
- incorporar fácilmente cambios en el repositorio upstream.
Consulte el código y abra el directorio raíz del repositorio...
git clone https://github.com/dwmkerr/crosswords-js.git &&
cd crosswords-jsentonces...
# From the repository root, bootstrap the package and all tools
bin/bootstrap-posix-ish.sh
# Open the development server
npm startSi está ejecutando una versión moderna de Windows, puede agregar una distribución de Linux a su computadora usando WSL y luego seguir las instrucciones de Linux anteriores.
Si el script anterior falló o no se adapta a su entorno...
# 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 startSi instaló Node Version Manager (nvm) siguiendo el procedimiento recomendado, puede mantenerse al día con las últimas versiones de nvm, npm, node LTS y las últimas versiones de paquetes para este módulo ejecutando regularmente:
# Update the tools and packages used in this environment
npm run updatePuede automatizar las comprobaciones manuales en la sección siguiente en cada confirmación en su repositorio git local.
npm run qa:installSi alguna vez necesita omitir las comprobaciones automáticas, prepare sus cambios y luego ejecute:
git commit --no-verify
Usamos MochaJS para pruebas unitarias. El código fuente de la prueba se encuentra en el repositorio en ./test . Ejecute las pruebas con:
npm testESLint proporciona Linting, que también está configurado para usar Prettier para formatear el código:
# Lint the code.
npm run lint
# Lint and fix the code.
npm run lint:fixSe puede verificar que la documentación y el HTML cumplan con los estándares utilizando Prettier:
# Check html and docs for correctness.
npm run prettier
# Check and fix html and docs for correctness.
npm run prettier:fixLa ortografía se puede revisar usando 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:allAsegúrese de construir y organizar los activos de producción .
# Build and stage the production assets
npm run build && git add dist/Instale nuestra plantilla de confirmación de git. Esto permite que las pautas de confirmación del proyecto tengan como prefijo el mensaje de confirmación de git estándar. Desde el directorio raíz de su repositorio:
git config --local commit.template ./.git-commit-template.txt Los activos de producción del entorno dev los construye ViteJS en dev/dist . La carpeta dist se crea cuando se crean los activos.
# Build the assets under dev/dist
npm run dev:build Puede obtener una vista previa de los recursos de producción ejecutando el siguiente comando y abriendo un navegador en http://localhost:4173/
# Build the assets and preview locally at http://locahost:4173
npm run dev:previewTambién puedes encontrar estos atajos de teclado en la documentación.
Estos son los atajos predeterminados:
Puede anular los accesos directos predeterminados creando sus propios conjuntos eventBinding . Esto se describe en un caso de uso de API.
Esto es un poco complicado. He tratado de asegurarme de que la sintaxis sea lo más parecida a la que un lector vería en un crucigrama impreso para que esto sea lo más claro posible. Aquí hay un ejemplo:
{
"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) "
}]
} Tenga en cuenta que el texto de longitud (que sería (9,3,5) en una pista lineal) se ha separado. Sin embargo, el crucigrama GridView representará el texto de longitud completo para el primer segmento de pista (principal) (y nada para los segmentos de cola).
Un ejemplo de un crucigrama con muchas pistas de múltiples segmentos se encuentra en: https://www.theguardian.com/crosswords/cryptic/28038. He usado este crucigrama para realizar pruebas (pero no incluí la definición en el código base porque no lo hago). No tengo permisos para distribuirlo).
Admitimos un subconjunto de Markdown.
**bold** text . Estas etiquetas Markdown se convierten a estilos CSS en CluesView o en cualquier otro lugar donde se muestren las pistas.partial*italic*sa _comp**lic**ated_ example| Estilo | etiqueta de descuento | Ejemplo | Clase CSS asociada |
|---|---|---|---|
| itálico | _ o * | Some _italic_ text. | .cw-italic { font-style: italic; } |
| atrevido | __ o ** | Some **bold** text. | .cw-bold { font-weight: bold; } |
| negrita-cursiva | ___ o *** | Some ___bold, italic___ text. | Las clases anteriores están combinadas. |
Determinamos las dimensiones de GridView dinámicamente cada vez que se carga un CrosswordSource .
El diseño de este proyecto sigue el patrón de diseño Modelo-vista-controlador (MVC). La denominación de archivos y artefactos de código sigue este patrón.
Este proyecto es actualmente un trabajo en progreso. Los objetivos generales del diseño son:
Hay dos flujos de trabajo que se ejecutan para el proyecto:
Cada vez que se genera una solicitud de extracción, se ejecuta el flujo de trabajo de solicitud de extracción. Esto:
Cada etapa se ejecuta en todas las versiones recientes de Node, excepto la etapa de cobertura de carga que solo se ejecuta para la versión LTS de Node.js. Cuando una solicitud de extracción se fusiona con la rama main , si los cambios desencadenan una nueva versión, Release Please abrirá una solicitud de extracción de versión. Cuando se fusiona esta solicitud, se ejecuta el flujo de trabajo principal.
Cuando una solicitud de extracción Liberar por favor se fusiona con main, se ejecuta el flujo de trabajo principal. Esto:
NPM_TOKEN está configuradoCada etapa se ejecuta en todas las versiones recientes de Node, excepto la etapa de cobertura de carga que solo se ejecuta para la versión LTS de Node.js.
️ Tenga en cuenta que el paso de publicación de NPM configura el paquete como público; no olvide cambiar esto si tiene un módulo privado.
Para agregar contribuyentes, use un comentario como el siguiente en una solicitud de extracción de Node.jsy:
@all-contributors please add @<username> for docs, code, tests
Documentación más detallada está disponible en:
allcontributors.org/docs/en/bot/usage
Cuando se realizan cambios en main , la etapa Release Please del flujo de trabajo determinará si se debe generar una nueva versión (verificando si hay cambios que enfrenta el usuario) y también cuál debe ser el nuevo número de versión (verificando el registro de versiones convencionales). confirma). Una vez hecho esto, si se requiere una versión, se abre una nueva solicitud de extracción que creará la versión.
Fuerce una versión de lanzamiento específica con este comando:
# 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} " David Kerr | pablo españa | Misha Kaletsky ? |
Esta es una lista dispersa de cosas en las que trabajar, una vez que se haya hecho una buena parte de ellas, las partes más grandes se pueden mover a GitHub Issues:
a o d para across o down en el texto de la pista (lo que significa que no tenemos que tener dos conjuntos de pistas) 
