Camera updates (#47)

* on create move camera to empty space, fix for camera scroll bounds

* get minz and maxz from the pebblestore

* add default values for pebblesExtent and remove unused settr

* fix bug when currentstory is null

---------

Co-authored-by: wdobry <[email protected]>

src/components/Hero/components/Camera.jsx

@@ -10,7 +10,8 @@ const CAMERA_OFFSET = [-12, 10, -12]
 const TARGET_OFFSET = [-2, 6, 4]
 
 export const Camera = () => {
-  const pebblesExtent = usePebblesStore((state) => state.pebblesExtent)
+  // this is an array [min, max]
+  const [minZ, maxZ] = usePebblesStore((state) => state.pebblesExtent)
   const cameraRef = useRef()
 
   const targetPositionRef = useRef(new THREE.Vector3(0, 8, 0))
@@ -28,7 +29,6 @@ export const Camera = () => {
 
   const selectedTarget = usePebblesStore((state) => state.selectedPebble)
   const hasStarted = usePebblesStore((state) => state.hasStarted)
-  const hasCreate = usePebblesStore((state) => state.hasCreate)
 
   const [signedPosition, setSignedPosition] = useState(1)
 
@@ -91,22 +91,24 @@ export const Camera = () => {
       window.removeEventListener('touchmove', handleTouchMove)
       window.removeEventListener('mousemove', handleMouseMove)
     }
-  })
+  }, [])
 
   const calculateSpeed = (delta, time) => {
     return THREE.MathUtils.clamp((delta / time) * 1000, -2, 2)
   }
 
   const cameraScroll = (delta) => {
+    // Calculate the potential new position
+    let potentialNewZ = targetPositionRef.current.z + scrollSpeedRef.current * delta * -50
+    // Clamp the new position to be within the min and max Z bounds
+    potentialNewZ = THREE.MathUtils.clamp(potentialNewZ, minZ - 48, maxZ - 48)
+    // Update the target position
+    targetPositionRef.current.z = potentialNewZ
+
     targetPositionRef.current.z += scrollSpeedRef.current * delta * -50
-    if (targetPositionRef.current.z > pebblesExtent[1].z) {
-      targetPositionRef.current.z = pebblesExtent[1].z
-    } else if (targetPositionRef.current.z < pebblesExtent[0].z) {
-      targetPositionRef.current.z = pebblesExtent[0].z
-    }
     targetLookAtRef.current.z += scrollSpeedRef.current * delta * -50
-
     scrollSpeedRef.current *= 1 - delta * 5
+
     if (Math.abs(scrollSpeedRef.current) < 0.01) {
       scrollSpeedRef.current = 0
     }
@@ -171,9 +173,8 @@ export const Camera = () => {
 
   useSafeFrame((_, delta) => {
     if (!cameraRef.current) return
-    if (hasCreate) {
-      cameraForward()
-    } else if (hasStarted) {
+
+    if (hasStarted) {
       if (selectedTarget) {
         cameraToTarget()
       } else {

src/components/Hero/store.js

@@ -32,8 +32,8 @@ export const createNewPebble = (userName, message, color, bioId, lastPositionX,
 
 export const usePebblesStore = create((set, get) => ({
   pebblesData: [],
-  pebblesExtent: [],
-  setPebblesEstent: (value) => set({ pebblesExtent: value }),
+  // default Z extents of the pebbles
+  pebblesExtent: [-100, 0],
   // UI STATES:
   hasStarted: false,
   hasCreate: false,

src/components/Hero/ui/ModalCreateNew.jsx

@@ -33,6 +33,7 @@ const ModalCreate = ({ withCarousel = false }) => {
   const createPebble = usePebblesStore((state) => state.createPebble)
   const setUserInteracted = usePebblesStore((state) => state.setUserInteracted)
   const setHasCreate = usePebblesStore((state) => state.setHasCreate)
+  const setSelected = usePebblesStore((state) => state.setSelected)
   const setHasDetails = usePebblesStore((state) => state.setHasDetails)
   const setShowConfirmationModal = usePebblesStore((state) => state.setShowConfirmationModal)
 
@@ -70,8 +71,6 @@ const ModalCreate = ({ withCarousel = false }) => {
 
     // If the prev postion was rejected, use the suggested position:
     if (retry && suggested_position) {
-      console.log('-------------------------retrying-------------------------')
-      console.log(suggested_position)
       positionX = parseFloat(suggested_position[0])
       positionZ = parseFloat(suggested_position[2])
     }
@@ -96,29 +95,45 @@ const ModalCreate = ({ withCarousel = false }) => {
       token,
       position: newPebbleData.position,
       rotation: newPebbleData.rotation,
-      scale: [1, 1, 1],
+      scale: newPebbleData.scale,
       color: PebbleColors[selectedColor],
     })
   }
 
   useEffect(() => {
+    let { positionX, positionZ } = usePebblesStore.getState().lastPebbleData
+    if(!currentStory) return
+    const previewPebble = createNewPebble(
+      createdBy,
+      message,
+      PebbleColors[selectedColor],
+      currentStory.slug,
+      positionX,
+      positionZ,
+    )
+
+    setSelected(previewPebble)
+
     if (status === 'success') {
       createPebble(newPebbleData)
       setUserInteracted(true)
+      setSelected(newPebbleData)
       // only direct interaction can set it to false
       // setHasCreate(false)
       setHasDetails(true)
     }
     console.log(status)
   }, [
     status,
-    createdBy,
-    currentStory,
     createPebble,
-    setUserInteracted,
-    setHasCreate,
-    setHasDetails,
+    createdBy,
+    currentStory?.slug,
+    message,
     newPebbleData,
+    selectedColor,
+    setHasDetails,
+    setSelected,
+    setUserInteracted,
   ])
 
   console.debug(
@@ -194,7 +209,6 @@ const ModalCreate = ({ withCarousel = false }) => {
             </button>
             <button
               className="btn btn-secondary btn-lg SearchField_inputSubmit"
-              disabled={!token}
               onClick={() => {
                 setHasCreate(false)
               }}

src/index.jsx

@@ -32,7 +32,7 @@ console.debug(
 // on slow devices
 // (e.g. iPhone 6)
 
-axios.get('/api/pebbles/extent').then((response) => {
+axios.get('/api/pebbles/extent-z').then((response) => {
   console.debug('[index] extent', response.data)
   const root = ReactDOM.createRoot(document.getElementById('root'))
   usePebblesStore.setState({ pebblesExtent: response.data })