Higher or Lower is a simple offline-first Progressive Web App game where the player has three lives to score as many points as they can by predicting whether the next card in the deck will have a value that is higher or lower than the current one (basically a rip off of Bruce Forsyth's Play Your Cards Right).
I built this to try out new things, especially CSS3 Grid which I've used to build the card faces, whilst allowing me to gain more experience with ES6 and Webpack.
I have built two versions of this game:
Given time, I might create versions written in React/Preact and Vue.js as well...
- Webpack 3
- ES6
- Service Workers, using Workbox
- SASS with PostCSS
- CSS3 Grid
- Flexbox
- Yarn
- Jest
- HTTP/2 CDN delivery
- Full offline support via Service Workers
- PageSpeed Insights score of 100/100 on both mobile and desktop
- 100/100 Progressive Web App score on Lighthouse
- WebPageTest speed index of ~640
- Inlined critical path CSS using Critical
- Persistent "Best score" via localStorage
Higher or Lower has been tested on the latest versions of modern browser across Windows, Android, MacOS and iOS. That's right - no Internet Explorer support. I've thrown off the shackles and it feels good (if you can't do that on your personal projects, when can you).