# 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
   ```css
   repeating-linear-gradient(-45deg, #f59e0b, #f59e0b 8px, #92400e 8px, #92400e 16px)
   ```
2. **Police tape** — blue + light blue diagonal stripes
   ```css
   repeating-linear-gradient(-45deg, #3b82f6, #3b82f6 8px, #dbeafe 8px, #dbeafe 16px)
   ```
3. **Metal beam** — gray gradient with rivets feel
   ```css
   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
   ```css
   repeating-linear-gradient(45deg, #4b5563, #4b5563 6px, #1f2937 6px, #1f2937 12px)
   ```
5. **Energy conduit** — purple/indigo glow stripes
   ```css
   repeating-linear-gradient(-45deg, #7c3aed, #7c3aed 6px, #c4b5fd 6px, #c4b5fd 10px, #5b21b6 10px, #5b21b6 16px)
   ```
6. **Copper pipe** — warm orange/brown tones
   ```css
   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.