Consolidate server console sessions
This commit is contained in:
parent
b8393a5206
commit
b3a2deed6c
|
@ -8,11 +8,9 @@
|
||||||
<link rel="stylesheet" href="css/terminal.css">
|
<link rel="stylesheet" href="css/terminal.css">
|
||||||
<link rel="icon" href="icon.svg" sizes="any" type="image/svg+xml">
|
<link rel="icon" href="icon.svg" sizes="any" type="image/svg+xml">
|
||||||
<script src="js/terminalcolors.js" charset="utf-8"></script>
|
<script src="js/terminalcolors.js" charset="utf-8"></script>
|
||||||
<script src="js/unvanquished.js" charset="utf-8"></script>
|
|
||||||
<script src="js/mindustry.js" charset="utf-8"></script>
|
|
||||||
<script src="js/xonotic.js" charset="utf-8"></script>
|
|
||||||
<script src="https://d3js.org/d3.v7.min.js"></script>
|
<script src="https://d3js.org/d3.v7.min.js"></script>
|
||||||
<script src="js/serverstats.js" charset="utf-8"></script>
|
<script src="js/serverstats.js" charset="utf-8"></script>
|
||||||
|
<script src="js/consoles.js" charset="utf-8"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<nav class="container">
|
<nav class="container">
|
||||||
|
@ -34,25 +32,7 @@
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-8">
|
<div class="col-md-8" id="console-div">
|
||||||
<h4>Mindustry</h4>
|
|
||||||
<div id="mindustry_output">
|
|
||||||
<p>Mindustry console</p>
|
|
||||||
</div>
|
|
||||||
<form id="mindustry_form" onsubmit="return false;"><input id="mindustry_command" size="80" autocomplete="off"></input><button id="mindustry_submit">Enter</button></form>
|
|
||||||
|
|
||||||
<h4>Unvanquished</h4>
|
|
||||||
<div id="unvanquished_output">
|
|
||||||
<p>Unvanquished console</p>
|
|
||||||
</div>
|
|
||||||
<form id="unvanquished_form" onsubmit="return false;"><input id="unvanquished_command" size="80" autocomplete="off"></input><button id="unvanquished_submit">Enter</button></form>
|
|
||||||
|
|
||||||
<h4>Xonotic</h4>
|
|
||||||
<div id="xonotic_output">
|
|
||||||
<p>Xonotic console</p>
|
|
||||||
</div>
|
|
||||||
<form id="xonotic_form" onsubmit="return false;"><input id="xonotic_command" size="80" autocomplete="off"></input><button id="xonotic_submit">Enter</button></form>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-6 col-md-4">
|
<div class="col-6 col-md-4">
|
||||||
<h5>Live stats</h5>
|
<h5>Live stats</h5>
|
||||||
|
|
|
@ -21,7 +21,7 @@
|
||||||
--terminal-color-background: rgb(30,34,41);
|
--terminal-color-background: rgb(30,34,41);
|
||||||
}
|
}
|
||||||
|
|
||||||
#mindustry_output {
|
.console_output {
|
||||||
border: solid grey;
|
border: solid grey;
|
||||||
background-color: var(--terminal-color-background);
|
background-color: var(--terminal-color-background);
|
||||||
width: min(95%, 1024px);
|
width: min(95%, 1024px);
|
||||||
|
@ -32,90 +32,25 @@
|
||||||
flex-direction: column-reverse;
|
flex-direction: column-reverse;
|
||||||
}
|
}
|
||||||
|
|
||||||
#mindustry_output p {
|
.console_output p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
/* font-weight: bold; */
|
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
/* word-break: break-all; */
|
|
||||||
color: var(--terminal-color-default);
|
color: var(--terminal-color-default);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
#mindustry_command {
|
.user_input::before {
|
||||||
|
content: '$ ';
|
||||||
|
color: var(--terminal-color-7-intense);
|
||||||
|
}
|
||||||
|
|
||||||
|
.console_command {
|
||||||
width: calc(min(95%, 1024px) - 10em);
|
width: calc(min(95%, 1024px) - 10em);
|
||||||
}
|
}
|
||||||
|
|
||||||
#mindustry_submit {
|
.console_submit {
|
||||||
width: 10em;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
border-radius: 0;
|
|
||||||
text-shadow: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#unvanquished_output {
|
|
||||||
border: solid grey;
|
|
||||||
background-color: var(--terminal-color-background);
|
|
||||||
width: min(95%, 1024px);
|
|
||||||
height: 20em;
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column-reverse;
|
|
||||||
}
|
|
||||||
|
|
||||||
#unvanquished_output p {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: monospace;
|
|
||||||
/* font-weight: bold; */
|
|
||||||
white-space: pre-wrap;
|
|
||||||
/* word-break: break-all; */
|
|
||||||
color: var(--terminal-color-default);
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#unvanquished_command {
|
|
||||||
width: calc(min(95%, 1024px) - 10em);
|
|
||||||
}
|
|
||||||
|
|
||||||
#unvanquished_submit {
|
|
||||||
width: 10em;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
border-radius: 0;
|
|
||||||
text-shadow: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#xonotic_output {
|
|
||||||
border: solid grey;
|
|
||||||
background-color: var(--terminal-color-background);
|
|
||||||
width: min(95%, 1024px);
|
|
||||||
height: 20em;
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column-reverse;
|
|
||||||
}
|
|
||||||
|
|
||||||
#xonotic_output p {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: monospace;
|
|
||||||
/* font-weight: bold; */
|
|
||||||
white-space: pre-wrap;
|
|
||||||
/* word-break: break-all; */
|
|
||||||
color: var(--terminal-color-default);
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#xonotic_command {
|
|
||||||
width: calc(min(95%, 1024px) - 10em);
|
|
||||||
}
|
|
||||||
|
|
||||||
#xonotic_submit {
|
|
||||||
width: 10em;
|
width: 10em;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
|
@ -0,0 +1,74 @@
|
||||||
|
function createConsole(root, game_name, text_colour_function, initial_command) {
|
||||||
|
const header = document.createElement('h4');
|
||||||
|
const output = document.createElement('div');
|
||||||
|
const output_text = document.createElement('p');
|
||||||
|
const input = document.createElement('form');
|
||||||
|
const input_text = document.createElement('input');
|
||||||
|
const input_submit = document.createElement('button');
|
||||||
|
|
||||||
|
header.innerText = game_name[0].toUpperCase() + game_name.substr(1);
|
||||||
|
output.id = game_name + "_output";
|
||||||
|
output.className = "console_output";
|
||||||
|
output_text.innerText = game_name + " console";
|
||||||
|
input.id = game_name + "_form";
|
||||||
|
input.className = "console_form";
|
||||||
|
input_text.id = game_name + "_command";
|
||||||
|
input_text.className = "console_command";
|
||||||
|
input_text.size = 80;
|
||||||
|
input_text.autocomplete = "off";
|
||||||
|
input_submit.id = game_name + "_submit";
|
||||||
|
input_submit.className = "console_submit";
|
||||||
|
input_submit.innerText = "Enter";
|
||||||
|
|
||||||
|
root.appendChild(header);
|
||||||
|
output.appendChild(output_text);
|
||||||
|
root.appendChild(output);
|
||||||
|
input.appendChild(input_text);
|
||||||
|
input.appendChild(input_submit);
|
||||||
|
root.appendChild(input);
|
||||||
|
|
||||||
|
input.addEventListener('submit', function(e){
|
||||||
|
e.preventDefault();
|
||||||
|
let line = document.createElement('p')
|
||||||
|
line.innerText = input_text.value;
|
||||||
|
line.className = "user_input";
|
||||||
|
output.prepend(line);
|
||||||
|
socket.send(input_text.value);
|
||||||
|
input_text.value = "";
|
||||||
|
});
|
||||||
|
|
||||||
|
// Create WebSocket connection.
|
||||||
|
// const socket = new WebSocket("wss://DOMAINNAME/" + game_name)
|
||||||
|
const socket = new WebSocket("wss://DOMAINNAME/" + game_name)
|
||||||
|
|
||||||
|
// Connection opened
|
||||||
|
socket.addEventListener('open', function (event) {
|
||||||
|
socket.send(initial_command);
|
||||||
|
});
|
||||||
|
|
||||||
|
socket.addEventListener('error', function (event) {
|
||||||
|
console.error(event);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Listen for messages
|
||||||
|
socket.addEventListener('message', function (event) {
|
||||||
|
const output = document.getElementById(game_name + '_output');
|
||||||
|
let line = document.createElement('p')
|
||||||
|
line.innerHTML = text_colour_function(event.data);
|
||||||
|
output.prepend(line);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function consoles_init() {
|
||||||
|
const root = document.getElementById('console-div');
|
||||||
|
createConsole(root, 'mindustry', convertTerminalCodeToHtml, 'status');
|
||||||
|
createConsole(root, 'unvanquished', convertDaemonedCodeToHtml, '/status');
|
||||||
|
createConsole(root, 'xonotic', convertTerminalCodeToHtml, 'who');
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
if (document.readyState === 'loading') {
|
||||||
|
document.addEventListener('DOMContentLoaded', consoles_init);
|
||||||
|
} else {
|
||||||
|
consoles_init();
|
||||||
|
}
|
|
@ -1,41 +0,0 @@
|
||||||
function mindustry_init() {
|
|
||||||
const command_form = document.getElementById('mindustry_form');
|
|
||||||
const command_input = document.getElementById('mindustry_command');
|
|
||||||
|
|
||||||
// Connect the command submission
|
|
||||||
if(command_input && command_form) {
|
|
||||||
command_form.addEventListener('submit', function(){
|
|
||||||
let line = document.createElement('p')
|
|
||||||
line.innerHTML = '<span class="TERM_FOREGROUND_7_INTENSE">$ </span>' + command_input.value;
|
|
||||||
mindustry_output.prepend(line);
|
|
||||||
socket.send(command_input.value);
|
|
||||||
command_input.value = "";
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Create WebSocket connection.
|
|
||||||
const socket = new WebSocket("wss://DOMAINNAME/mindustry")
|
|
||||||
|
|
||||||
// Connection opened
|
|
||||||
socket.addEventListener('open', function (event) {
|
|
||||||
socket.send('status');
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.addEventListener('error', function (event) {
|
|
||||||
console.error(event);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Listen for messages
|
|
||||||
socket.addEventListener('message', function (event) {
|
|
||||||
const mindustry_output = document.getElementById('mindustry_output');
|
|
||||||
let line = document.createElement('p')
|
|
||||||
line.innerHTML = convertTerminalCodeToHtml(event.data);
|
|
||||||
mindustry_output.prepend(line);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (document.readyState === 'loading') {
|
|
||||||
document.addEventListener('DOMContentLoaded', mindustry_init);
|
|
||||||
} else {
|
|
||||||
mindustry_init();
|
|
||||||
}
|
|
|
@ -1,41 +0,0 @@
|
||||||
function unvanquished_init() {
|
|
||||||
const command_form = document.getElementById('unvanquished_form');
|
|
||||||
const command_input = document.getElementById('unvanquished_command');
|
|
||||||
|
|
||||||
// Connect the command submission
|
|
||||||
if(command_input && command_form) {
|
|
||||||
command_form.addEventListener('submit', function(){
|
|
||||||
let line = document.createElement('p')
|
|
||||||
line.innerHTML = '<span class="TERM_FOREGROUND_7_INTENSE">$ </span>' + command_input.value;
|
|
||||||
unvanquished_output.prepend(line);
|
|
||||||
socket.send(command_input.value);
|
|
||||||
command_input.value = "";
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Create WebSocket connection.
|
|
||||||
const socket = new WebSocket("wss://DOMAINNAME/unvanquished")
|
|
||||||
|
|
||||||
// Connection opened
|
|
||||||
socket.addEventListener('open', function (event) {
|
|
||||||
socket.send('/status');
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.addEventListener('error', function (event) {
|
|
||||||
console.error(event);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Listen for messages
|
|
||||||
socket.addEventListener('message', function (event) {
|
|
||||||
const unvanquished_output = document.getElementById('unvanquished_output');
|
|
||||||
let line = document.createElement('p')
|
|
||||||
line.innerHTML = convertDaemonedCodeToHtml(event.data);
|
|
||||||
unvanquished_output.prepend(line);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (document.readyState === 'loading') {
|
|
||||||
document.addEventListener('DOMContentLoaded', unvanquished_init);
|
|
||||||
} else {
|
|
||||||
unvanquished_init();
|
|
||||||
}
|
|
|
@ -1,41 +0,0 @@
|
||||||
function xonotic_init() {
|
|
||||||
const command_form = document.getElementById('xonotic_form');
|
|
||||||
const command_input = document.getElementById('xonotic_command');
|
|
||||||
|
|
||||||
// Connect the command submission
|
|
||||||
if(command_input && command_form) {
|
|
||||||
command_form.addEventListener('submit', function(){
|
|
||||||
let line = document.createElement('p')
|
|
||||||
line.innerHTML = '<span class="TERM_FOREGROUND_7_INTENSE">$ </span>' + command_input.value;
|
|
||||||
xonotic_output.prepend(line);
|
|
||||||
socket.send(command_input.value);
|
|
||||||
command_input.value = "";
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Create WebSocket connection.
|
|
||||||
const socket = new WebSocket("wss://DOMAINNAME/xonotic")
|
|
||||||
|
|
||||||
// Connection opened
|
|
||||||
socket.addEventListener('open', function (event) {
|
|
||||||
socket.send('who');
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.addEventListener('error', function (event) {
|
|
||||||
console.error(event);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Listen for messages
|
|
||||||
socket.addEventListener('message', function (event) {
|
|
||||||
const xonotic_output = document.getElementById('xonotic_output');
|
|
||||||
let line = document.createElement('p')
|
|
||||||
line.innerHTML = convertTerminalCodeToHtml(event.data);
|
|
||||||
xonotic_output.prepend(line);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (document.readyState === 'loading') {
|
|
||||||
document.addEventListener('DOMContentLoaded', xonotic_init);
|
|
||||||
} else {
|
|
||||||
xonotic_init();
|
|
||||||
}
|
|
Reference in New Issue