jeena/chuck.js
1
0
Fork 0
mirror of https://github.com/logsol/chuck.js.git synced 2026-05-11 10:37:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added menuBar

Browse source
This commit is contained in:
Jeena 2015-02-22 18:39:35 +01:00
parent d7025ffd67
commit e452399caf
5 changed files with 53 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

5
app/Game/Client/GameController.js
View file

@ -210,11 +210,6 @@ function (Parent, Box2D, PhysicsEngine, ViewManager, PlayerController, Nc, reque
GameController.prototype.onUpdateStats = function(options) {
var player = this.players[options.playerId];
player.setStats(options.stats);
// FIXME: move to canvas later
if(player == this.me) {
DomController.setHealth(player.stats.health);
}
};
GameController.prototype.onPlayerKill = function(options) {

66
app/Game/Client/View/DomController.js
View file

@ -23,38 +23,17 @@ function (Settings, Nc, Stats, Screenfull) {
var self = this;
// create dev tools container
this.devToolsContainer = document.createElement("div");
this.devToolsContainer.id = "devtools";
document.body.appendChild(this.devToolsContainer);
// create Fullscreen
var p = document.createElement("p");
var button = document.createElement("button");
button.innerHTML = "Fullscreen";
button.onclick = function() {
if(Screenfull.enabled) {
Screenfull.request(self.canvas);
}
}
p.appendChild(button);
this.devToolsContainer.appendChild(p);
window.onresize = function() {
if(Screenfull.enabled) {
Nc.trigger(Nc.ns.client.view.fullscreen.change, Screenfull.isFullscreen);
}
}
// create Ping: container
this.ping = document.createElement("span");
this.devToolsContainer.appendChild(this.ping);
this.devToolsContainer = document.getElementById("menuBar");
// create FPS stats
li = document.createElement("li");
this.stats = new Stats();
this.stats.setMode(0);
this.devToolsContainer.appendChild(this.stats.domElement);
li.appendChild(this.stats.domElement);
this.devToolsContainer.appendChild(li);
// create debug mode
li = document.createElement("li");
var label = document.createElement("label");
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
@ -64,14 +43,31 @@ function (Settings, Nc, Stats, Screenfull) {
}
label.appendChild(checkbox);
label.appendChild(document.createTextNode("Debug"));
this.devToolsContainer.appendChild(label);
li.appendChild(label);
this.devToolsContainer.appendChild(li);
// create health
this.health = document.createElement("span");
this.health.innerHTML = "Health: 100";
p = document.createElement("p");
p.appendChild(this.health);
this.devToolsContainer.appendChild(p);
// create Ping: container
this.ping = document.createElement("li");
this.devToolsContainer.appendChild(this.ping);
// create Fullscreen
var li = document.createElement("li");
li.id = "fullscreen"
var button = document.createElement("button");
button.innerHTML = "Fullscreen";
button.onclick = function() {
if(Screenfull.enabled) {
Screenfull.request(self.canvas);
}
}
li.appendChild(button);
this.devToolsContainer.appendChild(li);
window.onresize = function() {
if(Screenfull.enabled) {
Nc.trigger(Nc.ns.client.view.fullscreen.change, Screenfull.isFullscreen);
}
}
};
DomController.prototype.statsBegin = function() {
@ -121,10 +117,6 @@ function (Settings, Nc, Stats, Screenfull) {
return this.debugCanvas;
}
DomController.prototype.setHealth = function(health) {
this.health.innerHTML = "Health: " + parseInt(health, 10);
};
DomController.prototype.setConnected = function(connected) {
if(connected) {
document.body.style.backgroundColor = '';

4
app/Lib/Vendor/Stats.js vendored
View file

@ -28,13 +28,13 @@ define(function() {
var fpsGraph = document.createElement( 'div' );
fpsGraph.id = 'fpsGraph';
fpsGraph.style.cssText = 'position:relative;width:74px;height:20px;background-color:#0ff';
fpsGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0ff';
fpsDiv.appendChild( fpsGraph );
while ( fpsGraph.children.length < 74 ) {
var bar = document.createElement( 'span' );
bar.style.cssText = 'width:1px;height:20px;float:left;background-color:#113';
bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#113';
fpsGraph.appendChild( bar );
}

24
static/css/screen.css
View file

@ -27,9 +27,26 @@ body {
-moz-osx-font-smoothing: grayscale;
}
#menuBar {
list-style-type: none;
margin: 0;
padding: 0;
background: #333;
}
#menuBar li {
display: inline-block;
padding: 0;
vertical-align: middle;
padding: 0 2em;
}
#back-to-menu {
display: inline-block;
margin: 10px;
}
#fullscreen {
float: right;
margin-top: 0.5em;
}
::selection {
@ -43,7 +60,7 @@ input, button {
background: black;
color: #ccc;
border: 0;
padding: 0.3em 0.6em;
padding: 0.3em 0.6em 0.6em;
font-size: 1em;
font-family: inherit;
text-transform: inherit;
@ -60,7 +77,7 @@ input, button {
#primarycolor {
padding: 0.3em;
width: 1em;
background-color: black;
background-color: #777;
}
article#menu {
@ -126,7 +143,6 @@ canvas {
}
#devtools {
font-family: monospace;
position: absolute;
right: 0;
top: 0;

4
static/html/index.html
View file

@ -13,7 +13,7 @@
<label>
Nickname:<br>
<input id="nick" name="nick" type="text">
<input id="primarycolor">
<input readonly id="primarycolor">
</label>
</p>
@ -74,7 +74,7 @@
</form>
</article>
<article id="game">
<button id="back-to-menu" onclick="window.location.href='/'">Menu</button>
<ul id="menuBar"><li><button id="back-to-menu" onclick="window.location.href='/'">Menu</button></ul>
<div id="canvasContainer">
<canvas id="canvas"></canvas>
</div>