Lncvrt-Games/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add editing/deleting properly

Browse Source
This commit is contained in:
Lncvrt
2026-02-01 19:46:54 -07:00
parent b73054c4b3
commit 60cae052e2
2 changed files with 90 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
src/app/game/berry-dash/chatroom/page.tsx
View File

@@ -1,9 +1,13 @@
'use client' 'use client'
import './styles.css'
import { BackButton } from '@/app/components/BackButton' import { BackButton } from '@/app/components/BackButton'
import { DiscordButton } from '@/app/components/DiscordButton' import { DiscordButton } from '@/app/components/DiscordButton'
import { GetIconForUser } from '@/util/bd' import { GetIconForUser } from '@/util/bd'
import { getCookie } from '@/util/cookie' 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 axios from 'axios'
import { useEffect, useRef, useState } from 'react' import { useEffect, useRef, useState } from 'react'
@@ -37,6 +41,7 @@ interface CustomIconEntry {
export default function BerryDashChatroom () { export default function BerryDashChatroom () {
const [connected, setConnected] = useState<boolean>(false) const [connected, setConnected] = useState<boolean>(false)
const [loggedIn, setLoggedIn] = useState<boolean>(false) const [loggedIn, setLoggedIn] = useState<boolean>(false)
const [editing, setEditing] = useState<boolean>(false)
const [token, setToken] = useState<string | null>(null) const [token, setToken] = useState<string | null>(null)
const [messages, setMessages] = useState<Message[]>([]) const [messages, setMessages] = useState<Message[]>([])
const [customIconCache, setCustomIconCache] = useState<CustomIconEntry[]>([]) const [customIconCache, setCustomIconCache] = useState<CustomIconEntry[]>([])
@@ -178,43 +183,55 @@ export default function BerryDashChatroom () {
height={48} height={48}
></img> ></img>
<div> <div>
<p>{item.username}</p> {item.userId == Number(getCookie('accountId', '-1')) && (
<p <div className='relative'>
className='w-240 max-w-[calc(100vw-136px)] truncate select-text' <div
contentEditable={item.editing} className='actionbutton mr-5'
onDoubleClick={e => { onClick={() => {
if ( setMessages(prev =>
Number(getCookie('accountId', '-1')) == item.userId prev.map(msg =>
) { msg.id === item.id
setMessages(prev => ? {
prev.map(msg => ...msg,
msg.id === item.id editing: !item.editing
? { }
...msg, : msg
editing: !item.editing )
}
: msg
) )
) setEditing(true)
if (item.editing) { setInput(atob(item.content))
const text = e.currentTarget.textContent }}
e.currentTarget.textContent = atob(item.content) >
<FontAwesomeIcon
icon={faPencil}
className='text-[12px]'
/>
</div>
<div
className='actionbutton -mr-1.5'
onClick={() => {
ws?.send( ws?.send(
JSON.stringify({ JSON.stringify({
type: 'edit', type: 'delete',
kind: 'chatroom_message', kind: 'chatroom_message',
data: { data: {
id: item.id, id: item.id,
newContent: text,
auth: token auth: token
}, },
timestamp: Date.now() timestamp: Date.now()
}) })
) )
} }}
} >
}} <FontAwesomeIcon
> icon={faTrashCan}
className='text-[12px] text-red-500'
/>
</div>
</div>
)}
<p>{item.username}</p>
<p className='w-240 max-w-[calc(100vw-136px)] truncate select-text'>
{atob(item.content)} {atob(item.content)}
</p> </p>
</div> </div>
@@ -227,29 +244,58 @@ export default function BerryDashChatroom () {
onSubmit={e => { onSubmit={e => {
e.preventDefault() e.preventDefault()
setInput('') setInput('')
ws?.send( if (!editing) {
JSON.stringify({ ws?.send(
type: 'upload', JSON.stringify({
kind: 'chatroom_message', type: 'upload',
data: { kind: 'chatroom_message',
content: input, data: {
auth: token content: input,
}, auth: token
timestamp: Date.now() },
}) 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' className='flex flex-row gap-2 -mb-4 mt-6'
> >
<input <input
type='text' type='text'
className='w-full -ml-4 text-center' className='w-full -ml-4 text-center'
placeholder='Enter a message to send...' placeholder={
!editing ? 'Enter a message to send...' : undefined
}
maxLength={60} maxLength={60}
value={input} value={input}
onChange={e => setInput(e.target.value)} onChange={e => setInput(e.target.value)}
></input> ></input>
<button className='-mr-4'>Send</button> <button className='-mr-4'>{!editing ? 'Send' : 'Edit'}</button>
</form> </form>
) : ( ) : (
<p className='text-center -mb-4 mt-6'> <p className='text-center -mb-4 mt-6'>

5
src/app/game/berry-dash/chatroom/styles.css Normal file
View File

@@ -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;
}