diff --git a/snake/snake-page.js b/snake/snake-page.js
index 1f7ba9c..c1223b7 100644
--- a/snake/snake-page.js
+++ b/snake/snake-page.js
@@ -9,18 +9,53 @@ canvasEl.height = canvasEl.clientHeight;
var initializePage = function() {
// Load the snake levels onto the page UI.
+ var newHtml = "";
+
_.each(SnakeLevels, function(levelSet, setName) {
- var newHtml = "
" + setName + "
" +
+ newHtml += "" + setName + "
" +
"";
- _.each(levelSet, function(levelData, levelIdx) {
+ _.each(levelSet.levels, function(levelData, levelIdx) {
newHtml += "- " +
levelData.name + "
"; });
newHtml += "
"; });
+
+ $levelSelectSection.append(newHtml);
+
+ // Add listeners for each of the level list items.
+ var levelLis = document.querySelectorAll("#levelSelect li");
+ for (var i = 0; i < levelLis.length; ++i) {
+ levelLis[i].addEventListener("click", levelLiClicked); }
+
+ // Load the initial level.
+ // loadLevel({target: document.querySelector("#levelSelect li.selected")});
+
};
-var loadLevel = function(ev) { }
+var levelLiClicked = function(ev) {
+ var $levelLi = $(ev.target);
+ var $levelSetOl = $levelLi.closest("ol");
+
+ $("#levelSelect li.selected").removeClass("selected");
+ $levelLi.addClass("selected");
+
+ loadLevel($levelSetOl.attr("levelSet"), $levelLi.attr("levelNum")); }
+
+var loadSelectedLevel = function() {
+ var $selectedLi = $("#levelSelect li.selected");
+ var $selectedLevelSetOl = $selectedLi.closest("ol");
+
+ loadLevel($selectedLevelSetOl.attr("levelSet"),
+ $selectedLi.attr("levelNum")); }
+
+var loadLevel = function(levelSetName, levelNum) {
+ console.log("Loading " + levelSetName + " level " + levelNum);
+
+ var levelData = SnakeLevels[levelSetName].levels[parseInt(levelNum)];
+
+ // Show start overlay UI
+}
var nextLevel = function() { };
@@ -35,13 +70,5 @@ var updateScore = function(ev) {
$canvas.on('score', updateScore);
-// Add listeners for each of the level list items.
-var levelLis = document.querySelectorAll("#levelSelect li");
-for (var i = 0; i < levelLis.length; ++i) {
- levelLis[i].addEventListener("click", loadLevel); }
-
-loadLevel({target: document.querySelector("#levelSelect li.selected")});
-
-
window.onload = initializePage;