fix - not fixed machine

src/components/gl/House/Appartment_v5.tsx

@@ -170,13 +170,13 @@ export const AppartmentV5 = forwardRef<
           material={materials['16_clean plaster texture-seamless.001']}
         />
 
-        <AppartmentHotspot
+        {/* <AppartmentHotspot
           geometry={nodes.sofa_2001.geometry}
           materials={materials.sofa_2}
           position={[-16.512, 0.613, 4.434]}
           scale={1.182}
           hotSpotMachine={barMachine}
-        />
+        /> */}
 
         <mesh
           geometry={nodes.closet_without_chair001.geometry}
@@ -205,10 +205,10 @@ export const AppartmentV5 = forwardRef<
         />
 
         <AppartmentHotspot
+          type="bar"
           geometry={nodes.bar001.geometry}
           materials={materials.bar}
           position={[8.725, 1.23, 7.158]}
-          hotSpotMachine={barMachine}
         />
 
         <mesh
@@ -305,7 +305,7 @@ export const AppartmentV5 = forwardRef<
           geometry={nodes.cheloupee.geometry}
           materials={materials.cheloupee}
           position={[54.192, 3.299, -2.056]}
-          hotSpotMachine={toiletMachine}
+          type="toilet"
         />
         <mesh geometry={nodes.sink.geometry} material={materials.sink} />
         <mesh

src/components/gl/House/HotSpots/AppartmentHotspot.tsx

@@ -1,23 +1,29 @@
 import { a, easings, useSpring } from '@react-spring/three';
 import { useCursor } from '@react-three/drei';
 import { type MeshProps } from '@react-three/fiber';
-import { useInterpret } from '@xstate/react';
+import { useSelector } from '@xstate/react';
 import { useRef, useState } from 'react';
 import { type Mesh } from 'three';
 import { shallow } from 'zustand/shallow';
+import { useGameMachineProvider } from '../../../../hooks/use';
 import { useStoreDragging } from '../../../../stores/storeDragging';
