This commit is contained in:
Asraelite 2016-03-27 23:46:18 +01:00
parent 27520842e3
commit 2d177c6b27
16 changed files with 228 additions and 31 deletions

View file

@ -12,3 +12,39 @@
body { body {
overflow: hidden; overflow: hidden;
} }
#gui {
color: #fff;
}
#gui > .container {
position: fixed;
}
#gui #chat {
bottom: 0;
left: 0;
width: 400px;
max-height: 300px;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.55);
}
#gui #chat span {
display: block;
margin-top: 5px;
}
#gui #chat input {
font-family: inherit;
font-size: 16px;
border: 0;
display: block;
width: 100%;
padding: 2px 0 2px 0;
background-color: rgba(20, 20, 20, 0.5);
}
#gui #chat input:focus {
background-color: #eee;
}

View file

@ -0,0 +1,56 @@
GUI.prototype.Chat = class {
constructor(gui) {
this.gui = gui;
this.messageElement = this.gui.query('#chat-messages');
this.inputElement = this.gui.query('#chat input');
this.inputElement.disabled = true;
this.messages = [];
this.typing = false;
}
addMessage(messageData) {
let message = {
type: messageData.type,
player: messageData.player,
text: messageData.message,
createTime: Date.now()
};
let span = this.gui.createElement(this.messageElement, 'span', {
html: message.text
});
this.messages.push(message);
setTimeout(_ => {
this.messageElement.removeChild(span);
this.messages.shift();
}, 15000);
}
tick() {
if (game.input.keys.pressed[13] || game.input.keys.pressed[27]) {
if (this.typing) {
if (game.input.keys.pressed[13]) {
let message = this.inputElement.value;
this.inputElement.value = '';
game.net.send('chat', { msg: message });
}
this.typing = false;
this.inputElement.blur();
this.inputElement.disabled = true;
game.input.locked = false;
} else {
console.log(game.input.locked);
this.typing = true;
this.inputElement.disabled = false;
this.inputElement.focus();
game.input.locked = true;
}
}
}
}

View file

@ -0,0 +1,29 @@
//@10
class GUI {
constructor() {
this.guiElement = document.getElementById('gui');
this.chat = new this.Chat(this);
}
createElement(parent, type, data) {
let el = document.createElement(type);
el.innerHTML = data.html;
parent.appendChild(el);
return el;
}
query(selector) {
let result = this.guiElement.querySelectorAll(selector);
return result.length == 1 ? result[0] : result;
}
tick() {
this.chat.tick();
}
set visible(visible) {
this.guiElement.style.display = visible ? 'block' : 'hidden';
}
}

View file

@ -0,0 +1,11 @@
//@100000000
/*
* Wingbase version 0.0.1.
*
* Developer: Asraelite
* Subreddit: /r/wingbase
* Made with: Node.js, Socket.io, Box2D, HTML5 Canvas
*/
'use strict';

View file

@ -22,7 +22,7 @@ class Input {
pressed: {} pressed: {}
}; };
this.mouse this._locked = false;
document.addEventListener('mousemove', this.mouseMove.bind(this)); document.addEventListener('mousemove', this.mouseMove.bind(this));
document.addEventListener('mousedown', this.mouseDown.bind(this)); document.addEventListener('mousedown', this.mouseDown.bind(this));
@ -34,31 +34,42 @@ class Input {
} }
mouseMove() { mouseMove() {
if (this.locked) return;
var rect = game.renderer.canvas.getBoundingClientRect(); var rect = game.renderer.canvas.getBoundingClientRect();
this.mouse.x = event.clientX - rect.left; this.mouse.x = event.clientX - rect.left;
this.mouse.y = event.clientY - rect.top; this.mouse.y = event.clientY - rect.top;
}; };
mouseDown() { mouseDown() {
if (this.locked) return;
this.mouse.pressed[event.which] = true; this.mouse.pressed[event.which] = true;
this.mouse.held[event.which] = true; this.mouse.held[event.which] = true;
}; };
mouseUp() { mouseUp() {
if (this.locked) return;
this.mouse.held[event.which] = false; this.mouse.held[event.which] = false;
} }
keyDown() { keyDown() {
if (this.locked) {
if (event.which == '13' || event.which == '27') {
this.keys.pressed[event.which] = true;
}
return;
}
if (!this.keys.held[event.which]) if (!this.keys.held[event.which])
this.keys.pressed[event.which] = true; this.keys.pressed[event.which] = true;
this.keys.held[event.which] = true; this.keys.held[event.which] = true;
} }
keyUp() { keyUp() {
if (this.locked) return;
this.keys.held[event.which] = false; this.keys.held[event.which] = false;
} }
mouseAnyPressed() { mouseAnyPressed() {
if (this.locked) return;
var p = this.mouse.pressed; var p = this.mouse.pressed;
return p[1] || p[2] || p[3]; return p[1] || p[2] || p[3];
} }
@ -67,4 +78,15 @@ class Input {
for (var i in this.keys.pressed) this.keys.pressed[i] = false; for (var i in this.keys.pressed) this.keys.pressed[i] = false;
for (var i in this.mouse.pressed) this.mouse.pressed[i] = false; for (var i in this.mouse.pressed) this.mouse.pressed[i] = false;
}; };
get locked() {
return this._locked;
}
set locked(value) {
this._locked = value;
if (!value) return;
this.keys.held = {};
this.mouse.held = {};
}
} }

