buncha shit uhh i forgot to make a repo until now
This commit is contained in:
elijahr2411
commit
37cab87a6f
10 changed files with 757 additions and 0 deletions
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
node_modules/
|
||||||
|
dist/*.js
|
||||||
1
.npmrc
Normal file
1
.npmrc
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
package-lock=false
|
||||||
71
dist/index.html
vendored
Normal file
71
dist/index.html
vendored
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
<!DOCTYPE HTML>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Control Collaborative Virtual Machines!</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link href="style.css" rel="stylesheet" type="text/css"/>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"/>
|
||||||
|
<script src="https://kit.fontawesome.com/7add23c1ae.js" crossorigin="anonymous"></script>
|
||||||
|
</head>
|
||||||
|
<body class="bg-dark">
|
||||||
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand" href="#">CollabVM</a>
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<div class="collapse navbar-collapse" id="navbarNav">
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a href="#" class="nav-link active" aria-current="page">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a href="https://computernewb.com/collab-vm/faq/" class="nav-link">FAQ</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a href="https://computernewb.com/collab-vm/rules" class="nav-link">Rules</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<div class="container-fluid" id="vmlist">
|
||||||
|
<div class="row"></div>
|
||||||
|
</div>
|
||||||
|
<div class="container-fluid" id="vmview">
|
||||||
|
<canvas id="display" height="0" width="0" tabindex="-1"></canvas>
|
||||||
|
<p id="turnstatus" class="text-light"></p>
|
||||||
|
<div id="btns">
|
||||||
|
<button class="btn btn-secondary" id="takeTurnBtn">Take Turn</button>
|
||||||
|
<button class="btn btn-secondary" id="changeUsernameBtn">Change Username</button>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="table-responsive username-table">
|
||||||
|
<table class="table table-hover table-dark table-borderless">
|
||||||
|
<thead>
|
||||||
|
<th>Users Online (<span id="onlineusercount"></span>)</th>
|
||||||
|
</thead>
|
||||||
|
<tbody id="userlist"></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-8">
|
||||||
|
<div class="table-responsive chat-table">
|
||||||
|
<table class="table table-hover table-dark table-borderless">
|
||||||
|
<tbody id="chatList">
|
||||||
|
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="input-group">
|
||||||
|
<span class="input-group-text bg-dark text-light" id="username">Username</span>
|
||||||
|
<input type="text" class="form-control bg-dark text-light" id="chat-input"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="main.js" type="application/javascript"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
48
dist/style.css
vendored
Normal file
48
dist/style.css
vendored
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
#vmview {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
/*.vmtile {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 16pt;
|
||||||
|
border: 2px solid #575757;
|
||||||
|
border-radius: 15px;
|
||||||
|
height: fit-content;
|
||||||
|
width: fit-content;
|
||||||
|
display: block;
|
||||||
|
padding: 4px;
|
||||||
|
}*/
|
||||||
|
#display, #btns {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
text-align: center;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
#vmlist > div.row > div {
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
#vmlist div.col-sm-4 > div.card:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
border-color: rgb(8, 121, 250);
|
||||||
|
}
|
||||||
|
.vmtile > img {
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}*/
|
||||||
|
.chat-table, .username-table {
|
||||||
|
overflow-y: auto;
|
||||||
|
border: 1px solid #575757;
|
||||||
|
}
|
||||||
|
.chat-table {
|
||||||
|
height: 30vh;
|
||||||
|
}
|
||||||
|
.username-table {
|
||||||
|
max-height: 30vh;
|
||||||
|
}
|
||||||
|
.username-table > table > thead {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
#turnstatus {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
15
package.json
Normal file
15
package.json
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
{
|
||||||
|
"name": "cvmwebapp",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "kill me",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"build": "webpack --config webpack.config.js"
|
||||||
|
},
|
||||||
|
"author": "Elijah R",
|
||||||
|
"license": "GPL-3.0",
|
||||||
|
"dependencies": {
|
||||||
|
"webpack": "^5.75.0",
|
||||||
|
"webpack-cli": "^5.0.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
13
src/common.js
Normal file
13
src/common.js
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
export const config = {
|
||||||
|
serverAddresses: [
|
||||||
|
"wss://computernewb.com/collab-vm/vm0",
|
||||||
|
"wss://computernewb.com/collab-vm/vm1",
|
||||||
|
"wss://computernewb.com/collab-vm/vm2",
|
||||||
|
"wss://computernewb.com/collab-vm/vm3",
|
||||||
|
"wss://computernewb.com/collab-vm/vm4",
|
||||||
|
"wss://computernewb.com/collab-vm/vm5",
|
||||||
|
"wss://computernewb.com/collab-vm/vm6",
|
||||||
|
"wss://computernewb.com/collab-vm/vm7",
|
||||||
|
"wss://computernewb.com/collab-vm/vm8",
|
||||||
|
]
|
||||||
|
}
|
||||||
330
src/index.js
Normal file
330
src/index.js
Normal file
|
|
@ -0,0 +1,330 @@
|
||||||
|
import { guacutils } from "./protocol";
|
||||||
|
import { config } from "./common";
|
||||||
|
import { GetKeysym } from "./keyboard";
|
||||||
|
// None = -1
|
||||||
|
// Has turn = 0
|
||||||
|
// In queue = <queue position>
|
||||||
|
var turn = -1;
|
||||||
|
var perms = 0;
|
||||||
|
const vms = [];
|
||||||
|
const users = [];
|
||||||
|
const buttons = {
|
||||||
|
takeTurn: window.document.getElementById("takeTurnBtn"),
|
||||||
|
changeUsername: window.document.getElementById("changeUsernameBtn")
|
||||||
|
}
|
||||||
|
var hasTurn = false;
|
||||||
|
var vm;
|
||||||
|
var connected = false;
|
||||||
|
// Elements
|
||||||
|
const turnstatus = window.document.getElementById("turnstatus");
|
||||||
|
const vmlist = window.document.getElementById("vmlist");
|
||||||
|
const vmview = window.document.getElementById("vmview");
|
||||||
|
const display = window.document.getElementById("display");
|
||||||
|
const displayCtx = display.getContext("2d");
|
||||||
|
const chatList = window.document.getElementById("chatList");
|
||||||
|
const userlist = window.document.getElementById("userlist");
|
||||||
|
const usernameSpan = window.document.getElementById("username");
|
||||||
|
const onlineusercount = window.document.getElementById("onlineusercount");
|
||||||
|
const chatinput = window.document.getElementById("chat-input");
|
||||||
|
// needed to scroll to bottom
|
||||||
|
const chatListDiv = document.querySelector(".chat-table");
|
||||||
|
|
||||||
|
class CollabVMClient {
|
||||||
|
socket;
|
||||||
|
#url;
|
||||||
|
constructor(url) {
|
||||||
|
this.#url = url;
|
||||||
|
}
|
||||||
|
connect() {
|
||||||
|
return new Promise((res, rej) => {
|
||||||
|
this.socket = new WebSocket(this.#url, "guacamole");
|
||||||
|
this.socket.addEventListener('message', (e) => this.#onMessage(e));
|
||||||
|
this.socket.addEventListener('open', () => res(), {once: true});
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
disconnect() {
|
||||||
|
this.socket.send(guacutils.encode(["disconnect"]));
|
||||||
|
this.socket.close();
|
||||||
|
}
|
||||||
|
getUrl() {
|
||||||
|
return this.#url;
|
||||||
|
}
|
||||||
|
connectToVM(node) {
|
||||||
|
return new Promise((res, rej) => {
|
||||||
|
var savedUsername = window.localStorage.getItem("username");
|
||||||
|
if (savedUsername === null)
|
||||||
|
this.socket.send(guacutils.encode(["rename"]));
|
||||||
|
else this.socket.send(guacutils.encode(["rename", savedUsername]));
|
||||||
|
var f = (e) => {
|
||||||
|
var msgArr = guacutils.decode(e.data);
|
||||||
|
if (msgArr[0] == "connect") {
|
||||||
|
switch (msgArr[1]) {
|
||||||
|
case "0":
|
||||||
|
rej("Failed to connect to the node");
|
||||||
|
break;
|
||||||
|
case "1":
|
||||||
|
res();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
this.socket.removeEventListener("message", f);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.socket.addEventListener("message", f);
|
||||||
|
this.socket.send(guacutils.encode(["connect", node]));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
async #onMessage(event) {
|
||||||
|
var msgArr = guacutils.decode(event.data);
|
||||||
|
switch (msgArr[0]) {
|
||||||
|
case "nop":
|
||||||
|
this.socket.send("3.nop;");
|
||||||
|
break;
|
||||||
|
case "chat":
|
||||||
|
if (!connected) return;
|
||||||
|
for (var i = 1; i < msgArr.length; i += 2) {
|
||||||
|
var tr = document.createElement("tr");
|
||||||
|
var td = document.createElement("td");
|
||||||
|
if (msgArr[i] == "")
|
||||||
|
td.innerHTML = msgArr[i+1];
|
||||||
|
else td.innerHTML = `<b>${msgArr[i]}></b> ${msgArr[i+1]}`;
|
||||||
|
tr.appendChild(td);
|
||||||
|
chatList.appendChild(tr);
|
||||||
|
}
|
||||||
|
chatListDiv.scrollTop = chatListDiv.scrollHeight;
|
||||||
|
break;
|
||||||
|
case "size":
|
||||||
|
if (!connected || msgArr[1] !== "0") return;
|
||||||
|
display.width = msgArr[2];
|
||||||
|
display.height = msgArr[3];
|
||||||
|
break;
|
||||||
|
case "png":
|
||||||
|
if (!connected || msgArr[2] !== "0") return;
|
||||||
|
var img = new Image(display.width, display.height);
|
||||||
|
img.addEventListener('load', () => {
|
||||||
|
displayCtx.drawImage(img, msgArr[3], msgArr[4]);
|
||||||
|
});
|
||||||
|
img.src = "data:image/png;base64," + msgArr[5];
|
||||||
|
break;
|
||||||
|
case "rename":
|
||||||
|
if (msgArr[1] === "0") {
|
||||||
|
window.username = msgArr[3];
|
||||||
|
usernameSpan.innerText = msgArr[3];
|
||||||
|
window.localStorage.setItem("username", msgArr[3]);
|
||||||
|
}
|
||||||
|
var user = users.find(u => u.username == msgArr[2]);
|
||||||
|
if (user === undefined) break;
|
||||||
|
user.username = msgArr[3];
|
||||||
|
user.element.children[0].innerHTML = msgArr[3];
|
||||||
|
break;
|
||||||
|
case "adduser":
|
||||||
|
for (var i = 2; i < msgArr.length; i += 2) {
|
||||||
|
var olduser = users.find(u => u.username === msgArr[i]);
|
||||||
|
if (olduser !== undefined) {
|
||||||
|
users.splice(users.indexOf(olduser), 1);
|
||||||
|
userlist.removeChild(olduser.element);
|
||||||
|
}
|
||||||
|
var user = {
|
||||||
|
username: msgArr[i],
|
||||||
|
rank: Number(msgArr[i+1]),
|
||||||
|
turn: -1
|
||||||
|
};
|
||||||
|
users.push(user);
|
||||||
|
var tr = document.createElement("tr");
|
||||||
|
var td = document.createElement("td");
|
||||||
|
td.innerHTML = msgArr[i];
|
||||||
|
switch (user.rank) {
|
||||||
|
case 2:
|
||||||
|
td.style.color = "#FF0000";
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
td.style.color = "#00FF00";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
tr.appendChild(td);
|
||||||
|
user.element = tr;
|
||||||
|
userlist.appendChild(tr);
|
||||||
|
}
|
||||||
|
onlineusercount.innerText = users.length;
|
||||||
|
break;
|
||||||
|
case "remuser":
|
||||||
|
for (var i = 2; i < msgArr.length; i++) {
|
||||||
|
var user = users.find(u => u.username == msgArr[i]);
|
||||||
|
users.splice(users.indexOf(user), 1);
|
||||||
|
userlist.removeChild(user.element);
|
||||||
|
}
|
||||||
|
onlineusercount.innerText = users.length;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "turn":
|
||||||
|
// Reset all turn data
|
||||||
|
users.forEach((curr) => {
|
||||||
|
curr.turn = -1;
|
||||||
|
curr.element.classList = "";
|
||||||
|
});
|
||||||
|
buttons.takeTurn.innerText = "Take Turn";
|
||||||
|
turn = -1;
|
||||||
|
turnstatus.innerText = "";
|
||||||
|
// Get the number of users queued for a turn
|
||||||
|
var queuedUsers = Number(msgArr[2]);
|
||||||
|
if (queuedUsers === 0) return;
|
||||||
|
var currentTurnUsername = msgArr[3];
|
||||||
|
// Get the user who has the turn and highlight them
|
||||||
|
var currentTurnUser = users.find(u => u.username === currentTurnUsername);
|
||||||
|
currentTurnUser.element.classList = "table-primary";
|
||||||
|
currentTurnUser.turn = 0;
|
||||||
|
if (currentTurnUsername === window.username) {
|
||||||
|
turn = 0;
|
||||||
|
turnstatus.innerText = "You have the turn.";
|
||||||
|
}
|
||||||
|
// Highlight all waiting users and set their status
|
||||||
|
if (queuedUsers > 1) {
|
||||||
|
for (var i = 1; i < queuedUsers; i++) {
|
||||||
|
if (window.username === msgArr[i+3]) {
|
||||||
|
turn = i;
|
||||||
|
turnstatus.innerText = "Waiting for turn";
|
||||||
|
};
|
||||||
|
var user = users.find(u => u.username === msgArr[i+3]);
|
||||||
|
user.turn = i;
|
||||||
|
user.element.classList = "table-warning";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (turn === -1) {
|
||||||
|
buttons.takeTurn.innerText = "Take Turn";
|
||||||
|
} else {
|
||||||
|
buttons.takeTurn.innerText = "End Turn";
|
||||||
|
}
|
||||||
|
this.reloadUsers();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
reloadUsers() {
|
||||||
|
// Sort the user list by turn status
|
||||||
|
users.sort((a, b) => {
|
||||||
|
if (a.turn === b.turn) return 0;
|
||||||
|
if (a.turn === -1) return 1;
|
||||||
|
if (b.turn === -1) return -1;
|
||||||
|
if (a.turn < b.turn) return -1;
|
||||||
|
else return 1;
|
||||||
|
});
|
||||||
|
users.forEach((u) => {
|
||||||
|
userlist.removeChild(u.element);
|
||||||
|
userlist.appendChild(u.element);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
async list() {
|
||||||
|
return new Promise((res, rej) => {
|
||||||
|
var h = (e) => {
|
||||||
|
var msgArr = guacutils.decode(e.data);
|
||||||
|
if (msgArr[0] === "list") {
|
||||||
|
var list = [];
|
||||||
|
for (var i = 1; i < msgArr.length; i+=3) {
|
||||||
|
list.push({
|
||||||
|
url: this.#url,
|
||||||
|
id: msgArr[i],
|
||||||
|
name: msgArr[i+1],
|
||||||
|
thumb: msgArr[i+2],
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.socket.removeEventListener("message", h);
|
||||||
|
res(list);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
this.socket.addEventListener("message", h);
|
||||||
|
this.socket.send("4.list;");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
chat(msg) {
|
||||||
|
this.socket.send(guacutils.encode(["chat", msg]));
|
||||||
|
}
|
||||||
|
rename(username) {
|
||||||
|
this.socket.send(guacutils.encode(["rename", username]));
|
||||||
|
}
|
||||||
|
turn() {
|
||||||
|
if (turn === -1) {
|
||||||
|
this.socket.send(guacutils.encode(["turn", "1"]))
|
||||||
|
} else {
|
||||||
|
this.socket.send(guacutils.encode(["turn", "0"]));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
mouse(x, y, mask) {
|
||||||
|
this.socket.send(guacutils.encode(["mouse", x, y, mask]));
|
||||||
|
}
|
||||||
|
key(keysym, down) {
|
||||||
|
this.socket.send(guacutils.encode(["key", keysym, down ? "1" : "0"]));
|
||||||
|
}
|
||||||
|
mouseevent(e) {
|
||||||
|
var mask = 0;
|
||||||
|
if ((e.buttons & 1) !== 0) mask |= 1;
|
||||||
|
if ((e.buttons & 4) !== 0) mask |= 2;
|
||||||
|
if ((e.buttons & 2) !== 0) mask |= 4;
|
||||||
|
this.mouse(e.offsetX, e.offsetY, mask);
|
||||||
|
}
|
||||||
|
keyevent(e, down) {
|
||||||
|
e.preventDefault();
|
||||||
|
var keysym = GetKeysym(e.keyCode, e.keyIdentifier, e.key, e.location);
|
||||||
|
console.log(keysym);
|
||||||
|
if (keysym === undefined) return;
|
||||||
|
this.key(keysym, down);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function multicollab(url) {
|
||||||
|
return new Promise(async (res, rej) => {
|
||||||
|
var vm = new CollabVMClient(url);
|
||||||
|
await vm.connect();
|
||||||
|
var list = await vm.list();
|
||||||
|
vm.disconnect();
|
||||||
|
list.forEach(curr => {
|
||||||
|
vms.push(curr);
|
||||||
|
var div = document.createElement("div");
|
||||||
|
div.classList = "col-sm-4";
|
||||||
|
var card = document.createElement("div");
|
||||||
|
card.classList = "card bg-dark text-light";
|
||||||
|
card.addEventListener("click", () => openVM(curr.url, curr.id));
|
||||||
|
var img = document.createElement("img");
|
||||||
|
img.src = "data:image/png;base64," + curr.thumb;
|
||||||
|
img.classList = "card-img-top";
|
||||||
|
var bdy = document.createElement("div");
|
||||||
|
bdy.classList = "card-body";
|
||||||
|
var desc = document.createElement("h5");
|
||||||
|
desc.innerHTML = curr.name;
|
||||||
|
bdy.appendChild(desc);
|
||||||
|
card.appendChild(img);
|
||||||
|
card.appendChild(bdy);
|
||||||
|
div.appendChild(card);
|
||||||
|
vmlist.children[0].appendChild(div);
|
||||||
|
});
|
||||||
|
res();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
async function openVM(url, node) {
|
||||||
|
vm = new CollabVMClient(url);
|
||||||
|
await vm.connect();
|
||||||
|
connected = true;
|
||||||
|
await vm.connectToVM(node);
|
||||||
|
vmlist.style.display = "none";
|
||||||
|
vmview.style.display = "block";
|
||||||
|
display.addEventListener('mousemove', (e) => vm.mouseevent(e))
|
||||||
|
display.addEventListener('mousedown', (e) => vm.mouseevent(e));
|
||||||
|
display.addEventListener('mouseup', (e) => vm.mouseevent(e));
|
||||||
|
display.addEventListener('contextmenu', (e) => e.preventDefault());
|
||||||
|
display.addEventListener('click', () => {
|
||||||
|
if (turn === -1) vm.turn();
|
||||||
|
});
|
||||||
|
display.addEventListener('keydown', (e) => vm.keyevent(e, true));
|
||||||
|
display.addEventListener('keyup', (e) => vm.keyevent(e, false));
|
||||||
|
}
|
||||||
|
chatinput.addEventListener("keypress", (e) => {
|
||||||
|
if (e.key == "Enter") {
|
||||||
|
vm.chat(chatinput.value);
|
||||||
|
chatinput.value = "";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
buttons.changeUsername.addEventListener('click', () => {
|
||||||
|
var newuser = window.prompt("Enter new username", window.username);
|
||||||
|
if (newuser == null) return;
|
||||||
|
vm.rename(newuser);
|
||||||
|
});
|
||||||
|
buttons.takeTurn.addEventListener('click', () => vm.turn());
|
||||||
|
config.serverAddresses.forEach(multicollab);
|
||||||
223
src/keyboard.js
Normal file
223
src/keyboard.js
Normal file
|
|
@ -0,0 +1,223 @@
|
||||||
|
// Pulled a bunch of functions out of the guac source code to get a keysym
|
||||||
|
// and then a wrapper
|
||||||
|
// shitty but it works so /shrug
|
||||||
|
export function GetKeysym(keyCode, keyIdentifier, key, location) {
|
||||||
|
var keysym = keysym_from_key_identifier(key, location)
|
||||||
|
|| keysym_from_keycode(keyCode, location);
|
||||||
|
|
||||||
|
if (!keysym && key_identifier_sane(keyCode, keyIdentifier))
|
||||||
|
keysym = keysym_from_key_identifier(keyIdentifier, location);
|
||||||
|
|
||||||
|
return keysym;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function keysym_from_key_identifier(identifier, location) {
|
||||||
|
|
||||||
|
if (!identifier)
|
||||||
|
return null;
|
||||||
|
|
||||||
|
var typedCharacter;
|
||||||
|
|
||||||
|
// If identifier is U+xxxx, decode Unicode character
|
||||||
|
var unicodePrefixLocation = identifier.indexOf("U+");
|
||||||
|
if (unicodePrefixLocation >= 0) {
|
||||||
|
var hex = identifier.substring(unicodePrefixLocation+2);
|
||||||
|
typedCharacter = String.fromCharCode(parseInt(hex, 16));
|
||||||
|
}
|
||||||
|
|
||||||
|
// If single character, use that as typed character
|
||||||
|
else if (identifier.length === 1)
|
||||||
|
typedCharacter = identifier;
|
||||||
|
|
||||||
|
// Otherwise, look up corresponding keysym
|
||||||
|
else
|
||||||
|
return get_keysym(keyidentifier_keysym[identifier], location);
|
||||||
|
|
||||||
|
// Get codepoint
|
||||||
|
var codepoint = typedCharacter.charCodeAt(0);
|
||||||
|
return keysym_from_charcode(codepoint);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function get_keysym(keysyms, location) {
|
||||||
|
|
||||||
|
if (!keysyms)
|
||||||
|
return null;
|
||||||
|
|
||||||
|
return keysyms[location] || keysyms[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
function keysym_from_charcode(codepoint) {
|
||||||
|
|
||||||
|
// Keysyms for control characters
|
||||||
|
if (isControlCharacter(codepoint)) return 0xFF00 | codepoint;
|
||||||
|
|
||||||
|
// Keysyms for ASCII chars
|
||||||
|
if (codepoint >= 0x0000 && codepoint <= 0x00FF)
|
||||||
|
return codepoint;
|
||||||
|
|
||||||
|
// Keysyms for Unicode
|
||||||
|
if (codepoint >= 0x0100 && codepoint <= 0x10FFFF)
|
||||||
|
return 0x01000000 | codepoint;
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function isControlCharacter(codepoint) {
|
||||||
|
return codepoint <= 0x1F || (codepoint >= 0x7F && codepoint <= 0x9F);
|
||||||
|
}
|
||||||
|
|
||||||
|
function keysym_from_keycode(keyCode, location) {
|
||||||
|
return get_keysym(keycodeKeysyms[keyCode], location);
|
||||||
|
}
|
||||||
|
|
||||||
|
function key_identifier_sane(keyCode, keyIdentifier) {
|
||||||
|
|
||||||
|
// Missing identifier is not sane
|
||||||
|
if (!keyIdentifier)
|
||||||
|
return false;
|
||||||
|
|
||||||
|
// Assume non-Unicode keyIdentifier values are sane
|
||||||
|
var unicodePrefixLocation = keyIdentifier.indexOf("U+");
|
||||||
|
if (unicodePrefixLocation === -1)
|
||||||
|
return true;
|
||||||
|
|
||||||
|
// If the Unicode codepoint isn't identical to the keyCode,
|
||||||
|
// then the identifier is likely correct
|
||||||
|
var codepoint = parseInt(keyIdentifier.substring(unicodePrefixLocation+2), 16);
|
||||||
|
if (keyCode !== codepoint)
|
||||||
|
return true;
|
||||||
|
|
||||||
|
// The keyCodes for A-Z and 0-9 are actually identical to their
|
||||||
|
// Unicode codepoints
|
||||||
|
if ((keyCode >= 65 && keyCode <= 90) || (keyCode >= 48 && keyCode <= 57))
|
||||||
|
return true;
|
||||||
|
|
||||||
|
// The keyIdentifier does NOT appear sane
|
||||||
|
return false;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
var keyidentifier_keysym = {
|
||||||
|
"Again": [0xFF66],
|
||||||
|
"AllCandidates": [0xFF3D],
|
||||||
|
"Alphanumeric": [0xFF30],
|
||||||
|
"Alt": [0xFFE9, 0xFFE9, 0xFE03],
|
||||||
|
"Attn": [0xFD0E],
|
||||||
|
"AltGraph": [0xFE03],
|
||||||
|
"ArrowDown": [0xFF54],
|
||||||
|
"ArrowLeft": [0xFF51],
|
||||||
|
"ArrowRight": [0xFF53],
|
||||||
|
"ArrowUp": [0xFF52],
|
||||||
|
"Backspace": [0xFF08],
|
||||||
|
"CapsLock": [0xFFE5],
|
||||||
|
"Cancel": [0xFF69],
|
||||||
|
"Clear": [0xFF0B],
|
||||||
|
"Convert": [0xFF21],
|
||||||
|
"Copy": [0xFD15],
|
||||||
|
"Crsel": [0xFD1C],
|
||||||
|
"CrSel": [0xFD1C],
|
||||||
|
"CodeInput": [0xFF37],
|
||||||
|
"Compose": [0xFF20],
|
||||||
|
"Control": [0xFFE3, 0xFFE3, 0xFFE4],
|
||||||
|
"ContextMenu": [0xFF67],
|
||||||
|
"DeadGrave": [0xFE50],
|
||||||
|
"DeadAcute": [0xFE51],
|
||||||
|
"DeadCircumflex": [0xFE52],
|
||||||
|
"DeadTilde": [0xFE53],
|
||||||
|
"DeadMacron": [0xFE54],
|
||||||
|
"DeadBreve": [0xFE55],
|
||||||
|
"DeadAboveDot": [0xFE56],
|
||||||
|
"DeadUmlaut": [0xFE57],
|
||||||
|
"DeadAboveRing": [0xFE58],
|
||||||
|
"DeadDoubleacute": [0xFE59],
|
||||||
|
"DeadCaron": [0xFE5A],
|
||||||
|
"DeadCedilla": [0xFE5B],
|
||||||
|
"DeadOgonek": [0xFE5C],
|
||||||
|
"DeadIota": [0xFE5D],
|
||||||
|
"DeadVoicedSound": [0xFE5E],
|
||||||
|
"DeadSemivoicedSound": [0xFE5F],
|
||||||
|
"Delete": [0xFFFF],
|
||||||
|
"Down": [0xFF54],
|
||||||
|
"End": [0xFF57],
|
||||||
|
"Enter": [0xFF0D],
|
||||||
|
"EraseEof": [0xFD06],
|
||||||
|
"Escape": [0xFF1B],
|
||||||
|
"Execute": [0xFF62],
|
||||||
|
"Exsel": [0xFD1D],
|
||||||
|
"ExSel": [0xFD1D],
|
||||||
|
"F1": [0xFFBE],
|
||||||
|
"F2": [0xFFBF],
|
||||||
|
"F3": [0xFFC0],
|
||||||
|
"F4": [0xFFC1],
|
||||||
|
"F5": [0xFFC2],
|
||||||
|
"F6": [0xFFC3],
|
||||||
|
"F7": [0xFFC4],
|
||||||
|
"F8": [0xFFC5],
|
||||||
|
"F9": [0xFFC6],
|
||||||
|
"F10": [0xFFC7],
|
||||||
|
"F11": [0xFFC8],
|
||||||
|
"F12": [0xFFC9],
|
||||||
|
"F13": [0xFFCA],
|
||||||
|
"F14": [0xFFCB],
|
||||||
|
"F15": [0xFFCC],
|
||||||
|
"F16": [0xFFCD],
|
||||||
|
"F17": [0xFFCE],
|
||||||
|
"F18": [0xFFCF],
|
||||||
|
"F19": [0xFFD0],
|
||||||
|
"F20": [0xFFD1],
|
||||||
|
"F21": [0xFFD2],
|
||||||
|
"F22": [0xFFD3],
|
||||||
|
"F23": [0xFFD4],
|
||||||
|
"F24": [0xFFD5],
|
||||||
|
"Find": [0xFF68],
|
||||||
|
"GroupFirst": [0xFE0C],
|
||||||
|
"GroupLast": [0xFE0E],
|
||||||
|
"GroupNext": [0xFE08],
|
||||||
|
"GroupPrevious": [0xFE0A],
|
||||||
|
"FullWidth": null,
|
||||||
|
"HalfWidth": null,
|
||||||
|
"HangulMode": [0xFF31],
|
||||||
|
"Hankaku": [0xFF29],
|
||||||
|
"HanjaMode": [0xFF34],
|
||||||
|
"Help": [0xFF6A],
|
||||||
|
"Hiragana": [0xFF25],
|
||||||
|
"HiraganaKatakana": [0xFF27],
|
||||||
|
"Home": [0xFF50],
|
||||||
|
"Hyper": [0xFFED, 0xFFED, 0xFFEE],
|
||||||
|
"Insert": [0xFF63],
|
||||||
|
"JapaneseHiragana": [0xFF25],
|
||||||
|
"JapaneseKatakana": [0xFF26],
|
||||||
|
"JapaneseRomaji": [0xFF24],
|
||||||
|
"JunjaMode": [0xFF38],
|
||||||
|
"KanaMode": [0xFF2D],
|
||||||
|
"KanjiMode": [0xFF21],
|
||||||
|
"Katakana": [0xFF26],
|
||||||
|
"Left": [0xFF51],
|
||||||
|
"Meta": [0xFFE7, 0xFFE7, 0xFFE8],
|
||||||
|
"ModeChange": [0xFF7E],
|
||||||
|
"NumLock": [0xFF7F],
|
||||||
|
"PageDown": [0xFF56],
|
||||||
|
"PageUp": [0xFF55],
|
||||||
|
"Pause": [0xFF13],
|
||||||
|
"Play": [0xFD16],
|
||||||
|
"PreviousCandidate": [0xFF3E],
|
||||||
|
"PrintScreen": [0xFD1D],
|
||||||
|
"Redo": [0xFF66],
|
||||||
|
"Right": [0xFF53],
|
||||||
|
"RomanCharacters": null,
|
||||||
|
"Scroll": [0xFF14],
|
||||||
|
"Select": [0xFF60],
|
||||||
|
"Separator": [0xFFAC],
|
||||||
|
"Shift": [0xFFE1, 0xFFE1, 0xFFE2],
|
||||||
|
"SingleCandidate": [0xFF3C],
|
||||||
|
"Super": [0xFFEB, 0xFFEB, 0xFFEC],
|
||||||
|
"Tab": [0xFF09],
|
||||||
|
"Up": [0xFF52],
|
||||||
|
"Undo": [0xFF65],
|
||||||
|
"Win": [0xFFEB],
|
||||||
|
"Zenkaku": [0xFF28],
|
||||||
|
"ZenkakuHankaku": [0xFF2A]
|
||||||
|
};
|
||||||
45
src/protocol.js
Normal file
45
src/protocol.js
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
export const guacutils = {
|
||||||
|
decode: (string) => {
|
||||||
|
let pos = -1;
|
||||||
|
let sections = [];
|
||||||
|
|
||||||
|
for(;;) {
|
||||||
|
let len = string.indexOf('.', pos + 1);
|
||||||
|
|
||||||
|
if(len === -1)
|
||||||
|
break;
|
||||||
|
|
||||||
|
pos = parseInt(string.slice(pos + 1, len)) + len + 1;
|
||||||
|
|
||||||
|
// don't allow funky protocol length
|
||||||
|
if(pos > string.length)
|
||||||
|
return [];
|
||||||
|
|
||||||
|
sections.push(string.slice(len + 1, pos));
|
||||||
|
|
||||||
|
|
||||||
|
const sep = string.slice(pos, pos + 1);
|
||||||
|
|
||||||
|
if(sep === ',')
|
||||||
|
continue;
|
||||||
|
else if(sep === ';')
|
||||||
|
break;
|
||||||
|
else
|
||||||
|
// Invalid data.
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
return sections;
|
||||||
|
},
|
||||||
|
|
||||||
|
encode: (string) => {
|
||||||
|
let command = '';
|
||||||
|
|
||||||
|
for(var i = 0; i < string.length; i++) {
|
||||||
|
let current = string[i];
|
||||||
|
command += current.toString().length + '.' + current;
|
||||||
|
command += ( i < string.length - 1 ? ',' : ';');
|
||||||
|
}
|
||||||
|
return command;
|
||||||
|
}
|
||||||
|
};
|
||||||
9
webpack.config.js
Normal file
9
webpack.config.js
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
const path = require("path");
|
||||||
|
module.exports = {
|
||||||
|
entry: "./src/index.js",
|
||||||
|
output: {
|
||||||
|
filename: 'main.js',
|
||||||
|
path: path.resolve(__dirname, 'dist'),
|
||||||
|
},
|
||||||
|
mode: "development"
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue