From b3a2deed6c435a14c1a15a0a81e4483f482874c0 Mon Sep 17 00:00:00 2001
From: DeathByDenim <jarno@jarno.ca>
Date: Sat, 26 Feb 2022 18:07:54 -0500
Subject: [PATCH] Consolidate server console sessions

---
 website/admin.html         | 24 +----------
 website/css/terminal.css   | 83 +++++---------------------------------
 website/js/consoles.js     | 74 +++++++++++++++++++++++++++++++++
 website/js/mindustry.js    | 41 -------------------
 website/js/unvanquished.js | 41 -------------------
 website/js/xonotic.js      | 41 -------------------
 6 files changed, 85 insertions(+), 219 deletions(-)
 create mode 100644 website/js/consoles.js
 delete mode 100644 website/js/mindustry.js
 delete mode 100644 website/js/unvanquished.js
 delete mode 100644 website/js/xonotic.js
diff --git a/website/admin.html b/website/admin.html
index 2e26795..5c8ec27 100644
--- a/website/admin.html
+++ b/website/admin.html
@@ -8,11 +8,9 @@
     <link rel="stylesheet" href="css/terminal.css">
     <link rel="icon" href="icon.svg" sizes="any" type="image/svg+xml">
     <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="js/serverstats.js" charset="utf-8"></script>
+    <script src="js/consoles.js" charset="utf-8"></script>
   </head>
   <body>
     <nav class="container">
@@ -34,25 +32,7 @@
 
     <div class="container">
       <div class="row">
-        <div class="col-md-8">
-          <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 class="col-md-8" id="console-div">
         </div>
         <div class="col-6 col-md-4">
           <h5>Live stats</h5>
diff --git a/website/css/terminal.css b/website/css/terminal.css
index 53e94d0..c0a5799 100644
--- a/website/css/terminal.css
+++ b/website/css/terminal.css
@@ -21,7 +21,7 @@
   --terminal-color-background: rgb(30,34,41);
 }
 
-#mindustry_output {
+.console_output {
   border: solid grey;
   background-color: var(--terminal-color-background);
   width: min(95%, 1024px);
@@ -32,90 +32,25 @@
   flex-direction: column-reverse;
 }
 
-#mindustry_output p {
+.console_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;
 }
 
-#mindustry_command {
+.user_input::before {
+  content: '$ ';
+  color: var(--terminal-color-7-intense);
+}
+
+.console_command {
   width: calc(min(95%, 1024px) - 10em);
 }
 
-#mindustry_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 {
+.console_submit {
   width: 10em;
   padding: 0;
   margin: 0;
diff --git a/website/js/consoles.js b/website/js/consoles.js
new file mode 100644
index 0000000..e96c863
--- /dev/null
+++ b/website/js/consoles.js
@@ -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();
+}
diff --git a/website/js/mindustry.js b/website/js/mindustry.js
deleted file mode 100644
index 1a0675e..0000000
--- a/website/js/mindustry.js
+++ /dev/null
@@ -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();
-}
diff --git a/website/js/unvanquished.js b/website/js/unvanquished.js
deleted file mode 100644
index 1d45e19..0000000
--- a/website/js/unvanquished.js
+++ /dev/null
@@ -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();
-}
diff --git a/website/js/xonotic.js b/website/js/xonotic.js
deleted file mode 100644
index 532a2dd..0000000
--- a/website/js/xonotic.js
+++ /dev/null
@@ -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();
-}
