StillHammer
ba42b6d9c7
- Add hybrid deployment modes: local_dev (MVP) and production_pwa (optional) - Integrate WarFactory engine reuse with hot-reload 0.4ms - Define multi-target compilation strategy (DLL/SO/WASM) - Detail both deployment modes with cost analysis - Add progressive roadmap: Phase 1 (local), Phase 2 (POC WASM), Phase 3 (cloud) - Budget clarified: $10-20/mois (local) vs $13-25/mois (cloud) - Document open questions for technical validation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
47 lines
1.7 KiB
Markdown
47 lines
1.7 KiB
Markdown
# 🎯 **Hybrid Sizing System - Revolutionary UI Layout**
|
|
|
|
## Overview
|
|
|
|
The **Hybrid Sizing System** is a breakthrough UI layout approach that combines **responsive percentage targets** with **absolute pixel constraints** to achieve both flexible responsive design and guaranteed usability.
|
|
|
|
## 💡 **Core Concept**
|
|
|
|
Traditional UI systems force you to choose:
|
|
- **Percentages**: Responsive but can become unusable (too small/large)
|
|
- **Pixels**: Fixed size but not responsive
|
|
|
|
**Hybrid System**: Target percentages, respect absolute constraints.
|
|
|
|
## 📐 **Mathematical Formula**
|
|
|
|
```cpp
|
|
float final_size = clamp(percentage_target, absolute_min, absolute_max);
|
|
```
|
|
|
|
Where:
|
|
- `percentage_target = (percentage / 100.0f) * parent_size`
|
|
- `absolute_min` = minimum usable size in pixels
|
|
- `absolute_max` = maximum reasonable size in pixels
|
|
|
|
## 🎯 **Example in Action**
|
|
|
|
### Configuration
|
|
```json
|
|
{
|
|
"size": {"width": "20%"}, // Target 20% of parent
|
|
"min_size": {"width": 250}, // Never smaller than 250px
|
|
"max_size": {"width": 400} // Never larger than 400px
|
|
}
|
|
```
|
|
|
|
### Results Across Screen Sizes
|
|
|
|
| Screen Width | 20% Target | Constraints | **Final Size** | Status |
|
|
|-------------|-----------|-------------|----------------|--------|
|
|
| 1000px | 200px | 250-400px | **250px** | ⚖️ Clamped to minimum |
|
|
| 1400px | 280px | 250-400px | **280px** | ✅ Percentage achieved |
|
|
| 1800px | 360px | 250-400px | **360px** | ✅ Percentage achieved |
|
|
| 2500px | 500px | 250-400px | **400px** | ⚖️ Clamped to maximum |
|
|
|
|
This hybrid system represents a **fundamental advancement** in UI layout technology.
|