broken version

nko2 · Aug 28, 2011 · ae62c92 · ae62c92
1 parent 20c7a1d
commit ae62c92
Show file tree

Hide file tree

Showing 3 changed files with 145 additions and 16 deletions.
diff --git a/css/style.css b/css/style.css
@@ -28,6 +28,13 @@ h2{
   margin:25px 15px 15px 0;
 }
 
+h3{
+  font-family:prophit;
+  font-size: 19px;
+  text-shadow:0px 0px 20px #9BBFFF;
+  margin:25px 15px 15px 0;
+}
+
 input[type="text"]{
   border:none;
   color:#fff;
@@ -64,20 +71,22 @@ canvas{
   margin:1px 0 0 1px;
   text-align:justify;
   display:none;
+  font-family:prophit;
+  font-size: 10px;
+  color:#fff;
+  text-shadow:0px 1px 1px #001971;
 }
 
 #modal .wrapper{
   padding:10px 10px 10px 20px;
   position:relative;
   z-index:100;
 }
+
 #modal p{
   text-align:justify;
-  font-family:prophit;
-  font-size:10px;
-  color:#fff;
-  text-shadow:0px 1px 1px #001971;
 }
+
 .bgColor{
   width:809px;
   height:500px;
@@ -88,6 +97,35 @@ canvas{
   z-index:90;
 }
 
+.column{
+  width: 250px; 
+  margin: 0 10px;
+  float: left;
+}
+
+.scoreCol{
+  width: 100px;
+  margin: 0 10px;
+  float:left;
+}
+
+.scoreCol.index{
+  width: 20px;
+}
+
+.title{
+  font-size:10px;
+  text-shadow:0 0 2px #fff;
+  margin-bottom:4px;
+}
+
+.clearfix{
+  clear:both;
+}
+
+.clearfix:after{
+  clear:both;
+}
 .stuff{
   display:none;
 }

diff --git a/index.html b/index.html
@@ -33,9 +33,44 @@ <h2>Welcome</h2>
       <br/>
       <h2>How to play</h2>
       <p>Avoid...</p>
-      <center><input id="startBtn" type="submit" value="Start!"/></center>
+      <center><input class="startBtn" type="submit" value="Start!"/></center>
       </form>
   </div>
+  <div id="endScreen">
+    <form id="endForm">
+      <h2>Mission Complete</h2>
+      <h3>$nickname$,</h3>
+      <p>You successfully completed the mission.</p>
+      <h3>Achivments</h3>
+      <div class="column">
+        <div class="title">Rank</div>
+        <div>$rank$</div>
+      </div>
+      <div class="column">
+        <div class="title">Score</div>
+        <div>$score$</div>
+      </div>
+      <div>
+        <div class="title">Time</div>
+        <div>$time$</div>
+      </div>
+      <div class="clearfix"></div>
+      <h3>Top Scores</h3>
+        <div class="scoreCol index">
+          <div class="title">Rank</div>
+        </div>
+        <div class="scoreCol">
+          <div class="title">Aeronaut</div>
+        </div>
+        <div class="scoreCol">
+          <div class="title">Score</div>
+        </div>
+        <div class="clearfix"></div>
+        $topscores$
+      <p>Are you ready for another mission?</p>
+      <center><input class="startBtn" type="submit" value="Let's Go" autofocus/></center>
+    </form>
+  </div>
 </div>
 </body>
 </html>

diff --git a/js/client.js b/js/client.js
@@ -1,4 +1,11 @@
 var socket = io.connect();
+
+var connected = false;
+var connect = function(){
+  connected = true;
+};
+socket.on('connect',connect);
+
 var players = {};
 var bullets = [];
 var layers = {};
@@ -61,7 +68,7 @@ function BloodWidget(position){
   var backPath = this.backPath = new Path.Circle(position,20);
 
   backPath.strokeColor = bgColor;
-  backPath.strokeWidth = thickness + 3;
+  backPath.strokeWidth = thickness + 4;
 
   this.setBlood = function(blood) {
     this.blood = blood;
@@ -71,8 +78,12 @@ function BloodWidget(position){
     layers['widgets'].activate();
     bloodPath = this.bloodPath = new ArcD(position, 20, (360 * blood / 100) - 0.001);
     bloodPath.strokeWidth = thickness;
-    bloodPath.strokeColor = color;
-    bloodPath.opacity = 1;
+    //bloodPath.strokeColor = color;
+    color = new HSLColor(blood,1,0.2);
+    this.backPath.strokeColor = color.toCssString();
+    color = new HSLColor(blood,1,0.5);
+    bloodPath.strokeColor = color.toCssString();
+    bloodPath.opacity = 0.7;
   }
   //blood is full when user starts!
   this.setBlood(100);
@@ -85,7 +96,7 @@ function ScoreWidget(position){
   this.score = 0;
 
   var scoreShape = this.scoreShape = new PointText(position);
-  scoreShape.content = '10000';
+  scoreShape.content = '-';
   scoreShape.characterStyle = {
     font: 'courier,sans-serif',
     fontSize: 10,
@@ -266,7 +277,6 @@ function onKeyDown() {
 }
 
 socket.on('id',function(id){
-
   //@FIXME what if user be disconnected for a moment? does socket.io understand
   // this situation? if not, we should check if myId is -1 ;)
   // and if it is not -1, we should emit disconnect manually and then set the
@@ -335,28 +345,74 @@ socket.on('id',function(id){
     players[id].shape.remove();
 	  delete players[id];
   });
+
+  socket.on('end',function(rank,score,time,topScores){
+    socket.disconnect();
+    players[myId].shape.remove();
+    delete players[myId];
 
+    end(rank,score,time,topScores);
+  });
 });
 
 function welcome(){
   $('#nickForm').bind('submit',function(){
-	if (myId != -1) {
-		return false; 
-	}
+	  if (myId != -1) {
+		  return false; 
+	  }
     var nickname = $('#nickname').val().trim();
     if(nickname.match(/^\w+$/)){
-      socket.emit('join',nickname);
-      $('#modal').fadeOut('fast');
+      var connect = setInterval(function(){
+        if(connected){
+          $('#modal').fadeOut('fast');
+          clearInterval(connect);
+          socket.emit('join',nickname);
+          $('.stuff').append($('#welcomeScreen'));
+        }
+      },100);
     }else{
       alert('Please use alphanumeric characters only');
       $('#nickname').focus();
     }
     return false;
   });
-  $('#modal .wrapper').append($('#welcomeScreen')).parent().fadeIn();
+  $('#modal .wrapper').html($('#welcomeScreen')).parent().fadeIn();
+}
+
+function end(rank,score,time,topScores){
+
+  var html = $('#endScreen').html();
+  var nickname = $('#nickname').val().trim();
+  var scoresTemplate = '<div class="scoreCol index">$rank$</div><div class="scoreCol">$name$</div><div class="scoreCol">$score$</div><div class="clearfix"></div>';
+  var scoreTable = '';
+  if(!topScores) topScores = [];
+  topScores.forEach(function(p,i){
+    scoreTable += scoresTemplate.replace('$rank$',i+1).replace('$name$',p.nickname).replace('$score$',p.score);
+  });
+
+  html = html.replace('$nickname$',nickname);
+  html = html.replace('$rank$',rank);
+  html = html.replace('$score$',score);
+  html = html.replace('$time$',time);
+  html = html.replace('$topscores$',scoreTable);
+  html = $(html);
+
+  html.bind('submit',function(e){
+    var connect = setInterval(function(){
+      if(connected){
+          $('#modal').fadeOut('fast');
+          clearInterval(connect);
+          socket.emit('join',nickname);
+      }
+    },100);
+    return false;
+  });
+
+  $('#modal .wrapper').html(html).parent().fadeIn();
 }
 
 stars(60);
+
 welcome();
 
 var bloodWidget = new BloodWidget(new Point(775,35));