math-tasks/tasks/crystal-battery/CLAUDE.md

4.1 KiB

Crystal Battery Task Type

Theme: sonic (assets/themes/sonic/) + nms placeholders (assets/themes/nms/)

Sonic and Shadow take turns charging a 10-cell crystal battery. One hero fills N cells, the child figures out how many the other hero needs to complete all 10. Practices complements of 10 (making 10).

Math Concept

Given:

  • Battery capacity: always 10 cells
  • Hero A fills N cells (1 < N < 10), shown with crystal icons
  • Child writes N in small input near Hero A
  • Child writes 10 - N in large input near Hero B
  • Answer: always 10 - N

Layout

  • Page: A4 (210mm x 297mm), white background
  • Header: 20mm — title centered, small Sonic (left) + Shadow (right) icons
  • Footer: 25mm — NMS planet placeholder with gradient fade
  • Content: 7 battery sections per page, distributed evenly (flex column, justify-between)
  • Section height: ~30mm

Section Layout

Full-width horizontal strip (~194mm wide inside 8mm page padding):

┌──────────┬────────────────────────────────┬──────────┐
│  Hero A  │     BATTERY (10 cells)         │  Hero B  │
│  push    │  [▣][▣][▣]...[  ][  ][  ]     │  push    │
│  [__]    │  ← N filled  (10-N) empty →    │  [____]  │
└──────────┴────────────────────────────────┴──────────┘
   28mm              ~138mm                    28mm

Odd sections (1,3,5,7): Sonic fills from left, Shadow answers Even sections (2,4,6): Shadow fills from right, Sonic answers

Battery Design

  • 10 rectangular cells in horizontal row (flex)
  • Width: 80mm, Height: 14mm
  • Border: 2px solid #334155, border-radius: 3mm
  • Terminal nub on right side (decorative, 3mm wide)
  • Filled cells: green gradient (#22c55e → #16a34a) for Sonic, red gradient (#ef4444 → #dc2626) for Shadow + SVG diamond crystal icon
  • Empty cells: #e2e8f0 background, dashed border, no icon

Crystal Placeholders

Inline SVG diamond shapes (temporary until proper crystal PNGs are generated):

  • Sonic: green (#22c55e) with darker stroke (#15803d)
  • Shadow: red (#ef4444) with darker stroke (#b91c1c)

Input Fields

  • Small input (near filling hero): 10mm x 7mm, border: 1.5px solid #a5b4fc, rounded 1.5mm
  • Large input (near answering hero): 14mm x 9mm, border: 2px solid #6366f1, rounded 2mm

Hero Variants

Cycle through push variants sequentially across sections:

  • Section 1: sonic-push-01 + shadow-push-01
  • Section 2: sonic-push-02 + shadow-push-02
  • Continue across pages (21 sections total, wraps around 10 variants)

Assets: assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-{01-10}.png and shadow-push-{01-10}.png

Color Palette

Element Color
Title text-indigo-950
Subtitle text-indigo-400
Sonic crystals #22c55e (green-500)
Shadow crystals #ef4444 (red-500)
Battery border #334155 (slate-700)
Empty cells #e2e8f0 (slate-200)
Small input border #a5b4fc (indigo-300)
Large input border #6366f1 (indigo-500)

Problem Range

N: 1-9 (number of crystals the filling hero throws) Answer: 10 - N (always 1-9)

Difficulty Progression

Page 1 (Easy): N = 9, 8, 9, 7, 8, 9, 7 → complements 1-3 Page 2 (Medium): N = 6, 5, 4, 6, 5, 4, 6 → complements 4-6 Page 3 (Hard): N = 3, 2, 1, 3, 2, 1, 4 → complements 6-9

Asset Conventions

  • Heroes: assets/themes/sonic/heroes/sonic-shadow-push/sonic-push-{01-10}.png, shadow-push-{01-10}.png
  • Footer images (placeholder): assets/themes/nms/footers/planet{1-9}.jpeg
  • Crystals: SVG placeholders (future: assets/themes/sonic/items/crystals/)

Title & Subtitle

  • Title: "Кристальная Батарея"
  • Subtitle: "Соник и Шэдоу заряжают батарею! Сколько кристаллов нужно добавить?"

Scripts

  • scripts/generate.mjs — template + data → output pipeline (minimal, no transforms initially)