65 lines
1.7 KiB
Markdown
65 lines
1.7 KiB
Markdown
# Architecture
|
|
|
|
## Overview
|
|
|
|
mcalc is a simple calculator application built with Dioxus 0.7. The architecture follows a clean separation between UI and business logic.
|
|
|
|
## Components
|
|
|
|
### `src/main.rs`
|
|
- Application entry point
|
|
- Loads global CSS stylesheet
|
|
- Renders the root `Calculator` component
|
|
|
|
### `src/ui.rs`
|
|
- Contains the `Calculator` component
|
|
- Manages reactive state via Dioxus Signals
|
|
- Renders the display and keypad grid
|
|
- Delegates operations to `logic.rs`
|
|
|
|
### `src/logic.rs`
|
|
- Pure business logic functions
|
|
- No Dioxus dependencies
|
|
- Handles digit input, operator selection, and calculation
|
|
|
|
## State Management
|
|
|
|
The calculator uses Dioxus `Signal<String>` for reactive state:
|
|
|
|
| Signal | Purpose |
|
|
|--------|---------|
|
|
| `first_num` | First operand |
|
|
| `second_num` | Second operand |
|
|
| `operator` | Selected operator (+, -, *, /) |
|
|
|
|
State flows from `ui.rs` to `logic.rs` via function parameters. The UI component owns the state; logic functions mutate it through write handles.
|
|
|
|
## Data Flow
|
|
|
|
```
|
|
User Input → ui.rs (onclick handlers) → logic.rs (pure functions) → State Update → Re-render
|
|
```
|
|
|
|
1. User clicks a button
|
|
2. Event handler calls logic function (e.g., `input_digit`)
|
|
3. Logic function mutates the signal
|
|
4. Dioxus detects the change and re-renders
|
|
|
|
## Design System
|
|
|
|
The UI follows the [BYTEMALTE design system](BYTEMALTE.md):
|
|
|
|
- Dark theme with `#0F172A` background
|
|
- Primary accent: `#8888FF`
|
|
- Secondary accent: `#3DDC84`
|
|
- Error/clear: `#EF4444`
|
|
|
|
## File Responsibilities
|
|
|
|
| File | Responsibility |
|
|
|------|----------------|
|
|
| `main.rs` | App initialization, asset loading |
|
|
| `ui.rs` | Component rendering, state ownership |
|
|
| `logic.rs` | Calculator operations, validation |
|
|
| `assets/main.css` | Styling, theming, animations |
|