Numix
A cognitive math challenge built with Svelte 5 Runes. Features a diamond-cross UX layout, real-time difficulty scoring, and type-safe architecture.
Numix 🧮
A cognitive math challenge built with Svelte 5 Runes.
Numix is a 24-point-like-game, but the given numbers are 1-19, and the target number is 20-50.
🚀 Features
- ⚡️ Svelte 5 Runes: Built entirely with
$state,$derived, and$effectfor reactive elegance. - 💎 Diamond Cross Layout: A custom UX pattern placing operators at the gravitational center of number cards.
- 🧠 Cognitive Scoring: Algorithms evaluate operation difficulty (e.g., division > addition) to calculate dynamic scores.
- 📱 Mobile First: Optimized touch targets, haptic-ready structure, and responsive viewport units.
- 📊 Result Analytics: Tracks accuracy, combo streaks, and solving speed to encourage improvement.
🛠 Tech Stack
| Layer | Technology | Reason |
|---|---|---|
| Core | Svelte 5 | Runes provide fine-grained reactivity without overhead. |
| Language | TypeScript | Strict types prevent logic errors in math operations. |
| Styling | Tailwind CSS | Rapid UI development with consistent design tokens. |
| Logic | Custom Solver | Backtracking algorithm with cognitive cost heuristics. |
| Storage | LocalStorage | Persistent high scores without backend dependency. |
🎮 Gameplay
- Select a number card.
- Choose an operator from the center hub.
- Select a second number to merge.
- Reach the target value before time runs out.
Pro Tip: Multiplication and Division yield higher scores but carry higher cognitive load risks.
📦 Installation & Usage
Quick Start (Vite)
npm create vite@latest numix -- --template svelte-ts
cd numix
npm install
# Replace src/App.svelte with the provided code
npm run dev
