kaboomserver/website
1
0
Fork 0
mirror of https://github.com/kaboomserver/website.git synced 2024-12-22 07:45:00 +00:00
Code Issues Projects Releases Wiki Activity

Remove web console code from main repo

Browse source
This commit is contained in:
mathiascode 2019-09-21 06:20:15 +03:00
parent 27ea53fbf3
commit f85889f2fe
6 changed files with 0 additions and 432 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
console/index.html
View file

@ -1,78 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="styles/WebConsole.css">
<title>Console</title>
</head>
<body onload="openServer();">
<main role="main" class="h-100">
<div class="container h-100" id="offlineContainer" style="display: none;">
<div class="row h-100">
<div class="col align-self-center text-center">
<h1 class="mt-3 mb-3">The server is currently offline</h1>
<p class="lead mb-3">This is most likely caused by a server crash. Come back later.</p>
</div>
</div>
</div>
<div class="container h-100" id="serverContainer">
<div class="row h-100">
<div class="col align-self-center">
<div class="row mt-4">
<div class="col-sm mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Players Online</h5>
<p class="card-text"><span id="connectedPlayers">0</span> / <span id="maxPlayers">Unknown</span></p>
<div class="progress flat-progressbar">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" id="playerProgressBar"></div>
</div>
</div>
</div>
</div>
<div class="col-sm mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">CPU</h5>
<p class="card-text" id="cpuInfo">0%</p>
<div class="progress flat-progressbar">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" id="CpuProgressBar"></div>
</div>
</div>
</div>
</div>
<div class="col-sm mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">RAM</h5>
<p class="card-text"><span id="usedRam">0</span> MB / <span id="totalRam">0</span> MB</p>
<div class="progress flat-progressbar">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" id="RamProgressBar"></div>
</div>
</div>
</div>
</div>
</div>
<div class="card mb-3">
<div class="card-body overflow-auto text-light bg-dark console" id="consoleTextArea"></div>
</div>
<div class="input-group mb-4">
<input type="text" class="form-control" id="commandInput">
<div class="input-group-append">
<button class="btn btn-secondary" type="button" id="sendCommandButton">Send</button>
</div>
</div>
</div>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="scripts/WebConsoleConnector.js"></script>
<script src="scripts/WebConsoleManager.js"></script>
<script src="scripts/WebConsole.js"></script>
<script src="scripts/WebConsoleJqueryHandler.js"></script>
</body>
</html>

178
console/scripts/WebConsole.js
View file

