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 += "
  1. " + levelData.name + "
  2. "; }); 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;