Added resuming of game from localstorage

[mfrederiksen]

Hi, I've added support for persisting and reloading the game stage. On each move, the GameManager and Board state are serialized to LocalStorage (just before the Actuator runs). On load if the game state is present, the GameManager and Board are initialized based on the saved state, otherwise they initialize normally. Since reloads do not reset the game anymore, I've added a New Game button above the board (the styling and placement, I'm not crazy about).

This, along with the cache manifest PR would make for a 100% offline app.

[iirelu]

This has been discussed before and every time it's boiled down to the inherent complexity of a save system not having enough value for a game like 2048. It's like being able to save Hotline Miami or Super Hexagon.

Remember this is a game as well as an open-source project; Every feature needs to be carefully considered. I want to be able to link this game in a year and not be worried about if the game has completely changed by that point.

[mfrederiksen]

So, the reason I wrote this in, was specifically because I was playing 2048 on iOS using an "Add to home" link. This is actually a very handy way to play on iPad/iPhone. The problem is that navigating away (say for a call) or even locking/unlocking, forces a refresh killing your game.

I realize that's a rather specific use case of the game but a valid one IMHO and together with resume/offline web app (cache manifest), a perfect way to deploy on mobile devices.

In any event, I think the save system is actually very simple. I'm not familiar with Hotline Miami or Super Hexagon but given that 2048 is a turn-based strategy with (often) a longer playing time, I can't see why resuming wouldn't be a good thing to have.

[gdelazzer]

I have also wanted to have this feature as I have lost my party started in the subway and had a quite big score on it :)

[iirelu]

If the implementation is near invisible and done well enough I imagine it could work. How well does local storage work on mobiles?

[mfrederiksen]

Implementation is invisible to the end-user. Simply loading the page will attempt to resume a game if available. The only difference to game play is the addition of a New Game button.

As for support, localstorage has been supported on all browsers (both desktop and mobile) for a long time. See the following table http://caniuse.com/#feat=namevalue-storage

Also, localstorage was already being used to store high scores, I simply added a second field for game state. The pre-existing implementation has detection for browsers that do not support localstorage and provides a mock which will allow the game to work exactly as it does today.

[iirelu]

👍
Some of the other saving implementations attempted were horrible, this is heavenly by comparison.

[mpassell]

I'm so glad someone worked on this! I've had so many games where I've gotten pretty far along (at least a 512 & a 256 on the board), only to have the browser page refresh and reset my game when I return to it.

[sukima]

👍

[gabrielecirulli]

The code looks good. Gonna work on merging. 👍

[johankj]

Oh, finally… I've been wishing for this feature for couple of days too – mostly because of the reason mentioned by @mfrederiksen.
I was thinking of doing it this weekend, but there's no need for that, as @mfrederiksen already has done it in a clean and simple manner. 👍

[gabrielecirulli]

It's online now. Testing is appreciated 😄

[iirelu]

When you lose, the save should probably be reset. It's pretty jarring when it loads from a lost state and says game over, and it makes sense for it to then reset on the next load.

[gabrielecirulli]

Great idea Anna, done 👍 (please give it a try if you have some time to spare)

[gabrielecirulli]

It's gonna require some refreshing before you get the latest version, or you can also test in incognito mode, which has no cache.

[iirelu]

Ctrl+F5 also works for clearing the cache.

The resuming works perfectly, even when stress-testing it by moving and refreshing very rapidly, and the save is properly cleared when you lose. Tested in both Chrome beta and Firefox.

[gabrielecirulli]

Thank you for testing! 😄

[mfrederiksen]

Awesome! Thanks for merging. I've been "testing" (playing :) quite a bit on iOS (iPhone/iPad) and everything looks good.

[mpassell]

I've added a direct link to it on my home screen using Chrome for Android. It works perfectly almost all of the time, but occasionally just comes up with a blank screen. If I kill it and reopen, it works fine and pulls the correct state out of local storage. I'm not sure how I'd diagnose the issue and it might just be some sort of funkiness with my Galaxy S4. Unless others are experiencing the same thing, it probably doesn't merit a lot of digging/research.

[gabrielecirulli]

Fully blank screen or empty board?

[mpassell]

A fully blank screen of the same color as the normal page's background color.

[gabrielecirulli]

Weird.

[mpassell]

I completely agree. If I see the problem again, I'll try to turn on USB debugging and see if I find out anything useful.