# MIL-002: Step 1 - User interface

## Metadata
| Key | Value |
| --- | --- |
| ID | MIL-002 |
| CrossReference | [BC-001], [US-001], [UC-001] |
| Language | en |
| Domain | it |

## Version History
| Date | Status | Author | Reviewer | Change | Commit |
| --- | --- | --- | --- | --- | --- |
| 2026-10-14 | Accepted | Jens Tirsvad Nielsen | AI as stand-in for S01 | Initial version | [c3fbcbc] |

---

## Purpose

Decide whether the window of assignment step 1 is complete: a card with a language name and a word, and the two buttons, laid out as the wireframe shows.

## Deliverable

The program starts and shows the window described in `docs/uc-001/wireframe.md`: a 2 x 2 grid where the card (a canvas with the front image and two texts) spans both columns, and the unknown and known buttons are below it. The card shows placeholder text; no data is read yet. The four images are generated by a script of this repository.

## Go / No-Go Criteria

| # | Criterion (objectively checkable) | Go | No-Go |
| --- | --- | --- | --- |
| 1 | `python -m flash_card` opens a window titled "Flashy" with background `#B1DDC6` and padding 50 px | Observed, and asserted by the e2e test where a display exists | Different title, colour or padding |
| 2 | The canvas is 800 x 526 and holds one image and two texts (Arial 40 italic, Arial 60 bold) | Asserted by the e2e test | Any difference |
| 3 | The buttons use `wrong.png` and `right.png` with no border and sit in row 1, columns 0 and 1 | Asserted by the e2e test | Any difference |
| 4 | The view holds no rule: the view model gives the texts | View model unit tests pass without Tkinter | A rule is in the view |
| 5 | The code review against QC-PY-001 has no failed Mandatory criterion | `RC-*` verdict Go | Verdict No-Go |
| 6 | `pytest` exits with 0 | Exit code 0 | Any failure |

## Dependencies

| Depends on | Reason |
| --- | --- |
| MIL-001 | The configuration, layer skeleton and tooling |

## Traceability

| Business Case objective / KPI / user story | Reference |
| --- | --- |
| Objective 1, step 1 of the assignment | [BC-001] |
| US-001.01 See a flash card | [US-001] |

## Ownership

| Role | Stakeholder ID (SA) |
| --- | --- |
| Owner | S01 |
| Approving reviewer | S01 (AI as stand-in in autonomous mode) |

## Target Date

2026-10-15 — within the delivery window that ends 2026-10-21 ([BC-001] constraint).

## Tasks

| # | Task | Summary | Needs its own Use Case/User Story? | Reference |
| --- | --- | --- | --- | --- |
| 1 | Generate the card and button images | Write `tools/generate_images.py`, a standard library script that draws `card_front.png`, `card_back.png` (800 x 526, rounded card), `right.png` and `wrong.png` (button icons) with a PNG writer, so no course asset is redistributed; commit the four generated files in `src/flash_card/presentation/assets/`. | No | |
| 2 | Show the flash card window | Build `FlashCardView` with Tkinter: window title, padding, background, a 2 x 2 grid, the card canvas spanning two columns with image and two texts, and the two image buttons, as in the wireframe. Keep `PhotoImage` objects as attributes so they are not garbage collected. | Yes | US-001.01, wireframe.md |
| 3 | Add the view model, entry point and composition root | `FlashCardViewModel` exposes the language name and word (placeholders at this step), `presentation/app.py` builds and runs the view, and `python -m flash_card` calls it. | Yes | US-001.01 |
| 4 | Test the view model and the window | Unit tests of the view model; an e2e test that creates the window, reads the canvas and button configuration and destroys it, skipped when no display is available. | No | |

---

[BC-001]: ../business-case.md
[US-001]: ../user-stories.md
[UC-001]: ../uc-001/uc.md
[c3fbcbc]: https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/031-flash-card/commit/c3fbcbcfaf799e0ae34aed7e14d3bc8a62f03db3