-
Mindustry
-
-
-
-
Unvanquished
-
-
-
-
Xonotic
-
-
-
+
Live stats
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 = '$ ' + 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 = '$ ' + 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 = '$ ' + 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();
-}