Started making the page truly dynamic ...

phtrivier · Sep 1, 2010 · 5f2dc1d · 5f2dc1d
1 parent 3423a29
commit 5f2dc1d
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 6 deletions.
diff --git a/src/css/home.css b/src/css/home.css
@@ -100,6 +100,20 @@ a:hover {text-decoration: underline; }
 
 .level {
     padding-top : 3px;
-    padding-bottom : 3px;
     padding-left : 3px;
 }
+
+#levels {
+    padding-left: 0;
+    margin-left: 0;
+    border-bottom: 1px solid gray;
+}
+
+#levels li
+{
+    list-style: none;
+    margin: 0;
+    padding: 0.25em;
+    border-top: 1px solid gray;
+}
+
diff --git a/src/html/home.html b/src/html/home.html
@@ -29,6 +29,7 @@
     <script type="text/javascript" charset="UTF-8" src="../js/puzzles.js"></script>
     <script type="text/javascript" charset="UTF-8" src="../js/levels.js"></script>
     <script type="text/javascript" charset="UTF-8" src="../js/drawer.js"></script>
+    <script type="text/javascript" charset="UTF-8" src="../js/i18n.js"></script>
     <script type="text/javascript" charset="UTF-8" src="../js/home.js"></script>
 
     <div id="outer" class="container prepend-4 prepend-top">
@@ -45,11 +46,12 @@ <h3>Welcome to UBE</h3>
 	<div id="chapter_1" class="tab-header-unselected span-10 last"><a href=".">Play Game</a></div>
       </div>
 
-      <div id="level-navigation" class="span-20 last">
+      <div id="level-navigation" class="span-21 last">
 
-	<div id="level-list" class="span-6 prepend-top append-bottom">
+	<div id="level-list" class="span-7 prepend-top append-bottom">
 	  <h3 class="level-header" >Choose a level :</h3>
-	  <div id="levels" class="span-6">
+	  <ul id="levels" class="span-7 last">
+<!--
 	    <div class="level">Pour commencer, trouvez la sortie</div>
 	    <div class="level selected-level span-6 append-1">
 	      Parfois, il faut savoir sauter
@@ -58,7 +60,8 @@ <h3 class="level-header" >Choose a level :</h3>
 	    <div class="level hovered-level span-6 append-1">Je sais plus quoi</div>
 	    <div class="level">Encore un autre truc</div>
 	    <div class="level">Et puis voila</div>
-	  </div>
+	  -->
+	  </ul>
 	</div>
 
 	<div id="level-preview" class="span-13 last  prepend-top prepend-1 append-bottom">

diff --git a/src/js/home.js b/src/js/home.js
@@ -1,10 +1,32 @@
+function load_tutorial_level_list() {
+    var lg = get_lg();
+    $("#levels").empty();
+    for (var i = 0 ; i < 7 ; i++) {
+
+	var levelDiv = $("<li class='level'></li>");
+	levelDiv.append(PUZZLE_STRUCTS[i].title[lg]);
+
+	levelDiv.hover(function (event) {
+	    $(this).addClass('hovered-level');
+	}, 
+		       function(event) {
+			   $(this).removeClass('hovered-level');
+		       });
+
+	// TODO(levelDiv.click(on_link_clicked(), load_level_preview(i));
+
+	$("#levels").append(levelDiv);
+    }
+}
+
 $(document).ready(function(){
     var drawer = new Drawer(16);
 
     var p = new Puzzle(PUZZLE_STRUCTS[2]);
 
     drawer.load_images(function () {
-	drawer.draw_puzzle(p);
+	load_tutorial_level_list();
+	// drawer.draw_puzzle(p);
     });
 
 });