usulpro
/
math-tasks
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
math-tasks/tasks/cargo-filling/CLAUDE.md

4.6 KiB
Raw Blame History

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