Dwarf details panel: click dwarf to see needs, skills, current job, and thoughts

Answer:

To implement the dwarf details side panel, follow these steps:

1. Create new components:

   • Create a new file src/ui/DwarfPanel.tsx for the DwarfPanel component.
   • Create a new file tests/ui/DwarfPanel.test.tsx for testing the DwarfPanel component.

2. Implement DwarfPanel:

   • In src/ui/DwarfPanel.tsx, create a functional component called DwarfPanel.
   • Use props to receive the selected dwarf data.
   • Render the dwarf name, current AI state, needs bars, skills list, current job description, active labors, mood indicator, and recent thoughts.

3. Implement rendering and event handling:

   • Use React hooks to handle clicking a dwarf entity and opening the DwarfPanel.
   • Implement functionality to switch to another dwarf when a new one is clicked while the panel is open.
   • Add an escape key or X button to close the panel.

4. Test DwarfPanel:

   • Render the DwarfPanel with mock dwarf data and assert all fields are present.
   • Check that the hunger bar is red when the hunger need is at 0.2.
   • Assert that toggling a labor checkbox updates the dwarf entity's labor bitmask.
   • Assert that only the five most recent thoughts are shown when there are six in the log.

5. Dependencies:

   • Depends on #41 (dwarf components) for access to dwarf data.
   • Depends on #54 (mood) to display mood indicators.
   • Depends on #43 (AI states) for current AI state information.
   • Depends on #5 (renderer) for click detection and rendering the panel.