Marco Bressi
← Back to the lab

Memory in Svelte

Match the pairs of languages and frameworks. Written in Svelte 5 with runes: the compiler turns the component into a small amount of JavaScript, with no virtual DOM.

Moves 0

Pairs 0/8

Best —

How it works

  • State is made of runes: $state for cards, moves and open cards, $derived for pairs found and the win condition.
  • Each game draws 8 random pairs from a deck of 12, so games differ in what you match, not just in the order.
  • Face-down cards have no symbol in the DOM: shuffling can happen on the server and in the browser with no hydration differences, and the inspector won’t help you cheat.
  • Each card is a button labelled with what it shows; a live region announces matches and the win.
  • The flip animation is CSS 3D and turns off with prefers-reduced-motion.
  • Icons come from Devicon (MIT license), Node.js from Simple Icons (CC0): the project holds only the 12 SVG paths, not the whole package, filled with each pair’s tint.
  • The best score (fewest moves) is kept in the browser with localStorage.

Source code: src/pages/lab/memory