# Архитектура Calculator
## Дерево файлов
```
calculator/
├── service.yaml # Конфиг для ci-templates (тип, домен, ресурсы)
├── .drone.yml # CI/CD пайплайн (копия base.drone.yml)
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
├── public/
│ └── favicon.svg
└── src/
├── main.tsx # Точка входа, рендер
├── App.tsx # Роутинг: /login → /calculator
├── App.css # Глобальные стили (reset, body, центрирование)
│
├── context/
│ └── AuthContext.tsx # React Context + Provider для псевдоавторизации
│
├── hooks/
│ ├── useCalculator.ts # Стейт-машина калькулятора (вся логика)
│ └── useKeyboard.ts # Слушатель клавиатуры → маппинг на действия
│
├── utils/
│ └── calculate.ts # Чистые функции вычислений
│
├── pages/
│ ├── LoginPage.tsx # Страница входа
│ ├── LoginPage.module.css
│ ├── CalculatorPage.tsx # Страница калькулятора (шапка + калькулятор)
│ └── CalculatorPage.module.css
│
└── components/
├── Calculator/
│ ├── Calculator.tsx # Обёртка: Display + Keypad
│ └── Calculator.module.css
├── Display/
│ ├── Display.tsx # Выражение + результат
│ └── Display.module.css
├── Keypad/
│ ├── Keypad.tsx # Сетка кнопок
│ └── Keypad.module.css
└── Button/
├── Button.tsx # Кнопка калькулятора
└── Button.module.css
```
## Схема компонентов
```
← context/AuthContext.tsx
/login → ← Форма логина
/ → ← Редирект на /login если нет юзера
├── Header (логин + выход)
└──
├── ← expression + result
└── ← сетка
```
## Слои приложения
### 1. AuthContext — псевдоавторизация
```
AuthContext {
user: string | null // текущий логин
login(name: string): void // сохранить в localStorage, установить user
logout(): void // очистить localStorage, user = null
}
```
- При инициализации читает `localStorage.getItem('calculator_user')`
- `login()` — записывает в localStorage, обновляет стейт
- `logout()` — удаляет из localStorage, обновляет стейт
- `ProtectedRoute` — обёртка, редиректит на `/login` если `user === null`
### 2. useCalculator — стейт-машина
Управляет всем состоянием калькулятора. Чистая логика, без побочных эффектов.
```
State {
display: string // текущее отображаемое число ("0")
expression: string // строка выражения ("12 + 3")
operator: string | null // текущий оператор
prevValue: number | null // предыдущее значение
waitingForOperand: boolean
lastResult: boolean // только что получили результат
}
Actions (dispatch):
inputDigit(digit: string)
inputDecimal()
inputOperator(op: string)
calculate()
clear()
backspace()
toggleSign()
percent()
```
Логика переходов:
```
[Ввод цифры]
waitingForOperand=true → display = digit, waiting = false
waitingForOperand=false → display = display + digit (макс 16 символов)
[Оператор (+, -, *, /)]
prevValue=null → сохранить display как prevValue, запомнить оператор
prevValue!=null → вычислить промежуточный результат, показать его
[Равно]
Вычислить prevValue {operator} display, показать результат
[C] → полный сброс к начальному состоянию
[Backspace] → удалить последний символ из display (минимум "0")
[+/-] → сменить знак display
[%] → display = display / 100
```
### 3. useKeyboard — слушатель клавиатуры
```
useKeyboard(actions: CalculatorActions): Map
```
- Вешает `keydown` listener на `window`
- Маппинг клавиш → действий:
| key | action |
|-----|--------|
| `0`-`9` | `inputDigit(key)` |
| `.` | `inputDecimal()` |
| `+` `-` `*` `/` | `inputOperator(key)` |
| `Enter`, `=` | `calculate()` |
| `Escape` | `clear()` |
| `Backspace` | `backspace()` |
| `%` | `percent()` |
- Возвращает `activeKey` (текущая нажатая клавиша) для подсветки кнопки
- `preventDefault()` для `/` (чтобы не открывался поиск в браузере)
### 4. calculate.ts — вычисления
```typescript
function calculate(a: number, operator: string, b: number): number
```
- Чистая функция, без стейта
- Обработка деления на ноль → возвращает `Infinity` (дисплей покажет "Error")
- Округление для борьбы с погрешностью float (0.1 + 0.2)
### 5. Компоненты
**Display** — два блока:
- `expression` — мелкий шрифт, выражение сверху
- `result` — крупный шрифт, текущее число/результат снизу
- Auto-fit: `font-size` уменьшается при длине > 10 символов
**Keypad** — CSS Grid 4x5:
```
| C | +/- | % | ÷ |
| 7 | 8 | 9 | × |
| 4 | 5 | 6 | − |
| 1 | 2 | 3 | + |
| 0 (span 2) | . | = |
```
**Button** — три варианта стиля:
- `default` — цифры (тёмно-серый фон)
- `function` — C, +/-, % (светло-серый фон)
- `operator` — +, -, ×, ÷, = (акцентный цвет)
- Пропс `active` — подсветка при нажатии с клавиатуры
## Адаптивность
```css
/* Калькулятор */
max-width: 360px; /* ограничение на больших экранах */
width: calc(100vw - 32px); /* на маленьких — почти вся ширина */
margin: 0 auto;
/* Центрирование на экране */
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
/* Кнопки */
min-height: 56px; /* тач-friendly */
font-size: clamp(16px, 4vw, 20px);
/* Дисплей результата */
font-size: clamp(28px, 8vw, 40px);
```
## Поток данных
```
[Keyboard Event] [Button Click]
│ │
▼ ▼
useKeyboard ──── action ────→ useCalculator (useReducer)
│ │
│ activeKey │ state
▼ ▼
◄──── props ────
│ │
▼ ▼