diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/chatbubble.jsx | 51 | ||||
| -rw-r--r-- | src/components/notes.jsx | 6 | ||||
| -rw-r--r-- | src/components/player.jsx | 20 | ||||
| -rw-r--r-- | src/components/sun.jsx | 7 |
4 files changed, 68 insertions, 16 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> ) } diff --git a/src/components/notes.jsx b/src/components/notes.jsx index 027cd10..5f57b7f 100644 --- a/src/components/notes.jsx +++ b/src/components/notes.jsx @@ -5,8 +5,8 @@ import { AppContext } from "../App"; export default function Notes() { const { messages } = useContext(AppContext); return (<> - {messages.map((chatbubble, index) => - <ChatBubble key={index} position={chatbubble.position} text={chatbubble.message}/> - )} + {messages.map((chatbubble) => { + return <ChatBubble key={chatbubble._id.$oid} id={chatbubble._id.$oid} position={chatbubble.position} text={chatbubble.message}/>; + })} </>); } diff --git a/src/components/player.jsx b/src/components/player.jsx index a9ddad0..f0c1e3e 100644 --- a/src/components/player.jsx +++ b/src/components/player.jsx @@ -11,7 +11,7 @@ const _movespeed = 3.0; export default function Player() { const controlsRef = useRef(); - const { keys, setMessages } = useContext(AppContext); + const { keys, setMessages, apiToken } = useContext(AppContext); const rapier = useRapier(); const controller = useRef(); const collider = useRef(); @@ -31,7 +31,19 @@ export default function Player() { if (intersect && intersect.object.name === 'ground' && intersect.distance < 10 && controlsRef.current.isLocked) { const message = prompt(); if (message) { - setMessages(messages => [...messages, { position: intersect.point, message: message}]); + let data = new FormData(); + data.append("position", JSON.stringify(intersect.point.toArray())); + data.append("message", message); + data.append("token", apiToken.current); + fetch('/api/new_message', { + method: "POST", + body: data, + }).then(() => { + fetch('/api/message').then((res) => res.json()).then((data) => { + console.log(data); + setMessages(data); + }); + }); } controlsRef.current.lock(); } @@ -47,7 +59,7 @@ export default function Player() { c.setApplyImpulsesToDynamicBodies(true); c.setCharacterMass(0.2); controller.current = c; - }, [rapier]); + }, []); useFrame((_, delta) => { const fov_axis = +(keys.current.includes('Minus')) - +(keys.current.includes('Equal')); @@ -95,7 +107,7 @@ export default function Player() { return ( <RigidBody type="kinematicPosition" colliders={false} ref={rigidbody} position={[0, 2, 0]}> - <PerspectiveCamera makeDefault position={[0, .9, 0]} ref={camera} fov={80}/> + <PerspectiveCamera makeDefault position={[0, .9, 0]} ref={camera} fov={80} /> <PointerLockControls ref={controlsRef} /> <CapsuleCollider ref={collider} args={[1, 0.5]} /> </RigidBody> diff --git a/src/components/sun.jsx b/src/components/sun.jsx index 455a065..fe0a79b 100644 --- a/src/components/sun.jsx +++ b/src/components/sun.jsx @@ -1,7 +1,6 @@ -import { Matrix4 } from 'three'; import * as everforest from '../_everforest.module.scss' -export default function Sun() { +export default function Sun({ref}) { return (<> <directionalLight position={[1000, 1000, 1000]} @@ -10,8 +9,8 @@ export default function Sun() { color={everforest.red} /> <ambientLight intensity={Math.PI / 4} /> - <mesh position={[1000,1000,1000]}> - <icosahedronGeometry args={[100,100]}/> + <mesh position={[1000,1000,1000]} ref={ref}> + <icosahedronGeometry args={[50,50]}/> <meshStandardMaterial color={everforest.red} emissive={everforest.red} emissiveIntensity={1} fog={false}/> </mesh> </>); |