Fixing webterminals
This commit is contained in:
parent
978c868c36
commit
efe8d35bc7
|
@ -5,8 +5,9 @@
|
||||||
<title>Game server</title>
|
<title>Game server</title>
|
||||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||||
<link rel="stylesheet" href="css/terminal.css">
|
<link rel="stylesheet" href="css/terminal.css">
|
||||||
<script src="js/mindustry.js" charset="utf-8"></script>
|
<script src="js/terminalcolors.js" charset="utf-8"></script>
|
||||||
<script src="js/unvanguished.js" charset="utf-8"></script>
|
<script src="js/unvanguished.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="js/xonotic.js" charset="utf-8"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
@ -25,7 +25,7 @@
|
||||||
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);
|
||||||
height: 40em;
|
height: 20em;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -36,7 +36,7 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
font-weight: bold;
|
/* font-weight: bold; */
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
/* word-break: break-all; */
|
/* word-break: break-all; */
|
||||||
color: var(--terminal-color-default);
|
color: var(--terminal-color-default);
|
||||||
|
@ -59,7 +59,7 @@
|
||||||
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);
|
||||||
height: 40em;
|
height: 20em;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -70,7 +70,7 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
font-weight: bold;
|
/* font-weight: bold; */
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
/* word-break: break-all; */
|
/* word-break: break-all; */
|
||||||
color: var(--terminal-color-default);
|
color: var(--terminal-color-default);
|
||||||
|
@ -93,7 +93,7 @@
|
||||||
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);
|
||||||
height: 40em;
|
height: 20em;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -104,7 +104,7 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
font-weight: bold;
|
/* font-weight: bold; */
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
/* word-break: break-all; */
|
/* word-break: break-all; */
|
||||||
color: var(--terminal-color-default);
|
color: var(--terminal-color-default);
|
||||||
|
@ -172,3 +172,7 @@
|
||||||
.TERM_FOREGROUND_7_INTENSE {
|
.TERM_FOREGROUND_7_INTENSE {
|
||||||
color: var(--terminal-color-7-intense);
|
color: var(--terminal-color-7-intense);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.TERM_FOREGROUND_BOLD {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
|
@ -18,7 +18,7 @@ function mindustry_init() {
|
||||||
|
|
||||||
// Connection opened
|
// Connection opened
|
||||||
socket.addEventListener('open', function (event) {
|
socket.addEventListener('open', function (event) {
|
||||||
socket.send('help');
|
socket.send('status');
|
||||||
});
|
});
|
||||||
|
|
||||||
// Listen for messages
|
// Listen for messages
|
||||||
|
@ -30,60 +30,6 @@ function mindustry_init() {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function sendHello() {
|
|
||||||
socket.send('Hello');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Shell command can have control codes. Some of these mean colours.
|
|
||||||
function convertTerminalCodeToHtml(line) {
|
|
||||||
let htmlline = "";
|
|
||||||
let open_spans = 0;
|
|
||||||
for(let i = 0; i < line.length; i++) {
|
|
||||||
if(line[i] == '\033') {
|
|
||||||
let code = line[++i]
|
|
||||||
if(code == '[') {
|
|
||||||
// This means it's a colour
|
|
||||||
let colour_code = "";
|
|
||||||
for(i++; i < line.length && line[i] != 'm'; i++) {
|
|
||||||
colour_code += line[i];
|
|
||||||
}
|
|
||||||
colour_code = parseInt(colour_code);
|
|
||||||
if(colour_code === 0) {
|
|
||||||
for(let i = 0; i < open_spans; i++) {
|
|
||||||
htmlline += "</span>";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if(colour_code >= 30 && colour_code <= 37) {
|
|
||||||
htmlline += '<span class="TERM_FOREGROUND_'+(colour_code-30)+'">';
|
|
||||||
open_spans++;
|
|
||||||
}
|
|
||||||
else if(colour_code >= 90 && colour_code <= 97) {
|
|
||||||
htmlline += '<span class="TERM_FOREGROUND_'+(colour_code-90)+'_INTENSE">';
|
|
||||||
open_spans++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if(line[i] == '<') {
|
|
||||||
htmlline += "<"
|
|
||||||
}
|
|
||||||
else if(line[i] == '>') {
|
|
||||||
htmlline += ">"
|
|
||||||
}
|
|
||||||
else if(line[i] == '&') {
|
|
||||||
htmlline += "&"
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
htmlline += line[i];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
for(let i = 0; i < open_spans; i++) {
|
|
||||||
htmlline += "</span>";
|
|
||||||
}
|
|
||||||
|
|
||||||
return htmlline
|
|
||||||
}
|
|
||||||
|
|
||||||
if (document.readyState === 'loading') {
|
if (document.readyState === 'loading') {
|
||||||
document.addEventListener('DOMContentLoaded', mindustry_init);
|
document.addEventListener('DOMContentLoaded', mindustry_init);
|
||||||
} else {
|
} else {
|
||||||
|
|
|
@ -0,0 +1,95 @@
|
||||||
|
// Shell command can have control codes. Some of these mean colours.
|
||||||
|
function convertTerminalCodeToHtml(line) {
|
||||||
|
let htmlline = "";
|
||||||
|
let open_spans = 0;
|
||||||
|
for(let i = 0; i < line.length; i++) {
|
||||||
|
if(line[i] == '\033') {
|
||||||
|
let code = line[++i]
|
||||||
|
if(code == '[') {
|
||||||
|
// This means it's a colour
|
||||||
|
let colour_code = "";
|
||||||
|
for(i++; i < line.length && line[i] != 'm'; i++) {
|
||||||
|
colour_code += line[i];
|
||||||
|
}
|
||||||
|
colour_code = parseInt(colour_code);
|
||||||
|
if(colour_code === 0) {
|
||||||
|
for(let i = 0; i < open_spans; i++) {
|
||||||
|
htmlline += "</span>";
|
||||||
|
}
|
||||||
|
open_spans = 0;
|
||||||
|
}
|
||||||
|
else if(colour_code >= 30 && colour_code <= 37) {
|
||||||
|
htmlline += '<span class="TERM_FOREGROUND_'+(colour_code-30)+'">';
|
||||||
|
open_spans++;
|
||||||
|
}
|
||||||
|
else if(colour_code >= 90 && colour_code <= 97) {
|
||||||
|
htmlline += '<span class="TERM_FOREGROUND_'+(colour_code-90)+'_INTENSE">';
|
||||||
|
open_spans++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if(line[i] == '<') {
|
||||||
|
htmlline += "<"
|
||||||
|
}
|
||||||
|
else if(line[i] == '>') {
|
||||||
|
htmlline += ">"
|
||||||
|
}
|
||||||
|
else if(line[i] == '&') {
|
||||||
|
htmlline += "&"
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
htmlline += line[i];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for(let i = 0; i < open_spans; i++) {
|
||||||
|
htmlline += "</span>";
|
||||||
|
}
|
||||||
|
|
||||||
|
return htmlline
|
||||||
|
}
|
||||||
|
|
||||||
|
// Shell command can have control codes. Some of these mean colours.
|
||||||
|
function convertDaemonedCodeToHtml(line) {
|
||||||
|
let htmlline = "";
|
||||||
|
let open_spans = 0;
|
||||||
|
for(let i = 0; i < line.length; i++) {
|
||||||
|
if(line[i] == '^') {
|
||||||
|
let code = line[++i]
|
||||||
|
for(let i = 0; i < open_spans; i++) {
|
||||||
|
htmlline += "</span>";
|
||||||
|
}
|
||||||
|
open_spans = 0;
|
||||||
|
|
||||||
|
if(code == 'N') {
|
||||||
|
htmlline += '<span class="TERM_FOREGROUND_BOLD">';
|
||||||
|
open_spans++;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
let colour_code = parseInt(code);
|
||||||
|
if(colour_code >= 0) {
|
||||||
|
htmlline += '<span class="TERM_FOREGROUND_'+colour_code+'">';
|
||||||
|
open_spans++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if(line[i] == '<') {
|
||||||
|
htmlline += "<"
|
||||||
|
}
|
||||||
|
else if(line[i] == '>') {
|
||||||
|
htmlline += ">"
|
||||||
|
}
|
||||||
|
else if(line[i] == '&') {
|
||||||
|
htmlline += "&"
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
htmlline += line[i];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for(let i = 0; i < open_spans; i++) {
|
||||||
|
htmlline += "</span>";
|
||||||
|
}
|
||||||
|
|
||||||
|
return htmlline
|
||||||
|
}
|
|
@ -18,72 +18,19 @@ function unvanguished_init() {
|
||||||
|
|
||||||
// Connection opened
|
// Connection opened
|
||||||
socket.addEventListener('open', function (event) {
|
socket.addEventListener('open', function (event) {
|
||||||
socket.send('help');
|
socket.send('/status');
|
||||||
});
|
});
|
||||||
|
|
||||||
// Listen for messages
|
// Listen for messages
|
||||||
socket.addEventListener('message', function (event) {
|
socket.addEventListener('message', function (event) {
|
||||||
|
console.log(event);
|
||||||
const unvanguished_output = document.getElementById('unvanguished_output');
|
const unvanguished_output = document.getElementById('unvanguished_output');
|
||||||
let line = document.createElement('p')
|
let line = document.createElement('p')
|
||||||
line.innerHTML = convertTerminalCodeToHtml(event.data);
|
line.innerHTML = convertDaemonedCodeToHtml(event.data);
|
||||||
unvanguished_output.prepend(line);
|
unvanguished_output.prepend(line);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function sendHello() {
|
|
||||||
socket.send('Hello');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Shell command can have control codes. Some of these mean colours.
|
|
||||||
function convertTerminalCodeToHtml(line) {
|
|
||||||
let htmlline = "";
|
|
||||||
let open_spans = 0;
|
|
||||||
for(let i = 0; i < line.length; i++) {
|
|
||||||
if(line[i] == '\033') {
|
|
||||||
let code = line[++i]
|
|
||||||
if(code == '[') {
|
|
||||||
// This means it's a colour
|
|
||||||
let colour_code = "";
|
|
||||||
for(i++; i < line.length && line[i] != 'm'; i++) {
|
|
||||||
colour_code += line[i];
|
|
||||||
}
|
|
||||||
colour_code = parseInt(colour_code);
|
|
||||||
if(colour_code === 0) {
|
|
||||||
for(let i = 0; i < open_spans; i++) {
|
|
||||||
htmlline += "</span>";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if(colour_code >= 30 && colour_code <= 37) {
|
|
||||||
htmlline += '<span class="TERM_FOREGROUND_'+(colour_code-30)+'">';
|
|
||||||
open_spans++;
|
|
||||||
}
|
|
||||||
else if(colour_code >= 90 && colour_code <= 97) {
|
|
||||||
htmlline += '<span class="TERM_FOREGROUND_'+(colour_code-90)+'_INTENSE">';
|
|
||||||
open_spans++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if(line[i] == '<') {
|
|
||||||
htmlline += "<"
|
|
||||||
}
|
|
||||||
else if(line[i] == '>') {
|
|
||||||
htmlline += ">"
|
|
||||||
}
|
|
||||||
else if(line[i] == '&') {
|
|
||||||
htmlline += "&"
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
htmlline += line[i];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
for(let i = 0; i < open_spans; i++) {
|
|
||||||
htmlline += "</span>";
|
|
||||||
}
|
|
||||||
|
|
||||||
return htmlline
|
|
||||||
}
|
|
||||||
|
|
||||||
if (document.readyState === 'loading') {
|
if (document.readyState === 'loading') {
|
||||||
document.addEventListener('DOMContentLoaded', unvanguished_init);
|
document.addEventListener('DOMContentLoaded', unvanguished_init);
|
||||||
} else {
|
} else {
|
||||||
|
|
|
@ -18,72 +18,18 @@ function xonotic_init() {
|
||||||
|
|
||||||
// Connection opened
|
// Connection opened
|
||||||
socket.addEventListener('open', function (event) {
|
socket.addEventListener('open', function (event) {
|
||||||
socket.send('help');
|
socket.send('/status');
|
||||||
});
|
});
|
||||||
|
|
||||||
// Listen for messages
|
// Listen for messages
|
||||||
socket.addEventListener('message', function (event) {
|
socket.addEventListener('message', function (event) {
|
||||||
const xonotic_output = document.getElementById('xonotic_output');
|
const xonotic_output = document.getElementById('xonotic_output');
|
||||||
let line = document.createElement('p')
|
let line = document.createElement('p')
|
||||||
line.innerHTML = convertTerminalCodeToHtml(event.data);
|
line.innerHTML = convertDaemonedCodeToHtml(event.data);
|
||||||
xonotic_output.prepend(line);
|
xonotic_output.prepend(line);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function sendHello() {
|
|
||||||
socket.send('Hello');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Shell command can have control codes. Some of these mean colours.
|
|
||||||
function convertTerminalCodeToHtml(line) {
|
|
||||||
let htmlline = "";
|
|
||||||
let open_spans = 0;
|
|
||||||
for(let i = 0; i < line.length; i++) {
|
|
||||||
if(line[i] == '\033') {
|
|
||||||
let code = line[++i]
|
|
||||||
if(code == '[') {
|
|
||||||
// This means it's a colour
|
|
||||||
let colour_code = "";
|
|
||||||
for(i++; i < line.length && line[i] != 'm'; i++) {
|
|
||||||
colour_code += line[i];
|
|
||||||
}
|
|
||||||
colour_code = parseInt(colour_code);
|
|
||||||
if(colour_code === 0) {
|
|
||||||
for(let i = 0; i < open_spans; i++) {
|
|
||||||
htmlline += "</span>";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if(colour_code >= 30 && colour_code <= 37) {
|
|
||||||
htmlline += '<span class="TERM_FOREGROUND_'+(colour_code-30)+'">';
|
|
||||||
open_spans++;
|
|
||||||
}
|
|
||||||
else if(colour_code >= 90 && colour_code <= 97) {
|
|
||||||
htmlline += '<span class="TERM_FOREGROUND_'+(colour_code-90)+'_INTENSE">';
|
|
||||||
open_spans++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if(line[i] == '<') {
|
|
||||||
htmlline += "<"
|
|
||||||
}
|
|
||||||
else if(line[i] == '>') {
|
|
||||||
htmlline += ">"
|
|
||||||
}
|
|
||||||
else if(line[i] == '&') {
|
|
||||||
htmlline += "&"
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
htmlline += line[i];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
for(let i = 0; i < open_spans; i++) {
|
|
||||||
htmlline += "</span>";
|
|
||||||
}
|
|
||||||
|
|
||||||
return htmlline
|
|
||||||
}
|
|
||||||
|
|
||||||
if (document.readyState === 'loading') {
|
if (document.readyState === 'loading') {
|
||||||
document.addEventListener('DOMContentLoaded', xonotic_init);
|
document.addEventListener('DOMContentLoaded', xonotic_init);
|
||||||
} else {
|
} else {
|
||||||
|
|
Reference in New Issue