jq-crossword
v1.2.2
Published
A jquery plugin to create corssword games
Downloads
17
Readme
jq-crossword
Extensible crossword game made with JQuery widget
Dependencies
- jquery
- jquery ui
- widget
- keycode
- crossword-definition
Features
- Typescript sources
- Keyboard navigation. See keyboard navigation
- All the css classes are configurable. See css classes
- Configurable markup. See configurable markup
- Extensible with Widget. See jquery ui widget docs
or download the latest release
Docs
For more info, please check the docs
Demo and Playground
Please go to our demo in jsfiddle
Usage
npm i jq-crossword
Create the definition
jq-crossword uses crossword-definition to handle the model.
Please note that the x and y positions starts from 1 instead of 0, the first cell is in the x:1 and y:1 instead of is in the x:0 and y:0
/*
*To create
*
* W
* H e l l o
* i r
* s l
* t o l d
* o
* r
* y
*/
let definition = {
height:8,//height of the board, 8 cells
width:5,//width of the board, 5 cells
acrossClues:[
{
number:1, //number to identify the world, must be unique
x:1,//The x position where the word starts, starting from 1
y:2,//The y position where the word starts, starting from 1
answer:"Hello",//the word itself
clue:"A common greeting",//the clue
hints:[2],//the letter 'e' is a hint. Starting from 1
},
{
number:2,
x:3,
y:5,
answer:"Old",
clue:"Having lived for a long time; no longer young."
}
],
downClues:[
{
number:1,//this clue starts in the same cell that "Hello", so it must have the same number
x:1,
y:2,
answer:"History",
clue:"The study of past events, particularly in human affairs.",
hints:[2,7]
},
{
number:3,
x:5,
y:1,
answer:"World",
clue:"The earth is our _____"
}
]
};
//Init component
$('.crossword').crossword({
definition:definition
}).on("crossword:solved",(e)=>{
console.log("Solved!")
});Import as module
Typescript:
import * as $ from "jquery";
//choose one of the follow options
//for jquery-ui package
import "jquery-ui/ui/widget";
//for jquery-ui-dist package
import "jquery-ui-dist/jquery-ui";
import {CrosswordGame} from "jq-crossword";
$("someSelector").crossword(<CrosswordOptions>{
//options
});Vanilla ES2015
import * as $ from "jquery";
//choose one of the follow options
//for jquery-ui package
import "jquery-ui/ui/widget";
//for jquery-ui-dist package
import "jquery-ui-dist/jquery-ui";
import "jq-crossword";
$("someSelector").crossword({
//options
});Please note that depending of the bundler you are using other configurations may be necessary. For example, shimming JQuery and JQuery UI.
Traditional way
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Some Title</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="path/to/crossword-definition"></script>
<script type="text/javascript" src="path/to/jquery.crossword"></script>
</head>
<body>
<div class="crossword">
<script type="text/javascript">
$(".crossword").crossword({
//options
});
</script>
</body>
</html>JQuery ui
JQuery ui could be included in the projects in many different ways and with different packages, instead of force you to use one, we leave up to you how to include it:
Modularized
Using npm i jquery-ui that install the package allowing to import the widgets you want.
We provided a file with the imports of the required dependencies:
import "jq-snap-puzzle/esm2015/jquery-ui-deps";dist package
In npm is available the package jquery-ui-dist. Recommended if you will use the most of the framework.
Downloading a custom bundle
Go to the jquery ui download page and checks:
- core
- widget
- keycode or use this configuration
Options
Please go to CrosswordOptions
Events
| Event name | Detail | Emit | | ------------- | -------------| ----- | |crossword:clue| Triggered when a clue is completed | CrosswordClueCompletedEvent | |crossword:solved | Triggered when the game is solved | |
For more info please go to docs
Keyboard navigation
jq-crossword provides keyboard navigation:
| Key | Action | | ------------- | ------------- | | Up arrow | Move the focus to the cell above the current cell (if any cell is active and there is a cell above) | | Right arrow | Move the focus to the cell at right of the current cell (if any cell is active and there is a cell at the right) | | Down arrow | Move the focus to the cell below the current cell (if any cell is active and there is a cell below) | | Left arrow | Move the focus to the cell at left of the current cell (if any cell is active and there is a cell at the left) | | Tab | Move the focus to the next word at the current direction (across or down). If there is not next world at the current direction, move the focus to the first cell of the first word for the other list | | Shift + Tab | Move the focus to the previous word at the current direction (across or down). If there is not previous world at the current direction, move the focus to the first cell of the last word for the other list | | Backspace | Removes the value of the current cell and moves the focus to the previous cell |
Configurable markup
By default jq-crossword uses a table to generate the board, but the markup could be customized by options.
Please check the available options
Append clues list
By default the clues list are appended to the root element but could be appended in other elements by the options:
The options could be a jquery valid selector, a DomElement or a JQuery element
For example:
<div class="crossword">
</div>
<div class="crossword-across-list">
</div>$(".crossword").crossword({
//another options
acrossListAppendTo:".crossword-across-list"
})For more info, please go to docs
List titles
By default jq-crossword generates the titles for the lists in the createCluesList,
this could be override with the option createCluesListContainer
For example, use an h2 tag instead of the default one:
$(".crossword").crossword({
//another options
createCluesListContainer:()=>{
return $(`<div class="${this.options.classes.cluesListContainer}">
<h2 class="${this.options.classes.cluesListTitle}">
${
across//if is accross
? this.options.acrossListTitle //use acrossListTitle
: this.options.downListTitle //otherwise use downListTitle
}
</h2>
</div>`);
}
})For more info, please go to docs
Methods
Available methods to invoke:
| Method | Short description | | ------------- | ----------------------- | | destroy | Destroy the widget | | disable | Disable the widget | | enable | Enable the widget | | goToCell | Move the focus to a cell | | clearActive | Clear the focus | | goToCellAbove | Go to the cell above of the current active one | | goToCellBelow | Go to the cell below of the current active one | | goToCellRight | Go to the cell at right of the current active one | | goToCellLeft | Go to the cell at left of the current active one | | goToNextWord | Go to the next word | | goToPrevWord | Go to the previous word | | checkClue | Check the answer of a clue | | check | Check the answers of all the clues | | solve | Solve the game |
For more info, please go to docs
Please note that only public methods are available using $("selector").crossword("methodName","methodParams");
Known issues
- When two words starts in the same position, the navigation by tab fails