Merge pull request #1 from Console-buche/chore/clean-up-round

src/App.tsx

@@ -1,10 +1,10 @@
 import { useMachine } from '@xstate/react';
 import { button, useControls } from 'leva';
-import { Scene } from './components/gl/Scene';
 import { GameMachineProvider } from './hooks/use';
 import { gameMachine } from './machines/game.machine';
 
 import './style/App.css';
+import { Scene } from './components/gl/Scene/Scene';
 
 function App() {
   const [state, , service] = useMachine(gameMachine);

src/components/gl/Environment/DropSpots/DropSpots.tsx

@@ -1,7 +1,7 @@
-import { useId, useRef } from "react";
-import { Mesh, Vector3 } from "three";
-import { DropSpot } from "./DropSpot";
-import { DROPSPOT_SIZE, RING_SIZE, RING_WIDTH } from "./dropSpots.constants";
+import { useId, useRef } from 'react';
+import { Mesh, Vector3 } from 'three';
+import { DropSpot } from './DropSpot';
+import { DROPSPOT_SIZE, RING_SIZE, RING_WIDTH } from './dropSpots.constants';
 
 export const DropSpots = ({
   positions,
@@ -11,8 +11,6 @@ export const DropSpots = ({
     uuid: string;
   }[];
 }) => {
-  // const { isDragging, setIsDragging } = useContext(DraggingContext);
-  // TODO : get tex from type
   const refDropSpot = useRef<Mesh>(null);
   const uuid = useId();
 

src/components/gl/Environment/HotSpot/Bar.tsx

@@ -7,7 +7,7 @@ import { Hotspot } from './Hotspot';
 export const Bar = () => {
   const service = useInterpret(barMachine);
   const maxPersons = useSelector(service, (s) => s.context.maxPersons);
-  const { draggingActorRef } = useContext(DraggingContext); //TODO: degager ce contexte de mort
+  const { draggingActorRef } = useContext(DraggingContext); //TODO: degager ce contexte de mort XD
 
   return (
     <Hotspot

src/components/gl/Environment/HotSpot/Hotspot.tsx

@@ -1,28 +1,39 @@
 import type { MeshProps } from '@react-three/fiber';
-import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import {
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+} from 'react';
 import type { CircleGeometry, Mesh } from 'three';
 import { getPositionsOnCircle } from '../../../../helpers/getPositionOnCircle';
 import { DropSpots } from '../DropSpots/DropSpots';
 import { DROPSPOT_SIZE, RING_SIZE } from '../DropSpots/dropSpots.constants';
-import type { ActorRefFrom } from 'xstate';
-import type { personMachine } from '../../../../machines/person.machine';
+import {
+  type ReducerActionHotSpot,
+  type ReducerStateHotSpot,
+  hopSpotReducer,
+} from './hotSpot.reducer';
+import { DraggingContext } from '../../World/World';
 
 type HotSpotProps = {
   slotsAmount: number;
-  onDropHotspot: (person: ActorRefFrom<typeof personMachine>) => void;
+  onDropHotspot: () => void;
 } & MeshProps;
 
-// TODO : removing happens when person is dragged & dropped outside of the dropspot
 export const Hotspot = ({
-  slotsAmount,
   onDropHotspot,
+  slotsAmount,
   ...props
 }: HotSpotProps) => {
   const refHotSpotGeometry = useRef<CircleGeometry>(null);
   const refHotSpot = useRef<Mesh>(null);
   const [isHovered, setIsHovered] = useState(false);
 
-  // const { isDragging, draggingRef, draggingId } = useContext(DraggingContext);
+  const { isDragging, draggingRef } = useContext(DraggingContext);
   const uuid = useId();
   const isExists = useRef(false);
 
@@ -43,24 +54,58 @@ export const Hotspot = ({
           slotsAmount,
           i,
         ),
-        uuid: `${uuid}-${i}}`,
+        uuid,
       })),
-    [slotsAmount, uuid],
+    [],
   );
 
+  const [state, dispatch] = useReducer<
+    React.Reducer<ReducerStateHotSpot, ReducerActionHotSpot>
+  >(hopSpotReducer, {
+    personsIdsOnSpot: new Set(),
+    spotIdsAndAvailability: new Map([...positions].map((_, i) => [i, true])),
+  });
+
   return (
     <group position-y={-1.1}>
       <mesh
         onPointerEnter={() => setIsHovered(true)}
         onPointerLeave={() => setIsHovered(false)}
         ref={refHotSpot}
         uuid={uuid}
-        // onClick={() => onDropHotspot()}
+        onClick={() => {
+          onDropHotspot();
+
+          const availableSpotId = Array.from(
+            state.spotIdsAndAvailability.entries(),
+          ).find(([, isAvailable]) => isAvailable)?.[0];
+
+          dispatch({
+            type: 'ADD',
+            payload: {
+              uuid,
+              spotId: availableSpotId ?? 0, // FIXME : PERSONS shouldn't stack. If no available spot: do something.
+              isDragging,
+              onHotSpotDrop: () => {
+                const worldPosition = refHotSpot.current?.localToWorld(
+                  positions[availableSpotId ?? 0].pos.clone(),
+                );
+                if (!worldPosition) {
+                  return;
+                }
+                const newPos = worldPosition.clone().setY(0);
+                draggingRef?.position.set(...newPos.toArray());
+              },
+            },
+          });
+        }}
         onPointerDown={() => {}}
         {...props}
       >
         <circleBufferGeometry args={[RING_SIZE, 16]} ref={refHotSpotGeometry} />
         <meshBasicMaterial transparent opacity={0.3} color="black" />
+
+        {/* TODO : make dropspots visible/part of the UI/UX or just remove them from graphics */}
         {isHovered && <DropSpots positions={positions} />}
       </mesh>
     </group>

src/components/gl/Environment/HotSpot/Toilet.tsx

@@ -9,7 +9,6 @@ export const Toilet = () => {
   const { draggingActorRef } = useContext(DraggingContext);
   return (
     <Hotspot
-      type="battery"
       slotsAmount={5}
       position={[-6, 0, 7]}
       onDropHotspot={() =>

src/components/gl/Environment/HotSpot/hotSpot.reducer.ts

@@ -0,0 +1,51 @@
+export type ReducerStateHotSpot = {
+  personsIdsOnSpot: Set<string>;
+  spotIdsAndAvailability: Map<number, boolean>;
+};
+
+export type ReducerActionHotSpot =
+  | {
+      type: 'ADD';
+      payload: {
+        uuid: string;
+        isDragging: boolean;
+        onHotSpotDrop: () => void;
+        spotId: number;
+      };
+    }
+  | { type: 'REMOVE'; payload: string }; // TODO
+
+export function hopSpotReducer(
+  state: ReducerStateHotSpot,
+  action: ReducerActionHotSpot,
+): ReducerStateHotSpot {
+  let personsIdsOnSpot = new Set<string>();
+  let currentSpotIds = new Map();
+
+  switch (action.type) {
+    case 'ADD':
+      if (!action.payload.isDragging) {
+        return state;
+      }
+      personsIdsOnSpot = new Set(
+        ...state.personsIdsOnSpot,
+        action.payload.uuid,
+      );
+
+      currentSpotIds = new Map(state.spotIdsAndAvailability);
+      currentSpotIds.set(action.payload.spotId, false);
+
+      action.payload.onHotSpotDrop();
+      return {
+        personsIdsOnSpot,
+        spotIdsAndAvailability: currentSpotIds,
+      };
+
+    case 'REMOVE':
+      // TODO
+      return state;
+
+    default:
+      return state;
+  }
+}

src/components/gl/Person/Person.tsx

@@ -1,6 +1,7 @@
 import { a, useSpring } from '@react-spring/three';
 import { Html, useTexture } from '@react-three/drei';
 import { useFrame } from '@react-three/fiber';
+import { useSelector } from '@xstate/react';
 import { useControls } from 'leva';
 import { useContext, useEffect, useRef } from 'react';
 import {
@@ -16,9 +17,7 @@ import type { personMachine } from '../../../machines/person.machine';
 import { DraggingContext } from '../World/World';
 import { PersonShadowRecall } from './PersonShadowRecall';
 import { Statbar } from './Statbar';
-import { useSelector } from '@xstate/react';
-
-const PERSON_HEIGHT = 6;
+import { PERSON_HEIGHT } from './person.constants';
 
 export const Person = ({
   refFloor,
@@ -56,23 +55,24 @@ export const Person = ({
 
   const isBeingDragged = draggingId === serviceId;
 
-  // setup easings
+  // init easings
   const shadow = useSpring({
     opacity: isBeingDragged ? 0.9 : 0.1,
-    color: isBeingDragged ? '#FFA500' : 'grey', // orange to grey
+    color: isBeingDragged ? '#FFA500' : 'grey',
     scale: isBeingDragged
       ? ([1.25, 1.25, 1.25] as const)
       : ([0.75, 0.75, 0.75] as const),
   });
 
+  // position tick for the drag back shadow
   useEffect(() => {
     if (isBeingDragged && refGroup.current) {
       beforeDragPosition.current.copy(refGroup.current.position);
     }
   }, [isBeingDragged]);
 
+  // init position & transform offsets
   useEffect(() => {
-    // init position & transform offsets
     if (ref.current && refGroup.current && !isExists.current) {
       ref.current.geometry.translate(0, PERSON_HEIGHT * 0.5, 0);
       refGroup.current.position.copy(pos || new Vector3(0, 0, 30));
@@ -162,6 +162,8 @@ export const Person = ({
             color={shadow.color}
           />
         </a.mesh>
+
+        {/* Debug  */}
         {showActionButtons && (
           <Html>
             <button

src/components/gl/Person/PersonShadowRecall.tsx

@@ -14,7 +14,7 @@ export const PersonShadowRecall = ({
   // setup easings
   const shadow = useSpring({
     opacity: isBeingDragged ? 0.9 : 0,
-    color: isBeingDragged ? '#FFA500' : 'grey', // orange to grey
+    color: isBeingDragged ? '#FFA500' : 'grey',
     scale: isBeingDragged
       ? ([1.25, 1.25, 1.25] as const)
       : ([0.75, 0.75, 0.75] as const),
@@ -25,7 +25,7 @@ export const PersonShadowRecall = ({
       refShadowRecall.current.position.set(
         beforeDragPosition.x,
         -0.9,
-        beforeDragPosition.z
+        beforeDragPosition.z,
       );
     }
   }, [beforeDragPosition, isBeingDragged]);

src/components/gl/Person/Statbar.tsx

@@ -46,9 +46,6 @@ export const Statbar = ({ value, ...meshProps }: Statbar) => {
 
     ref.current.lookAt(camera.position);
 
-    // update stat
-
-    // TODO : add bounds + decrease on event only
     ref.current.material.uniforms.percent.value = MathUtils.lerp(
       ref.current.material.uniforms.percent.value,
       value / 100,

src/components/gl/Person/person.constants.ts

@@ -0,0 +1,2 @@
+// threejs constants
+export const PERSON_HEIGHT = 6;

src/components/gl/Scene/Scene.tsx

@@ -1,5 +1,5 @@
 import { Canvas } from '@react-three/fiber';
-import { World } from '../World';
+import { World } from '../World/World';
 
 export const Scene = () => {
   return (
@@ -8,8 +8,8 @@ export const Scene = () => {
       gl={{ alpha: true }}
       style={{ width: '100vw', height: '100vh' }}
     >
-      <color attach={'background'} args={['#ccc']} />
       <ambientLight />
+
       <World />
     </Canvas>
   );