Frontend: Command support, pronouns,changed font, added message if no stream

Cargo.lock

@@ -578,7 +578,7 @@ checksum = "320cfe77175da3a483efed4bc0adc1968ca050b098ce4f2f1c13a56626128790"
 
 [[package]]
 name = "lila-chat"
-version = "0.6.0"
+version = "0.6.1"
 dependencies = [
  "bincode",
  "chrono",

frontend/chat.css

@@ -1,9 +1,14 @@
 html {
     background: #F7A8B8;
     text-align: center;
-    font-family: "Lucida Console", "Courier New", monospace;
+    font-family: "Linotte", "Lucida Console", monospace;
 }
 
+@font-face {
+    font-family: Linotte;
+    src: url(LinotteRegular.otf);
+  }
+
 form {
     width: 100%;
     overflow:hidden;

frontend/chat.js

@@ -27,7 +27,7 @@ form.addEventListener("submit", async function (event) {
         localStorage.removeItem('username')
         form.reset()
     }
-
+    return formMessage;
 })
 
 //SEND MESSAGE FETCH FUNCTION
@@ -42,6 +42,7 @@ async function sendMessage() {
         body: JSON.stringify(sendMessageInfo),
     })
     form.reset()
+    modCommand()
 }
 
 
@@ -55,7 +56,17 @@ async function fetchMessages() {
     document.getElementById("chatbox").innerHTML = ""
 
     for (const message of recievedMessages) {
-        printText(message.user.bold().toString() + ": " + message.body.toString());
+
+        let leftBracket = '('
+        let rightBracket = ')'
+        let space = ' '
+
+        if (message.pronouns === '' || message.pronouns === 'none' || message.pronouns === null) {
+            leftBracket = ''
+            rightBracket = ''
+            space = ''
+        }
+        printText(message.user.bold().toString() + space + leftBracket.small() + message.pronouns.small().toString() + rightBracket.small() + ": " + message.body.toString());
     }
 
 
@@ -90,12 +101,48 @@ function loggedIn() {
 
 loggedIn()
 
+//MODERATION
+
+async function modCommand() {
+let action = ''
+let target = ''
+
+if (formMessage.startsWith('/ban')) {
+    action = "Ban"
+    target = formMessage.replace('/ban ', '')
+    sendCommand()
+} else if (formMessage.startsWith('/kick')) {
+    action = "Kick"
+    target = formMessage.replace('/kick ', '')
+    sendCommand()
+} else if (formMessage.startsWith('/promote')) {
+    action = "Promote"
+    target = formMessage.replace('/promote ', '')
+    sendCommand()
+} else if (formMessage.startsWith('/demote')) {
+    action = "Demote"
+    target = formMessage.replace('/demote ', '')
+    sendCommand()
+} else {
+    return;
+}
+
+async function sendCommand() {
+    let sendCommand = { "name": username, "action": action, "target": target }
+    const response = await fetch('/api/mod/', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(sendCommand),
+    });
+    if (response.status === 'ok') {
+        return;
+    } else {
+        printText('Error Issuing Command. Are you an Admin or Mod?')
+    }
+  }
+}
+
 
-//REVIECE USERS PRONOUNS
 
-async function getPronouns() {
-const response = await fetch(`api/users/${username}/`);
-const data = await response.json();
-pronouns = data.pronouns
-return pronouns;
-}

frontend/index.css

@@ -1,8 +1,13 @@
 html {
     background: #F7A8B8;
-    font-family: "Lucida Console", "Courier New", monospace;
+    font-family: "Linotte", "Lucida Console", monospace;
 }
 
+@font-face {
+    font-family: Linotte;
+    src: url(LinotteRegular.otf);
+  }
+
 a {
     color: black;
     font-weight: bold;
@@ -25,6 +30,8 @@ a {
     margin-left: -40%;
     margin-top: auto;
     margin-bottom: 20%;
+    font-size: 250%;
+    text-align: center;
 }
 
 #streamframe {

frontend/index.html

@@ -35,13 +35,30 @@
 
     </nav>
 
+    <script>
+        // Checking if the stream is down and displays a message if it is. 
+        async function isStreamDown() {
+
+            const response = await fetch(`https://cdn.chaos.stream/hls/src/maya.m3u8`);
+
+            if (response.status === 404) {
+                document.getElementById("streamframe").style.display = "none";
+                document.getElementById("stream").style.border = 'double'
+                document.getElementById("stream").innerHTML = 'Currently not streaming.'
+            }
+        }
+
+        window.onload = isStreamDown()
+    </script>
+
     <main>
 
         <section>
 
             <div id="streamchat">
                 <div id="stream">
-                    <iframe id="streamframe" src="https://live.on.chaos.stream/maya" title="mayas stream" scrolling="no"></iframe>
+                    <iframe id="streamframe" src="https://live.on.chaos.stream/maya" title="mayas stream"
+                        scrolling="no"></iframe>
                 </div>
 
                 <iframe id="chatbox" src="chat.html" title="chat box" scrolling="no"></iframe>