Which One is a small game that has been my playground for testing the TypeScript & Mobx combo
- Built using create-react-app-typescript and MobX
- Can be used as a boilerplate for small React games
- Fully responsive (looks better on mobile though)
- PWA-like, works offline (still a bit of a WIP)
- Card sets can be easily customized and extended
The current version of the project has a few known issues that I haven't had a chance to fix yet:
- On Safari desktop/mobile the audio is not working (see below)
- On Safari mobile there's a touch delay. It goes away if you save the app to the homescreen and start it from there (see below)
- On the latest version of Chrome for iOS, for some reasons, the CSS animations are not working smoothly (they were working fine before the Chrome MD redesing)
I already had a chance to try the TypeScript & MobX combo in the past but I wasn't able to type the inject as I wished.
In fact, instead of injecting the entire stores, I prefer passing to the inject a function (mapStoresToProps) that allows me to decouple the component/container from the stores, just like with the Redux mapStateToProps.
This time though I was able to fix it using this nice little trick, suggested here, that makes the inject works nicely 🎉.
I've been followint this issue since its "discovery" and unfortunately it's still here: the create-react-app-typescript TSLint default settings are really hardcore and opinionated so you'll probably find yourself disabling a bunch of rules in tslint.json (or use other complex workarounds).
Hopefully it's going to be fixed soon.
The touch delay on Safari for iOS is still here as well, and is super annoying when building small React/HTML5 games like this one.
It should be fixable by playing around with CSS and react-pointable.
Yep, since Safari 11 the Web Audio API requires each audio.play() to be triggered manually (otherwise you'll get a The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission. error).
There are a few workaround for the issue but I still haven't had a chance to test them so I just disables the sound effects on Safari.
See New Video Policies for iOS and Overcoming iOS HTML5 audio limitations
Like a few other projects I published in the past, Which One is not intended to be a serious "game", it's just the result of playing around with new technologies.
This also means that, since I didn't test it thoroughly, it might not work on specific browsers or devices.
That said, if you have any question/issue feel free to use the GitHub for sending PRs or starting issue discussions!
All the images and icons used in the project are available on FlatIcon.