diff options
| author |  Silas Bartha <silas@exvacuum.dev> | 2025-02-11 19:28:40 -0500 |
|---|---|---|
| committer | Silas Bartha <silas@exvacuum.dev> | 2025-02-11 19:28:40 -0500 |
| commit | fb5a063276f18e3238b13577358e811aa5f9ee31 (patch) | |
| tree | 22d5968ff372649b076f9253a764d61f6ed77323 /src/components/chatbubble.jsx | |
| parent | 89b411863b452fdab9d2b4a0cfd0e9d79d991f72 (diff) | |
functionality implemented
Diffstat (limited to 'src/components/chatbubble.jsx')
| -rw-r--r-- | src/components/chatbubble.jsx | 51 |
1 files changed, 46 insertions, 5 deletions
diff --git a/src/components/chatbubble.jsx b/src/components/chatbubble.jsx index c85f026..01dc6e5 100644 --- a/src/components/chatbubble.jsx +++ b/src/components/chatbubble.jsx @@ -7,12 +7,12 @@ import { AppContext } from '../App'; import Color from 'color'; import { Vector3 } from 'three'; -export default function ChatBubble({ position, text }) { +export default function ChatBubble({ id, position, text }) { const meshRef = useRef(); const [hovered, setHovered] = useState(false); const [activatable, setActivatable] = useState(false); const [active, setActive] = useState(false); - const { keysPressed } = useContext(AppContext); + const { keysPressed, setMessages, apiToken } = useContext(AppContext); useFrame((state, delta) => { if (active) { meshRef.current.rotation.y += delta; @@ -22,7 +22,7 @@ export default function ChatBubble({ position, text }) { setActive(false); } } - if(hovered) { + if (hovered) { let cameraPos = new Vector3(); state.camera.getWorldPosition(cameraPos); setActivatable(cameraPos.distanceToSquared(meshRef.current.position) < 25); @@ -32,6 +32,47 @@ export default function ChatBubble({ position, text }) { if (keysPressed.current.includes('KeyE') && activatable) { setActive(!active); } + + if (keysPressed.current.includes('KeyX') && activatable) { + if (confirm("are you sure you want to delete this message?")) { + let data = new FormData(); + data.append("token", apiToken.current); + data.append("message_id", id); + fetch('/api/remove_message', { + method: 'DELETE', + body: data, + }).then((res) => { + if (res.status == 204) { + fetch('/api/message').then((res) => res.json()).then((data) => { + setMessages(data); + }); + } else if (res.status == 401) { + alert('you are not allowed to delete this') + } + }); + } + } + if(keysPressed.current.includes('KeyR') && activatable) { + const newMesssage = prompt(); + if(newMesssage) { + let data = new FormData(); + data.append("token", apiToken.current); + data.append("message_id", id); + data.append("message", newMesssage); + fetch('/api/edit_message', { + method: 'PUT', + body: data, + }).then((res) => { + if (res.status == 204) { + fetch('/api/message').then((res) => res.json()).then((data) => { + setMessages(data); + }); + } else if (res.status == 401) { + alert('you are not allowed to delete this') + } + }); + } + } }, -2); const { nodes } = useGLTF('../assets/message-bubble.glb'); @@ -47,8 +88,8 @@ export default function ChatBubble({ position, text }) { geometry={nodes.Curve.geometry} onPointerOver={(_) => setHovered(true)} onPointerOut={(_) => setHovered(false)}> - <meshStandardMaterial color={color.toString()}/> - {active && <Html center position={[0, .5, 0]} className='unselectable textPopup'><span>{text}</span></Html>} + <meshStandardMaterial color={color.toString()} /> + {active && <Html center unselectable='on' position={[0, .5, 0]} className='textPopup'><span>{text}</span></Html>} </mesh> ) } |