fixed #110 rewrite of tab-view and better fonts

app/Game/Client/View/Pixi/GameStats.js

@@ -9,7 +9,7 @@ function (PIXI, Nc, Settings, ColorConverter) {
 
 	"use strict";
  
-    function GameStats(container) {
+    function GameStats(gameContainer) {
 
 		this.style = {
 			borderWidth: 3,
@@ -17,114 +17,172 @@ function (PIXI, Nc, Settings, ColorConverter) {
 			colors: {
 				background: 0x000000,
 				text: "red",
+                headline: "#880000",
 				border: 0xAA0000
-			}
+			},
+            line: {
+                height: 16,
+                spacing: 5
+            },
+            fontSize: 12
 		};
 
-    	this.container = container;
+    	this.gameContainer = gameContainer;
 
-        this.infoContainer = new PIXI.DisplayObjectContainer();
+        this.container = new PIXI.DisplayObjectContainer();
 
         var blurFilter = new PIXI.BlurFilter();
         blurFilter.blurX = 12;
         blurFilter.blurY = 12;
         var grayFilter = new PIXI.GrayFilter();
         grayFilter.gray = 0.85;
-        this.infoFilters = [blurFilter, grayFilter];
+        this.filters = [blurFilter, grayFilter];
 
-        this.infoText = new PIXI.Text("", {font: "normal 20px monospace", fill: this.style.colors.text, align: "center"});
+        this.background = new PIXI.Graphics();
-        this.infoBox = new PIXI.Graphics();
+        this.background.alpha = 0.7;
-        this.infoBox.alpha = 0.7;
+        this.container.addChild(this.background);
 
-        this.infoContainer.addChild(this.infoBox);
+        this.dialog = new PIXI.DisplayObjectContainer();
-        this.infoContainer.addChild(this.infoText);
+        this.container.addChild(this.dialog);
 
-        this.infoContainer.visible = false;
+        this.graphics = new PIXI.Graphics();
+        // this.dialog.addChild(this.graphics);
+
+        /*
+            gameContainer
+                filters
+            container
+                background
+                dialog
+                    graphics
+                        playerColor
+                    headline
+                    line
+        */
+
+        this.container.visible = false;
 
         Nc.on(Nc.ns.client.view.gameStats.toggle, this.toggle, this);
     }
 
     GameStats.prototype.getInfoContainer = function() {
-    	return this.infoContainer;
+    	return this.container;
     };
  
     GameStats.prototype.toggle = function(show, sortedPlayers) {
-        
-        function pad(string, max, alignLeft) {
-            string = string.substring(0, max - 1);
-
-            var spaces = new Array( max - string.length + 1 ).join(" ");
-            if(alignLeft) {
-                return string + spaces;
-            } else {
-                return spaces + string;
-            }
-        }
-
-        var string = "" +
-                     pad("#", 2, false) + " " +
-                     pad("Name", 12, true) +
-                     pad("Score", 6, false) +
-                     pad("Deaths", 7, false) +
-                     pad("Health", 7, false) +
-                     "\n-----------------------------------\n";
-
-        var lines = [];
-        sortedPlayers.forEach(function(player, i) {
-            var name = player.getNickname();
-            lines.push(
-                pad("" + (i + 1) + ".", 2, false) + " " + 
-                pad(name, 12, true) + 
-                pad("" + player.stats.score, 6, false) +
-                pad("" + player.stats.deaths, 7, false) +
-                pad("" + parseInt(player.stats.health, 10), 7, false)
-            );
-        }, this);
-
-        string += lines.join("\n");
-
-
         if(show) {
-            this.infoText.setText(string);
-            this.infoText.updateText();
-            this.infoText.dirty = false;
 
-            var x = Settings.STAGE_WIDTH / 2 - this.infoText.width / 2,
+            this.background.clear();
-                y = Settings.STAGE_HEIGHT / 2 - this.infoText.height / 2;
+            this.graphics.clear();
-            this.infoText.position = new PIXI.Point(x, y);
+            this.dialog.removeChildren();
 
-            this.infoBox.clear();
+            // redraw background
-            this.infoBox.beginFill(this.style.colors.background);
+            this.background.beginFill(this.style.colors.background);
-            this.infoBox.lineStyle(this.style.borderWidth, this.style.colors.border);
+            this.background.drawRect(0, 0, Settings.STAGE_WIDTH, Settings.STAGE_HEIGHT);
-            this.infoBox.drawRect(0, 0, this.infoText.width - this.style.borderWidth + 2 * this.style.padding * 2, this.infoText.height - this.style.borderWidth + 2 * this.style.padding);
+            this.background.endFill();
-            this.infoBox.endFill();
-            this.infoBox.position.x = this.infoText.position.x + this.style.borderWidth/2 - this.style.padding * 2;
-            this.infoBox.position.y = this.infoText.position.y + this.style.borderWidth/2 - this.style.padding;
 
-            this.infoContainer.visible = true;
+            // redraw text and graphics
-            this.container.filters = this.infoFilters;
-            this.infoFilters.forEach(function(filter) { filter.dirty = true; });
 
-            this.drawPlayerColors(sortedPlayers);
+            var string = "" +
+                         "  #".pad(7, true) + " " +
+                         "Name".pad(12, true) +
+                         "Score".pad(6, false) +
+                         "Deaths".pad(7, false) +
+                         "Health".pad(9, false) + " ";
+
+            var line = new PIXI.Text(string, {
+                font: "normal " + this.style.fontSize + "px 'Joystix'",
+                fill: this.style.colors.headline
+            });
+
+            line.position = new PIXI.Point(0, 0);
+            this.dialog.addChild(line);
+
+            this.drawPlayers(sortedPlayers);
+
+            var x = Settings.STAGE_WIDTH / 2 - this.dialog.getBounds().width / 2,
+                y = Settings.STAGE_HEIGHT / 2 - (sortedPlayers.length + 1) * (this.style.line.height + this.style.line.spacing) / 2;
+            this.dialog.position = new PIXI.Point(x, y);
+
+            this.dialog.addChild(this.graphics);
+
+            // show stats with filters
+            this.container.visible = true;
+            this.gameContainer.filters = this.filters;
+            this.filters.forEach(function(filter) { filter.dirty = true; });
 
         } else {
-            this.infoText.setText("...");
+            this.container.visible = false;
-            this.infoContainer.visible = false;
+            this.gameContainer.filters = null;
-            this.container.filters = null;
         }
     }
 
-    GameStats.prototype.drawPlayerColors = function(sortedPlayers) {
+    GameStats.prototype.drawPlayers = function(sortedPlayers) {
-    	var converter = new ColorConverter();
+        sortedPlayers.forEach(function(player, i) {
 
-    	sortedPlayers.forEach(function(player, i) {
+            this.drawPlayer(player, i + 1);
+            this.drawPlayerGraphics(player, i + 1)
 
-    		this.infoBox.beginFill(converter.getColorByName(player.getNickname()));
+        }, this);
-    		this.infoBox.lineStyle();
+    };
-    		this.infoBox.drawRect(this.style.padding, i * 21 + this.style.padding + 42, 16, 16);
-    		this.infoBox.endFill();
 
-    	}, this);
+    GameStats.prototype.drawPlayer = function(player, i) {
+        var string = (i + ".   ").pad(7, false) + " " + 
+            player.getNickname().pad(12, true) + 
+            ("" + player.stats.score).pad(6, false) +
+            ("" + player.stats.deaths).pad(7, false) +
+            ("" /* + parseInt(player.stats.health, 10)*/).pad(9, false) + " ";
+
+        var line = new PIXI.Text(string, {
+            font: "normal " + this.style.fontSize + "px 'Joystix'",
+            fill: this.style.colors.text
+        });
+
+        line.position = new PIXI.Point(
+            0,
+            i * (this.style.line.height + this.style.line.spacing)
+        );
+
+        this.dialog.addChild(line);
+    };
+
+    GameStats.prototype.drawPlayerGraphics = function(player, i) {
+        var converter = new ColorConverter();
+
+        // draw shirt color
+        this.graphics.beginFill(converter.getColorByName(player.getNickname()));
+        this.graphics.drawRect(
+            50, 
+            i * (this.style.line.height + this.style.line.spacing),
+            this.style.line.height, 
+            this.style.line.height
+        );
+
+        // draw health bar
+        var height = this.style.line.height / 2,
+            width = height * 7,
+            borderWidth = 2,
+            offsetX = 360,
+            offsetY = (i * (this.style.line.height + this.style.line.spacing)) + ((this.style.line.height - height) / 2);
+
+        this.graphics.beginFill(0x000000);
+        this.graphics.drawRect(offsetX, offsetY, width, height);
+        this.graphics.endFill();
+
+        if(player.stats.health > 0) {
+            var color = player.stats.health / 100 < Settings.CRITICAL_HEALTH_THRESHOLD
+                ? 0xFF0000
+                : 0x00FF00;
+
+            this.graphics.beginFill(color);
+            this.graphics.drawRect(
+                offsetX + borderWidth, 
+                offsetY + borderWidth, 
+                width * player.stats.health / 100 - 2 * borderWidth, 
+                height - 2 * borderWidth
+            );
+            this.graphics.endFill();
+        }
     };
  
     return GameStats;

app/Game/Client/View/Pixi/Layers/Ghost.js

@@ -92,7 +92,7 @@ function (Parent, PIXI, Nc, Settings) {
 
             if(options.healthFactor > 0) {
                 var color = 0x00FF00;
-                if(options.healthFactor < 0.30) color = 0xFF0000;
+                if(options.healthFactor < Settings.CRITICAL_HEALTH_THRESHOLD) color = 0xFF0000;
                 healthBar.beginFill(color);
                 healthBar.lineStyle(0, 0x000000);
                 healthBar.drawRect(borderWidth, borderWidth, width * options.healthFactor, height);

app/Game/Client/View/Pixi/View.js

@@ -38,7 +38,7 @@ function (Parent, DomController, PIXI, Settings, Nc, Exception, GameStats, Layer
 
         var rendererOptions = {
             view: DomController.getCanvas(),
-            antialiasing: true,
+            antialiasing: false,
             transparent: false,
             resolution: 1
         }

app/Game/Config/Settings.js

@@ -43,6 +43,7 @@ define(function() {
         MAX_RUNNING_WEIGHT: 9,
         RESPAWN_TIME: 5,
         HEALTH_DISPLAY_TIME: 2,
+        CRITICAL_HEALTH_THRESHOLD: 0.3,
         RAGDOLL_DESTRUCTION_TIME: 20,
         VIEWPORT_SPEED_FACTOR: 640,
         VIEWPORT_LOOK_AHEAD: 0.1,

app/Lib/Utilities/Core/Extensions.js

@@ -9,4 +9,16 @@ function () {
 		var f = this.charAt(0).toUpperCase();
 		return f + this.substr(1);
 	}
+
+	String.prototype.pad = function (max, alignLeft) {
+        var string = this.substring(0, max - 1);
+
+        var spaces = new Array( max - string.length + 1 ).join(" ");
+        if(alignLeft) {
+            return string + spaces;
+        } else {
+            return spaces + string;
+        }
+    }
+    
 });

static/css/screen.css

@@ -1,3 +1,16 @@
+@font-face {
+    font-family: 'Joystix';
+    src: url('/static/fonts/2D6D36_0_0.eot');
+    src: url('/static/fonts/2D6D36_0_0.eot?#iefix') format('embedded-opentype'),
+        url('/static/fonts/2D6D36_0_0.woff2') format('woff2'),
+        url('/static/fonts/2D6D36_0_0.woff') format('woff'),
+        url('/static/fonts/2D6D36_0_0.ttf') format('truetype');
+}
+
+h1, h2, h3, h4, th {
+    font-weight: normal;
+}
+
 html, body {
     width: 100%; 
     height: 100%;
@@ -6,10 +19,12 @@ html, body {
 body {
     background: #222;
     color: #ccc;
-    font-family: "Lucida Grande", sans-serif;
+    font-family: 'Joystix', "Lucida Grande", sans-serif;
+    text-transform: uppercase;
     margin: 0; 
     padding: 0; 
     display: table;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 #back-to-menu {
@@ -18,10 +33,10 @@ body {
 }
 
 ::selection {
-    background: #607950; /* Safari */
+    background: #720000; /* Safari */
     }
 ::-moz-selection {
-    background: #607950; /* Firefox */
+    background: #720000; /* Firefox */
 }
 
 input, button {
@@ -30,6 +45,8 @@ input, button {
     border: 0;
     padding: 0.3em 0.6em;
     font-size: 1em;
+    font-family: inherit;
+    text-transform: inherit;
 }
 
 #createform, #customjoinform, #game {

static/html/index.html

@@ -3,6 +3,7 @@
 <head>
 	<meta charset="utf-8">
 	<title>Chuck</title>
+	<link href='http://fonts.googleapis.com/css?family=VT323' rel='stylesheet' type='text/css'>
 	<link rel="stylesheet" href="/static/css/screen.css" type="text/css" media="screen">
 </head>
 <body>