Added chat

src/routes/+layout.svelte

@@ -47,6 +47,7 @@
     export let data;
 
     import Header from '$lib/components/Header.svelte';
+
 </script>
 
 <div id='content'>

src/routes/chat/[chat]/+page.js

@@ -0,0 +1,11 @@
+import { redirect } from '@sveltejs/kit';
+
+/** @type {import('./$types').PageLoad} */
+export async function load({ fetch, params, url }) {
+
+    var id = params.chat;
+
+    const token = await fetch(`/api/token`).then(x => x.json());
+
+    return {id, token: token.token};
+}

src/routes/chat/[chat]/+page.svelte

@@ -0,0 +1,100 @@
+<script>
+    import { io } from 'socket.io-client'
+    import PostBody from '$lib/components/PostBody.svelte';
+
+    /** @type {import('./$types').PageData} */
+    export let data;
+
+    let id = data.id;
+    let messages = [];
+    let input;
+
+    const socket = io();
+
+    socket.emit('join',id);
+
+    function scroll() {
+        setTimeout(function() {
+            input.lastChild.scrollIntoView()
+        },200);
+    }
+
+    socket.on('load', (message) => {
+        messages = message;
+        scroll();
+    })
+
+    socket.on('chat', (message) => {
+        messages = [...messages, message];
+        scroll();
+    })
+
+    function inputHandler(e) {
+        if(e.key == "Enter" && !e.shiftKey) {
+            socket.emit('chat',e.target.textContent, id, data.token)
+            e.preventDefault();
+            e.target.innerText = '';
+
+        }
+    }
+</script>
+
+<style>
+    #mainChat {
+        height: calc(100% - 160px);
+        width: calc(100vw - 30px);
+        padding: 15px;
+        overflow: auto;
+    }
+
+    #mainInput {
+        height: 40px;
+        width: calc(100vw - 30px);
+        padding: 15px;
+
+        background: var(--dark-2);
+    }
+
+    #header {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+
+    img {
+        max-width: 250px;
+    }
+
+    .pfp {
+        width: 50px;
+        height: 50px;
+        margin-right: 10px;
+        border-radius: 100%;
+    }
+
+    .date {
+        font-size: 0.8rem;
+        font-style: italic;
+        font-weight: normal;
+        margin-left: 0.5rem;
+    }
+</style>
+
+<div id='mainChat' bind:this={input}>
+    {#each messages as message}
+        <div class='message'>
+            <div id='header'>
+                <img class='pfp' src='/img/pfp/{message.username}.png'/>
+                <div><a href='/users/{message.username}'>
+                    {message.username}
+                </a></div>
+                <div class='date'>
+                    {(new Date(message.time / 1000) + '').split('GMT')[0]}
+                </div>
+            </div>
+            <PostBody content={message.content}></PostBody>
+        </div>
+    {/each}
+</div>
+
+<div id="mainInput" contenteditable="" autocomplete="off"  on:keydown={inputHandler}></div>

src/routes/new_post/+page.svelte

@@ -90,6 +90,9 @@
         <p>
             <b>#post</b> replies to a post by ID
         </p>
+        <p>
+            <b>%chat</b> links to a chatroom
+        </p>
         <p>
             <b>*x*</b> produces italic text
         </p>