lamp/piano
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: lamp:8b6f2e25883dea980d7825080fa4f433ff8c9629
Branches Tags
lamp:master
...
compare: lamp:a88ba01c6de557f819db0331090e576cb8edef7d
Branches Tags
lamp:master

2 Commits
8b6f2e2588 ... a88ba01c6d

Author SHA1 Message Date
Lamp
a88ba01c6d init working backend 
stripped out room and rate limiting from frontend
 2021-12-02 19:08:24 -08:00
Lamp
75f07f2d82 hmm wip 2021-12-02 17:54:28 -08:00
3 changed files with 53 additions and 163 deletions
Show Stats Expand all files Collapse all files

55
backend/index.js
View File

@ -1,17 +1,62 @@
var express = require("express");
var qs = require("qs");
var {WebSocketServer} = require("ws");
var app = express();
var server = app.listen(924);
app.get('*', express.static("../frontend"));
var wss = new WebSocketServer({
server,
clientTracking: true
});
var wss = new WebSocketServer({server});
wss.broadcast = function (msg) {
if (typeof msg == "object") msg = JSON.stringify(msg);
for (let ws of wss.clients) ws.send(msg);
}
wss.chatlog = [];
wss.on("connection", (ws, req) => {
console.log(req);
ws.on("message", msg => {
console.log(msg);
req.query = qs.parse(req.url.substr(req.url.indexOf('?')));
ws.user = {
id: wss.clients.size,
uid: req.socket.remoteAddress,
nick: req.query.nick || "potato-chan",
color: [Math.floor(Math.random()*255),Math.floor(Math.random()*255),Math.floor(Math.random()*255)]
}
ws.send(JSON.stringify({
type: "load",
id: ws.user.id,
uid: ws.user.uid,
users: Array.from(wss.clients).map(x => x.user),
chatlog: []
}));
wss.broadcast({type: "chat", message: {type: "join", id: ws.user.id, uid: ws.user.uid, nick: ws.user.nick}});
ws.on("close", () => wss.broadcast({type: "chat", message: {type: "leave", id: ws.user.id, uid: ws.user.uid, nick: ws.user.nick}}));
ws.on("message", (msg, isBinary) => {
if (isBinary) {
wss.broadcast(Buffer.concat([msg, Buffer.from([ws.user.id])]));
} else {
msg = msg.toString();
try {
msg = JSON.parse(msg);
} catch (error) { return }
console.log(msg);
switch (msg.type) {
case "chat":
let message = {type: "message", content: msg.message, user: {uid: ws.user.uid, nick: ws.user.nick, color: ws.user.color}};
wss.broadcast({type: "chat", message});
wss.chatlog.push(message);
break;
case "nick":
break;
}
}
});
});

10
frontend/index.html
View File

@ -29,15 +29,6 @@
<button id="user-kick">Kick</button>
</div>
<div id="dimmer"></div>
<div id="rooms-menu">
<ul id="rooms"></ul>
</div>
<div id="room-settings-menu">
<label title="Change the name of this room">Room name <input id="room-name" type="text"></input></label>
<label title="Change how fast people can mash their piano">Note quota <input id="room-quota-note" type="number"> notes per <input id="room-quota-time" type="number"> milliseconds</label>
<label title="Change the default piano sound that everyone in the room hears">Piano sound <select id="room-sound"></select></label>
<button id="room-settings-save">Save</button>
</div>
<div id="midi-player-menu">
<input id="midi-upload" type="file" accept="audio/midi">
<button id="midi-play">Play</button>
@ -65,7 +56,6 @@
</div>
</div>
<div id="footer">
<button id="rooms-button">Rooms</button>
<button id="room-settings-button">Room settings</button>
<button id="midi-player-button">Midi player</button>

149
frontend/main.js
View File

@ -114,28 +114,6 @@ function loadMppBank(url, format) {
}
}
class Bucket {
constructor(rate, time) {
this.lastCheck = Date.now();
this.allowance = rate;
this.rate = rate;
this.time = time;
}
spend(amount) {
this.allowance += (Date.now() - this.lastCheck) * (this.rate / this.time);
this.lastCheck = Date.now();
if (this.allowance > this.rate) {
this.allowance = this.rate;
}
if (this.allowance < amount) {
return false;
}
this.allowance -= amount;
return true;
}
}
class Key {
constructor(index) {
this.index = index;
@ -180,7 +158,6 @@ class Piano {
this.keys.push(new Key(i));
}
this.bucket = new Bucket(Infinity, 0);
this.sustain = false;
this.performanceMode = false;
@ -319,8 +296,6 @@ class Piano {
}
localKeyDown(key, velocity) {
if (!this.bucket.spend(1)) return;
net.keyDown(key, velocity);
this.keyDown(key, velocity, net.id);
}
@ -535,27 +510,6 @@ function openModal(element, dimmer, callback) {
document.addEventListener("click", clickListener, true);
}
class Room {
constructor(room) {
this.name = room.name;
this.keyQuota = room.keyQuota;
this.sound = room.sound;
this.updateRoomSettings();
}
updateRoomSettings() {
piano.bucket = new Bucket(this.keyQuota.rate, this.keyQuota.per);
document.getElementById("room-name").value = this.name;
document.getElementById("room-quota-note").value = this.keyQuota.rate;
document.getElementById("room-quota-time").value = this.keyQuota.per;
document.getElementById("room-sound").value = this.sound;
}
}
class User {
constructor(id, uid, nick, color) {
this.id = id;
@ -638,11 +592,8 @@ class User {
}
class Networker {
constructor(url = `ws://${location.host}?`) {
url += "room=" + encodeURIComponent(decodeURIComponent(location.pathname.slice(7)));
if (localStorage.nick) {
url += "&nick=" + encodeURIComponent(localStorage.nick);
}
constructor(url = `ws://${location.host}`) {
if (localStorage.nick) url += "?nick=" + encodeURIComponent(localStorage.nick);
this.ws = new WebSocket(url);
this.ws.binaryType = "arraybuffer";
@ -660,7 +611,6 @@ class Networker {
});
this.users = {};
this.rooms = [];
}
message(message) {
@ -671,12 +621,8 @@ class Networker {
switch(message.type) {
case "load":
if (this.room == message.room) {
break;
}
this.id = message.id;
this.room = new Room(message.room);
this.users = {};
for (let i=0; i<message.users.length; i++) {
@ -686,52 +632,10 @@ class Networker {
chat.chatLog(message.chatlog);
this.rooms = message.rooms;
for (let i=0; i<this.rooms.length; i++) {
let element = document.createElement("li");
element.addEventListener("click", (function(room) {
return function() {
window.location.pathname = "/" + room;
};
})(this.rooms[i].name));
let roomName = document.createElement("span");
roomName.className = "name";
roomName.innerText = this.rooms[i].name;
element.appendChild(roomName);
let users = document.createElement("span");
users.className = "users";
users.innerText = this.rooms[i].users;
element.appendChild(users);
document.getElementById("rooms").appendChild(element);
}
if (localStorage.adminlogin) {
net.chat("/adminlogin " + localStorage.adminlogin);
}
break;
case "rooms":
this.rooms = message.rooms;
document.getElementById("rooms").innerHTML = "";
for (let i=0; i<this.rooms.length; i++) {
let element = document.createElement("li");
element.addEventListener("click", (function(room) {
return function() {
window.location.pathname = "/" + room;
};
})(this.rooms[i].name));
let roomName = document.createElement("span");
roomName.className = "name";
roomName.innerText = this.rooms[i].name;
element.appendChild(roomName);
let users = document.createElement("span");
users.className = "users";
users.innerText = this.rooms[i].users;
element.appendChild(users);
document.getElementById("rooms").appendChild(element);
}
break;
case "join":
this.users[message.id] = new User(message.id, message.uid, message.nick, message.color);
break;
@ -763,13 +667,6 @@ class Networker {
document.body.className = "admin";
}
break;
case "room-settings":
this.room.name = message.name;
this.room.keyQuota.rate = message.keyQuota.rate;
this.room.keyQuota.per = message.keyQuota.per;
this.room.sound = message.sound;
this.room.updateRoomSettings();
break;
}
return;
@ -829,18 +726,6 @@ class Networker {
this.ws.send(buffer);
}
roomSettings(data) {
this.ws.send(JSON.stringify({
type: "room-settings",
name: data.name,
keyQuota: {
rate: data.keyQuota.rate,
per: data.keyQuota.per
},
sound: data.sound
}));
}
chat(message) {
this.ws.send(JSON.stringify({
type: "chat",
@ -971,14 +856,6 @@ class Chat {
element.className = "nick";
element.textContent = message.id + " changed nick to " + message.nick;
break;
case "rank":
element.className = "rank";
if (message.rank === 1) {
element.textContent = "You're now the owner of this room.";
} else if (message.rank === 2) {
element.textContent = "You're now logged in as admin.";
}
break;
case "disconnected":
element.className = "disconnected";
element.textContent = "You were disconnected from the server!";
@ -1053,14 +930,6 @@ window.addEventListener("load", function() {
});
// Footer menus
document.getElementById("rooms-button").addEventListener("click", function(event) {
openModal(document.getElementById("rooms-menu"), true);
event.stopImmediatePropagation();
});
document.getElementById("room-settings-button").addEventListener("click", function(event) {
openModal(document.getElementById("room-settings-menu"), true);
event.stopImmediatePropagation();
});
document.getElementById("midi-player-button").addEventListener("click", function(event) {
openModal(document.getElementById("midi-player-menu"), false);
event.stopImmediatePropagation();
@ -1070,19 +939,6 @@ window.addEventListener("load", function() {
event.stopImmediatePropagation();
});
// Room settings
document.getElementById("room-settings-save").addEventListener("click", function() {
net.roomSettings({
name: document.getElementById("room-name").value,
keyQuota: {
rate: parseInt(document.getElementById("room-quota-note").value),
per: parseInt(document.getElementById("room-quota-time").value)
},
sound: document.getElementById("room-sound").value
});
document.getElementById("dimmer").click();
});
// Midi player
document.getElementById("midi-upload").addEventListener("change", function() {
let reader = new FileReader();
@ -1166,7 +1022,6 @@ window.addEventListener("load", function() {
}
document.getElementById("setting-sounds").appendChild(getOption());
document.getElementById("room-sound").appendChild(getOption());
});
document.getElementById("setting-sounds").addEventListener("input", function() {
let sound = this.value;