125 lines
4.6 KiB
Markdown
125 lines
4.6 KiB
Markdown
# 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
|