# 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