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> <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>

View File

@ -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;
}

View File

@ -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 += "&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') { if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', mindustry_init); document.addEventListener('DOMContentLoaded', mindustry_init);
} else { } 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 // 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 += "&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') { if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', unvanguished_init); document.addEventListener('DOMContentLoaded', unvanguished_init);
} else { } else {

View File

@ -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 += "&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') { if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', xonotic_init); document.addEventListener('DOMContentLoaded', xonotic_init);
} else { } else {