Commit 8188d00
authored
Add QR code transfer button to cooking timer (#187)
> Modify cooking-timer.html to add a "transfer to your phone" button which is always available on the timer page - clicking it shows a large QR code in a modal (use an appropriate NPM library loaded via CDN) - that QR code contains a URL that has EVERYTHING needed to transmit state to a new browser, right down to the timing (it includes the time the timer started, an end time if one is set) - it also includes the URLs to recipes that are being cooked by URL and the full JSON of any recipes specified using JSON
>
> Use a # URL not a ? URL so nothing gets logged to servers on the way
>
> The user will scan that QR code with their phone camera and naigate to that URL in their mobile browser. Implement logic that inflates that #fragment state back into a full page, redirecting to a URL if needed and adding the recipes to that browser's localStorage - de-duplicating by URL or by full JSON content to make sure existing recipes are not duplicated
>
> On scanning the QR code and loading that page the timer should be running at the same point as the one on the original computer, with all settings mirrored across
>
> Since the logic for this one is complex write tests for it. Include those tests in the .html file itself, have them run on every page load and have them be invisible if they pass and have them add an errors failed details/summary box (collapsed) at the bottom of the page if they fail
>
> Use Playwright to run these tests yourself before committing
Add a "Transfer to Phone" button that generates a QR code containing all timer state encoded in the URL fragment. When scanned on a phone:
- Timer continues running at the same point (synced via startTime)
- All recipes are transferred (URLs by reference, JSON by value)
- Recipes are deduplicated on import to avoid duplicates in localStorage
- State is fully restored including multi-recipe mode
Implementation:
- Uses qrcode-generator library for QR code rendering
- State serialized as base64-encoded JSON in URL fragment (#transfer=...)
- Fragment URLs avoid server logging of transferred data
- Inline tests run on page load, hidden when passing
- Playwright tests verify transfer functionality
Follow-up prompts:
> Use compression to make the QR code data smaller (it can be too long) - run curl against https://textarea.my/ to see how that app uses the web browser libraries and imitate it
> That worked great! The transfer to iphone button and choose different recipe buttons are too big on mobile and end up stacked on top of each other, make them smaller and ensure that if they are stacked there is a gap between them
https://gistpreview.github.io/?d72df1d31ec6787a083e48af3fbee0251 parent 5f29555 commit 8188d00
File tree
7 files changed
+3756
-2
lines changed- lib
- tests
7 files changed
+3756
-2
lines changed| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
14 | 14 | | |
15 | 15 | | |
16 | 16 | | |
| 17 | + | |
| 18 | + | |
| 19 | + | |
| 20 | + | |
| 21 | + | |
| 22 | + | |
0 commit comments