diff --git a/app/Game/Client/Control/KeyboardInput.js b/app/Game/Client/Control/KeyboardInput.js index 3c57758..665d1aa 100755 --- a/app/Game/Client/Control/KeyboardInput.js +++ b/app/Game/Client/Control/KeyboardInput.js @@ -30,7 +30,6 @@ function (Key) { } KeyboardInput.prototype._onKeyDown = function (e) { - console.log(e.keyCode) var key = this._getKeyByKeyCode(e.keyCode); if (key && !key.getActive()) { diff --git a/app/Game/Client/Control/PlayerController.js b/app/Game/Client/Control/PlayerController.js index 33dbb48..fbe1ca5 100755 --- a/app/Game/Client/Control/PlayerController.js +++ b/app/Game/Client/Control/PlayerController.js @@ -41,7 +41,9 @@ function (Parent, KeyboardInput, MouseInput, Nc, GamepadInput) { tab: 9, plus: 187, + plusfx: 171, minus: 189, + minusfx: 173, zero: 48 } @@ -68,7 +70,9 @@ function (Parent, KeyboardInput, MouseInput, Nc, GamepadInput) { this.keyboardInput.registerKey(keys.space, 'jump', 'jumpStop'); this.keyboardInput.registerKey(keys.plus, 'zoomIn'); + this.keyboardInput.registerKey(keys.plusfx, 'zoomIn'); this.keyboardInput.registerKey(keys.minus, 'zoomOut'); + this.keyboardInput.registerKey(keys.minusfx, 'zoomOut'); this.keyboardInput.registerKey(keys.zero, 'zoomReset'); this.keyboardInput.registerKey(keys.tab, 'showInfo', 'hideInfo'); @@ -128,11 +132,11 @@ function (Parent, KeyboardInput, MouseInput, Nc, GamepadInput) { }; PlayerController.prototype.showInfo = function() { - Nc.trigger(Nc.ns.client.game.gameInfo.toggle, true); + Nc.trigger(Nc.ns.client.game.gameStats.toggle, true); }; PlayerController.prototype.hideInfo = function() { - Nc.trigger(Nc.ns.client.game.gameInfo.toggle, false); + Nc.trigger(Nc.ns.client.game.gameStats.toggle, false); }; PlayerController.prototype.zoomIn = function() { diff --git a/app/Game/Client/GameController.js b/app/Game/Client/GameController.js index 9cb1ca6..d9cb328 100755 --- a/app/Game/Client/GameController.js +++ b/app/Game/Client/GameController.js @@ -32,7 +32,7 @@ function (Parent, Box2D, PhysicsEngine, ViewManager, PlayerController, Nc, reque Parent.call(this, options); this.ncTokens = this.ncTokens.concat([ - Nc.on(Nc.ns.client.game.gameInfo.toggle, this.toggleInfo, this) + Nc.on(Nc.ns.client.game.gameStats.toggle, this.toggleGameStats, this) ]); } @@ -240,7 +240,7 @@ function (Parent, Box2D, PhysicsEngine, ViewManager, PlayerController, Nc, reque Parent.prototype.loadLevel.call(this, path); } - GameController.prototype.toggleInfo = function(show) { + GameController.prototype.toggleGameStats = function(show) { var playersArray = []; for (var key in this.players) { @@ -257,40 +257,7 @@ function (Parent, Box2D, PhysicsEngine, ViewManager, PlayerController, Nc, reque return 0; }); - 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"); - - this.view.toggleInfo(show, string); + Nc.trigger(Nc.ns.client.view.gameStats.toggle, show, sortedPlayers); }; GameController.prototype.destroy = function() { diff --git a/app/Game/Client/View/Views/Pixi/GameStats.js b/app/Game/Client/View/Views/Pixi/GameStats.js new file mode 100644 index 0000000..fc7e697 --- /dev/null +++ b/app/Game/Client/View/Views/Pixi/GameStats.js @@ -0,0 +1,130 @@ +define([ + "Lib/Vendor/Pixi", + "Lib/Utilities/NotificationCenter", + "Game/Config/Settings", + "Lib/Utilities/ColorConverter" +], + +function (PIXI, Nc, Settings, ColorConverter) { + + function GameStats(container) { + + this.style = { + borderWidth: 3, + padding: 20, + colors: { + background: 0x000000, + text: "red", + border: 0xAA0000 + } + }; + + this.container = container; + + this.infoContainer = 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.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.infoContainer.addChild(this.infoBox); + this.infoContainer.addChild(this.infoText); + + this.infoContainer.visible = false; + + Nc.on(Nc.ns.client.view.gameStats.toggle, this.toggle, this); + } + + GameStats.prototype.getInfoContainer = function() { + return this.infoContainer; + }; + + 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.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; + + this.infoContainer.visible = true; + this.container.filters = this.infoFilters; + this.infoFilters.forEach(function(filter) { filter.dirty = true; }); + + this.drawPlayerColors(sortedPlayers); + + } else { + this.infoText.setText("..."); + this.infoContainer.visible = false; + this.container.filters = null; + } + } + + GameStats.prototype.drawPlayerColors = function(sortedPlayers) { + var converter = new ColorConverter(); + + sortedPlayers.forEach(function(player, i) { + + 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); + }; + + return GameStats; + +}); \ No newline at end of file diff --git a/app/Game/Client/View/Views/PixiView.js b/app/Game/Client/View/Views/PixiView.js index 18f428d..8e1c8e1 100755 --- a/app/Game/Client/View/Views/PixiView.js +++ b/app/Game/Client/View/Views/PixiView.js @@ -5,10 +5,11 @@ define([ "Game/Client/View/Views/Pixi/ColorRangeReplaceFilter", "Game/Config/Settings", "Lib/Utilities/NotificationCenter", - "Lib/Utilities/Exception" + "Lib/Utilities/Exception", + "Game/Client/View/Views/Pixi/GameStats" ], -function (Parent, DomController, PIXI, ColorRangeReplaceFilter, Settings, Nc, Exception) { +function (Parent, DomController, PIXI, ColorRangeReplaceFilter, Settings, Nc, Exception, GameStats) { var AVAILABLE_MESH_FILTERS = { "blur": PIXI.BlurFilter, @@ -54,10 +55,12 @@ function (Parent, DomController, PIXI, ColorRangeReplaceFilter, Settings, Nc, Ex this.stage = new PIXI.Stage(0x333333); this.initCamera(); - this.initInfo(); this.initLoader(); this.initCanvas(this.renderer.view); + + this.gameStats = new GameStats(this.container); + this.stage.addChild(this.gameStats.getInfoContainer()); } PixiView.prototype.render = function () { @@ -256,58 +259,6 @@ function (Parent, DomController, PIXI, ColorRangeReplaceFilter, Settings, Nc, Ex } }; - // Info Overlay - - PixiView.prototype.initInfo = function() { - this.infoContainer = new PIXI.DisplayObjectContainer(); - this.stage.addChild(this.infoContainer); - - 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.infoText = new PIXI.Text("", {font: "normal 20px monospace", fill: "red", align: "center"}); - this.infoBox = new PIXI.Graphics(); - this.infoBox.alpha = 0.7; - - this.infoContainer.addChild(this.infoBox); - this.infoContainer.addChild(this.infoText); - - this.infoContainer.visible = false; - }; - - PixiView.prototype.toggleInfo = function(show, string) { - 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); - - var borderWidth = 3; - var padding = 20; - this.infoBox.clear(); - this.infoBox.beginFill(0x000000); - this.infoBox.lineStyle(borderWidth, 0xAA0000); - this.infoBox.drawRect(0, 0, this.infoText.width - borderWidth + 2 * padding * 2, this.infoText.height - borderWidth + 2 * padding); - this.infoBox.endFill(); - this.infoBox.position.x = this.infoText.position.x + borderWidth/2 - padding * 2; - this.infoBox.position.y = this.infoText.position.y + borderWidth/2 - padding; - - this.infoContainer.visible = true; - this.container.filters = this.infoFilters; - this.infoFilters.forEach(function(filter) { filter.dirty = true; }); - } else { - this.infoText.setText("..."); - this.infoContainer.visible = false; - this.container.filters = null; - } - }; // Player Info diff --git a/app/Lib/Utilities/ColorConverter.js b/app/Lib/Utilities/ColorConverter.js index ca1ffb7..ee83384 100644 --- a/app/Lib/Utilities/ColorConverter.js +++ b/app/Lib/Utilities/ColorConverter.js @@ -1,17 +1,55 @@ define([ + "Lib/Vendor/CryptoJS" ], -function () { +function (CryptoJS) { function ColorConverter() { - var palette = []; + this.sin = 0; + var palette = [ + 0x634c72, + 0x724c5e, + 0x787950, + 0x507971, + 0x506a79, + 0x8c423c, + 0x557e4a, + 0x436785, + 0xa62423, + 0x427f87, + 0x472e1a, + 0x4d667c, + 0x2a3c49, + 0x7c7e2b, + 0x3b3c21, + 0x263c27, + 0x7e897e, + 0xb55014, + 0x978c32, + 0x739137, + 0x46824f, + 0x19b0b4, + 0x0c1eb1, + 0xccb206, + 0x433e20, + 0x201a13, + 0x045396, + 0x313d08, + 0xb7a345, + 0xdc168a, + 0x310505, + 0x051631, + ]; + /* var element, color; - var start = 4; - var step = 2; - var max = 6; - for(var r=start; r>>2]|=(c[b>>>2]>>>24-8*(b%4)&255)<<24-8*((d+b)%4);else if(65535>>2]=c[b>>>2];else e.push.apply(e,c);this.sigBytes+=a;return this},clamp:function(){var a=this.words,e=this.sigBytes;a[e>>>2]&=4294967295<<32-8*(e%4);a.length=o.ceil(e/4)},clone:function(){var a= +n.clone.call(this);a.words=this.words.slice(0);return a},random:function(a){for(var e=[],c=0;c>>2]>>>24-8*(d%4)&255;c.push((b>>>4).toString(16));c.push((b&15).toString(16))}return c.join("")},parse:function(a){for(var b=a.length,c=[],d=0;d>>3]|=parseInt(a.substr(d,2),16)<<24-4*(d%8);return j.create(c,b/2)}},p=k.Latin1={stringify:function(a){for(var b= +a.words,a=a.sigBytes,c=[],d=0;d>>2]>>>24-8*(d%4)&255));return c.join("")},parse:function(a){for(var b=a.length,c=[],d=0;d>>2]|=(a.charCodeAt(d)&255)<<24-8*(d%4);return j.create(c,b)}},h=k.Utf8={stringify:function(a){try{return decodeURIComponent(escape(p.stringify(a)))}catch(b){throw Error("Malformed UTF-8 data");}},parse:function(a){return p.parse(unescape(encodeURIComponent(a)))}},b=m.BufferedBlockAlgorithm=n.extend({reset:function(){this._data=j.create(); +this._nDataBytes=0},_append:function(a){"string"==typeof a&&(a=h.parse(a));this._data.concat(a);this._nDataBytes+=a.sigBytes},_process:function(a){var b=this._data,c=b.words,d=b.sigBytes,f=this.blockSize,i=d/(4*f),i=a?o.ceil(i):o.max((i|0)-this._minBufferSize,0),a=i*f,d=o.min(4*a,d);if(a){for(var h=0;h>>32-d)+f}function l(b,f,a,e,c,d,g){b=b+(f&e|a&~e)+c+g;return(b<>>32-d)+f}function m(b,f,a,e,c,d,g){b=b+(f^a^e)+c+g;return(b<>>32-d)+f}function n(b,f,a,e,c,d,g){b=b+(a^(f|~e))+c+g;return(b<>>32-d)+f}var j=CryptoJS,k=j.lib,r=k.WordArray,k=k.Hasher,p=j.algo,h=[];(function(){for(var b=0;64>b;b++)h[b]=4294967296*o.abs(o.sin(b+1))|0})();p=p.MD5=k.extend({_doReset:function(){this._hash=r.create([1732584193,4023233417, +2562383102,271733878])},_doProcessBlock:function(b,f){for(var a=0;16>a;a++){var e=f+a,c=b[e];b[e]=(c<<8|c>>>24)&16711935|(c<<24|c>>>8)&4278255360}for(var e=this._hash.words,c=e[0],d=e[1],g=e[2],i=e[3],a=0;64>a;a+=4)16>a?(c=q(c,d,g,i,b[f+a],7,h[a]),i=q(i,c,d,g,b[f+a+1],12,h[a+1]),g=q(g,i,c,d,b[f+a+2],17,h[a+2]),d=q(d,g,i,c,b[f+a+3],22,h[a+3])):32>a?(c=l(c,d,g,i,b[f+(a+1)%16],5,h[a]),i=l(i,c,d,g,b[f+(a+6)%16],9,h[a+1]),g=l(g,i,c,d,b[f+(a+11)%16],14,h[a+2]),d=l(d,g,i,c,b[f+a%16],20,h[a+3])):48>a?(c= +m(c,d,g,i,b[f+(3*a+5)%16],4,h[a]),i=m(i,c,d,g,b[f+(3*a+8)%16],11,h[a+1]),g=m(g,i,c,d,b[f+(3*a+11)%16],16,h[a+2]),d=m(d,g,i,c,b[f+(3*a+14)%16],23,h[a+3])):(c=n(c,d,g,i,b[f+3*a%16],6,h[a]),i=n(i,c,d,g,b[f+(3*a+7)%16],10,h[a+1]),g=n(g,i,c,d,b[f+(3*a+14)%16],15,h[a+2]),d=n(d,g,i,c,b[f+(3*a+5)%16],21,h[a+3]));e[0]=e[0]+c|0;e[1]=e[1]+d|0;e[2]=e[2]+g|0;e[3]=e[3]+i|0},_doFinalize:function(){var b=this._data,f=b.words,a=8*this._nDataBytes,e=8*b.sigBytes;f[e>>>5]|=128<<24-e%32;f[(e+64>>>9<<4)+14]=(a<<8|a>>> +24)&16711935|(a<<24|a>>>8)&4278255360;b.sigBytes=4*(f.length+1);this._process();b=this._hash.words;for(f=0;4>f;f++)a=b[f],b[f]=(a<<8|a>>>24)&16711935|(a<<24|a>>>8)&4278255360}});j.MD5=k._createHelper(p);j.HmacMD5=k._createHmacHelper(p)})(Math); + + return CryptoJS; + +}); \ No newline at end of file