Què és?

Spectra és un trencaclosques de deducció diari que vaig crear. Bàsicament és “Mastermind barrejat amb Wordle barrejat amb curiositats de dades”. Reps un petit conjunt d’elements (normalment entre 4 i 9) i els has d’arrossegar en l’ordre correcte de més gran a més petit. El truc: no et dic per quin criteri els ordenes. És l’alçada? La població? L’esperança de vida? L’any de llançament? Ho has d’endevinar provant diferents ordres i aprenent del feedback.

Cada element mostra si està en la posició absoluta correcta després d’enviar la teva resposta, així que vas iterant sobre la teva hipòtesi fins que ho encertes o et quedes sense intents.

Juga-hi aquí: https://spectra.quest/

Per què el vaig crear

Sempre m’han agradat els jocs de deducció: trencaclosques on has d’endevinar informació oculta a partir de feedback limitat. Volia alguna cosa que combinés el moment satisfactori de “ajà!” del Mastermind amb el format diari del Wordle, però amb un gir que requerís coneixements reals o raonament en lloc de només vocabulari.

A més, també volia crear un joc de trencaclosques on estigui permès buscar informació a internet.

El repte era fer trencaclosques que creessin aquell moment de manera consistent sense semblar arbitraris. Massa fàcil i és avorrit. Massa difícil i és frustrant. Trobar aquest equilibri va necessitar moltes iteracions.

Com funciona

El bucle de joc és senzill:

• Entrada: Arrossega i deixa anar els elements en una llista vertical (de més gran a més petit)
• Feedback: Cada element mostra si està en la posició absoluta correcta
• Deducció: Usa la informació parcial per reduir tant el criteri com l’ordre correcte

La clau és que estàs resolent dos trencaclosques alhora: per quin criteri estàs ordenant, i quin és l’ordre real.

Stack tecnològic

Vaig crear Spectra amb tecnologia web moderna per mantenir-lo ràpid:

• Next.js 16 + React 19 + TypeScript amb l’App Router
• Tailwind CSS v4 per als estils
• dnd-kit per a arrossegar i deixar anar compatible amb tàctil i accessible
• Framer Motion per a animacions suaus
• Zustand per a la gestió d’estat amb persistència

Al backend, faig servir rutes API de Next.js amb Redis i Postgres per a coses com les classificacions i el guardat anònim al núvol. Tot el sistema funciona bé amb serverless.