Sample only. The names on this page are invented, and they are not real medicines. This page is not medical advice. Everything stays in your browser.
The app, its clock and its state machine
- Press and hold a tile to open it.
- Drag the hours sideways, then let go.
- Press and hold the hours to close it.
The app reads this clock. The schedule code gives each result.
TileThe app does not record a dose that you take. It only shows the next time, so the first button moves the clock to that time.
The state machine of
The real XState machine. The app gives each tile its own actor. The lit box is the state of that actor now.
The day
Each dot is a result of dosesInDay() for the offset in the database. Drag a wheel, and the dots of that item move.
How it works
The page builds the source of packages/app with no change. react-native-web draws the components of React Native.
The real code
App.tsxand each component: the tiles, the wheel and the dot grid.lib/medMachine.ts: the state of one tile.lib/useMedRegistry.ts: it keeps at most one tile open.lib/schedule.ts: the doses of a day and the next dose.lib/layout.ts: the grid of tiles.lib/useWheelDrag.ts: the drag of the hours.lib/medsCollection.ts: the SignalDB collection, saved inlocalStoragehere.
What the page replaces
- The item list. The page uses five invented names.
- The clock. The slider gives the app its time, so you can see any hour of the day.
- The screen size. The app reads the size of the phone frame, not of your window.
- Haptics and the glass effect. A browser has neither, so the tiles are plain and the buzz does nothing.
The app starts from its list each time. A reload does the same here, so a reload puts the hours back. The page sends nothing to a server.