functionality implemented

6 files changed, 93 insertions, 25 deletions

diff --git a/src/App.jsx b/src/App.jsx
index 81436a8..fb72f6e 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,8 +6,10 @@ import Ground from './components/ground';
 import React, { Suspense, useContext, useEffect, useRef, useState } from 'react';
 import { Physics } from '@react-three/rapier';
 import Sun from './components/sun';
-import { Fog } from 'three';
 import * as everforest from './_everforest.module.scss'
+import { Bloom, EffectComposer, GodRays, LensFlare, Noise, Vignette } from '@react-three/postprocessing';
+import { AdditiveBlending } from 'three';
+import { useGLTF } from '@react-three/drei';
 
 export const AppContext = React.createContext(null);
 
@@ -21,6 +23,7 @@ function App() {
     const keys = useRef([]);
     const keysPressed = useRef([]);
     const [messages, setMessages] = useState();
+    const apiToken = useRef();
     const playerKeyDown = (event) => {
         if (!keys.current.includes(event.code)) {
             keysPressed.current.push(event.code);
@@ -39,23 +42,36 @@ function App() {
         };
     }, []);
     useEffect(() => {
+        const token = window.localStorage.getItem("token");
+        if (token == null) {
+            fetch('/api/gen_token').then((res) => res.json()).then((data) => {
+                window.localStorage.setItem("token", data.token);
+                apiToken.current = data.token;
+            });
+        } else {
+            console.log("setting token");
+            apiToken.current = token;
+        }
         fetch('/api/message').then((res) => res.json()).then((data) => {
             console.log(data);
             setMessages(data);
         });
-    }, []);
+    },[]);
+    useGLTF.preload('../assets/terrain.glb');
+    useGLTF.preload('../assets/message-bubble.glb');
     return (
         <>
             <div className='dot' />
             <p className='unselectable hint'>
-                E - read<br/>
-                LMB - write
+                E - read<br />
+                LMB - write<br />
+                X - delete
             </p>
-            <AppContext.Provider value={{ keys: keys, keysPressed: keysPressed, messages: messages, setMessages: setMessages }}>
+            <AppContext.Provider value={{ apiToken: apiToken, keys: keys, keysPressed: keysPressed, messages: messages, setMessages: setMessages }}>
                 <Canvas shadows>
                     <KeyPressedClearer />
                     <Suspense>
-                        <fog color={everforest.bg0} attach="fog" far={500}/>
+                        <fog color={everforest.bg0} attach="fog" far={500} />
                         <Sun />
                         <Notes />
                         <Physics timeStep={1 / 60}>
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>
     </>);
diff --git a/src/style.scss b/src/style.scss
index aaa420d..a9f597f 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -108,14 +108,14 @@ pre table {
 }
 
 .textPopup {
-  /* text-align: center; */
+  text-align: center;
   pointer-events: none;
   background-color: everforest.$bg1;
   color: everforest.$fg;
   border-radius: 5px;
   font-size: 15px;
-  width: 200px;
-  max-width: 50vw;
+  /* max-width: 25vw; */
+  width: 15em;
   padding: 5px;
 }