Show the attack range of opposing units with the opposite direction applied so that movement and attack can overlap and still be visible to the player.

GitOrigin-RevId: c76593cb777fc418b0bab02d1975d68ed381cdfb

Author: cpojer

hera/GameMap.tsx

@@ -1873,6 +1873,7 @@ export default class GameMap extends Component<Props, State> {
                 currentViewer={currentViewer}
                 getLayer={getLayer}
                 map={map}
+                opposite
                 radius={additionalRadius}
                 selectedPosition={selectedPosition}
                 selectedUnit={selectedUnit}

hera/Radius.tsx

@@ -45,6 +45,7 @@ const Item = memo(function Item({
   dim,
   fields,
   getLayer,
+  opposite,
   position,
   size,
   type,
@@ -53,6 +54,7 @@ const Item = memo(function Item({
   dim?: boolean | null;
   fields: ReadonlyMap<Vector, RadiusItem>;
   getLayer: GetLayerFunction;
+  opposite: boolean | undefined;
   position: Vector;
   size: number;
   type: RadiusType;
@@ -106,6 +108,7 @@ const Item = memo(function Item({
       }}
       className={cx(
         itemStyle,
+        opposite && oppositeMaskStyle,
         ...borderStyles,
         dim && dimStyle,
         type === RadiusType.Attack &&
@@ -210,6 +213,7 @@ export default memo(function Radius({
   currentViewer,
   getLayer,
   map,
+  opposite,
   radius: { dim, fields, path, type },
   selectedPosition,
   selectedUnit,
@@ -219,6 +223,7 @@ export default memo(function Radius({
   currentViewer: PlayerID | null;
   getLayer: GetLayerFunction;
   map: MapData;
+  opposite?: boolean;
   radius: RadiusInfo;
   selectedPosition?: Vector | null;
   selectedUnit?: Unit | null;
@@ -274,6 +279,7 @@ export default memo(function Radius({
             )
           }
           key={'r' + String(vector)}
+          opposite={opposite}
           position={vector}
           size={size}
           type={type}
@@ -359,6 +365,16 @@ const itemStyle = css`
   transform: translate3d(${vars.apply('x')}, ${vars.apply('y')}, 0);
 `;
 
+const oppositeMaskStyle = css`
+  mask: repeating-linear-gradient(
+    to top right,
+    black,
+    black 1px,
+    ${vars.apply('background-light')} 0%,
+    ${vars.apply('background-light')} 2.13px
+  );
+`;
+
 const radialMaskStyle = css`
   mask: repeating-radial-gradient(
     circle at 50%,

hera/behavior/Base.tsx

@@ -124,16 +124,15 @@ export default class Base extends AbstractSelectBehavior {
 
         const isLongRange =
           entity.info.isLongRange() && !entity.info.canAct(player);
-        const attackFilter = isLongRange
-          ? Boolean
-          : ([vector]: [Vector, unknown]) => !fields?.has(vector);
-        const moveFilter = isLongRange
-          ? ([vector]: [Vector, unknown]) => !additionalFields?.has(vector)
-          : Boolean;
-
         const additionalRadius = additionalFields?.size
           ? {
-              fields: new Map([...additionalFields].filter(attackFilter)),
+              fields: new Map(
+                [...additionalFields].filter(
+                  isLongRange
+                    ? Boolean
+                    : ([vector]: [Vector, unknown]) => !fields?.has(vector),
+                ),
+              ),
               path: null,
               type: RadiusType.Attack,
             }
@@ -144,9 +143,7 @@ export default class Base extends AbstractSelectBehavior {
           behavior: new Move(),
           position: vector,
           radius: {
-            fields: new Map(
-              fields ? [...fields].filter(moveFilter) : undefined,
-            ),
+            fields: new Map(fields),
             path: null,
             type: RadiusType.Move,
           },