feat: přidání vzhledu My Little Pony

client/src/components/EaterBadge.tsx

@@ -13,20 +13,37 @@ const LEVELS = [
     { minItems: 2, character: 'Special Week', title: 'Úroveň Special Week — pořádný apetit' },
 ];
 
+/** Úrovně ve stylu My Little Pony — místo portrétu cutie mark (emoji). Seřazeno od nejvyšší úrovně. */
+const MLP_LEVELS = [
+    { minItems: 3, emoji: '🧁', title: 'Úroveň Pinkie Pie — cupcaků není nikdy dost' },
+    { minItems: 2, emoji: '🍎', title: 'Úroveň Applejack — poctivý apetit' },
+];
+
 type Props = {
     /** Počet jídel/položek, které si strávník vybral či objednal */
     items: number,
 };
 
-/** Odznak s postavou Umamusume u strávníků s více jídly — jen ve stylu Umamusume. */
+/** Odznak s postavou u strávníků s více jídly — jen ve stylech Umamusume a My Little Pony. */
 export default function EaterBadge({ items }: Readonly<Props>) {
-    const isUma = useSettings()?.styleTheme === 'umamusume';
+    const styleTheme = useSettings()?.styleTheme;
+    const isUma = styleTheme === 'umamusume';
     const [characters, setCharacters] = useState<UmaCharacter[]>([]);
 
     useEffect(() => {
         if (isUma) loadUmaCharacters().then(setCharacters);
     }, [isUma]);
 
+    if (styleTheme === 'mlp') {
+        const mlpLevel = MLP_LEVELS.find(l => items >= l.minItems);
+        if (!mlpLevel) return null;
+        return (
+            <OverlayTrigger placement="top" overlay={<Tooltip>{mlpLevel.title} ({items} jídla)</Tooltip>}>
+                <span className="eater-badge eater-badge-mlp" role="img" aria-label={mlpLevel.title}>{mlpLevel.emoji}</span>
+            </OverlayTrigger>
+        );
+    }
+
     const level = LEVELS.find(l => items >= l.minItems);
     const character = level && characters.find(c => c.name === level.character);
     // Malý odznak potřebuje obličej — portrét (icon), případně kulatý obrázek postavy