1

src/components/game-canvas/GameCanvasShared.tsx

@@ -2,7 +2,10 @@ import React, {useEffect, useState} from 'react';
 
 import {getCharacterById} from '../../data/characterPresets';
 import {METERS_TO_PIXELS} from '../../data/hostileNpcs';
-import {buildMedievalNpcVisualFromCustomWorldVisual} from '../../data/medievalNpcVisuals';
+import {
+  buildMedievalNpcVisual,
+  buildMedievalNpcVisualFromCustomWorldVisual,
+} from '../../data/medievalNpcVisuals';
 import {
   AnimationState,
   Character,
@@ -246,6 +249,87 @@ export function RoleCharacterSprite({
   );
 }
 
+export function SceneEncounterNpcSprite({
+  encounter,
+  state,
+  facing,
+  className,
+}: {
+  encounter: Encounter;
+  state: AnimationState;
+  facing: 'left' | 'right';
+  className?: string;
+}) {
+  if (encounter.visual) {
+    return (
+      <MedievalNpcAnimator
+        visualSpec={buildMedievalNpcVisualFromCustomWorldVisual(encounter.visual)}
+        className={`origin-bottom ${className ?? ''}`.trim()}
+        scale={1.36}
+        facing={facing}
+      />
+    );
+  }
+
+  if (encounter.imageSrc?.trim()) {
+    return (
+      <img
+        src={encounter.imageSrc.trim()}
+        alt={encounter.npcName}
+        className={`h-full w-full object-contain ${className ?? ''}`.trim()}
+        style={{
+          ...DEFAULT_IMAGE_STYLE,
+          transform: facing === 'left' ? 'scaleX(-1)' : undefined,
+          transformOrigin: 'bottom center',
+        }}
+      />
+    );
+  }
+
+  const runtimeCustomWorldCharacter =
+    encounter.characterId ? getCharacterById(encounter.characterId) : null;
+  if (runtimeCustomWorldCharacter?.visual) {
+    return (
+      <MedievalNpcAnimator
+        visualSpec={buildMedievalNpcVisualFromCustomWorldVisual(runtimeCustomWorldCharacter.visual)}
+        className={`origin-bottom ${className ?? ''}`.trim()}
+        scale={1.36}
+        facing={facing}
+      />
+    );
+  }
+
+  if (runtimeCustomWorldCharacter) {
+    return (
+      <div
+        className="h-full w-full"
+        style={{transform: facing === 'left' ? 'scaleX(-1)' : undefined}}
+      >
+        <CharacterAnimator
+          state={state}
+          character={runtimeCustomWorldCharacter}
+          className={ROLE_CHARACTER_SPRITE_CLASS}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <MedievalNpcAnimator
+      visualSpec={buildMedievalNpcVisual({
+        id: encounter.id ?? encounter.npcName,
+        npcName: encounter.npcName,
+        npcDescription: encounter.npcDescription,
+        npcAvatar: encounter.npcAvatar,
+        context: encounter.context,
+      } as Encounter)}
+      className={`origin-bottom ${className ?? ''}`.trim()}
+      scale={1.36}
+      facing={facing}
+    />
+  );
+}
+
 export function DialogueBubbleIcon({
   active = false,
   flip = false,