Browse Source

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

main
Luna 3 months ago
parent
commit
eb6bec830e
  1. 2
      Cargo.lock
  2. BIN
      frontend/LinotteRegular.otf
  3. 7
      frontend/chat.css
  4. 65
      frontend/chat.js
  5. 9
      frontend/index.css
  6. 19
      frontend/index.html

2
Cargo.lock

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

BIN
frontend/LinotteRegular.otf

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

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

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

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

Loading…
Cancel
Save