Add geo rays chatroom

src/app/game/geometry-rays/chatroom/page.tsx

@@ -0,0 +1,114 @@
+'use client'
+
+import './styles.css'
+import { BackButton } from '@/components/BackButton'
+import { DiscordButton } from '@/components/DiscordButton'
+import axios from 'axios'
+import { useSearchParams } from 'next/navigation'
+import { useEffect, useRef, useState } from 'react'
+
+interface Message {
+  username: string
+  content: string
+}
+
+export default function GeometryRaysChatroom () {
+  const [messages, setMessages] = useState<Message[]>([])
+  const backButtonRef = useRef<HTMLAnchorElement>(null)
+  const params = useSearchParams()
+
+  const messagesDiv = useRef<HTMLDivElement>(null)
+
+  const refresh = async () => {
+    const request = await axios.get(
+      'https://georays-proxy.lncvrt.xyz/data/chat.txt'
+    )
+    const response = request.data as string
+
+    setMessages(
+      response
+        .trim()
+        .split('\n')
+        .filter(item => {
+          const [username, content] = item.split(': ')
+          return (
+            username &&
+            content &&
+            username.trim().length != 0 &&
+            content.trim().length != 0
+          )
+        })
+        .map(item => {
+          const [username, content] = item.split(': ')
+          return {
+            username,
+            content
+          }
+        })
+    )
+  }
+
+  useEffect(() => {
+    document.title = 'Lncvrt Games - Chatroom'
+
+    setTimeout(async () => await refresh(), 0)
+
+    const interval = setInterval(() => {
+      refresh()
+    }, 3000)
+
+    return () => {
+      clearInterval(interval)
+    }
+  }, [params])
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        backButtonRef.current?.click()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [])
+
+  useEffect(() => {
+    if (messagesDiv.current) {
+      messagesDiv.current.scrollTop = messagesDiv.current.scrollHeight
+    }
+  }, [messages])
+
+  return (
+    <div className='box'>
+      {!params.get('launcher') && (
+        <>
+          <BackButton href='/game/geometry-rays' refLink={backButtonRef} />
+          <DiscordButton />
+        </>
+      )}
+      <p className='px-8 mb-4 -mt-2 text-center text-2xl'>
+        Geometry Rays Chatroom
+      </p>
+      <>
+        <div
+          className='sub-box -m-4 mt-0 flex flex-col gap-2 max-h-[calc(100vh-204px)] overflow-y-auto'
+          ref={messagesDiv}
+        >
+          {messages.map((item, i) => {
+            return (
+              <div key={i} className='sub-box2 flex flex-row gap-1'>
+                <div>
+                  <p>{item.username}</p>
+                  <p className='w-240 max-w-[calc(100vw-136px)] truncate select-text'>
+                    {item.content}
+                  </p>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </>
+    </div>
+  )
+}

src/app/game/geometry-rays/chatroom/styles.css

@@ -0,0 +1,5 @@
+@import "tailwindcss";
+
+.actionbutton {
+  @apply absolute right-0 w-6 h-6 bg-(--col5) hover:bg-(--col7) rounded-full -mt-1.5 flex justify-center items-center cursor-pointer transition-colors;
+}

src/app/game/geometry-rays/page.tsx

@@ -73,7 +73,13 @@ export default function GeometryRaysGameInfo () {
           />
         </SwiperSlide>
       </Swiper>
-      <p className='text-2xl mt-4 mb-1'>Links</p>
+      <p className='text-2xl mt-4 mb-1'>Stuff you can do in the browser</p>
+      <div className='downloads'>
+        <Link draggable={false} href='/game/geometry-rays/chatroom'>
+          View the Chatroom!
+        </Link>
+      </div>
+      <p className='text-2xl mt-4 mb-1'>Other Links</p>
       <div className='downloads'>
         <Link
           draggable={false}