svelte-crossword

By Amelia Wattenberger and Russell Goldenberg.

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:

[
  {
    "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

Bindings

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