Add sending messages, and add support for the server sending edit/delete instructions

src/app/game/berry-dash/chatroom/page.tsx

@@ -3,6 +3,7 @@
 import { BackButton } from '@/app/components/BackButton'
 import { DiscordButton } from '@/app/components/DiscordButton'
 import { GetIconForUser } from '@/util/bd'
+import { getCookie } from '@/util/cookie'
 import axios from 'axios'
 import { useEffect, useRef, useState } from 'react'
 
@@ -34,14 +35,24 @@ interface CustomIconEntry {
 
 export default function BerryDashChatroom () {
   const [connected, setConnected] = useState<boolean>(false)
+  const [loggedIn, setLoggedIn] = useState<boolean>(false)
+  const [token, setToken] = useState<string | null>(null)
   const [messages, setMessages] = useState<Message[]>([])
   const [customIconCache, setCustomIconCache] = useState<CustomIconEntry[]>([])
   const [ws, setWs] = useState<WebSocket | null>(null)
+
   const messagesDiv = useRef<HTMLDivElement>(null)
+  const [input, setInput] = useState<string>('')
 
   useEffect(() => {
     document.title = 'Lncvrt Games - Chatroom'
 
+    const token = getCookie('accountToken', '-1')
+    if (token !== '-1') {
+      setLoggedIn(true)
+      setToken(token)
+    }
+
     const socket = new WebSocket('/api/ws')
 
     socket.onopen = () => {
@@ -63,6 +74,17 @@ export default function BerryDashChatroom () {
       } else if (message.for == 'upload:chatroom_message') {
         const msg = message.data as Message
         setMessages(prev => [...prev.slice(1), msg])
+      } else if (message.for == 'delete:chatroom_message') {
+        const msg = message.data.fillerMessage as Message
+        setMessages(prev => [msg, ...prev.slice(0, -1)])
+      } else if (message.for == 'edit:chatroom_message') {
+        setMessages(prev =>
+          prev.map(msg =>
+            msg.id === message.data.id
+              ? { ...msg, content: btoa(message.data.newContent) }
+              : msg
+          )
+        )
       }
     }
 
@@ -164,6 +186,40 @@ export default function BerryDashChatroom () {
               )
             })}
           </div>
+          {loggedIn ? (
+            <form
+              onSubmit={e => {
+                e.preventDefault()
+                setInput('')
+                ws?.send(
+                  JSON.stringify({
+                    type: 'upload',
+                    kind: 'chatroom_message',
+                    data: {
+                      content: input,
+                      auth: token
+                    },
+                    timestamp: Date.now()
+                  })
+                )
+              }}
+              className='flex flex-row gap-2 -mb-4 mt-6'
+            >
+              <input
+                type='text'
+                className='w-full -ml-4 text-center'
+                placeholder='Enter a message to send...'
+                maxLength={60}
+                value={input}
+                onChange={e => setInput(e.target.value)}
+              ></input>
+              <button className='-mr-4'>Send</button>
+            </form>
+          ) : (
+            <p className='text-center -mb-4 mt-6'>
+              You must be logged in to send messages
+            </p>
+          )}
         </>
       )}
       {!connected && (