allow user enter name and select level before begin

siuying · Sep 16, 2011 · 2bff92f · 2bff92f
1 parent d72fa82
commit 2bff92f
Show file tree

Hide file tree

Showing 5 changed files with 127 additions and 28 deletions.
diff --git a/lib/js_warrior/controller.coffee b/lib/js_warrior/controller.coffee
@@ -71,12 +71,18 @@ class Controller
 
     @$("#hint").click =>
       @$("#more_hint_message").toggle()
+
+    @$("#begin").click =>
+      name = @$("#name").val()
+      tower = @$("#tower_button").val()
+      console.log("begin #{name} #{tower}")
+      @profile.warriorName = name
+      @setGameLevel(tower, 1, false)
+      return false
 
     # show editor when finished
-    @$("#editor").show()
-    @$("#hint").show()
-    @$("#run").show()
-
+    @$("#welcome").show()
+
   setGameLevel: (towerPath = 'beginner', level = 1, epic = false) ->
     if epic
       @profile.epic = true
@@ -92,11 +98,31 @@ class Controller
       @profile.levelNumber = level
     @profile.towerPath = towerPath
     @game.load()
+
+    # enable UI
+    @$("#control").show()
+    @$("#display").show()
+    @$("#header").show()
+    @$("#welcome").hide()
+    @$("#editor").show()
+    @$("#hint").show()
+    @$("#run").show()
+    @editor.setTheme("ace/theme/cobalt")
 
   setProfile: (encodedProfile) ->
     @profile.decode(encodedProfile)
     @editor.getSession().setValue(@profile.sourceCode) if @profile.sourceCode
     @game.load()
+
+    # enable UI
+    @$("#control").show()
+    @$("#display").show()
+    @$("#header").show()
+    @$("#welcome").hide()
+    @$("#editor").show()
+    @$("#hint").show()
+    @$("#run").show()
+    @editor.setTheme("ace/theme/cobalt")
 
   onLevelFailed: ->
     @$("#run").show()
@@ -118,7 +144,6 @@ class Controller
 
   onLevelLoaded: (level) ->
 
-
   isEpic: ->
     @profile.isEpic()
 

diff --git a/public/css/style.css b/public/css/style.css
@@ -155,6 +155,17 @@ body {
   color: #aaa;
 }
 
