Adding the start page!

+ Added start page + Added key shortcuts
joshsoftware · Mar 23, 2012 · 036da32 · 036da32
1 parent fcff9da
commit 036da32
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 10 deletions.
diff --git a/notify.js b/notify.js
@@ -1,7 +1,7 @@
 /** CONFIGURATION **/
 
-//HOST = "192.168.1.153",
-HOST = "localhost",
+HOST = "192.168.1.153",
+//HOST = "localhost",
 PORT = "3001"
 
 /** CONFIGURATION **/
@@ -35,14 +35,19 @@ app.get('/games/new', function (req, res) {
   res.render('games/new', data);
 });
 
-app.get('/game/:gameid/:nick', function (req, res) {
+app.get('/game/:gameid/start', function(req, res) {
+  data = { gameid: req.params.gameid }
+  res.render('games/start', data);
+});
+
+app.post('/game/:gameid/join', function (req, res) {
   DB.sismember('games', req.params.gameid, function(err, data) {
 
     // Game Not found
     if (!data) return res.send(404);
 
     // Strip special characters
-    nick = req.params.nick.replace(/\W/g, '')
+    nick = req.body.nick.replace(/\W/g, '')
     DB.sismember(req.params.gameid, nick, function(err, data) {
       // Add the new member to the game
       DB.sadd(req.params.gameid, nick);

diff --git a/public/stylesheets/game.css b/public/stylesheets/game.css
@@ -11,6 +11,63 @@ h1.title {
 #dancefloor {
 }
 
+form {
+  width: 270px;
+}
+
+form input[type="text"] {
+  -webkit-appearance: none;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.0742188) 0px 1px 1px 0px inset;
+  -webkit-rtl-ordering: logical;
+  -webkit-transition-delay: 0s, 0s;
+  -webkit-transition-duration: 0.20000000298023224s, 0.20000000298023224s;
+  -webkit-transition-property: border, box-shadow;
+  -webkit-transition-timing-function: linear, linear;
+  -webkit-user-select: text;
+  background-color: white;
+  border-bottom-color: #CCC;
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-left-color: #CCC;
+  border-left-style: solid;
+  border-left-width: 1px;
+  border-right-color: #CCC;
+  border-right-style: solid;
+  border-right-width: 1px;
+  border-top-color: #CCC;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  border-top-style: solid;
+  border-top-width: 1px;
+  box-shadow: rgba(0, 0, 0, 0.0742188) 0px 1px 1px 0px inset;
+  color: #555;
+  cursor: auto;
+  display: inline-block;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  font-weight: normal;
+  height: 38px;
+  letter-spacing: normal;
+  line-height: 32px;
+  margin-bottom: 0px;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: 0px;
+  padding-bottom: 4px;
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-top: 4px;
+  text-align: -webkit-auto;
+  text-indent: 0px;
+  text-shadow: none;
+  text-transform: none;
+  vertical-align: middle;
+  width: 270px;
+  word-spacing: 0px;
+}
+
 .action {
   -webkit-box-shadow: rgba(255, 255, 255, 0.199219) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.046875) 0px 1px 2px 0px;
   -webkit-transition-delay: 0s;

diff --git a/views/games/join.jade b/views/games/join.jade
@@ -32,11 +32,22 @@ script
         return false;
       });
 
+      $('body').keyup(function(e) {
+         if(e.keyCode == 37){ //left
+          $(".action[data-action='left']").trigger('click'); 
+         }else if(e.keyCode == 38){ // up
+          $(".action[data-action='up']").trigger('click');
+         }else if(e.keyCode == 39){ // right
+          $(".action[data-action='right']").trigger('click');
+         }else if(e.keyCode == 40){ // down
+          $(".action[data-action='hi']").trigger('click');
+         }
+      });
   });
 
 h1.title Dance #{nick}, Dance!
 
-.action(data-action="left") Clap Your Hands
-.action(data-action="right") Play the Guitar
-.action(data-action="up") Jump! Jump!
-.action(data-action="hi") Play the Drums
+.action(data-action="left") Clap Your Hands (&larr;)
+.action(data-action="right") Play the Guitar (&rarr;)
+.action(data-action="up") Jump! Jump! (&uarr;)
+.action(data-action="hi") Play the Drums (&darr;)
diff --git a/views/games/new.jade b/views/games/new.jade
@@ -2,7 +2,7 @@ script
   function add_user(data) {
     // TODO: Should use some template here!
     if (!$("#" + data.nick).length) 
-      $('#dancefloor').prepend("<div class='dancer'><div class='nickname'>" + data.nick + "</div><div class='user hi' id='" + data.nick + "'></div></div>");
+      $('#dancefloor').append("<div class='dancer'><div class='nickname'>" + data.nick + "</div><div class='user hi' id='" + data.nick + "'></div></div>");
   }
 
   function process_action(action, data) {
@@ -40,7 +40,7 @@ script
       });
   });
 
-h1.title http://#{HOST}:#{PORT}/game/#{gameid}/:nickname
+h1.title http://#{HOST}:#{PORT}/game/#{gameid}/start
 
 #dancefloor
 
diff --git a/views/games/start.jade b/views/games/start.jade
@@ -0,0 +1,3 @@
+form(action="/game/#{gameid}/join", method="post")
+  input(type="text", placeholder="Twitter Handle", name="nick")
+  input.action(type="submit", value="Dance!", style="height:52px;margin-left:30px")