tgpholly/t00-multiuser
1
0
Fork 0
Code Issues Pull requests Activity Actions

Compare commits

base: tgpholly:ac484319853d00d95cc14802fc6a73df25c03e73
Branches Tags
tgpholly:master
..
compare: tgpholly:98776062ca2e51aeb640d1a0a5186c7606089794
Branches Tags
tgpholly:master

No commits in common. "ac484319853d00d95cc14802fc6a73df25c03e73" and "98776062ca2e51aeb640d1a0a5186c7606089794" have entirely different histories.
ac48431985 ... 98776062ca

3 changed files with 16 additions and 74 deletions
Show stats Expand all files Collapse all files

58
client/Terminal-00-Multiuser.user.js
View file

@ -86,7 +86,6 @@ if (!window.TE_ACTIVE) {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAXVJREFUeJztm8ESwyAIRLX//8/2EjKKmhhFUeDN9NbK7kIybaPerSU0vs9PVbGwUGI4hDb/3meypumcsfDtEhsuGCsv8Pw5Us2UiwXnUvEDnaxOTrQmiXaKRRLjk7qVTRVVEKMCA7WglppX4bjusptmLCJc7uF1pIae5HDXl6ePWKqHu+s18DTMKTK7AAHTNJ5gHiDXepJ5gEzzieaBYe0nmwdePfwWijkKCd0HPnuRZB6oerJLACGx+0DRm01AhOTuA5lH9ROgPgBAw/gDiVf1E2ABcAvYAU3XP3B7Vj8BFgC3AG4sAG4B3FgA3AK4sQC4BeyCpm+D9mswxgLgFrATGu4D9qcoRn0AGMmXgT0ZakXiFNjT4a9ImoJuLxJCsD1Co5w8Bar3CqreLap6v/DSHeM7BdG9Xd4OTPQWdfzTwHZkJhGB0qdY87XmVTiu213Tjs2NfBiRBOGcnoOTmKxbdzHhR2dLVDv5xOmHp59ovVMv0/UHCfuPGCq5foYAAAAASUVORK5CYII="); background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAXVJREFUeJztm8ESwyAIRLX//8/2EjKKmhhFUeDN9NbK7kIybaPerSU0vs9PVbGwUGI4hDb/3meypumcsfDtEhsuGCsv8Pw5Us2UiwXnUvEDnaxOTrQmiXaKRRLjk7qVTRVVEKMCA7WglppX4bjusptmLCJc7uF1pIae5HDXl6ePWKqHu+s18DTMKTK7AAHTNJ5gHiDXepJ5gEzzieaBYe0nmwdePfwWijkKCd0HPnuRZB6oerJLACGx+0DRm01AhOTuA5lH9ROgPgBAw/gDiVf1E2ABcAvYAU3XP3B7Vj8BFgC3AG4sAG4B3FgA3AK4sQC4BeyCpm+D9mswxgLgFrATGu4D9qcoRn0AGMmXgT0ZakXiFNjT4a9ImoJuLxJCsD1Co5w8Bar3CqreLap6v/DSHeM7BdG9Xd4OTPQWdfzTwHZkJhGB0qdY87XmVTiu213Tjs2NfBiRBOGcnoOTmKxbdzHhR2dLVDv5xOmHp59ovVMv0/UHCfuPGCq5foYAAAAASUVORK5CYII=");
width: 64px; width: 64px;
height: 64px; height: 64px;
z-index: 999999998;
} }
`.split("\n").join("").split("\r").join("").split("\t").join(""); `.split("\n").join("").split("\r").join("").split("\t").join("");
document.head.appendChild(styles); document.head.appendChild(styles);
@ -95,14 +94,8 @@ if (!window.TE_ACTIVE) {
otherCursors.id = "otherCursors"; otherCursors.id = "otherCursors";
document.body.appendChild(otherCursors); document.body.appendChild(otherCursors);
let clientWidth = document.body.getBoundingClientRect().width
setInterval(() => { setInterval(() => {
if (document.body.scrollHeight > window.innerHeight) { otherCursors.style = `width:${window.innerWidth}px;height:${document.body.scrollHeight}px`;
otherCursors.style = `width:${clientWidth = document.body.getBoundingClientRect().width}px;height:${document.body.scrollHeight}px`;
} else {
otherCursors.style = `width:${clientWidth = document.body.getBoundingClientRect().width}px;height:${window.innerHeight}px`;
}
}, 1000); }, 1000);
const keepAlivePacket = createWriter(Endian.LE, 1).writeByte(MessageType.KeepAlive).toBuffer(); const keepAlivePacket = createWriter(Endian.LE, 1).writeByte(MessageType.KeepAlive).toBuffer();
@ -133,10 +126,9 @@ if (!window.TE_ACTIVE) {
cursorImage = "https://angusnicneven.com/cursor/rrw.png"; cursorImage = "https://angusnicneven.com/cursor/rrw.png";
} }
image.src = cursorImage; image.src = cursorImage;
this.probeImage = image;
this.element.appendChild(image); this.element.appendChild(image);
const clientName = document.createElement("div"); const clientName = document.createElement("div");
clientName.style = "position:absolute;left:100%;top:100%;background-color:black;padding:4px 8px;color:white;font-size:12px;font-family:Arial,sans-serif;"; clientName.style = "position:absolute;left:100%;top:100%;background-color:black;padding:4px 8px;color:white;font-size:12px";
clientName.innerText = name; clientName.innerText = name;
this.element.appendChild(clientName); this.element.appendChild(clientName);
otherCursors.appendChild(this.element); otherCursors.appendChild(this.element);
@ -146,25 +138,15 @@ if (!window.TE_ACTIVE) {
this.actualY = 0; this.actualY = 0;
this.oldActualX = 0; this.oldActualX = 0;
this.oldActualY = 0; this.oldActualY = 0;
this.hasBeenMoved = false;
this.element.visibility = "hidden";
} }
rawSetPos(x, y) { rawSetPos(x, y) {
if (!this.hasBeenMoved) { this.targetX = Math.round(x * window.innerWidth);
this.element.visibility = "";
}
this.targetX = Math.round(x * clientWidth);
this.targetY = y; this.targetY = y;
} }
rawSetPosInit(x, y) { rawSetPosInit(x, y) {
if (!this.hasBeenMoved) { this.actualX = this.targetX = Math.round(x * window.innerWidth);
this.element.visibility = "";
}
this.actualX = this.targetX = Math.round(x * clientWidth);
this.actualY = this.targetY = y; this.actualY = this.targetY = y;
} }
@ -182,8 +164,6 @@ if (!window.TE_ACTIVE) {
} }
} }
let selfCursor;
function createPing(x, y) { function createPing(x, y) {
const pingDiv = document.createElement("div"); const pingDiv = document.createElement("div");
pingDiv.className = "ping"; pingDiv.className = "ping";
@ -207,29 +187,17 @@ if (!window.TE_ACTIVE) {
window.onmousemove = (e) => { window.onmousemove = (e) => {
currentMouseX = (rawMouseX = e.clientX) + document.body.scrollLeft; currentMouseX = (rawMouseX = e.clientX) + document.body.scrollLeft;
currentMouseY = (rawMouseY = e.clientY) + document.body.scrollTop; currentMouseY = (rawMouseY = e.clientY) + document.body.scrollTop;
if (selfCursor) {
selfCursor.rawSetPosInit(currentMouseX / clientWidth, currentMouseY);
selfCursor.updateCursor();
}
} }
window.onscroll = () => { window.onscroll = () => {
currentMouseX = rawMouseX + document.body.scrollLeft; currentMouseX = rawMouseX + document.body.scrollLeft;
currentMouseY = rawMouseY + document.body.scrollTop; currentMouseY = rawMouseY + document.body.scrollTop;
if (selfCursor) {
selfCursor.rawSetPosInit(currentMouseX / clientWidth, currentMouseY);
selfCursor.updateCursor();
}
} }
let allowedPings = 10;
window.onkeypress = (e) => { window.onkeypress = (e) => {
if (e.key === "p") { if (e.key === "p") {
if (ws && ready) { if (ws && ready) {
if (allowedPings > 0) { ws.send(createWriter(Endian.LE, 9).writeByte(MessageType.Ping).writeFloat((rawMouseX + document.body.scrollLeft - 32) / window.innerWidth).writeInt(rawMouseY + document.body.scrollTop - 32).toBuffer());
allowedPings--;
ws.send(createWriter(Endian.LE, 9).writeByte(MessageType.Ping).writeFloat((rawMouseX + document.body.scrollLeft - 32) / clientWidth).writeInt(rawMouseY + document.body.scrollTop - 32).toBuffer());
}
} }
} }
} }
@ -240,7 +208,6 @@ if (!window.TE_ACTIVE) {
let timeLastFrame = performance.now(); let timeLastFrame = performance.now();
let frameDeltaTime = 0; let frameDeltaTime = 0;
let timeSinceLastPingReset = performance.now();
function animate() { function animate() {
frameDeltaTime = (performance.now() - timeLastFrame) * 0.001; frameDeltaTime = (performance.now() - timeLastFrame) * 0.001;
@ -250,16 +217,11 @@ if (!window.TE_ACTIVE) {
lastSendTime = performance.now(); lastSendTime = performance.now();
oldMouseX = currentMouseX; oldMouseX = currentMouseX;
oldMouseY = currentMouseY; oldMouseY = currentMouseY;
ws.send(createWriter(Endian.LE, 9).writeByte(MessageType.CursorPos).writeFloat(oldMouseX / clientWidth).writeInt(currentMouseY).toBuffer()); ws.send(createWriter(Endian.LE, 9).writeByte(MessageType.CursorPos).writeFloat(oldMouseX / window.innerWidth).writeInt(currentMouseY).toBuffer());
} }
} }
} }
if ((performance.now() - timeSinceLastPingReset) >= 1000) {
allowedPings = 10;
timeSinceLastPingReset = performance.now();
}
remoteClients.forEach(remoteUser => { remoteClients.forEach(remoteUser => {
remoteUser.actualX = lerp(remoteUser.actualX, remoteUser.targetX, 20 * frameDeltaTime); remoteUser.actualX = lerp(remoteUser.actualX, remoteUser.targetX, 20 * frameDeltaTime);
remoteUser.actualY = lerp(remoteUser.actualY, remoteUser.targetY, 20 * frameDeltaTime); remoteUser.actualY = lerp(remoteUser.actualY, remoteUser.targetY, 20 * frameDeltaTime);
@ -274,11 +236,9 @@ if (!window.TE_ACTIVE) {
function doConnect() { function doConnect() {
const Buffer = getBufferClass(); const Buffer = getBufferClass();
ws = new WebSocket(window.location.href.includes("//localhost:") ? "ws://localhost:38195" : "wss://ws.eusv.net/t00mp"); ws = new WebSocket(window.location.href.includes("localhost") ? "ws://localhost:38195" : "wss://ws.eusv.net/t00mp");
let keepAliveInterval; let keepAliveInterval;
ws.onopen = () => { ws.onopen = () => {
selfCursor = new RemoteClient(username);
selfCursor.probeImage.style.visibility = "hidden";
const currentPage = window.location.href.split("/").slice(3).join("/"); const currentPage = window.location.href.split("/").slice(3).join("/");
ws.send(createWriter(Endian.LE, 4 + username.length + currentPage.length).writeByte(MessageType.ClientDetails).writeShortString(username).writeString(currentPage).toBuffer()); ws.send(createWriter(Endian.LE, 4 + username.length + currentPage.length).writeByte(MessageType.ClientDetails).writeShortString(username).writeString(currentPage).toBuffer());
keepAliveInterval = setInterval(() => { keepAliveInterval = setInterval(() => {
@ -328,7 +288,7 @@ if (!window.TE_ACTIVE) {
{ {
const cursorX = reader.readFloat(); const cursorX = reader.readFloat();
const cursorY = reader.readInt(); const cursorY = reader.readInt();
createPing(cursorX * clientWidth, cursorY); createPing(cursorX * window.innerWidth, cursorY);
} }
} }
} }
@ -387,7 +347,7 @@ if (!window.TE_ACTIVE) {
buttons.style.marginTop = "1rem"; buttons.style.marginTop = "1rem";
dialog.appendChild(buttons); dialog.appendChild(buttons);
const submitButton = document.createElement("button"); const submitButton = document.createElement("button");
submitButton.innerText = (!localStorage["t00mp_username"] || localStorage["t00mp_username"] === "") ? "Connect" : "Change Username"; submitButton.innerText = (localStorage["t00mp_username"] && localStorage["t00mp_username"] === "") ? "Connect" : "Change Username";
submitButton.onclick = () => submitFunction(null); submitButton.onclick = () => submitFunction(null);
buttons.appendChild(submitButton); buttons.appendChild(submitButton);
if (localStorage["t00mp_username"] !== "") { if (localStorage["t00mp_username"] !== "") {

24
server/index.ts
View file

@ -54,8 +54,7 @@ server.on("connection", (socket) => {
return; return;
} }
const username = reader.readShortString(); const username = reader.readShortString();
const rawURL = reader.readString(); let page = reader.readString().toLowerCase().replace(".htm", "").replace(".html", "");
let page = rawURL.toLowerCase().replace(".htm", "").replace(".html", "");
if (page === "index") { if (page === "index") {
page = ""; page = "";
} }
@ -71,7 +70,7 @@ server.on("connection", (socket) => {
for (const otherUser of usersOnPage) { for (const otherUser of usersOnPage) {
usersToSend.writeUInt(otherUser.id).writeShortString(otherUser.username).writeFloat(otherUser.cursorX).writeInt(otherUser.cursorY); usersToSend.writeUInt(otherUser.id).writeShortString(otherUser.username).writeFloat(otherUser.cursorX).writeInt(otherUser.cursorY);
} }
user = users.set(myUUID, new User(socket, username, page, rawURL)); user = users.set(myUUID, new User(socket, username, page));
sendToAllButSelf(user, createWriter(Endian.LE, 6 + username.length).writeByte(MessageType.ClientJoined).writeUInt(user.id).writeShortString(username).toBuffer()); sendToAllButSelf(user, createWriter(Endian.LE, 6 + username.length).writeByte(MessageType.ClientJoined).writeUInt(user.id).writeShortString(username).toBuffer());
user.send(usersToSend.toBuffer()); user.send(usersToSend.toBuffer());
break; break;
@ -87,21 +86,10 @@ server.on("connection", (socket) => {
} }
case MessageType.Ping: case MessageType.Ping:
{ {
if (user === undefined) { const cursorX = reader.readFloat();
return; const cursorY = reader.readInt();
} const packet = createWriter(Endian.LE, 9).writeByte(MessageType.Ping).writeFloat(cursorX).writeInt(cursorY).toBuffer();
sendToAll(user, packet);
if ((Date.now() - user.lastPingReset) >= 1000) {
user.allowedPings = 10;
}
if (user.allowedPings > 0) {
user.allowedPings--;
const cursorX = reader.readFloat();
const cursorY = reader.readInt();
const packet = createWriter(Endian.LE, 9).writeByte(MessageType.Ping).writeFloat(cursorX).writeInt(cursorY).toBuffer();
sendToAll(user, packet);
}
break; break;
} }
} }

8
server/objects/User.ts
View file

@ -7,20 +7,14 @@ export default class User {
public readonly id:number; public readonly id:number;
public readonly username:string; public readonly username:string;
public readonly currentURL:string; public readonly currentURL:string;
public readonly rawURL:string = "";
public cursorX:number = 0; public cursorX:number = 0;
public cursorY:number = 0; public cursorY:number = 0;
public allowedPings:number;
public lastPingReset:number;
constructor(socket:WebSocket, username:string, currentURL:string, rawURL:string) { constructor(socket:WebSocket, username:string, currentURL:string) {
this.socket = socket; this.socket = socket;
this.id = User.USER_IDS++; this.id = User.USER_IDS++;
this.username = username; this.username = username;
this.currentURL = currentURL; this.currentURL = currentURL;
this.rawURL = rawURL;
this.allowedPings = 10;
this.lastPingReset = Date.now();
} }
send(data:Buffer) { send(data:Buffer) {