An interactive children's picture book that explains the end of season keeper squad rules, on the working assumption that the reader is four.
A full squad is twenty eight players. A coach keeps fourteen into the next year and redrafts the rest, so the sheet has fourteen slots. Slots one to twelve take any player. Slots thirteen and fourteen must be twenty one or under, or have played twenty five games or less. If you have nobody who qualifies, the slots are left empty.
Barry does not qualify.
Click either half of the spread, drag the page with your finger or mouse, swipe,
or use the arrow keys. Home and End jump to the cover and the endpaper.
Three pages do something when you touch them: count the twenty eight, tap the two special slots, and ask Barry to leave slot thirteen.
Sound is synthesised in the browser and starts switched off.
Plain HTML, CSS and ES modules. No framework, no build step, no dependencies, no network requests at runtime.
Every illustration is hand written SVG, composed from one shared set of drawing parts so the same coach is recognisably the same coach on every page. Nothing here was generated.
index.html the words, and the whole book without scripting
styles.css paper, type, the spread, the phone, print
js/state.js where you are in the book. no DOM, so it is testable
js/book.js the page turn engine. knows nothing of the content
js/pages.js maps each page to its artwork
js/interactions.js the three touch gags
js/sfx.js synthesised sound
art/parts.js players, the sheet, the ground, the ball
art/act1..3.js the eighteen illustrations
The words live in index.html and only there, so the book still reads top to
bottom with scripting switched off.
python -m http.server 8099
# then open http://localhost:8099npm test # node --testCovers the page state machine, the drawing parts, and the rule that tapping the same player twice does not count him twice.
The type is Literata, under the SIL Open Font License. See fonts/OFL.txt.