By Amelia Wattenberger and Russell Samora.
npm install svelte-crossword
<script>
import Crossword from "svelte-crossword";
const data = [
{
"clue": "Black-and-white cookie",
"answer": "OREO",
"direction": "down",
"x": 0,
"y": 0
},
...
]
</script>
<Crossword data="{data}" />
An array of objects with the following required properties:
property | type | description |
---|---|---|
clue |
String | Clue text |
answer |
String | Answer text (auto-capitalizes) |
direction |
String | "across" or "down" |
x |
Number | starting x position (column) of clue |
y |
Number | starting y position (row) of clue |
custom |
String | optional custom class name to apply |
[
{
"clue": "Clue text",
"answer": "ANSWER",
"direction": "across",
"x": 0,
"y": 0,
"custom": "class-name"
}
]
Note: X and Y coordinates can be zero or one based, it will detect automatically.
parameter | default | type | description |
---|---|---|---|
data |
required | Array | crossword clue/answer data |
theme |
"classic" |
String | preset theme to use |
actions |
["clear", "reveal", "check"] |
Array | toolbar actions |
revealDuration |
1000 |
Number | reveal transition duration in ms |
breakpoint |
720 |
Number | when to switch to stacked layout |
disableHighlight |
false |
Boolean | turn off puzzle highlight |
showCompleteMessage |
true |
Boolean | show message overlay after completion |
showConfetti |
true |
Boolean | show confetti during completion message |
showKeyboard |
false |
Boolean | force on-screen keyboard display (overriding auto-check) |
keyboardStyle |
"outline" |
String | keyboard button style |
binding | type | description |
---|---|---|
revealed |
Boolean | If the puzzle is showing all answers or not |
You can choose a preset theme by passing the prop:
<Crossword theme="classic" />
Available themes:
classic
(default)dark
citrus
amelia
You can set your own global CSS variables to override theme defaults or roll-your-own. Simply create new a CSS variable prefixed with xd-
to override the defaults. A Crossword
component has a top-level class of .svelte-crossword
.
.svelte-crossword {
--xd-font: sans-serif; /* font-family for whole puzzle */
--xd-primary-highlight-color: #ffcc00; /* color for focused cell */
--xd-secondary-highlight-color: #ffec99; /* color for other cells in current clue */
--xd-main-color: #1a1a1a; /* color for text, gridlines, void cells */
--xd-bg-color: #fff; /* color for puzzle background */
--xd-accent-color: #efefef; /* color for buttons */
--xd-scrollbar-color: #cdcdcd; /* color for scrollbar handle */
--xd-order: row; /* row = clues on left, row-reverse = clues on right */
}
For more detailed customization, simply do a more targeted CSS selection. For example...
.svelte-crossword .cell text.number {
font-size: 0.5em;
}
You can provide more fine-grained control over the toolbar and completion message with custom slots.
<Crossword>
<div
class="toolbar"
slot="toolbar"
let:onClear
let:onReveal
let:onCheck >
<button on:click="{onClear}">clear puzzle</button>
<button on:click="{onReveal}">show answers</button>
<button on:click="{onCheck}">check cells</button>
</div>
<Crossword>
<Crossword>
<div slot="complete">
<h3>OMG, congrats!</h3>
<img
alt="celebration"
src="https://media3.giphy.com/media/QpOZPQQ2wbjOM/giphy.gif" />
</div>
</Crossword>
cd example
npm run dev