- Project page
- Tutorial[1]
- Repo[2]
Part 10 is saving/loading, which is traditionally one of the harder things to implement.
The Python tutorial uses the pickle library for serialization. Javascript doesn’t have that. I planned to serialize to JSON. All this time I’ve been trying to make my table rows plain json-compatible data instead of classes with methods. I’ve avoided having parent pointers like the Python tutorial uses extensively. Each table row then has a prototype pointer to something more complicated (a Proxy, which itself has a prototype to another object that uses Properties).
We only have to serialize the row, not the prototype chain.
Then when deserializing, we have to reattach the prototype chain using Object.setPrototypeOf().
One consequence of not serializing prototypes is this scenario:
- the first version of the game draws trolls in green, and you save a game
- you run a newer version of the game where trolls are drawn in blue, and you load a game
In what color are the trolls drawn? In the Python tutorial, they’d be drawn in green. In my project, they’d be drawn in blue. Which behavior do you want? It’s something to think about when designing your data structures.
I hadn’t planned to serialize the message log but the Python tutorial does it, so I decided to do this too. I needed to create a serializable DOM-independent representation of messages that then gets converted to DOM elements which won’t be serialized.
I also serialized the random number generator state.
I ran into more bugs implementing serialization/deserialization than any other Part of this tutorial.
Separately, Part 10 has a game menu. I implemented this as a UI layer using my dialog box system, but it’s a little bit weird. The game menu runs before the map has been generated, but my UI assumes a map exists, so I needed to create a dummy map for the UI, and then I throw it away when you start a new game. This goes against the “make illegal states unrepresentable” principle, but I didn’t find an easy way to fix it.
Here’s the game at the end of Part 10: