generate css clipPath around visible part of sprite,

minor refactoring

src/components/MainGameComponent.tsx

@@ -2,8 +2,8 @@ import { ControlPanel } from "@src/components/controlPanel/ControlPanel";
 import { EditorSidebar } from "@src/components/editor/EditorSidebar";
 import { EntitiesLibrary } from "@src/components/editor/EntitiesLibrary";
 import { EntityInventoryManagerModal } from "@src/components/editor/_shared/EntityInventoryManagerModal";
+import { MessagesSticky } from "@src/components/map/layers/messages/MessagesSticky";
 import { MapComponent, MapForwardedRefs } from "@src/components/map/MapComponent";
-import { MessagesSticky } from "@src/components/map/messages/MessagesSticky";
 import { TopPanel } from "@src/components/topPanel/TopPanel";
 import { DebugSettings } from "@src/components/_modals/debug/DebugSettings";
 import { GameOver } from "@src/components/_modals/game_over/GameOver";

src/components/_modals/inventory/_shared/EntityOverviewPanel.tsx

@@ -1,5 +1,5 @@
-import { BuildingComponent } from "@src/components/map/buildings/Building";
-import { VehicleComponent } from "@src/components/map/vehicles/Vehicle";
+import { BuildingComponent } from "@src/components/map/layers/userInteraction/buildings/Building";
+import { VehicleComponent } from "@src/components/map/layers/userInteraction/vehicles/Vehicle";
 import { LabelWithValue } from "@src/components/ui/LabelWithValue";
 import { Building } from "@src/engine/building/BuildingFactory";
 import { Unit } from "@src/engine/unit/UnitFactory";

src/components/_modals/loading/Loading.tsx

@@ -21,21 +21,29 @@ export const Loading = React.memo(
 
           <div className={"modal-menu-nav"}>
             <fieldset className={"loading-info"}>
-              <legend>Loading</legend>
+              <legend>Wait</legend>
 
               <div className={"entity-progress-wrapper"}>
-                <div className={"label"}>GFX</div>
+                <div className={"label"}>Loading SFX</div>
+
+                <div className={"value"}>
+                  {filesize(props.assets.loaded.audio.size)} of {filesize(props.assets.total.audio.size)}
+                </div>
+              </div>
+
+              <div className={"entity-progress-wrapper"}>
+                <div className={"label"}>Loading GFX</div>
 
                 <div className={"value"}>
                   {filesize(props.assets.loaded.image.size)} of {filesize(props.assets.total.image.size)}
                 </div>
               </div>
 
               <div className={"entity-progress-wrapper"}>
-                <div className={"label"}>SFX</div>
+                <div className={"label"}>Processing GFX</div>
 
                 <div className={"value"}>
-                  {filesize(props.assets.loaded.audio.size)} of {filesize(props.assets.total.audio.size)}
+                  {Math.round((props.assets.loaded.clipPath * 100) / props.assets.total.clipPath)}%
                 </div>
               </div>
 

src/components/controlPanel/ControlPanel.tsx

@@ -2,8 +2,8 @@ import { CenterMapButton } from "@src/components/controlPanel/CenterMapButton";
 import { EndCombatButton } from "@src/components/controlPanel/EndCombatButton";
 import { EndTurnButton } from "@src/components/controlPanel/EndTurnButton";
 import { GetOufOfVehicleButton } from "@src/components/controlPanel/GetOufOfVehicleButton";
-import { HeroExploreButton } from "@src/components/controlPanel/HeroExploreButton";
 import { HeroHandButton } from "@src/components/controlPanel/HeroHandButton";
+import { HeroLootButton } from "@src/components/controlPanel/HeroLootButton";
 import { HeroMovementButton } from "@src/components/controlPanel/HeroMovementButton";
 import { MiniMap } from "@src/components/controlPanel/MiniMap";
 import { OpenInventoryButton } from "@src/components/controlPanel/OpenInventoryButton";
@@ -29,7 +29,7 @@ export const ControlPanel = React.memo(function ControlPanel() {
         <HeroHandButton type={"rightHand"} />
 
         <HeroMovementButton />
-        <HeroExploreButton />
+        <HeroLootButton />
         <GetOufOfVehicleButton />
 
         <EndTurnButton />

src/components/controlPanel/HeroExploreButton.tsx → src/components/controlPanel/HeroLootButton.tsx

@@ -5,7 +5,7 @@ import { useGameState } from "@src/hooks/useGameState";
 import { useHero } from "@src/hooks/useHero";
 import React from "react";
 
-export const HeroExploreButton = React.memo(() => {
+export const HeroLootButton = React.memo(() => {
   const { gameDispatch } = useGameState();
   const { hero } = useHero();
 
@@ -14,13 +14,13 @@ export const HeroExploreButton = React.memo(() => {
   const handleClick = () => {
     if (hero.isBusy()) return;
 
-    gameDispatch({ type: "setCurrentUnitAction", unit: hero, selectedAction: "explore" });
+    gameDispatch({ type: "setCurrentUnitAction", unit: hero, selectedAction: "loot" });
   };
 
   return (
     <Button
-      className={["control-explore"]}
-      active={hero.currentSelectedAction === "explore"}
+      className={["control-loot"]}
+      active={hero.currentSelectedAction === "loot"}
       disabled={hero.isBusy()}
       onClick={handleClick}
     >

src/components/controlPanel/HeroMovementButton.tsx

@@ -40,7 +40,7 @@ export const HeroMovementButton = React.memo(() => {
   return (
     <Button
       className={[`control-movement`]}
-      active={hero.currentSelectedAction === "move"}
+      active={!hero.isVehicleInUse() && hero.currentSelectedAction === "move"}
       title={heroMovementTypes[hero.currentMovementMode].text}
       disabled={hero.isBusy() || hero.isVehicleInUse()}
       onClick={handleClick}

src/components/debug/DebugVisualization.tsx

@@ -1,4 +1,4 @@
-import { IsometricCanvasMapLayer } from "@src/components/map/IsometricCanvasMapLayer";
+import { IsometricCanvasMapLayer } from "@src/components/map/_shared/IsometricCanvasMapLayer";
 import { constants } from "@src/engine/constants";
 import { useDebugVisualization } from "@src/hooks/debug/useDebugVisualization";
 import { useGameState } from "@src/hooks/useGameState";

src/components/editor/_shared/EntityInventoryEditor.tsx

@@ -11,7 +11,7 @@ export const EntityInventoryEditor = (props: { entity: Building | Unit | Vehicle
   const { uiDispatch } = useGameState();
   const [selectedInventoryMode, setSelectedInventoryMode] = React.useState<keyof Unit["inventory"]>("main");
 
-  if (!props.entity.dictEntity.explorable) return null;
+  if (!props.entity.dictEntity.lootable) return null;
 
   const handleUnitInventoryModeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSelectedInventoryMode(e.target.value as keyof Unit["inventory"]);

src/components/editor/building/BuildingEditor.tsx

@@ -1,5 +1,5 @@
-import { BuildingComponent } from "@src/components/map/buildings/Building";
-import { MapLayer } from "@src/components/map/MapLayer";
+import { BuildingComponent } from "@src/components/map/layers/userInteraction/buildings/Building";
+import { MapLayer } from "@src/components/map/_shared/MapLayer";
 import { Building } from "@src/engine/building/BuildingFactory";
 import { useGameState } from "@src/hooks/useGameState";
 import { useMousePosition } from "@src/hooks/useMousePosition";

src/components/editor/building/BuildingLibrary.tsx

@@ -1,6 +1,6 @@
 import { BuildingLibraryItem } from "@src/components/editor/building/BuildingLibraryItem";
 import { Tab } from "@src/components/ui/Tab";
-import getBuildingsDictList, { BuildingDictEntity } from "@src/dict/building/building";
+import getBuildingsDictList, { BuildingDictEntity } from "@src/dict/building/_building";
 
 import { useGameState } from "@src/hooks/useGameState";
 import React from "react";

src/components/editor/building/BuildingLibraryItem.tsx

@@ -1,6 +1,6 @@
 import { faRotateLeft, faRotateRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { BuildingDictEntity } from "@src/dict/building/building";
+import { BuildingDictEntity } from "@src/dict/building/_building";
 import React from "react";
 
 export function BuildingLibraryItem(props: { item: BuildingDictEntity; variant: number }) {

src/components/editor/light/LightEditor.tsx

@@ -1,4 +1,4 @@
-import { MapLayer } from "@src/components/map/MapLayer";
+import { MapLayer } from "@src/components/map/_shared/MapLayer";
 import { constants } from "@src/engine/constants";
 import { Light } from "@src/engine/light/LightFactory";
 import { useGameState } from "@src/hooks/useGameState";

src/components/editor/unit/UnitEditor.tsx

@@ -1,5 +1,5 @@
-import { MapLayer } from "@src/components/map/MapLayer";
-import { UnitComponent } from "@src/components/map/units/Unit";
+import { UnitComponent } from "@src/components/map/layers/userInteraction/units/Unit";
+import { MapLayer } from "@src/components/map/_shared/MapLayer";
 import { Unit } from "@src/engine/unit/UnitFactory";
 import { useEditor } from "@src/hooks/useEditor";
 import { useGameState } from "@src/hooks/useGameState";

src/components/editor/vehicle/VehicleEditor.tsx

@@ -1,5 +1,5 @@
-import { MapLayer } from "@src/components/map/MapLayer";
-import { VehicleComponent } from "@src/components/map/vehicles/Vehicle";
+import { VehicleComponent } from "@src/components/map/layers/userInteraction/vehicles/Vehicle";
+import { MapLayer } from "@src/components/map/_shared/MapLayer";
 import { Vehicle } from "@src/engine/vehicle/VehicleFactory";
 import { useGameState } from "@src/hooks/useGameState";
 import { useMousePosition } from "@src/hooks/useMousePosition";

src/components/map/MapComponent.tsx

@@ -4,20 +4,16 @@ import { LightEditor } from "@src/components/editor/light/LightEditor";
 import { TerrainAreasEditor } from "@src/components/editor/terrain/TerrainAreasEditor";
 import { UnitEditor } from "@src/components/editor/unit/UnitEditor";
 import { VehicleEditor } from "@src/components/editor/vehicle/VehicleEditor";
-import { Buildings } from "@src/components/map/buildings/Buildings";
-import { MapLayer } from "@src/components/map/MapLayer";
-import { MessagesTooltip } from "@src/components/map/messages/MessagesTooltip";
-import { FogOfWarComponent } from "@src/components/map/terrain/FogOfWar";
-import { LightsAndShadows } from "@src/components/map/terrain/LightsAndShadows";
-import { TerrainCanvas } from "@src/components/map/terrain/TerrainCanvas";
-import { TerrainClusters } from "@src/components/map/terrain/TerrainClusters";
+import { Ammo } from "@src/components/map/layers/ammo/Ammo";
+import { FogOfWarComponent } from "@src/components/map/layers/fogOfWar/FogOfWar";
+import { LightsAndShadows } from "@src/components/map/layers/lightsAndShadows/LightsAndShadows";
+import { MessagesTooltip } from "@src/components/map/layers/messages/MessagesTooltip";
+import { TerrainCanvas } from "@src/components/map/layers/terrain/TerrainCanvas";
+import { TerrainClusters } from "@src/components/map/layers/terrain/TerrainClusters";
+import { UserInteraction } from "@src/components/map/layers/userInteraction/UserInteraction";
 import { Wireframe } from "@src/components/map/terrain/Wireframe";
-import { Units } from "@src/components/map/units/Units";
-import { Vehicles } from "@src/components/map/vehicles/Vehicles";
-import { VisualEffects } from "@src/components/map/vfx/VisualEffects";
-import { Ammo } from "@src/components/map/weapons/Ammo";
 import { GameUI } from "@src/context/GameUIContext";
-import { BuildingType } from "@src/dict/building/building";
+import { BuildingType } from "@src/dict/building/_building";
 import { UnitType } from "@src/dict/unit/_unit";
 import { VehicleType } from "@src/dict/vehicle/_vehicle";
 import { Building } from "@src/engine/building/BuildingFactory";
@@ -26,6 +22,7 @@ import { floor, getVisibleIsometricGridCells, gridToScreenSpace, screenToGridSpa
 import { useGameState } from "@src/hooks/useGameState";
 import { useHero } from "@src/hooks/useHero";
 import { useMousePosition } from "@src/hooks/useMousePosition";
+import { useScene } from "@src/hooks/useScene";
 import React from "react";
 
 export type MapForwardedRefs = {
@@ -39,6 +36,7 @@ export const MapComponent = React.memo(
     const { terrainState, terrainDispatch, gameState, gameDispatch, uiState, uiDispatch } = useGameState();
     const { getWorldMousePosition } = useMousePosition();
     const { hero } = useHero();
+    const { checkCurrentScene } = useScene();
 
     const mapRef = React.useRef<HTMLDivElement>(null);
 
@@ -288,23 +286,21 @@ export const MapComponent = React.memo(
           <MessagesTooltip />
           <Wireframe />
 
-          <BuildingEditor />
-          <TerrainAreasEditor />
-          <UnitEditor />
-          <VehicleEditor />
-          <LightEditor />
+          {checkCurrentScene(["editor"]) ? (
+            <>
+              <BuildingEditor />
+              <TerrainAreasEditor />
+              <UnitEditor />
+              <VehicleEditor />
+              <LightEditor />
+            </>
+          ) : null}
 
           <TerrainClusters workingScenes={["game", "combat"]} />
           <TerrainCanvas workingScenes={["editor"]} />
 
           <Ammo />
-
-          <MapLayer size={gameState.mapSize} className={"map"} isometric={gameState.debug.featureEnabled.buildingBoxes}>
-            <VisualEffects />
-            <Buildings />
-            <Vehicles />
-            <Units />
-          </MapLayer>
+          <UserInteraction />
         </div>
       </>
     );

src/components/map/MapLayer.tsx → src/components/map/_shared/MapLayer.tsx

@@ -7,14 +7,15 @@ import React from "react";
 
 export type MapLayerProps = {
   isometric?: boolean;
-  //
   size: Size2D;
   className: string;
   style?: React.CSSProperties;
+  dataProps?: { [p: string]: string | boolean | undefined };
   children: React.ReactNode;
   onMouseMove?: (e: React.MouseEvent) => void;
   onClick?: (e: React.MouseEvent) => void;
-  onMouseUp?: (e: React.MouseEvent) => void;
+  onMouseDown?: (e: React.MouseEvent | React.TouchEvent) => void;
+  onMouseUp?: (e: React.MouseEvent | React.TouchEvent) => void;
   onContextMenu?: (e: React.MouseEvent) => void;
 };
 
@@ -46,8 +47,10 @@ export function MapLayer({ isometric = true, ...props }: MapLayerProps) {
       style={style}
       onMouseMove={props.onMouseMove}
       onClick={props.onClick}
+      onMouseDown={props.onMouseDown}
       onMouseUp={props.onMouseUp}
       onContextMenu={props.onContextMenu}
+      {...props.dataProps}
     >
       {props.children}
     </div>

src/components/map/weapons/Ammo.tsx → src/components/map/layers/ammo/Ammo.tsx

@@ -1,5 +1,5 @@
-import { MapLayer } from "@src/components/map/MapLayer";
-import { SingleUnitAmmo } from "@src/components/map/weapons/SingleUnitAmmo";
+import { SingleUnitAmmo } from "@src/components/map/layers/ammo/SingleUnitAmmo";
+import { MapLayer } from "@src/components/map/_shared/MapLayer";
 import { useGameState } from "@src/hooks/useGameState";
 
 export const Ammo = () => {

src/components/map/terrain/FogOfWar.tsx → src/components/map/layers/fogOfWar/FogOfWar.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { MapLayer } from "@src/components/map/MapLayer";
+import { MapLayer } from "@src/components/map/_shared/MapLayer";
 import { constants } from "@src/engine/constants";
 import { useGameState } from "@src/hooks/useGameState";
 import { useScene } from "@src/hooks/useScene";

src/components/map/terrain/LightsAndShadows.tsx → src/components/map/layers/lightsAndShadows/LightsAndShadows.tsx

@@ -1,4 +1,4 @@
-import { MapLayer } from "@src/components/map/MapLayer";
+import { MapLayer } from "@src/components/map/_shared/MapLayer";
 import { constants } from "@src/engine/constants";
 import { useEditor } from "@src/hooks/useEditor";
 import { useGameState } from "@src/hooks/useGameState";

src/components/map/messages/MessagesSticky.tsx → src/components/map/layers/messages/MessagesSticky.tsx

@@ -1,4 +1,4 @@
-import { MessageComponent } from "@src/components/map/messages/Message";
+import { MessageComponent } from "@src/components/map/layers/messages/Message";
 import { useGameState } from "@src/hooks/useGameState";
 import React from "react";
 

src/components/map/messages/MessagesTooltip.tsx → src/components/map/layers/messages/MessagesTooltip.tsx

@@ -1,4 +1,4 @@
-import { MessageComponent } from "@src/components/map/messages/Message";
+import { MessageComponent } from "@src/components/map/layers/messages/Message";
 import { useGameState } from "@src/hooks/useGameState";
 import React from "react";
 

src/components/map/terrain/TerrainCanvas.tsx → src/components/map/layers/terrain/TerrainCanvas.tsx

@@ -1,4 +1,4 @@
-import { IsometricCanvasMapLayer } from "@src/components/map/IsometricCanvasMapLayer";
+import { IsometricCanvasMapLayer } from "@src/components/map/_shared/IsometricCanvasMapLayer";
 import { GameScene } from "@src/context/GameUIContext";
 import { useGameState } from "@src/hooks/useGameState";
 import { useScene } from "@src/hooks/useScene";

src/components/map/terrain/TerrainClusters.tsx → src/components/map/layers/terrain/TerrainClusters.tsx

@@ -1,5 +1,5 @@
-import { MapLayer } from "@src/components/map/MapLayer";
-import { TerrainClusterComponent } from "@src/components/map/terrain/TerrainCluster";
+import { TerrainClusterComponent } from "@src/components/map/layers/terrain/TerrainCluster";
+import { MapLayer } from "@src/components/map/_shared/MapLayer";
 import { GameScene } from "@src/context/GameUIContext";
 import { useGameState } from "@src/hooks/useGameState";
 import { useScene } from "@src/hooks/useScene";