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:

| 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