Make playable on mobile devices

[mapmeld]

Hi - I sent a Tweet out awhile back when I started working on making quantum-game playable on mobile.

Now that getting materials from the stockpile and moving to the next level is working, I'm thinking the best path forward is merge in this CSS and JS changes to improve the current mobile experience. The missing pieces are complex UI / help text which would be difficult to condense for mobile, but could be added in the future.

[stared]

It was cool to see that you made your modification!

While the game was intended to work well on mobile, as you see - we ended up adding to many things.

However, I tried to checkout it locally and it doesn't seem to work:

Maybe you didn't commit some changes? (Or I am missing some steps in using it; but AFAIR you didn't install any new libraries, right?)

[mapmeld]

I think I see what's wrong here... when I was moving things around, xOffset was defined in one function but not another (where it is needed).

I've made a commit which should fix that.

[stared]

No errors in the console, but other things look exactly the same as in the previous screenshot.

[mapmeld]

Ok - I discovered that window.innerWidth is not reliable on Android. Made some commits and https://georeactor.github.io/quantum-game/ now works on my Android phone. Is that better?

[mapmeld]

I was just remembering this today. If it's still not working, let's get on an email or Slack chat to debug it

[stared]

Hi @mapmeld !

Sorry for making you wait so long. Yet, as you see - right now I don't have much time to develop QG.

• I tested it on my iPhone SE and it does not help at all.
• I tested in on my girlfriend's Android at it helps, when in the portrait orientation. It helps a lot. Yet:
  • it removes any option to go between levels or to reset a given level,
  • when I rotated phone to the landscape mode and rotated back.
• On desktop reducing window size makes some things disappearing:

To make it clear - making it more reactive is a big thing. And I value your contribution. :)

Yet, I am afraid that in the current form it is a hack - it solves an issue for one device, while adding possible complications for other settings.

If you could make it in a way that depending on resolution:

• some widgets change place,
• some widgets disappear.

that works multi-device (also: one can easily test it on desktop browser), it would be more than happy to accept your PR (and help if needed). :)

For communication, I get email notifications from GitHub, so this channel should work. For more real time FB messenger would work (I am easy to find there) or Skype (piotr_migdal).