+#header, #welcome pre, #welcome input, #welcome select {
+  font-family: 'Courier', 'Andale Mono', cursive;
+}
+
+#header h1, #header h1 a, #header h1 a:visited {
+  font-size: 24px;
+  color: white;
+  text-decoration:none;
+}
+
+
 
 /*		Tablet Layout: 768px.
 		Gutters: 24px.

diff --git a/public/js_warrior.js b/public/js_warrior.js
@@ -1294,9 +1294,16 @@ arguments),this._chain)}});j.prototype.chain=function(){this._chain=!0;return th
       this.$("#hint").click(__bind(function() {
         return this.$("#more_hint_message").toggle();
       }, this));
-      this.$("#editor").show();
-      this.$("#hint").show();
-      return this.$("#run").show();
+      this.$("#begin").click(__bind(function() {
+        var name, tower;
+        name = this.$("#name").val();
+        tower = this.$("#tower_button").val();
+        console.log("begin " + name + " " + tower);
+        this.profile.warriorName = name;
+        this.setGameLevel(tower, 1, false);
+        return false;
+      }, this));
+      return this.$("#welcome").show();
     };
     Controller.prototype.setGameLevel = function(towerPath, level, epic) {
       if (towerPath == null) {
@@ -1322,14 +1329,30 @@ arguments),this._chain)}});j.prototype.chain=function(){this._chain=!0;return th
         this.profile.levelNumber = level;
       }
       this.profile.towerPath = towerPath;
-      return this.game.load();
+      this.game.load();
+      this.$("#control").show();
+      this.$("#display").show();
+      this.$("#header").show();
+      this.$("#welcome").hide();
+      this.$("#editor").show();
+      this.$("#hint").show();
+      this.$("#run").show();
+      return this.editor.setTheme("ace/theme/cobalt");
     };
     Controller.prototype.setProfile = function(encodedProfile) {
       this.profile.decode(encodedProfile);
       if (this.profile.sourceCode) {
         this.editor.getSession().setValue(this.profile.sourceCode);
       }
-      return this.game.load();
+      this.game.load();
+      this.$("#control").show();
+      this.$("#display").show();
+      this.$("#header").show();
+      this.$("#welcome").hide();
+      this.$("#editor").show();
+      this.$("#hint").show();
+      this.$("#run").show();
+      return this.editor.setTheme("ace/theme/cobalt");
     };
     Controller.prototype.onLevelFailed = function() {
       this.$("#run").show();

diff --git a/views/index-js.ejs b/views/index-js.ejs
@@ -8,36 +8,54 @@
 </head>
 <body>
   <div class="container">
-    <div id="display">
+    <div id="header" style="display: none">
+      <h1><a href="/">Coffee Warrior</a></h1>
+    </div>
+
+    <div id="display" style="display: none">
     	<div id="tower">
     	</div>
     	<div id="message">
     	</div>
 
     </div>
-
-    <div id="control">
-      <pre id="editor">var Player = (function() {
-    function Player() {}
-    Player.prototype.playTurn = function(warrior) {
-        // do something
-    };
-    return Player;
-})();
-exports.Player = Player;
-      </pre>
+
+    <div id="control" style="display: none">      
       <div id="buttons">
         <button id="hint" class="btn primary" type="button" style="display: none">Hint</button>
         <button id="run" class="btn primary" type="button">Run</button>
         <button id="stop" class="btn primary" type="button" style="display: none">Abort</button>
       </div>
 
+      <pre id="editor">class Player
+  playTurn: (warrior) ->
+    # do nothing
+    </pre>
+
       <div id="hint_message">
       </div>
 
       <div id="more_hint_message" style="display: none">
       </div>
-
+
+    </div>
+
+    <div id="welcome" style="display: none">
+      <pre>
+==============================================================
+
+  _____     ______          _      __             _         
+ / ___/__  / _/ _/__ ___   | | /| / /__ _________(_)__  ____
+/ /__/ _ \/ _/ _/ -_) -_)  | |/ |/ / _ `/ __/ __/ / _ \/ __/
+\___/\___/_//_/ \__/\__/   |__/|__/\_,_/_/ /_/ /_/\___/_/        
+
+==============================================================
+
+Your Name: <input name="name" value="Warrior" id="name"></input>
+Your Tower: <select name="tower" id="tower_button"><option value="beginner">BEGINNER</option><option value="intermediate">INTERMEDIATE</option></select>
+<button id="begin">Begin</button>
+
+      </pre>
     </div>
   </div>
 
@@ -72,8 +90,8 @@ $(function(){
   if (encodedProfile) {
     controller.setProfile(encodedProfile)
   } else {
-    controller.setGameLevel('<%= tower %>', <%= levelNumber %>, <%= epic %>)
-  }
+    $("#name").focus().select()
+  } 
   
   
 });

diff --git a/views/index.ejs b/views/index.ejs
@@ -8,15 +8,19 @@
 </head>
 <body>
   <div class="container">
-    <div id="display">
+    <div id="header" style="display: none">
+      <h1><a href="/">Coffee Warrior</a></h1>
+    </div>
+
+    <div id="display" style="display: none">
     	<div id="tower">
     	</div>
     	<div id="message">
     	</div>
 
     </div>
 
-    <div id="control">      
+    <div id="control" style="display: none">      
       <div id="buttons">
         <button id="hint" class="btn primary" type="button" style="display: none">Hint</button>
         <button id="run" class="btn primary" type="button">Run</button>
@@ -35,6 +39,24 @@
       </div>
 
     </div>
+
+    <div id="welcome" style="display: none">
+      <pre>
+==============================================================
+
+  _____     ______          _      __             _         
+ / ___/__  / _/ _/__ ___   | | /| / /__ _________(_)__  ____
+/ /__/ _ \/ _/ _/ -_) -_)  | |/ |/ / _ `/ __/ __/ / _ \/ __/
+\___/\___/_//_/ \__/\__/   |__/|__/\_,_/_/ /_/ /_/\___/_/        
+
+==============================================================
+
+Your Name: <input name="name" value="Warrior" id="name"></input>
+Your Tower: <select name="tower" id="tower_button"><option value="beginner">BEGINNER</option><option value="intermediate">INTERMEDIATE</option></select>
+<button id="begin">Begin</button>
+
+      </pre>
+    </div>
   </div>
 
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
@@ -71,7 +93,7 @@ $(function(){
   if (encodedProfile) {
     controller.setProfile(encodedProfile)
   } else {
-    controller.setGameLevel('<%= tower %>', <%= levelNumber %>, <%= epic %>)
+    $("#name").focus().select()
   }
   
 });