View file

@ -1,4 +1,4 @@
'use strict'; //@30
window.addEventListener('load', init); window.addEventListener('load', init);
@ -9,7 +9,7 @@ function init() {
game.tick(); game.tick();
//game.net.connect(); game.net.connect();
} }
class Game { class Game {
@ -17,14 +17,16 @@ class Game {
this.assets = this.loadAssets(); this.assets = this.loadAssets();
this.connected = false; this.connected = false;
this.state = 'connecting';
this.pingMode = 'fast'; this.pingMode = 'fast';
this.input = new Input(); this.input = new Input();
this.gui = new GUI();
this.net = new Net(); this.net = new Net();
this.world = new World(); this.world = new World();
this.renderer = new Renderer(); this.renderer = new Renderer();
this.player = new Player(); this.player = new Player();
this.state = 'connecting';
} }
tick() { tick() {
@ -38,10 +40,26 @@ class Game {
game.net.sendUpdate(delta); game.net.sendUpdate(delta);
} }
this.input.clear(); this.gui.tick();
this.world.tick(); this.world.tick();
this.input.clear();
requestAnimationFrame(this.tick.bind(this)); requestAnimationFrame(this.tick.bind(this));
} }
get state() {
return this._state;
}
set state(state) {
this._state = state;
if (state != 'connected') {
this.gui.visible = true;
} else {
this.gui.visible = false;
}
}
} }

View file

@ -42,7 +42,9 @@ class Net {
game.renderer.addEffect(data); game.renderer.addEffect(data);
}); });
this.socket.on('chat', data => console.log(data)); this.socket.on('chat', data => {
game.gui.chat.addMessage(data);
});
}; };
sendUpdate(inputs) { sendUpdate(inputs) {

View file

@ -0,0 +1,5 @@
extends ../layout.jade
block head
block body

View file

@ -1,19 +1,16 @@
doctype html extends layout.jade
html(lang='en')
head
meta(charset="UTF-8")
link(rel="icon", type="image/png", href="img/favicon.png")
link(rel="stylesheet", type="text/css", href="css/styles.css")
title
| Wingbase
script(src="js/lib/dexie.min.js")
script(src="socket.io/socket.io.js")
script(src="js/lib/box2dweb.min.js")
script(src="https://rawgit.com/Asraelite/pallet.js/master/pallet.js")
script(src="wingbase.min.js") block head
body title
canvas#wingbase_canvas | Wingbase
| Sorry, your browser does not currently support HTML5 Canvas. script(src="js/lib/dexie.min.js")
#gui script(src="socket.io/socket.io.js")
include script(src="js/lib/box2dweb.min.js")
script(src="https://rawgit.com/Asraelite/pallet.js/master/pallet.js")
script(src="wingbase.min.js")
block body
canvas#wingbase_canvas
| Sorry, your browser does not currently support HTML5 Canvas.
#gui
include gui/gui.jade

View file

@ -0,0 +1,3 @@
#chat.container
#chat-messages
input(type="text", maxLength="100")#chat-input

9
public/views/layout.jade Normal file
View file

@ -0,0 +1,9 @@
doctype html
html(lang='en')
head
meta(charset='UTF-8')
link(rel='icon', type='image/png', href='img/favicon.png')
link(rel='stylesheet', type='text/css', href='css/styles.css')
block head
body
block body

View file

@ -34,13 +34,16 @@ class Connection {
} }
chat(data) { chat(data) {
console.log(this.room); //if(this.chatCooldown > 5 || !this.room) return;
if(this.chatCooldown > 5 || !this.room) return; if(!data.msg) return;
wingbase.log(`${this.room}/${this.player.name}: ${data.msg}`);
this.chatCooldown++; this.chatCooldown++;
this.io.to(this.room).emit('chat', { this.io.to(this.room).emit('chat', {
name: this.player.name, type: 'player',
msg: data.msg.slice(0, 100) source: this.player.name,
message: data.msg.slice(0, 100)
}); });
} }

View file

@ -108,7 +108,7 @@ class World {
} }
populate() { populate() {
for (var i = 0; i < 40; i++) { for (var i = 0; i < 5; i++) {
let pos = { let pos = {
x: Math.random() * 2000 - 200, x: Math.random() * 2000 - 200,
y: Math.random() * 500 - 250 y: Math.random() * 500 - 250

View file

@ -28,7 +28,12 @@ class WebServer {
}); });
app.get('/', (req, res) => { app.get('/', (req, res) => {
res.render('index', {}); try {
res.render('index', {});
} catch(err) {
wingbase.error('Renderng error:' + err);
res.render('error/500', { error: err });
}
}); });
app.use(express.static('public/static')); app.use(express.static('public/static'));

View file

@ -26,12 +26,13 @@ function minifyJs(callback) {
} }
scripts.sort((a, b) => getPriority(b) - getPriority(a)); scripts.sort((a, b) => getPriority(b) - getPriority(a));
scripts = scripts.map(s => s.replace(/(\/\/@\d+\n)/, ''));
let comment = ''; let comment = '';
cache = scripts.join(''); cache = scripts.join('');
// Remove to re-enable minifying. //Remove to re-enable minifying.
callback(cache); return; callback(cache); return;
try { try {