Do not enable player card interaction while the dialogue is open.

GitOrigin-RevId: 833b7e43063b1328f4088d2be24462d614ae8737
nkzw-tech · Sep 13, 2024 · ecbafbf · ecbafbf
1 parent a22b095
commit ecbafbf
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 7 deletions.
diff --git a/hera/MapAnimations.tsx b/hera/MapAnimations.tsx
@@ -342,6 +342,10 @@ export function hasNotableAnimation(animations: Animations) {
   );
 }
 
+export function hasCharacterMessage(animations: Animations) {
+  return animations.some((animation) => animation.type === 'characterMessage');
+}
+
 const ScrollIntoView = ({
   onComplete,
   positions,

diff --git a/hera/editor/MapEditor.tsx b/hera/editor/MapEditor.tsx
@@ -75,7 +75,6 @@ import useClientGameAction from '../hooks/useClientGameAction.tsx';
 import useHide from '../hooks/useHide.tsx';
 import { UserWithFactionNameAndUnlocks } from '../hooks/useUserMap.tsx';
 import filterNodes from '../lib/filterNodes.tsx';
-import { hasNotableAnimation } from '../MapAnimations.tsx';
 import { Actions, State, StateLike } from '../Types.tsx';
 import CurrentGameCard from '../ui/CurrentGameCard.tsx';
 import GameActions from '../ui/GameActions.tsx';
@@ -895,7 +894,7 @@ export default function MapEditor({
               <MapInfo hide={hide} inset={inset} leftOffset {...props} />
               <CurrentGameCard
                 actions={actions}
-                animatePlayer={hasNotableAnimation(props.animations)}
+                animations={props.animations}
                 currentViewer={props.currentViewer}
                 gameInfoState={props.gameInfoState}
                 hide={hidden}

diff --git a/hera/ui/CurrentGameCard.tsx b/hera/ui/CurrentGameCard.tsx
@@ -8,11 +8,16 @@ import sortBy from '@deities/hephaestus/sortBy.tsx';
 import useInput from '@deities/ui/controls/useInput.tsx';
 import Portal from '@deities/ui/Portal.tsx';
 import PrimaryExpandableMenuButton from '@deities/ui/PrimaryExpandableMenuButton.tsx';
-import { css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 import ImmutableMap from '@nkzw/immutable-map';
 import React, { memo, useCallback, useState } from 'react';
 import useCurrentGameTeams from '../hooks/useCurrentGameTeams.tsx';
 import { UserLike, UserLikeWithID } from '../hooks/useUserMap.tsx';
+import {
+  Animations,
+  hasCharacterMessage,
+  hasNotableAnimation,
+} from '../MapAnimations.tsx';
 import { Actions, GameInfoState } from '../Types.tsx';
 import maybeFade from './lib/maybeFade.tsx';
 import PlayerCard from './PlayerCard.tsx';
@@ -132,7 +137,7 @@ const TeamsCard = ({
 
 export default memo(function CurrentGameCard({
   actions,
-  animatePlayer,
+  animations,
   currentViewer,
   gameInfoState,
   hide,
@@ -144,7 +149,7 @@ export default memo(function CurrentGameCard({
   zIndex,
 }: {
   actions: Actions;
-  animatePlayer: boolean;
+  animations: Animations;
   currentViewer: PlayerID | null;
   gameInfoState: GameInfoState | null;
   hide?: boolean;
@@ -164,6 +169,9 @@ export default memo(function CurrentGameCard({
   const players = map.getPlayers();
   const hasSkills = players.some(({ skills }) => skills.size > 0);
 
+  const animatePlayer = hasNotableAnimation(animations);
+  const hasMessages = hasCharacterMessage(animations);
+
   useInput(
     'info',
     useCallback(() => {
@@ -188,7 +196,7 @@ export default memo(function CurrentGameCard({
   );
 
   const content = (
-    <div className={maybeFade(hide)}>
+    <div className={cx(maybeFade(hide), hasMessages && diabledStyle)}>
       <PrimaryExpandableMenuButton
         gap={16}
         inset={inlineUI ? 1 : inset}
@@ -209,8 +217,12 @@ export default memo(function CurrentGameCard({
       </PrimaryExpandableMenuButton>
     </div>
   );
+
   return inlineUI ? (
-    <div className={inlineContainerStyle} style={{ zIndex: zIndex - 1 }}>
+    <div
+      className={inlineContainerStyle}
+      style={{ zIndex: isExpanded ? zIndex + 3 : zIndex - 1 }}
+    >
       {content}
     </div>
   ) : (
@@ -225,3 +237,11 @@ const inlineContainerStyle = css`
   transform: translate3d(0, -76px, 0);
   zoom: 0.333334;
 `;
+
+const diabledStyle = css`
+  pointer-events: none;
+
+  * {
+    pointer-events: none !important;
+  }
+`;