Got basic one page layout to start working

jkao · Feb 11, 2012 · e4a4dfe · e4a4dfe
1 parent 754221c
commit e4a4dfe
Show file tree

Hide file tree

Showing 23 changed files with 1,577 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,4 @@
+The workings of a Playbook HTML5 Hiragana-Katakana Trainer.
+
+TODO:
+Minify and group together assets
diff --git a/index.html b/index.html
@@ -4,19 +4,66 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <meta name="viewport" content="width=device-width,target-densitydpi=device-dpi,user-scalable=no,initial-scale=1.0">
 
-    <title>Hiragana Katakana Trainer</title>
+    <title>Hiragana/Katakana Trainer</title>
 
-    <!-- TODO: Compile these assets via Google Clojure -->
     <script type="text/javascript" src="lib/vendor/js/jquery.js"></script>
     <script type="text/javascript" src="lib/vendor/js/underscore.js"></script>
     <script type="text/javascript" src="lib/vendor/js/backbone.js"></script>
-
-    <link rel="stylesheet" href="lib/hk/css/hk.css" type="text/css">
+    <script type="text/javascript" src="lib/vendor/foundation/javascripts/modernizr.foundation.js"></script>
+    <script type="text/javascript" src="lib/vendor/foundation/javascripts/foundation.js"></script>
+    <link rel="stylesheet" href="lib/vendor/foundation/stylesheets/foundation.css" type="text/css">
 
     <script type="text/javascript" src="lib/hk/js/hk.js"></script>
     <link rel="stylesheet" href="lib/hk/css/hk.css" type="text/css">
+
+    <script id="start-screen" type="text/html">
+      <h1>Hiragana-Katakana Trainer</h1>
+      <h3>ひらがな　カタカナ　トレーナー</h3>
+      <a href="#" class="nice radius blue button">Train Hiragana</a>
+      <a href="#" class="nice radius blue button">Train Katakana</a>
+      <a href="#" class="nice radius blue button">Train <strong>Both</strong></a>
+      <a href="#practice" class="nice radius white button">Practice</a>
+      <a href="#about" class="nice radius white button">About</a>
+      <a href="#goodbye" class="nice radius white button">Exit</a>
+    </script>
+
+    <script id="about-screen" type="text/html">
+      <h1>About</h1>
+      <p>
+        Hiragana Katakana Trainer is made to help those beginning Japanese an easy way to memorize their
+        characters. 
+      </p>
+      <p>
+        This app was built just for the <strong>Blackberry Playbook!</strong>
+      </p>
+      <p>
+        If you like what you see, visit my site at: <a href="http://jeff-kao.com">http://jeff-kao.com</a>.
+      </p>
+      <a class="nice radius blue button" href="#">Go Back</a>
+    </script>
+
+    <script id="practice-screen" type="text/html">
+      <h1>Practice</h1>
+      <p>
+        Practice...
+      </p>
+      <a class="nice radius blue button" href="#">Go Back</a>
+    </script>
+
+    <script id="goodbye-screen" type="text/html">
+      <h1>Bye! See you soon!</h1>
+    </script>
+
+    <script id="quiz-screen" type="text/html">
+      <h1><%= title %></h1>
+      <div id="character"></div>
+      <div class="side-bar">
+        <div id="score"></div>
+        <div id="choices"></div>
+      </div>
+    </script>
   </head>
   <body>
-    <div id="hk-main">Hello World</div>
+    <div id="hk-main"></div>
   </body>
 </html>