@ -1,178 +0,0 @@
/**
Main JS file for WebConsole.
https://github.com/mesacarlos
2019 Carlos Mesa under MIT License.
*/
/**
* Global variables
*/
var connectionManager = new WebConsoleManager();
var statusCommandsInterval = -1;
var commandHistoryIndex = -1; //Saves current command history index. -1 when not browsing history.
/**
* Prepare and show server to user
*/
function openServer(serverName){
//Create or retrieve connection
connectionManager.loadConnection(serverName);
//Load saved messages
var i;
var messages = connectionManager.activeConnection.messages;
for(i = 0; i < messages.length; i++){
if(messages[i].status != 401){
onWebSocketsMessage(messages[i]);
}
}
//Subscribe a function
connectionManager.activeConnection.subscribe(onWebSocketsMessage);
}
function onWebSocketsMessage(message){
switch (message.status) {
case 10:
//Console Output
writeToWebConsole(message.message);
break;
case 200:
//Processed
writeToWebConsole(message.message);
break;
case 400:
//Unknown Command
writeToWebConsole(message.message);
break;
case 401:
//Send password
connectionManager.activeConnection.sendToServer("LOGIN 1234");
break;
case 1000:
//Players
writePlayerInfo(message.connectedPlayers, message.maxPlayers);
connectionManager.activeConnection.players = JSON.parse(message.players);
break;
case 1001:
//Cpu Usage
writeCpuInfo(message.usage);
break;
case 1002:
//RAM Usage
writeRamInfo(message.free, message.used, message.max);
break;
default:
console.log('Unknown server response:');
}
console.log(message);
//Add interval for Players, CPU and RAM info, if not set
if(statusCommandsInterval == -1 && message.status !== 401){
statusCommandsInterval = setInterval(function(){
connectionManager.askForInfo();
}, 2500);
}
}
/**
* Write to console
*/
function writeToWebConsole(msg){
var isScrolledDown = document.getElementById("consoleTextArea").scrollHeight - document.getElementById("consoleTextArea").scrollTop - 40 == $("#consoleTextArea").height();
//Write to div, replacing < to &lt; (to avoid XSS) and replacing new line to br.
msg = msg.replace(/</g, "<");
msg = msg.replace(/(?:\r\n|\r|\n)/g, "<br>");
//Color filter for Windows (thanks to SuperPykkon)
msg = msg.replace(/\[0;30;22m/g, "<span style='color: #000000;'>"); //&0
msg = msg.replace(/\[0;34;22m/g, "<span style='color: #0000AA;'>"); //&1
msg = msg.replace(/\[0;32;22m/g, "<span style='color: #00AA00;'>"); //&2
msg = msg.replace(/\[0;36;22m/g, "<span style='color: #00AAAA;'>"); //&3
msg = msg.replace(/\[0;31;22m/g, "<span style='color: #AA0000;'>"); //&4
msg = msg.replace(/\[0;35;22m/g, "<span style='color: #AA00AA;'>"); //&5
msg = msg.replace(/\[0;33;22m/g, "<span style='color: #FFAA00;'>"); //&6
msg = msg.replace(/\[0;37;22m/g, "<span style='color: #AAAAAA;'>"); //&7
msg = msg.replace(/\[0;30;1m/g, "<span style='color: #555555;'>"); //&8
msg = msg.replace(/\[0;34;1m/g, "<span style='color: #5555FF;'>"); //&9
msg = msg.replace(/\[0;32;1m/g, "<span style='color: #55FF55;'>"); //&a
msg = msg.replace(/\[0;36;1m/g, "<span style='color: #55FFFF;'>"); //&b
msg = msg.replace(/\[0;31;1m/g, "<span style='color: #FF5555;'>"); //&c
msg = msg.replace(/\[0;35;1m/g, "<span style='color: #FF55FF;'>"); //&d
msg = msg.replace(/\[0;33;1m/g, "<span style='color: #FFFF55;'>"); //&e
msg = msg.replace(/\[0;37;1m/g, "<span style='color: #FFFFFF;'>"); //&f
msg = msg.replace(/\[m/g, "</span>"); //&f
//Color filter for UNIX (This is easier!)
//span may not be closed every time but browsers will do for ourselves
msg = msg.replace(/§0/g, "<span style='color: #000000;'>"); //&0
msg = msg.replace(/§1/g, "<span style='color: #0000AA;'>"); //&1
msg = msg.replace(/§2/g, "<span style='color: #00AA00;'>"); //&2
msg = msg.replace(/§3/g, "<span style='color: #00AAAA;'>"); //&3
msg = msg.replace(/§4/g, "<span style='color: #AA0000;'>"); //&4
msg = msg.replace(/§5/g, "<span style='color: #AA00AA;'>"); //&5
msg = msg.replace(/§6/g, "<span style='color: #FFAA00;'>"); //&6
msg = msg.replace(/§7/g, "<span style='color: #AAAAAA;'>"); //&7
msg = msg.replace(/§8/g, "<span style='color: #555555;'>"); //&8
msg = msg.replace(/§9/g, "<span style='color: #5555FF;'>"); //&9
msg = msg.replace(/§a/g, "<span style='color: #55FF55;'>"); //&a
msg = msg.replace(/§b/g, "<span style='color: #55FFFF;'>"); //&b
msg = msg.replace(/§c/g, "<span style='color: #FF5555;'>"); //&c
msg = msg.replace(/§d/g, "<span style='color: #FF55FF;'>"); //&d
msg = msg.replace(/§e/g, "<span style='color: #FFFF55;'>"); //&e
msg = msg.replace(/§f/g, "<span style='color: #FFFFFF;'>"); //&f
msg = msg.replace(/§l/g, "<span style='font-weight:bold;'>"); //&l
msg = msg.replace(/§m/g, "<span style='text-decoration: line-through;'>"); //&m
msg = msg.replace(/§n/g, "<span style='text-decoration: underline;'>"); //&n
msg = msg.replace(/§o/g, "<span style='font-style: italic;'>"); //&o
msg = msg.replace(/§r/g, "</span>"); //&r
$("#consoleTextArea").append(msg + "<br>");
if(isScrolledDown){
var textarea = document.getElementById('consoleTextArea');
textarea.scrollTop = textarea.scrollHeight;
}
}
/**
* Fill connected players card
*/
function writePlayerInfo(connected, maximum){
$("#connectedPlayers").text(connected);
$("#maxPlayers").text(maximum);
var percent = (connected/maximum)*100;
$("#playerProgressBar").width(percent + "%");
}
/**
* Fill CPU info card
*/
function writeCpuInfo(usage){
$("#cpuInfo").text(usage + "%");
$("#CpuProgressBar").width(usage + "%");
}
/**
* Fill RAM info card
*/
function writeRamInfo(free, used, total){
$("#usedRam").text(used);
$("#totalRam").text(total);
var percent = (used/total)*100;
$("#RamProgressBar").width(percent + "%");
}
/**
* Called from WebConsoleConnector only.
*/
function closedConnection(){
$("#offlineContainer").show();
$("#serverContainer").hide();
}

80
console/scripts/WebConsoleConnector.js
View file

@ -1,80 +0,0 @@
/**
WebConsole Connector for WebConsole
Used to connect to WebSocketsServer
https://github.com/mesacarlos
2019 Carlos Mesa under MIT License.
*/
class WebConsoleConnector {
constructor(serverURI) {
this.serverURI = serverURI;
this.subscribers = []; //List of functions called when a new message arrive
this.messages = []; //All messages retrieved since connection start
this.commands = []; //EXEC Commands sent by user to this server
this.players = []; //Connected users.
}
/**
* Connect to WebSocket
*/
connect(){
var connector = this;
this.websocket = new WebSocket(this.serverURI);
this.websocket.onclose = function(evt) { connector.onClose(evt) };
this.websocket.onmessage = function(evt) { connector.onMessage(evt) };
this.websocket.onerror = function(evt) { connector.onError(evt) };
}
/**
* Internal function
*/
onClose(evt){
closedConnection();
}
/**
* Internal function
*/
onMessage(evt){
var obj = JSON.parse(evt.data);
this.notify(obj); //Notify all subscribers
this.messages.push(obj);
}
/**
* Internal function
*/
onError(evt){
closedConnection();
}
/**
* Sends a WebSocket command to Server
*/
sendToServer(message){
this.websocket.send(message);
}
/**
* Notifies a new message to all subscribers
*/
notify(obj){
this.subscribers.forEach(function(fun) {
fun(obj); //Calls function with this object
});
}
/**
* Adds a function to subscriber list
*/
subscribe(func){
this.subscribers.push(func);
}
/**
* Unsubscribe all subscribers
*/
removeSubscribers(){
this.subscribers = [];
}
}

50
console/scripts/WebConsoleJqueryHandler.js
View file

@ -1,50 +0,0 @@
/**
JS File containing all JQuery-related handlers
https://github.com/mesacarlos
2019 Carlos Mesa under MIT License.
*/
/**
* On send command button click
*/
$("#sendCommandButton").click(function() {
connectionManager.sendConsoleCmd($("#commandInput").val());
$("#commandInput").val('');
commandHistoryIndex = -1; //Reset command history index
});
/**
* Enter or arrow down/up key on command input
*/
$("#commandInput").on('keydown', function (e) {
if(e.which === 13){ //Detect enter key
//Disable textbox to prevent multiple submit
$(this).attr("disabled", "disabled");
//Send command
sendCommandButton.click();
//Enable the textbox again.
$(this).removeAttr("disabled");
//Focus again
$(this).focus();
}else if(e.which === 38){ //Detect arrow up key
//Replace with older command
if(commandHistoryIndex == -1){
//If not browsing history, start by latest command sent
commandHistoryIndex = connectionManager.activeConnection.commands.length;
}
$("#commandInput").val(connectionManager.activeConnection.commands[commandHistoryIndex - 1]);
commandHistoryIndex = commandHistoryIndex - 1;
}else if(e.which === 40){ //Detect arrow down key
//Replace with newer command
if(commandHistoryIndex !== -1){
//If not browsing history, do nothing
$("#commandInput").val(connectionManager.activeConnection.commands[commandHistoryIndex + 1]);
commandHistoryIndex = commandHistoryIndex + 1;
}
}else if(e.which == 9){ //Detect tab key
//TODO Suggest user from connectionManager.activeConnection.players;
}
});

34
console/scripts/WebConsoleManager.js
View file

@ -1,34 +0,0 @@
/**
WebConsole Manager for WebConsole
Used to manage active connections
https://github.com/mesacarlos
2019 Carlos Mesa under MIT License.
*/
class WebConsoleManager {
/**
* Loads a existing connection or creates a new one
*/
loadConnection(){
//If not created yet, create it
this.activeConnection = new WebConsoleConnector("wss://play.kaboom.pw:53951");
this.activeConnection.connect();
}
/**
* Send console command to server
*/
sendConsoleCmd(cmd){
this.activeConnection.sendToServer("EXEC " + cmd);
this.activeConnection.commands.push(cmd);
}
/**
* Asks server for CPU, RAM and players info
*/
askForInfo(){
this.activeConnection.sendToServer("PLAYERS");
this.activeConnection.sendToServer("CPUUSAGE");
this.activeConnection.sendToServer("RAMUSAGE");
}
}

12
console/styles/WebConsole.css
View file

@ -1,12 +0,0 @@
html,
body {
height: 100%;
}
.flat-progressbar{
height: 10px;
}
.console{
height: 480px;
}