-import { AppartmentHotspotStats } from './AppartmentHotspotStats';
 import type { AppartmentHotSpot } from './types';
 
 export const AppartmentHotspot = ({
+  type,
   geometry,
-  hotSpotMachine,
   materials,
   ...props
 }: AppartmentHotSpot & MeshProps) => {
   const refMesh = useRef<Mesh>(null);
   const [isHovered, setIsHovered] = useState(false);
-  const service = useInterpret(hotSpotMachine);
+
+  const gameService = useGameMachineProvider();
+  const hotspotService = useSelector(
+    gameService,
+    (state) => state.context.hotspots.bar,
+  );
+
   useCursor(isHovered);
 
   const {
@@ -58,11 +64,13 @@ export const AppartmentHotspot = ({
     setIsDragging(false);
     setDraggingId(null);
 
-    draggingActorRef &&
-      service.send({
-        type: 'onAddPerson',
+    if (draggingActorRef) {
+      console.log(draggingActorRef);
+      hotspotService.send({
+        type: 'onRegisterPerson',
         person: draggingActorRef,
       });
+    }
   };
 
   const handleOnPointerEnter = () => {
@@ -91,10 +99,10 @@ export const AppartmentHotspot = ({
         material-emissiveMap={materials.map}
         name="hotspot"
       >
-        <AppartmentHotspotStats
-          service={service}
+        {/* <AppartmentHotspotStats
+          service={hotspotService}
           textPosition={[1.25, -2, 1]}
-        />
+        /> */}
       </a.mesh>
     </a.group>
   );

src/components/gl/House/HotSpots/AppartmentHotspotStats.tsx

@@ -1,11 +1,13 @@
 import { Text } from '@react-three/drei';
 import { useSelector } from '@xstate/react';
-import type { InterpreterFrom } from 'xstate';
+import type { ActorRefFrom, InterpreterFrom } from 'xstate';
 import type { hotspotMachine } from '../../../../machines/hotspot.machine';
 import type { MeshProps } from '@react-three/fiber';
+import type { barMachine } from '../../../../machines/bar.machine';
+import type { toiletMachine } from '../../../../machines/toilet.machine';
 
 type AppartmentHotspotStats = {
-  service: InterpreterFrom<typeof hotspotMachine>;
+  service: ActorRefFrom<typeof barMachine> | ActorRefFrom<typeof toiletMachine>;
   textPosition: MeshProps['position'];
 };
 

src/components/gl/House/HotSpots/types.ts

@@ -2,9 +2,10 @@ import type { BufferGeometry, MeshStandardMaterial } from 'three';
 import type {} from 'xstate';
 import type { toiletMachine } from '../../../../machines/toilet.machine';
 import type { barMachine } from '../../../../machines/bar.machine';
+import type { HotSpots } from '../../../../machines/game.machine';
 
 export type AppartmentHotSpot = {
   geometry: BufferGeometry;
   materials: MeshStandardMaterial;
-  hotSpotMachine: typeof barMachine | typeof toiletMachine;
+  type: keyof HotSpots;
 };

src/components/gl/Person/Person.tsx

@@ -96,10 +96,10 @@ export const Person = ({
   const isBeingDragged = draggingId === serviceId;
 
   // setup easings
-  const { hotspot } = useSelector(actor, (state) => state.context);
   const { glow, scale } = useSpring({
     glow: selectFeedbackIntensiry(isHovered, isBeingDragged),
-    scale: selectFeedbackScale(isBeingDragged, hotspot),
+    scale: 1,
+    // scale: selectFeedbackScale(isBeingDragged, hotspot),
   });
 
   // position tick for the drag back shadow
@@ -150,7 +150,6 @@ export const Person = ({
       setIsDragging(true);
       setDraggingRef(refGroup.current);
       setDraggingActorRef(actor);
-      actor.send({ type: 'onUnregisterHotspot' });
 
       if (refGroup.current) {
         setDraggingId(serviceId);

src/machines/game.machine.ts

@@ -33,6 +33,11 @@ const METERS_CONFIG = {
   },
 };
 
+export type HotSpots = {
+  bar: ActorRefFrom<typeof barMachine>;
+  toilet: ActorRefFrom<typeof toiletMachine>;
+};
+
 const disasterNames = ['onBlackout', 'onPolice', 'onFire'];
 
 export const gameMachine = createMachine(
@@ -164,10 +169,7 @@ export const gameMachine = createMachine(
     schema: {
       context: {} as {
         persons: ActorRefFrom<typeof personMachine>[];
-        hotspots: {
-          bar: ActorRefFrom<typeof barMachine>;
-          toilet: ActorRefFrom<typeof toiletMachine>;
-        };
+        hotspots: HotSpots;
         clock: number;
         currentNight: number;
         meters: {

src/machines/hotspot.machine.ts

@@ -30,17 +30,20 @@ export const hotspotMachine = createMachine(
     },
     on: {
       onRegisterPerson: {
-        cond: (context, event) => {
+        // cond: (context, event) => {
+        //   console.log(
+        //     'hotspot.onRegisterPerson - checking if the person is in the hotspot',
+        //   );
+        //   const hostpotIsFull = context.persons.length >= context.maxPersons;
+        //   const isAlreadyInHotspot = Boolean(
+        //     context.persons.find((p) => p.id === event.person.id),
+        //   );
+        //   return !isAlreadyInHotspot && !hostpotIsFull;
+        // },
+        actions: assign((context, event) => {
           console.log(
             'hotspot.onRegisterPerson - checking if the person is in the hotspot',
           );
-          const hostpotIsFull = context.persons.length >= context.maxPersons;
-          const isAlreadyInHotspot = Boolean(
-            context.persons.find((p) => p.id === event.person.id),
-          );
-          return !isAlreadyInHotspot && !hostpotIsFull;
-        },
-        actions: assign((context, event) => {
           return {
             ...context,
             persons: [...context.persons, event.person],