Creating, Saving, and Loading Tracks - HTML5 Games Most Wanted - page 88

initUI();
draw();
});
The next step is adding functionality to the Save button. So let's skip to the iniUI() function and add
another click callback, as follows:
$("#save-track").click(function(event) {
event.preventDefault();
store.saveTrack(grid.bricks);
});
As you can see, this one is really easy. We basically have all we need implemented in the store and so the
only thing left is grabbing the bricks array from the grid, which is exactly what we need, and pass it to the
store. Done!
You are right. Saving the tracks is easy, but not very meaningful if you can't see or access what you saved.
Create the saved tracks list
When we started building this application, we set up all the markup necessary for a list of tracks.
So we need to start adding tracks to that list. Let's extend the save functionality just a little.
$("#save-track").click(function(event) {
event.preventDefault();
var trackID = store.saveTrack(grid.bricks);
var trackName = $("#track-name").val();
addTrackToList(trackID, trackName);
});
We keep the trackID that we get from the store and also read the value of the input field. We use this
name as the track name.
Now let's create another function that adds certain elements to the DOM.
function addTrackToList(ID, name) {
var entry = $("<p>");
var link = $('<a href="">Load</a>');
link.click(function(event) {
event.preventDefault();
loadTrack(ID);
});
entry.append(link).append(" - " + name);
$("#tracks-container").append(entry);
}