diff --git a/lib/hk/js/hk.js b/lib/hk/js/hk.js
@@ -20,7 +20,7 @@ $(function() {
       console.log("Created a character");
     },
     validate: function() {
-      if !(character && pronounciation && type) {
+      if (!(character && pronounciation && type)) {
         throw "All fields should be filled out [character, pronounciation, type]"
       }
     },
@@ -45,25 +45,132 @@ $(function() {
   var Quiz = Backbone.Model.extend({
   });
 
+  // Main game routing object
+  var HiraganaKatakanaTrainer = Backbone.Router.extend({
+    routes: {
+      "": "start",
+      "quiz": "quiz",
+      "practice": "practice",
+      "about": "about",
+      "goodbye": "goodbye"
+    },
+
+    initialize: function(options) {
+      if (this.index_view === null) {
+        this.index_view = new StartScreen({})
+      }
+    },
+
+    start: function() {
+      new StartScreen();
+    },
+
+    quiz: function() {
+    },
+
+    practice: function() {
+      new PracticeScreen();
+    },
+
+    about: function() {
+      new AboutScreen();
+    },
+
+    goodbye: function() {
+      new GoodByeScreen();
+    }
+  });
+
   // Collection object holding a few Characters to test
   var CharacterCollection = {};
 
   // View of the start menu
-  var StartScreen = Backbone.View.extend({});
+  var StartScreen = Backbone.View.extend({
+    el: "#hk-main",
+    template: _.template( $("#start-screen").text() ),
+
+    initialize: function() {
+      this.render();
+    },
+    render: function() {
+      t = this;
+      el = $(this.el);
+
+      el.fadeOut('fast', function() {
+        el.empty();
+        el.html(t.template({}));
+        el.fadeIn('fast');
+      });
+    },
+    events: {
+    }
+  });
 
   // View of the quiz screen
   var QuizScreen = Backbone.View.extend({});
 
+  // View of the quiz screen
+  var PracticeScreen = Backbone.View.extend({
+    el: "#hk-main",
+    template: _.template( $("#practice-screen").text() ),
+
+    initialize: function() {
+      this.render();
+    },
+    render: function() {
+      t = this;
+      el = $(this.el);
+
+      el.fadeOut('fast', function() {
+        el.empty();
+        el.html(t.template({}));
+        el.fadeIn('fast');
+      });
+    }
+  });
+
   // View of the about screen
-  var AboutScreen = Backbone.View.extend({});
+  var AboutScreen = Backbone.View.extend({
+    el: "#hk-main",
+    template: _.template( $("#about-screen").text() ),
+
+    initialize: function() {
+      this.render();
+    },
+    render: function() {
+      t = this;
+      el = $(this.el);
+
+      el.fadeOut('fast', function() {
+        el.empty();
+        el.html(t.template({}));
+        el.fadeIn('fast');
+      });
+    }
+  });
 
   // View of the goodbye screen
-  var GoodByeScreen = Backbone.View.extend({});
+  var GoodByeScreen = Backbone.View.extend({
+    el: "#hk-main",
+    template: _.template( $("#goodbye-screen").text() ),
 
-  // Main
-  window.initialize_game = function() {
-    // Start the game!
-  }
+    initialize: function() {
+      this.render();
+    },
+    render: function() {
+      t = this;
+      el = $(this.el);
+
+      el.fadeOut('fast', function() {
+        el.empty();
+        el.html(t.template({}));
+        el.fadeIn('fast');
+      });
+
+      // TODO: Exit via BB API
+    },
+  });
 
-  window.initialize_game();
+  hk = new HiraganaKatakanaTrainer();
+  Backbone.history.start();
 });
diff --git a/lib/vendor/foundation/images/.DS_Store b/lib/vendor/foundation/images/.DS_Store
diff --git a/lib/vendor/foundation/images/misc/button-gloss.png b/lib/vendor/foundation/images/misc/button-gloss.png
diff --git a/lib/vendor/foundation/images/misc/button-overlay.png b/lib/vendor/foundation/images/misc/button-overlay.png
diff --git a/lib/vendor/foundation/images/misc/custom-form-sprites.png b/lib/vendor/foundation/images/misc/custom-form-sprites.png
diff --git a/lib/vendor/foundation/images/misc/input-bg-outset.png b/lib/vendor/foundation/images/misc/input-bg-outset.png
diff --git a/lib/vendor/foundation/images/misc/input-bg.png b/lib/vendor/foundation/images/misc/input-bg.png
diff --git a/lib/vendor/foundation/images/misc/modal-gloss.png b/lib/vendor/foundation/images/misc/modal-gloss.png
diff --git a/lib/vendor/foundation/images/misc/table-sorter.png b/lib/vendor/foundation/images/misc/table-sorter.png
diff --git a/lib/vendor/foundation/images/orbit/bullets.jpg b/lib/vendor/foundation/images/orbit/bullets.jpg
diff --git a/lib/vendor/foundation/images/orbit/left-arrow.png b/lib/vendor/foundation/images/orbit/left-arrow.png
diff --git a/lib/vendor/foundation/images/orbit/loading.gif b/lib/vendor/foundation/images/orbit/loading.gif
diff --git a/lib/vendor/foundation/images/orbit/mask-black.png b/lib/vendor/foundation/images/orbit/mask-black.png
diff --git a/lib/vendor/foundation/images/orbit/pause-black.png b/lib/vendor/foundation/images/orbit/pause-black.png
diff --git a/lib/vendor/foundation/images/orbit/right-arrow.png b/lib/vendor/foundation/images/orbit/right-arrow.png
diff --git a/lib/vendor/foundation/images/orbit/rotator-black.png b/lib/vendor/foundation/images/orbit/rotator-black.png
diff --git a/lib/vendor/foundation/images/orbit/timer-black.png b/lib/vendor/foundation/images/orbit/timer-black.png
diff --git a/lib/vendor/foundation/javascripts/foundation.js b/lib/vendor/foundation/javascripts/foundation.js
diff --git a/lib/vendor/foundation/javascripts/modernizr.foundation.js b/lib/vendor/foundation/javascripts/modernizr.foundation.js