1 files changed, 13 insertions, 10 deletions
diff --git a/src/components/chatbubble.jsx b/src/components/chatbubble.jsx
index a1ef114..c85f026 100644
--- a/src/components/chatbubble.jsx
+++ b/src/components/chatbubble.jsx
@@ -1,7 +1,7 @@
 import { useContext, useRef, useState } from 'react'
 import * as everforest from '../_everforest.module.scss'
 import { useGLTF } from '@react-three/drei';
-import { useFrame, useThree } from '@react-three/fiber';
+import { useFrame } from '@react-three/fiber';
 import { Html } from '@react-three/drei';
 import { AppContext } from '../App';
 import Color from 'color';
@@ -13,25 +13,29 @@ export default function ChatBubble({ position, text }) {
     const [activatable, setActivatable] = useState(false);
     const [active, setActive] = useState(false);
     const { keysPressed } = useContext(AppContext);
-    const { camera } = useThree();
-    useFrame((_, delta) => {
+    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();
-            camera.getWorldPosition(cameraPos);
-            setActivatable(cameraPos.distanceToSquared(meshRef.current.position) < 9);
+            state.camera.getWorldPosition(cameraPos);
+            setActivatable(cameraPos.distanceToSquared(meshRef.current.position) < 25);
         } else {
             setActivatable(false);
         }
-        if (keysPressed.includes('KeyE') && activatable) {
+        if (keysPressed.current.includes('KeyE') && activatable) {
             setActive(!active);
         }
-    });
+    }, -2);
     const { nodes } = useGLTF('../assets/message-bubble.glb');
 
-    let color = Color(active ? everforest.blue : everforest.orange);
+    let color = Color(active ? everforest.blue : everforest.purple);
     if (activatable) {
         color = color.lighten(.1);
     }
@@ -41,10 +45,9 @@ export default function ChatBubble({ position, text }) {
             ref={meshRef}
             scale={active ? 3 : 2}
             geometry={nodes.Curve.geometry}
-            castShadow
             onPointerOver={(_) => setHovered(true)}
             onPointerOut={(_) => setHovered(false)}>
-            <meshStandardMaterial color={color.toString()} />
+            <meshStandardMaterial color={color.toString()}/>
             {active && <Html center position={[0, .5, 0]} className='unselectable textPopup'><span>{text}</span></Html>}
         </mesh>
     )