diff --git a/src/app/game/berry-dash/chatroom/page.tsx b/src/app/game/berry-dash/chatroom/page.tsx index a83b151..bfd6f8d 100644 --- a/src/app/game/berry-dash/chatroom/page.tsx +++ b/src/app/game/berry-dash/chatroom/page.tsx @@ -1,9 +1,13 @@ 'use client' +import './styles.css' import { BackButton } from '@/app/components/BackButton' import { DiscordButton } from '@/app/components/DiscordButton' import { GetIconForUser } from '@/util/bd' import { getCookie } from '@/util/cookie' +import { faTrashCan } from '@fortawesome/free-regular-svg-icons' +import { faPencil } from '@fortawesome/free-solid-svg-icons' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import axios from 'axios' import { useEffect, useRef, useState } from 'react' @@ -37,6 +41,7 @@ interface CustomIconEntry { export default function BerryDashChatroom () { const [connected, setConnected] = useState(false) const [loggedIn, setLoggedIn] = useState(false) + const [editing, setEditing] = useState(false) const [token, setToken] = useState(null) const [messages, setMessages] = useState([]) const [customIconCache, setCustomIconCache] = useState([]) @@ -178,43 +183,55 @@ export default function BerryDashChatroom () { height={48} >
-

{item.username}

-

{ - if ( - Number(getCookie('accountId', '-1')) == item.userId - ) { - setMessages(prev => - prev.map(msg => - msg.id === item.id - ? { - ...msg, - editing: !item.editing - } - : msg + {item.userId == Number(getCookie('accountId', '-1')) && ( +

+
{ + setMessages(prev => + prev.map(msg => + msg.id === item.id + ? { + ...msg, + editing: !item.editing + } + : msg + ) ) - ) - if (item.editing) { - const text = e.currentTarget.textContent - e.currentTarget.textContent = atob(item.content) + setEditing(true) + setInput(atob(item.content)) + }} + > + +
+
{ ws?.send( JSON.stringify({ - type: 'edit', + type: 'delete', kind: 'chatroom_message', data: { id: item.id, - newContent: text, auth: token }, timestamp: Date.now() }) ) - } - } - }} - > + }} + > + +
+
+ )} +

{item.username}

+

{atob(item.content)}

@@ -227,29 +244,58 @@ export default function BerryDashChatroom () { onSubmit={e => { e.preventDefault() setInput('') - ws?.send( - JSON.stringify({ - type: 'upload', - kind: 'chatroom_message', - data: { - content: input, - auth: token - }, - timestamp: Date.now() - }) - ) + if (!editing) { + ws?.send( + JSON.stringify({ + type: 'upload', + kind: 'chatroom_message', + data: { + content: input, + auth: token + }, + timestamp: Date.now() + }) + ) + } else { + const id = messages.find(item => item.editing === true)?.id + setMessages(prev => + prev.map(msg => + msg.id === id + ? { + ...msg, + editing: false + } + : msg + ) + ) + setEditing(false) + ws?.send( + JSON.stringify({ + type: 'edit', + kind: 'chatroom_message', + data: { + id, + newContent: input, + auth: token + }, + timestamp: Date.now() + }) + ) + } }} className='flex flex-row gap-2 -mb-4 mt-6' > setInput(e.target.value)} > - + ) : (

diff --git a/src/app/game/berry-dash/chatroom/styles.css b/src/app/game/berry-dash/chatroom/styles.css new file mode 100644 index 0000000..6fe958d --- /dev/null +++ b/src/app/game/berry-dash/chatroom/styles.css @@ -0,0 +1,5 @@ +@import "tailwindcss"; + +.actionbutton { + @apply absolute right-0 w-6 h-6 bg-(--col6) hover:bg-(--col8) rounded-full -mt-1.5 flex justify-center items-center cursor-pointer transition-colors; +}