A web-based editor for creating and balancing Quartett (Top Trumps) card decks. Configure properties, assign budgets, visualize cards with radar charts, and export everything as CSV or ZIP.
Prerequisites: Node.js (v18 or later)
-
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open http://localhost:3000 in your browser.
Other scripts:
npm run build– Build for productionnpm run start– Start the production servernpm run lint– Run the ESLint linter
| File / Folder | Role |
|---|---|
app/layout.tsx |
Root Next.js layout – sets browser title and global metadata |
app/page.tsx |
Main application page – the complete Quartett editor UI |
app/globals.css |
Global Tailwind CSS styles |
components/RadarChart.tsx |
D3.js radar/spider chart component for card visualization |
hooks/use-mobile.ts |
Custom React hook for responsive mobile detection |
lib/types.ts |
Core TypeScript type definitions (Card, PropertyDefinition, DeckSettings, QuartettProject) |
lib/csv-utils.ts |
CSV and ZIP import/export utilities |
lib/utils.ts |
General helper utilities (e.g., Tailwind class merging) |
next.config.ts |
Next.js configuration (standalone output, webpack tuning) |
metadata.json |
App metadata for AI Studio integration |
LICENSE |
MIT License |
Quartett-Meister is a Next.js 15 application using the App Router with React 19 and Tailwind CSS 4. All editing logic lives in a single client-side component (app/page.tsx) that manages state for:
- Settings – Configure the deck: number of cards (N), number of properties (P), points scale (S), budget (B), and tolerance (T).
- Properties – Define each property's name, unit, value range (min/max), win condition (higher/lower wins), and scale type (linear/logarithmic).
- Cards – Edit each card by distributing a fixed point budget across properties using sliders. A radar chart provides live visual feedback.
- Table / Grid view – Review all cards at a glance.
- Documentation – Built-in guide explaining the CSV schema and app workflow.
- Import / Export – Save and load work via CSV files (settings, properties, cards separately) or as a single ZIP archive. Projects can also be shared as a URL-encoded link.
The budget system ensures balance: every card must spend between B - T and B + T points total across all its properties, keeping all cards equally powerful while still allowing strategic trade-offs.
Radar charts are rendered with D3.js and allow interactive editing directly on the chart.
This project is licensed under the MIT License – © Markus Rudolph.