svelte-crossword

By Amelia Wattenberger and Russell Samora.

Examples

Example page

Features

• Generate puzzle from simple JSON format
• Slottable toolbar that can tap into crossword methods
• Fully responsive
• Optimized for mobile with on-screen keyboard
• Preset style themes with customization
• Puzzle validation
• Custom class names for cells and clues

Installation

npm install svelte-crossword

Usage

<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}" />

Data format

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.

Parameters

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

Bindings

binding	type	description
revealed	Boolean	If the puzzle is showing all answers or not

Themes and Custom Styles

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.

Properties (with defaults)

.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;
}

Custom Slots

You can provide more fine-grained control over the toolbar and completion message with custom slots.

Toolbar

<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>

Completion Message

<Crossword>
	<div slot="complete">
		<h3>OMG, congrats!</h3>
		<img
			alt="celebration"
			src="https://media3.giphy.com/media/QpOZPQQ2wbjOM/giphy.gif" />
	</div>
</Crossword>

Development

cd example
npm run dev

Notes

• Example data is from the October 21, 2020 NYT mini crossword
• Example data is from the October 21, 2020 NYT daily crossword

Approaches

• Context + Store
• Prop + Binding