1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
import { useContext, useRef, useState } from 'react'
import * as everforest from '../_everforest.module.scss'
import { useGLTF } from '@react-three/drei';
import { useFrame } from '@react-three/fiber';
import { Html } from '@react-three/drei';
import { AppContext } from '../App';
import Color from 'color';
import { Vector3 } from 'three';
import messageBubbleModelURL from '../assets/message-bubble.glb';
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, setMessages, apiToken } = useContext(AppContext);
useFrame((state, delta) => {
if (active) {
meshRef.current.rotation.y += delta;
let cameraPos = new Vector3();
state.camera.getWorldPosition(cameraPos);
if (cameraPos.distanceToSquared(meshRef.current.position) > 900) {
setActive(false);
}
}
if (hovered) {
let cameraPos = new Vector3();
state.camera.getWorldPosition(cameraPos);
setActivatable(cameraPos.distanceToSquared(meshRef.current.position) < 25);
} else {
setActivatable(false);
}
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("edit message");
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 edit this')
}
});
}
}
}, -2);
const { nodes } = useGLTF(messageBubbleModelURL);
let color = Color(active ? everforest.blue : everforest.purple);
if (activatable) {
color = color.lighten(.1);
}
return (
<mesh
position={position}
ref={meshRef}
scale={active ? 3 : 2}
geometry={nodes.Curve.geometry}
onPointerOver={(_) => setHovered(true)}
onPointerOut={(_) => setHovered(false)}>
<meshStandardMaterial color={color.toString()} />
{active && <Html center unselectable='on' position={[0, .5, 0]} className='textPopup'><span>{text}</span></Html>}
</mesh>
)
}
|
