feat: feel cargo doc
This commit is contained in:
@@ -0,0 +1,124 @@
|
||||
# Cargo Filling Task Type
|
||||
|
||||
Split an asteroid to fill a spaceship cargo bay to exactly 10. Combines asteroid splitting with cargo bay loading. Teaches addition crossing the tens boundary.
|
||||
|
||||
## Math Concept
|
||||
|
||||
Given:
|
||||
- Cargo bay capacity: always **10**
|
||||
- Asteroid A already in cargo (1-9)
|
||||
- Asteroid B floating in space, B > (10 - A), so it doesn't fit whole
|
||||
- Child splits B = N + M where A + N = 10 (N fills remaining space)
|
||||
- Full expression: `A + B = (A + N) + M = C`
|
||||
- Under `(A + N)` a curly brace with "10"
|
||||
|
||||
Answer is always: N = 10 - A, M = B - N, C = A + B.
|
||||
|
||||
## Layout
|
||||
|
||||
- **Page:** A4 (210mm x 297mm), white background
|
||||
- **Header:** Hero splitter image + title + subtitle
|
||||
- **Footer:** Cabin interior (28mm, `object-cover`)
|
||||
- **Content:** 6 task cards per page in 2 columns x 3 rows grid
|
||||
- **Dividers:** Dark solid lines between cards (`border-bottom: 1.5px solid #334155`, odd cards have `border-right`)
|
||||
- **Card overflow:** `hidden` — ships get cropped at card boundary
|
||||
|
||||
## Card Layout (tuned values)
|
||||
|
||||
Each card has two zones:
|
||||
- **Visual area** (flex: 1, relative) — asteroid, ship, arrows, remnant
|
||||
- **Formula area** (flex-shrink: 0, bottom) — label + formula + brace
|
||||
|
||||
### Element positions & sizes (CSS)
|
||||
|
||||
| Element | Position | Size |
|
||||
|---------|----------|------|
|
||||
| `.space-asteroid` | `left: -7.5mm; top: 18.5mm` | `28mm × 28mm` |
|
||||
| `.cargo-ship` | `right: -12.5mm; top: -5mm` | `90mm × 42mm` |
|
||||
| `.badge-10` | `left: 68%; top: 39%` (of ship) | `22px × 22px` |
|
||||
| `.inner-ast` | `left: 86%; top: 73%` (of ship) | `14mm × 14mm` |
|
||||
| `.remnant-shape` | `left: 61%; bottom: 3mm` | `16mm × 16mm` shape |
|
||||
|
||||
### SVG arrows (viewBox `0 0 100 55`)
|
||||
|
||||
Both arrows start from asteroid center and curve outward:
|
||||
- **Arrow to ship:** `M7,30 Q30,15 52,25`
|
||||
- **Arrow to remnant:** `M7,30 Q24,57 61,47`
|
||||
|
||||
Stroke: `#6366f1`, width `0.5`, marker-end arrowhead.
|
||||
|
||||
### Visual elements
|
||||
|
||||
- **Big asteroid:** `pack3-asteroids/asteroidN.png` — colored, with white number B overlay (1.8rem)
|
||||
- **Ship:** `pack4-cargobay/cargo-bayN.png` — flipped with `scaleX(-1)` so nose points right
|
||||
- **Inner asteroid:** `items/asteroid-shapes/asteroidN.png` — line-art outline, white number A (1.1rem)
|
||||
- **Remnant:** `items/asteroid-shapes/asteroidN.png` — line-art outline (opacity 0.5), blank underline, "?" label
|
||||
- **Badge "10":** indigo circle (`#4f46e5`) with white "10"
|
||||
- **Asteroid z-index: 6** (above arrows z-index: 4)
|
||||
|
||||
### Formula
|
||||
|
||||
```
|
||||
запиши формулу для пилота
|
||||
A + B = (A + __) + __ = __
|
||||
⏟
|
||||
10
|
||||
```
|
||||
|
||||
- Label: uppercase, `#818cf8`, 0.45rem
|
||||
- Formula: single line, 0.85rem bold `#1e1b4b`
|
||||
- Brace: SVG path (width 90% of brace-group), margin-top 1.5mm
|
||||
- "10": `#6366f1`, 0.6rem bold
|
||||
- Brace gap from formula: 2mm (configurable via `braceGapMm`)
|
||||
|
||||
## Asset Conventions
|
||||
|
||||
- **Cargo bays:** `assets/icons/pack4-cargobay/cargo-bay{1-9}.png` — 6 unique per page
|
||||
- **Asteroids (colored):** `assets/icons/pack3-asteroids/asteroid{1-16}.png` — for big asteroid in space
|
||||
- **Asteroids (outline):** `assets/items/asteroid-shapes/asteroid{1-16}.png` — for inner asteroid & remnant
|
||||
- **Hero images:** `assets/hero-images/splitters/splitter{1-9}.png`
|
||||
- **Footer images:** `assets/footers/cabin{1-9}.jpeg`
|
||||
|
||||
## Problem Range
|
||||
|
||||
- A: 2-9 (value already in cargo)
|
||||
- B: must be > (10-A) and ≤ 9
|
||||
- Practical combinations:
|
||||
- A=8,9: B from 3-9 (easiest — small split)
|
||||
- A=5,6,7: B from 4-9 (medium)
|
||||
- A=2,3,4: B from 7-9 (hardest — large split)
|
||||
|
||||
## Difficulty Progression
|
||||
|
||||
- Page 1: A=8,9 with smaller B values (easy)
|
||||
- Page 2: A=5,6,7 (medium)
|
||||
- Page 3: A=2,3,4 with larger B (hard)
|
||||
|
||||
## Color Palette
|
||||
|
||||
Same as project-wide indigo theme:
|
||||
- Title: `text-indigo-950`
|
||||
- Subtitle: `text-indigo-400`
|
||||
- Number overlay (big asteroid): white with text-shadow
|
||||
- Number overlay (inner asteroid): white with text-shadow
|
||||
- Cargo "10" badge: `bg-indigo-600` circle with white text
|
||||
- Formula text: `text-indigo-950`
|
||||
- Input blanks: `border-indigo-300` underlines
|
||||
- Brace + "10" label: `#6366f1`
|
||||
- Arrows: `#6366f1`
|
||||
|
||||
## Title & Subtitle
|
||||
|
||||
- **Title:** "Заполни Трюм"
|
||||
- **Subtitle:** "На какие части нужно расщепить астероид, чтобы заполнить свободное место в трюме? Какой кусочек останется в космосе? Каков общий объём?"
|
||||
|
||||
## Scripts
|
||||
|
||||
- `scripts/generate.mjs` — template + data → output pipeline (standard, no transforms yet)
|
||||
|
||||
## Editor
|
||||
|
||||
- `editor-temp.html` — temporary drag-and-drop tuner for card element positions/sizes
|
||||
- Loads/saves state from `docs/cargo-filling-1.data.json`
|
||||
- Export button outputs JSON with CSS values and SVG arrow paths
|
||||
- Convention: edit only card 1, then apply values to all cards in template
|
||||
Reference in New Issue
Block a user