lunastella/lilachat-frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Compare commits

base: lunastella:dc6120abb1567338330818dcbbc624c993f320a4
Branches Tags
lunastella:main
..
compare: lunastella:231de3a2571d7dbeeaa88401e438e163c20f9ff6
Branches Tags
lunastella:main

3 commits
dc6120abb1 ... 231de3a257

Author SHA1 Message Date
Luna
231de3a257 Orgasnized files 2021-07-26 15:23:13 -07:00
Luna
c59c46bcd5 Added a message if there is no stream and changed font 2021-07-26 15:02:41 -07:00
Luna
7c78c5572f Added command support 2021-07-26 15:02:20 -07:00
15 changed files with 106 additions and 85 deletions
Show stats Expand all files Collapse all files

7
chat.css → css/chat.css
View file

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

9
index.css → css/index.css
View file

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

0
style.css → css/style.css
View file

BIN
favicon.ico
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 30 KiB

55
favicon.svg
View file

@ -1,55 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="120"
height="120"
viewBox="0 0 31.75 31.75"
version="1.1"
id="svg5"
inkscape:version="1.1 (c4e8f9ed74, 2021-05-24)"
sodipodi:docname="favicon.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#505050"
bordercolor="#ffffff"
borderopacity="1"
inkscape:pageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="1"
inkscape:document-units="px"
showgrid="false"
inkscape:zoom="3.4731066"
inkscape:cx="53.698323"
inkscape:cy="76.732456"
inkscape:window-width="1900"
inkscape:window-height="986"
inkscape:window-x="10"
inkscape:window-y="10"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs2" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<circle
style="fill:none;fill-opacity:1;stroke:#f7a8b8;stroke-width:3.71222;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path846"
cx="15.874998"
cy="15.874998"
r="14.018888" />
<ellipse
style="fill:#f7a8b8;fill-opacity:1;stroke:none;stroke-width:1.85611;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="circle1164"
cx="15.875"
cy="15.875"
rx="7.0094452"
ry="7.0094447" />
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 1.6 KiB

6
chat.html → html/chat.html
View file

@ -7,7 +7,7 @@
<meta name="description" content="Maya's Stream Chat"> <meta name="description" content="Maya's Stream Chat">
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" href="chat.css"> <link rel="stylesheet" href="../html/chat.css">
<link rel="icon" href=""> <link rel="icon" href="">
</head> </head>
@ -34,8 +34,8 @@
<div id="errormessage"></div> <div id="errormessage"></div>
<script src="chat.js"></script> <script src="../js/chat.js"></script>
<script src="logout.js"></script> <script src="../js/logout.js"></script>
</body> </body>

6
login.html → html/login.html
View file

@ -7,8 +7,8 @@
<meta name="description" content="Chat Login"> <meta name="description" content="Chat Login">
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="../css/style.css">
<link rel="icon" href="/favicon.svg"> <link rel="icon" href="../assets/favicon.svg">
</head> </head>
<body> <body>
@ -27,7 +27,7 @@
</form> </form>
</div> </div>
<script src="login.js"></script> <script src="../js/login.js"></script>
<div id="errormessage"></div> <div id="errormessage"></div>

6
register.html → html/register.html
View file

@ -7,8 +7,8 @@
<meta name="description" content="Chat Register"> <meta name="description" content="Chat Register">
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="../css/style.css">
<link rel="icon" href="/favicon.svg"> <link rel="icon" href="../assets/favicon.svg">
</head> </head>
<h1>Register:</h1> <h1>Register:</h1>
@ -45,7 +45,7 @@
<div id="errormessage"></div> <div id="errormessage"></div>
<script src="register.js"></script> <script src="../js/register.js"></script>
</body> </body>
</html> </html>

6
updateinfo.html → html/updateinfo.html
View file

@ -7,8 +7,8 @@
<meta name="description" content="Chat Login Change"> <meta name="description" content="Chat Login Change">
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="../css/style.css">
<link rel="icon" href="/favicon.svg"> <link rel="icon" href="../assets/favicon.svg">
</head> </head>
<body> <body>
@ -53,7 +53,7 @@
</form> </form>
</div> </div>
<script src="updateinfo.js"></script> <script src="../js/updateinfo.js"></script>
<div id="errormessage"></div> <div id="errormessage"></div>
</body> </body>

31
index.html
View file

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
<link rel="icon" href="/favicon.svg"> <link rel="icon" href="asssets/favicon.svg">
</head> </head>
<body> <body>
@ -18,16 +18,16 @@
<li><a href="index.html"> <li><a href="index.html">
<div class="buttons">Stream</div> <div class="buttons">Stream</div>
</a></li> </a></li>
<li><a href="chat.html"> <li><a href="/html/chat.html">
<div class="buttons">Just Chat</div> <div class="buttons">Just Chat</div>
</a></li> </a></li>
<li><a href="register.html"> <li><a href="/html/register.html">
<div class="buttons">Register</div> <div class="buttons">Register</div>
</a></li> </a></li>
<li><a href="login.html"> <li><a href="/html/login.html">
<div class="buttons">Login</div> <div class="buttons">Login</div>
</a></li> </a></li>
<li><a href="updateinfo.html"> <li><a href="/html/updateinfo.html">
<div class="buttons">Update Info</div> <div class="buttons">Update Info</div>
</a></li> </a></li>
</ul> </ul>
@ -35,16 +35,33 @@
</nav> </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> <main>
<section> <section>
<div id="streamchat"> <div id="streamchat">
<div id="stream"> <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> </div>
<iframe id="chatbox" src="chat.html" title="chat box" scrolling="no"></iframe> <iframe id="chatbox" src="/html/chat.html" title="chat box" scrolling="no"></iframe>
</div> </div>

65
chat.js → js/chat.js
View file

@ -27,7 +27,7 @@ form.addEventListener("submit", async function (event) {
localStorage.removeItem('username') localStorage.removeItem('username')
form.reset() form.reset()
} }
return formMessage;
}) })
//SEND MESSAGE FETCH FUNCTION //SEND MESSAGE FETCH FUNCTION
@ -42,6 +42,7 @@ async function sendMessage() {
body: JSON.stringify(sendMessageInfo), body: JSON.stringify(sendMessageInfo),
}) })
form.reset() form.reset()
modCommand()
} }
@ -55,7 +56,17 @@ async function fetchMessages() {
document.getElementById("chatbox").innerHTML = "" document.getElementById("chatbox").innerHTML = ""
for (const message of recievedMessages) { 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() 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;
}

0
login.js → js/login.js
View file

0
logout.js → js/logout.js
View file

0
register.js → js/register.js
View file

0
updateinfo.js → js/updateinfo.js
View file