/svelte-crossword

Crossword component for Svelte

Primary LanguageJavaScriptMIT LicenseMIT

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

Approaches