1

src/components/game-canvas/GameCanvasEntityLayer.tsx

@@ -15,6 +15,7 @@ import {
 import {HostileNpcAnimator} from '../HostileNpcAnimator';
 import {MedievalNpcAnimator} from '../MedievalNpcAnimator';
 import {getRenderableNpcFacing} from '../npcRenderUtils';
+import {NpcAffinityEffectBadge} from './NpcAffinityEffectBadge';
 import {
   DialogueBubbleIcon,
   type GameCanvasEntitySelection,
@@ -66,6 +67,11 @@ interface GameCanvasEntityLayerProps {
     showEncounter: boolean;
     activeSpeaker?: 'player' | 'npc' | null;
   } | null;
+  npcAffinityEffect?: {
+    eventId: string;
+    npcId: string;
+    delta: number;
+  } | null;
   sceneCombatants: SceneHostileNpc[];
   monsters: MonsterSpriteConfig[];
   getHostileNpcOuterLeft: (hostileNpc: SceneHostileNpc) => string;
@@ -101,6 +107,7 @@ export function GameCanvasEntityLayer({
   effectivePlayerAnimationState,
   shouldShowPlayerDialogueIcon,
   dialogueIndicator = null,
+  npcAffinityEffect = null,
   sceneCombatants,
   monsters,
   getHostileNpcOuterLeft,
@@ -326,6 +333,10 @@ export function GameCanvasEntityLayer({
                   />
                 </div>
               )}
+              {/* 聊天好感变化要挂在当前角色形象上，而不是消息区里。 */}
+              {npcAffinityEffect?.npcId === (npcEncounter.id ?? npcEncounter.npcName) ? (
+                <NpcAffinityEffectBadge effect={npcAffinityEffect} />
+              ) : null}
             </SceneEntityButton>
           </div>
         );
@@ -436,6 +447,10 @@ export function GameCanvasEntityLayer({
                     />
                   </div>
                 )}
+                {/* 和平相遇态同样沿用角色形象上的好感浮出特效。 */}
+                {npcAffinityEffect?.npcId === (encounter.id ?? encounter.npcName) ? (
+                  <NpcAffinityEffectBadge effect={npcAffinityEffect} />
+                ) : null}
               </SceneEntityButton>
             </div>
           );