diff --git a/app/Game/Client/View/Pixi/GameStats.js b/app/Game/Client/View/Pixi/GameStats.js
index 68ca430..8ef26dd 100644
--- a/app/Game/Client/View/Pixi/GameStats.js
+++ b/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.infoBox = new PIXI.Graphics();
- this.infoBox.alpha = 0.7;
+ this.background = new PIXI.Graphics();
+ this.background.alpha = 0.7;
+ this.container.addChild(this.background);
- this.infoContainer.addChild(this.infoBox);
- this.infoContainer.addChild(this.infoText);
+ this.dialog = new PIXI.DisplayObjectContainer();
+ 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,
- y = Settings.STAGE_HEIGHT / 2 - this.infoText.height / 2;
- this.infoText.position = new PIXI.Point(x, y);
+ this.background.clear();
+ this.graphics.clear();
+ this.dialog.removeChildren();
- this.infoBox.clear();
- this.infoBox.beginFill(this.style.colors.background);
- this.infoBox.lineStyle(this.style.borderWidth, this.style.colors.border);
- 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.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;
+ // redraw background
+ this.background.beginFill(this.style.colors.background);
+ this.background.drawRect(0, 0, Settings.STAGE_WIDTH, Settings.STAGE_HEIGHT);
+ this.background.endFill();
- this.infoContainer.visible = true;
- this.container.filters = this.infoFilters;
- this.infoFilters.forEach(function(filter) { filter.dirty = true; });
+ // redraw text and graphics
- 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.infoContainer.visible = false;
- this.container.filters = null;
+ this.container.visible = false;
+ this.gameContainer.filters = null;
}
}
- GameStats.prototype.drawPlayerColors = function(sortedPlayers) {
- var converter = new ColorConverter();
+ GameStats.prototype.drawPlayers = function(sortedPlayers) {
+ 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.infoBox.lineStyle();
- this.infoBox.drawRect(this.style.padding, i * 21 + this.style.padding + 42, 16, 16);
- this.infoBox.endFill();
+ }, this);
+ };
- }, 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;
diff --git a/app/Game/Client/View/Pixi/Layers/Ghost.js b/app/Game/Client/View/Pixi/Layers/Ghost.js
index 9659ef9..13d5e03 100644
--- a/app/Game/Client/View/Pixi/Layers/Ghost.js
+++ b/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);
diff --git a/app/Game/Client/View/Pixi/View.js b/app/Game/Client/View/Pixi/View.js
index d0c6cdc..935f50d 100755
--- a/app/Game/Client/View/Pixi/View.js
+++ b/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
}
diff --git a/app/Game/Config/Settings.js b/app/Game/Config/Settings.js
index 25257d1..0476ad0 100755
--- a/app/Game/Config/Settings.js
+++ b/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,
diff --git a/app/Lib/Utilities/Core/Extensions.js b/app/Lib/Utilities/Core/Extensions.js
index 1cd8fc4..0b3b9ec 100755
--- a/app/Lib/Utilities/Core/Extensions.js
+++ b/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;
+ }
+ }
+
});
\ No newline at end of file
diff --git a/static/css/screen.css b/static/css/screen.css
index 8898ed7..3e349ae 100644
--- a/static/css/screen.css
+++ b/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;
+ 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 {
@@ -120,4 +137,4 @@ canvas {
#devtools p {
padding: 5px 0 0 0;
margin: 0;
-}
\ No newline at end of file
+}
diff --git a/static/fonts/2D6D36_0_0.eot b/static/fonts/2D6D36_0_0.eot
new file mode 100644
index 0000000..6d3dfd6
Binary files /dev/null and b/static/fonts/2D6D36_0_0.eot differ
diff --git a/static/fonts/2D6D36_0_0.ttf b/static/fonts/2D6D36_0_0.ttf
new file mode 100644
index 0000000..f2f5c2a
Binary files /dev/null and b/static/fonts/2D6D36_0_0.ttf differ
diff --git a/static/fonts/2D6D36_0_0.woff b/static/fonts/2D6D36_0_0.woff
new file mode 100644
index 0000000..dfd6506
Binary files /dev/null and b/static/fonts/2D6D36_0_0.woff differ
diff --git a/static/fonts/2D6D36_0_0.woff2 b/static/fonts/2D6D36_0_0.woff2
new file mode 100644
index 0000000..5a3a3c7
Binary files /dev/null and b/static/fonts/2D6D36_0_0.woff2 differ
diff --git a/static/html/index.html b/static/html/index.html
index 43fc6e0..b54f3c6 100644
--- a/static/html/index.html
+++ b/static/html/index.html
@@ -3,6 +3,7 @@
Chuck
+