Fable will fix it! Pt 3

frontend/src/components/scene/CharacterSheet.svelte

@@ -1,6 +1,6 @@
 <script>
     import { apiRequest } from '../../lib/api';
-    import { getCardDisplay, isJoker } from '../../lib/cards';
+    import { getCardDisplay, isJoker, displayName } from '../../lib/cards';
 
     export let state;
 
@@ -43,6 +43,11 @@
 
 <div class="card glass-panel sheet-card">
     <h3>🐀 {state.player.name}'s Character Sheet</h3>
+    {#if state.player.player_name && state.player.player_name !== state.player.name}
+        <p class="info-text" style="margin-top: -0.5rem; font-size: 0.85rem;">
+            Played by {state.player.player_name}{#if !state.player.completed_personal_2}&nbsp;— they'll go by their smell until they earn a Name!{/if}
+        </p>
+    {/if}
 
     <div class="character-sheet-details">
         {#if error}
@@ -104,7 +109,7 @@
                 <select class="select-field" bind:value={pvpOpponentId} style="width: 100%; margin-bottom: 0.5rem;">
                     <option value="">Challenge whom?</option>
                     {#each duelTargets as p}
-                        <option value={p.id}>{p.name} (Rank {p.rank})</option>
+                        <option value={p.id}>{displayName(p)} (Rank {p.rank})</option>
                     {/each}
                 </select>
                 <select class="select-field" bind:value={pvpCard} style="width: 100%; margin-bottom: 0.5rem;">