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 què els estàs ordenant. É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 fascinat els jocs de deducció – trencaclosques on has d’inferir informació oculta a partir de feedback limitat. Volia alguna cosa que combinés el moment satisfactori de “ajà!” del Mastermind amb el format diari i compartible del Wordle, però amb un gir que requerís coneixements reals o raonament en lloc de només vocabulari.

El repte era fer trencaclosques que creessin aquell moment de manera consistent on tot encaixa sense que semblés arbitrari. Massa fàcil i és avorrit. Massa obscur i és frustrant. Trobar aquest equilibri va requerir molta iteració.

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ó: Utilitza la informació parcial per reduir tant la mètrica com l’ordre correcte

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

Stack tecnològic

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

• 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 (això va ser crucial – aconseguir que funcionés bé tant amb ratolí com amb tàctil va requerir molta feina)
• Framer Motion per a animacions suaus amb física
• 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 l’enviament de classificacions i guardat anònim al núvol. Tot el sistema funciona bé amb serverless.

Què vaig aprendre

Crear Spectra em va ensenyar molt sobre el disseny de trencaclosques i l’experiència d’usuari:

• El disseny de trencaclosques és difícil. Crear un moment “ajà!” de manera consistent sense ser arbitrari requereix una curació acurada.
• L’experiència d’arrossegar i deixar anar necessita un ajust acurat per sentir-se responsiu tant amb ratolí com amb tàctil. Els petits detalls importa molt.
• La gestió d’estat es beneficia de modelar explícitament els estats del joc (intents, bloquejos, feedback, victòria/derrota) en lloc d’intentar derivar-ho tot sobre la marxa.

Encara estic iterant sobre la dificultat i la varietat dels trencaclosques, però ha estat molt satisfactori veure que la gent en gaudeix!