Fixing webterminals

This commit is contained in:
DeathByDenim 2022-02-02 21:01:08 -05:00
parent 978c868c36
commit efe8d35bc7
Signed by: DeathByDenim
GPG Key ID: 4A475283D925365B
6 changed files with 113 additions and 174 deletions

View File

@ -5,8 +5,9 @@
<title>Game server</title>
<link rel="stylesheet" href="css/bootstrap.min.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/mindustry.js" charset="utf-8"></script>
<script src="js/xonotic.js" charset="utf-8"></script>
</head>
<body>

View File

@ -25,7 +25,7 @@
border: solid grey;
background-color: var(--terminal-color-background);
width: min(95%, 1024px);
height: 40em;
height: 20em;
overflow-x: hidden;
overflow-y: auto;
display: flex;
@ -36,7 +36,7 @@
margin: 0;
padding: 0;
font-family: monospace;
font-weight: bold;
/* font-weight: bold; */
white-space: pre-wrap;
/* word-break: break-all; */
color: var(--terminal-color-default);
@ -59,7 +59,7 @@
border: solid grey;
background-color: var(--terminal-color-background);
width: min(95%, 1024px);
height: 40em;
height: 20em;
overflow-x: hidden;
overflow-y: auto;
display: flex;
@ -70,7 +70,7 @@
margin: 0;
padding: 0;
font-family: monospace;
font-weight: bold;
/* font-weight: bold; */
white-space: pre-wrap;
/* word-break: break-all; */
color: var(--terminal-color-default);
@ -93,7 +93,7 @@
border: solid grey;
background-color: var(--terminal-color-background);
width: min(95%, 1024px);
height: 40em;
height: 20em;
overflow-x: hidden;
overflow-y: auto;
display: flex;
@ -104,7 +104,7 @@
margin: 0;
padding: 0;
font-family: monospace;
font-weight: bold;
/* font-weight: bold; */
white-space: pre-wrap;
/* word-break: break-all; */
color: var(--terminal-color-default);
@ -172,3 +172,7 @@
.TERM_FOREGROUND_7_INTENSE {
color: var(--terminal-color-7-intense);
}
.TERM_FOREGROUND_BOLD {
font-weight: bold;
}

View File

@ -18,7 +18,7 @@ function mindustry_init() {
// Connection opened
socket.addEventListener('open', function (event) {
socket.send('help');
socket.send('status');
});
// 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 += "&lt;"
}
else if(line[i] == '>') {
htmlline += "&gt;"
}
else if(line[i] == '&') {
htmlline += "&amp;"
}
else {
htmlline += line[i];
}
}
for(let i = 0; i < open_spans; i++) {
htmlline += "</span>";
}
return htmlline
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', mindustry_init);
} else {

View File

@ -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 += "&lt;"
}
else if(line[i] == '>') {
htmlline += "&gt;"
}
else if(line[i] == '&') {
htmlline += "&amp;"
}
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 += "&lt;"
}
else if(line[i] == '>') {
htmlline += "&gt;"
}
else if(line[i] == '&') {
htmlline += "&amp;"
}
else {
htmlline += line[i];
}
}
for(let i = 0; i < open_spans; i++) {
htmlline += "</span>";
}
return htmlline
}

View File

@ -18,72 +18,19 @@ function unvanguished_init() {
// Connection opened
socket.addEventListener('open', function (event) {
socket.send('help');
socket.send('/status');
});
// Listen for messages
socket.addEventListener('message', function (event) {
console.log(event);
const unvanguished_output = document.getElementById('unvanguished_output');
let line = document.createElement('p')
line.innerHTML = convertTerminalCodeToHtml(event.data);
line.innerHTML = convertDaemonedCodeToHtml(event.data);
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 += "&lt;"
}
else if(line[i] == '>') {
htmlline += "&gt;"
}
else if(line[i] == '&') {
htmlline += "&amp;"
}
else {
htmlline += line[i];
}
}
for(let i = 0; i < open_spans; i++) {
htmlline += "</span>";
}
return htmlline
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', unvanguished_init);
} else {

View File

@ -18,72 +18,18 @@ function xonotic_init() {
// Connection opened
socket.addEventListener('open', function (event) {
socket.send('help');
socket.send('/status');
});
// 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);
line.innerHTML = convertDaemonedCodeToHtml(event.data);
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 += "&lt;"
}
else if(line[i] == '>') {
htmlline += "&gt;"
}
else if(line[i] == '&') {
htmlline += "&amp;"
}
else {
htmlline += line[i];
}
}
for(let i = 0; i < open_spans; i++) {
htmlline += "</span>";
}
return htmlline
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', xonotic_init);
} else {