svelte-donut-spinner
[![Netlify Status]()
A simple inclusive random spinner app. The primary use case is to enable support providers to create interesting, engaging and fun activities for people with cognitive disabilities.
A sample svelte app showcasing a number of features (See dev notes below)
Usage
Try it at https://spinner.fullmeasure.uk/
Press the space bar or click the Spin button when a random selection will be made and spoken.
Dev notes
- Based on the official svelte template with fixes to ensure prettier and eslint work in VSCode.
- Components:
- Donut - a configurable donut chart using SVG
- SpinningPointer - a SVG spinning pointer using CSS transition
- Spinner - composed of a donut chart and a spinning pointer
- Modal - a modal dialog (based on the svelte example)
- Settings - a settings pane with options for the spinner
- App - putting it all together
- Drivers (functions with side effects)
- Random number
- Speech output
- Persistent - save to local storage
- Stores - a number of useful stores for reactive i/o etc
- Svelte techniques / features
- Stores
- Reactivity
- Nested components and child content
- Other Techniques
- Dynamic CSS Grid
- Functional style code
- Misc
- Prettier configured to use section order "scripts, markup, styles" in .svelte file.
- Suggested VSCode extensions.
- All files treated as binary by git to avoid any unwanted EOL transforms.