menu Menu
Prime Spy — An Interactive Exploration of Primes, Figurate Numbers, and Custom Formulas Previous Primordial Cosmic Soup — A Distant Relative of Conway's Game of Life Next

Catanalyzer — An Evaluation Tool for Static Positions in "Settlers of Catan"

I’m an avid Settlers of Catan player. To track and develop my positions, I developed my own metrics (Cumulative Resources vs Purchasing Power),  but they were really based on intuition since calculating these on the fly wasn’t really possible, not to mention I wasn’t completely sure my metrics actually any mathematical or game theoretical merit! So after some research into what professional Settlers players use, I vibe coded the Catanalyzer.

The Catanalyzer tracks each player’s cumulative resource earnings turn by turn. Two purchasing-power metrics are computed from these snapshots to give different perspectives on a player’s economic position. Neither metric reflects actual in-game spending — resources are never deducted from the simulation. Instead, each metric answers a hypothetical question: “If this player spent all of their accumulated resources right now, what is the best possible outcome?”

Both metrics use the same bank-trading model: a player may trade surplus resources for needed ones at a fixed exchange rate, adjusted downward if they control a port.

I also added what the pros use: Pip Counting and RDI (resource diversity index).

You can play with the Catanalyzer here: Catanalyzer

Catanalyzer uses a client-side, browser-based Settlers of Catan board analyzer/simulator. Everything runs in the browser — no backend.

Core:
Language │ TypeScript 5.6 (strict mode, ES2020 target)
UI framework │ React 18.3 (function components + hooks, react-jsx transform)
Build tool / dev server │ Vite 5.4 with @vitejs/plugin-react
Module system │ Native ESM (“type”: “module”, bundler resolution)

Styling:

– Tailwind CSS 3.4 utility-first CSS
– PostCSS 8 + Autoprefixer (Tailwind’s build pipeline)

Key libraries:

– Recharts 3.9 — data visualization (resource charts, stacked-area, macro-score, 2D/3D charts)
– react-grid-layout 1.5 — the draggable/resizable modular dashboard (GridBoard), with react-draggable underneath

Project structure (src/):

– Domain logic (framework-agnostic .ts): boardGenerator.ts, boardConstants.ts, hexMath.ts (utils), rdi.ts (an analytics/metric module), types.ts
– Components (.tsx): hex board rendering (HexBoard, HexTile, and vertex/edge/port overlays), interactive editing (BoardEditor, PlacementToolbar), simulation (DiceRoller), and analytics panels (RDIPanel, ResourceDisplay, several chart components)

Build & scripts:

– npm run dev (Vite dev server), npm run build (tsc && vite build), npm run preview
– base: ‘./’ in Vite config → emits relative asset URLs so the built dist/ works from any hosting path (static deploy)

 


Previous Next

Leave a Reply

Your email address will not be published. Required fields are marked *

Cancel Post Comment

keyboard_arrow_up