Files
031-flash-card/docs/milestones/mil-002-step1-user-interface.md
T

3.9 KiB

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