Currently Athena Crisis is using the DOM to render the core game. I would like there to be a full renderer for the game using React-Three-Fiber so we can make comparisons on performance and battery usage. It also opens the door for a possible 3d version of the game in the future, give more options for fancy fog implementations, and it should help fix the rendering of decorations which is currently a bit messed up.

Expectation & Steps

• Create a new package at the root (you get to pick a Greek god you like!) and mirror the package.json setup from hera. Add it to pnpm-workspace.yaml. All new code should go into this new package.
• Check out Map and its child components. These are the primary components of the renderer that need to be ported, along with animation components. Ideally, as part of this experiment, a new component Map.tsx component is created in the new package that retains the same interface/props but renders to React-Three-Fiber instead. You may have to look at GameMap for how this component is used, and you'll need to explore its child components like Tiles, Decorators, Fog, Building and Unit. The Unit component is the most dynamic one and most likely needs the most work, especially to support animations like unit moves and animations.
• There are a number of fancy usages of CSS like fading buildings when a unit is above it:
  
• Or the subtle outline that fades in when a unit is selected:
  
• Decorations are currently drawn behind buildings and units which can look odd. Ideally a proper renderer will put them (as well as forests etc.) on the right z-layer so that units and buildings can be "behind" a decoration or "inside" a forest.
  
• Menus can remain being rendered using the DOM on top of the map for now.

Ideally, at the end we have a full renderer for the game and can simply swap the Map component to use a different renderer.