chore - begin experiment with stat values for placeholders

src/components/gl/House/Appartment_v4.tsx

@@ -153,11 +153,13 @@ export const AppartmentV4 = forwardRef<
           geometry={nodes.Cube002.geometry}
           material={materials['16_clean plaster texture-seamless.001']}
         />
-        <mesh
+        {/* TODO : THIS IS AN EXAMPLE, WE NEED REMAINING HOTSPOTS : A REST MACHINE, A FOOD MACHINE, AND A SOCIALISE MACHINE  */}
+        <AppartmentHotspot
           geometry={nodes.sofa_2001.geometry}
-          material={materials.sofa_2}
+          materials={materials.sofa_2}
           position={[-16.512, 0.613, 4.434]}
           scale={1.182}
+          hotSpotMachine={barMachine}
         />
         <mesh
           geometry={nodes.closet_without_chair001.geometry}
@@ -183,14 +185,12 @@ export const AppartmentV4 = forwardRef<
           geometry={nodes.plant_1001.geometry}
           material={materials['plant_1.001']}
         />
-
         <AppartmentHotspot
           geometry={nodes.bar001.geometry}
           materials={materials.bar}
           position={[8.725, 1.23, 7.158]}
           hotSpotMachine={barMachine}
         />
-
         <mesh
           geometry={nodes.graffitti_party.geometry}
           material={materials.graffitti_party}
@@ -279,7 +279,6 @@ export const AppartmentV4 = forwardRef<
             materials['38_black and white marble tile texture-seamless']
           }
         />
-
         <AppartmentHotspot
           geometry={nodes.cheloupee.geometry}
           materials={materials.cheloupee}

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

@@ -3,10 +3,11 @@ import { Text, useCursor } from '@react-three/drei';
 import { type MeshProps } from '@react-three/fiber';
 import { useInterpret, useSelector } from '@xstate/react';
 import { useRef, useState } from 'react';
-import type { Mesh } from 'three';
+import { Vector3, type Mesh } from 'three';
 import { shallow } from 'zustand/shallow';
 import { useStoreDragging } from '../../../../stores/storeDragging';
 import type { AppartmentHotSpot } from './types';
+import { AppartmentHotspotStats } from './AppartmentHotspotStats';
 
 export const AppartmentHotspot = ({
   geometry,
@@ -19,8 +20,6 @@ export const AppartmentHotspot = ({
   const service = useInterpret(hotSpotMachine);
   useCursor(isHovered);
 
-  const { persons } = useSelector(service, (s) => s.context);
-
   const {
     setIsDragging,
     isDragging,
@@ -92,9 +91,10 @@ export const AppartmentHotspot = ({
         material-emissiveMap={materials.map}
         name="hotspot"
       >
-        <Text color="blue" position-y={6} fontSize={5}>
-          {persons.length}
-        </Text>
+        <AppartmentHotspotStats
+          service={service}
+          textPosition={[1.25, -2, 1]}
+        />
       </a.mesh>
     </a.group>
   );

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

@@ -0,0 +1,29 @@
+import { Text } from '@react-three/drei';
+import { useSelector } from '@xstate/react';
+import type { InterpreterFrom } from 'xstate';
+import type { hotspotMachine } from '../../../../machines/hotspot.machine';
+import type { MeshProps } from '@react-three/fiber';
+
+type AppartmentHotspotStats = {
+  service: InterpreterFrom<typeof hotspotMachine>;
+  textPosition: MeshProps['position'];
+};
+
+export const AppartmentHotspotStats = ({
+  service,
+  textPosition,
+}: AppartmentHotspotStats) => {
+  const { persons, maxPersons } = useSelector(service, (s) => s.context);
+
+  return (
+    <Text position={textPosition} fontSize={0.7}>
+      {persons.length}/{maxPersons}
+      <meshStandardMaterial
+        color="white"
+        emissive={0xffffff}
+        emissiveIntensity={2}
+        toneMapped={false}
+      />
+    </Text>
+  );
+};

src/components/gl/World/World.tsx

@@ -16,8 +16,6 @@ export const World = () => {
     <>
       <Cam />
 
-      {/* <AppartmentModelv3 ref={refFloor} position-y={-0.5} /> */}
-
       <AppartmentV4 ref={refFloor} position-y={-0.5} />
 
       <Suspense fallback={null}>