33 lines
1.0 KiB
Markdown
33 lines
1.0 KiB
Markdown
# Architecture - Gridfinity Calculator
|
|
|
|
## 1. System Design
|
|
The application is a client-side only web tool.
|
|
|
|
```mermaid
|
|
graph TD
|
|
A[index.html] --> B[main.ts]
|
|
B --> C[calculator.ts]
|
|
B --> D[DOM Update]
|
|
E[User Input] --> B
|
|
```
|
|
|
|
## 2. Components
|
|
- **Input Form:** Collects drawer dimensions and unit preferences.
|
|
- **Spec Controls:** Accordion or settings panel for overriding Gridfinity defaults.
|
|
- **Calculation Engine:** Pure TS module for unit conversion and Gridfinity math.
|
|
- **Results Display:** Visual cards/readouts showing calculated values.
|
|
|
|
## 3. Data Flow
|
|
1. User changes an input.
|
|
2. `main.ts` catches the event.
|
|
3. `main.ts` gathers all current values from the DOM.
|
|
4. `main.ts` calls `calculator.ts` functions.
|
|
5. `calculator.ts` returns a results object.
|
|
6. `main.ts` updates the results section of the DOM.
|
|
|
|
## 4. Technical Stack
|
|
- **Vite:** Asset bundling and dev server.
|
|
- **TypeScript:** Type-safe logic.
|
|
- **Tailwind CSS:** Utility-first styling for speed and responsiveness.
|
|
- **Vitest:** Unit testing logic in isolation.
|