feat - entry names to person machines and add context debugs on hotspots

src/components/gl/Person/Person.tsx

@@ -1,5 +1,5 @@
 import { a, useSpring } from '@react-spring/three';
-import { Html, useCursor, useTexture } from '@react-three/drei';
+import { Html, Text, useCursor, useTexture } from '@react-three/drei';
 import { useFrame } from '@react-three/fiber';
 import { useSelector } from '@xstate/react';
 import { useControls } from 'leva';
@@ -88,10 +88,10 @@ export const Person = ({
   const tex = useTexture('assets/dudess.png');
   const serviceId = actor.id;
 
-  const { hype, pee, thirst } = useSelector(
-    actor,
-    (state) => state.context.meters,
-  );
+  const {
+    meters: { hype, pee, thirst },
+    name,
+  } = useSelector(actor, (state) => state.context);
 
   const isBeingDragged = draggingId === serviceId;
 
@@ -200,9 +200,13 @@ export const Person = ({
             emissiveMap={tex}
           />
         </a.mesh>
-        <Statbar position-y={6} value={thirst} />
-        <Statbar position-y={6.25} value={pee} />
-        <Statbar position-y={6.5} value={hype} />
+        <Statbar position-y={4} value={thirst} />
+        <Statbar position-y={4.25} value={pee} />
+        <Statbar position-y={4.5} value={hype} />
+
+        <Text fontSize={0.5} position-y={3} color="yellow">
+          {name}
+        </Text>
 
         {/* Debug  */}
         {showActionButtons && (

src/machines/person.constants.ts

@@ -0,0 +1,22 @@
+export const names = [
+  'Simbala',
+  'Plumbob',
+  'Llamanade',
+  'Gibberish',
+  'Wuhoo',
+  'BellaGoth',
+  'Simoleon',
+  'Woohookie',
+  'Simberly',
+  'Llamalette',
+  'Whippna',
+  'Simmette',
+  'BobNewbie',
+  'Zigaloo',
+  'SulSul',
+  'Freetushi',
+  'Vadish',
+  'Retgirb',
+  'Blahort',
+  'Graaable',
+];

src/machines/person.machine.ts

@@ -1,6 +1,6 @@
 import { MathUtils } from 'three';
-import { assign, createMachine, send } from 'xstate';
-import { sendTo } from 'xstate/lib/actions';
+import { assign, createMachine } from 'xstate';
+import { names } from './person.constants';
 
 const METERS_CONFIG = {
   thirst: {
@@ -35,6 +35,10 @@ export const personMachine = createMachine(
       'A person is a character in the game, with its needs and actions.',
     type: 'parallel',
     initial: 'actionFlow',
+    entry: assign((context) => ({
+      ...context,
+      name: names[Math.floor(Math.random() * names.length)],
+    })),
     context: {
       name: '',
       meters: {