A small React + Typescript + MobX game
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
public
src
.gitignore
README.md
package-lock.json
package.json
tsconfig.json
tsconfig.prod.json
tsconfig.test.json
tslint.json

README.md



Give it a try!

 
 

Which One is a small game that has been my playground for testing the TypeScript & Mobx combo

 
 

 
 

Features overview

  • 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

Known issues

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)

Things I learned while building it

TypeScript and MobX work really well together

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 🎉.

Create-react-app-typescript TSLint preset is still too strict

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.

Mobile Safari touch delay is here to stay

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.

Safari doesn't allow playing audio without user interactions

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

Acknowledgments & Disclaimers

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.