math-tasks/tasks/asteroid-splitting/CLAUDE.md

Asteroid Splitting Task Type

Split an asteroid of weight N into two unequal parts. Each page has 4 horizontal sections separated by decorative dividers. Each section features one asteroid with a number N, and multiple formula rows where the child writes two addends that sum to N.

Layout

• Page: A4 (210mm x 297mm), white background
• Header: Hero splitter image + title "Расщепи Астероид" with subtitle
• Footer: Planet panorama with gradient fade, footer bubble with total counter
• Content: Exactly 4 sections per page, separated by decorative divider bands
• Each section:
  • Left: Large asteroid image (~26mm) with number overlay (bold, white, shadowed)
  • Center/Right: Formula rows centered, with splitter icon + small asteroid + formula
• Asteroid icons: assets/icons/pack3-asteroids/asteroid{1-16}.png
• Hero images: assets/hero-images/splitters/splitter{1-9}.png
• Footer images: assets/footers/planet{1-9}.jpeg

Number Rules

• N ranges from 1 to 10 (default document range)
• Each section shows one N value with multiple splitting options
• Number of formula rows per section (STRICT):
  • N=9..10: 6 rows
  • N=7..8: 5 rows
  • N=4..6: 3 rows
  • N=1..3: 1 row
• All splits must be into unequal parts (no N/2 + N/2)
• Formula format: [splitter img] [asteroid icon with N] = ___ + ___

Hint System (Pre-filled Answers)

For N=8,9,10 — two hints per section, progressing with each occurrence in the document:

Occurrence	Hint 1	Hint 2	Description
1st	1 + (N-1)	~half + ~half	One hint always contains 1; other splits roughly in half
2nd	A + B	B + A	Symmetric pair, A ≠ 1
3rd	1 + ___	___ + X	Partial hints with one blank; one hint contains 1, other does not
4th+	(none)	(none)	No hints

For N=5,6,7 — two hints per section, only on first occurrence, immediately at 3rd-case level:

Occurrence	Hint 1	Hint 2
1st	1 + ___	___ + X (X ≠ 1)
2nd+	(none)	(none)

Hint styling: black text (text-indigo-950) on the same underline blank, font-semibold.

Formula Row Design

Each formula row contains (left to right):

1. Small splitter image (~10mm wide, same as hero) — "shooting" at the asteroid
2. Small asteroid icon (~12mm) with number overlaid (text ~1rem, bold white)
3. = sign
4. Underline blank (~18mm)
5. + sign
6. Underline blank (~18mm)

Formula rows should be centered horizontally with ample spacing from the big asteroid.

Section Dividers

Decorative bands between sections styled as spaceship/industrial elements. One style per page, different style per page. Height ~6-8px with repeating-linear-gradient patterns.

Divider Style Library (use one per page, rotate through)

1. Construction tape — yellow/amber + dark brown diagonal stripes

   repeating-linear-gradient(-45deg, #f59e0b, #f59e0b 8px, #92400e 8px, #92400e 16px)
   

2. Police tape — blue + light blue diagonal stripes

   repeating-linear-gradient(-45deg, #3b82f6, #3b82f6 8px, #dbeafe 8px, #dbeafe 16px)
   

3. Metal beam — gray gradient with rivets feel

   repeating-linear-gradient(-45deg, #9ca3af, #9ca3af 6px, #d1d5db 6px, #d1d5db 8px, #6b7280 8px, #6b7280 14px, #d1d5db 14px, #d1d5db 16px)
   

4. Metal truss — dark gray zigzag pattern

   repeating-linear-gradient(45deg, #4b5563, #4b5563 6px, #1f2937 6px, #1f2937 12px)
   

5. Energy conduit — purple/indigo glow stripes

   repeating-linear-gradient(-45deg, #7c3aed, #7c3aed 6px, #c4b5fd 6px, #c4b5fd 10px, #5b21b6 10px, #5b21b6 16px)
   

6. Copper pipe — warm orange/brown tones

   repeating-linear-gradient(-45deg, #d97706, #d97706 6px, #fbbf24 6px, #fbbf24 10px, #b45309 10px, #b45309 16px)
   

When adding new pages, pick the next unused divider style. Track which styles are used in the document .md file.

Color Palette

Matches project-wide indigo theme:

• Title: text-indigo-950
• Subtitle: text-indigo-400
• Number overlay (large): white, text-shadow: 2px 2px 4px rgba(0,0,0,0.7)
• Number overlay (small): white, ~1rem
• Formula text: text-indigo-950
• Input blanks: border-indigo-300 underlines

Scripts

• scripts/generate.mjs — template + data -> output pipeline (standard)

Editor

editor.html?file={docId}

What the editor does

The editor adjusts the scale and rotation of asteroid images in each section. When the user changes the big asteroid (left side), the small asteroid icons in formula rows (right side) follow the same transform proportionally. This is purely visual fine-tuning — making asteroids look more natural (tilted, resized) rather than all uniform.

Controls

• Click big asteroid → select section
• +/- → scale up/down (Shift = fine 0.01 step)
• [/] → rotate ±5° (Shift = ±1°)
• 0 → reset to default
• Esc → deselect

Data flow

• Editor reads .template.html (via EditorCore)
• On load, fetches .data.json and applies transforms to DOM (img.style.transform)
• On Save, reads transforms FROM DOM → sync XHR POST → server writes .data.json
• generate.mjs reads .data.json, applies style="transform: ..." to img elements in .output.html

Status: BROKEN

The editor has a reliability problem with the save cycle. The server's save endpoint runs generate.mjs asynchronously after writing data.json. generate.mjs writes .output.html, which triggers browser-sync live-reload. The reload can interfere with the save flow, causing data loss or incomplete saves. This needs to be investigated and fixed before the editor can be used reliably.