add chat
This commit is contained in:
parent
27520842e3
commit
2d177c6b27
16 changed files with 228 additions and 31 deletions
|
@ -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;
|
||||||
|
}
|
||||||
|
|
56
public/static/js/wingbase/gui/chat.js
Normal file
56
public/static/js/wingbase/gui/chat.js
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
29
public/static/js/wingbase/gui/gui.js
Normal file
29
public/static/js/wingbase/gui/gui.js
Normal 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';
|
||||||
|
}
|
||||||
|
}
|
11
public/static/js/wingbase/header.js
Normal file
11
public/static/js/wingbase/header.js
Normal 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';
|
|
@ -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 = {};
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
5
public/views/error/error.jade
Normal file
5
public/views/error/error.jade
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
extends ../layout.jade
|
||||||
|
|
||||||
|
block head
|
||||||
|
|
||||||
|
block body
|
|
@ -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
|
||||||
|
|
3
public/views/gui/gui.jade
Normal file
3
public/views/gui/gui.jade
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
#chat.container
|
||||||
|
#chat-messages
|
||||||
|
input(type="text", maxLength="100")#chat-input
|
9
public/views/layout.jade
Normal file
9
public/views/layout.jade
Normal 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
|
|
@ -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)
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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'));
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue