mates
f91193c7de
CI / Generate TypeScript types (push) Successful in 10s
CI / Server unit tests (push) Successful in 27s
CI / Build server (push) Successful in 30s
CI / Build client (push) Successful in 42s
CI / Playwright E2E tests (push) Successful in 1m51s
CI / Build and push Docker image (push) Successful in 46s
CI / Notify (push) Successful in 1s
65 lines
2.9 KiB
TypeScript
65 lines
2.9 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { OverlayTrigger, Tooltip } from "react-bootstrap";
|
|
import { useSettings } from "../context/settings";
|
|
import { UmaCharacter, loadUmaCharacters } from "../utils/umaCharacters";
|
|
import "./EaterBadge.scss";
|
|
|
|
/**
|
|
* Úrovně „jedlíka" podle počtu jídel: Special Week sní hodně, Oguri Cap ještě víc.
|
|
* Seřazeno od nejvyšší úrovně.
|
|
*/
|
|
const LEVELS = [
|
|
{ minItems: 3, character: 'Oguri Cap', title: 'Úroveň Oguri Cap — bezedný žaludek' },
|
|
{ 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' },
|
|
];
|
|
|
|
/** Úrovně ve stylu Hell Girl — emoji v černém odznaku s rudým lemem. Seřazeno od nejvyšší úrovně. */
|
|
const HG_LEVELS = [
|
|
{ minItems: 3, emoji: '🔥', title: 'Úroveň Wanyūdō — hlad jako pekelný oheň' },
|
|
{ minItems: 2, emoji: '🥀', title: 'Úroveň Ai Enma — tichý, ale nenasytný apetit' },
|
|
];
|
|
|
|
type Props = {
|
|
/** Počet jídel/položek, které si strávník vybral či objednal */
|
|
items: number,
|
|
};
|
|
|
|
/** Odznak s postavou u strávníků s více jídly — jen ve stylech Umamusume, My Little Pony a Hell Girl. */
|
|
export default function EaterBadge({ items }: Readonly<Props>) {
|
|
const styleTheme = useSettings()?.styleTheme;
|
|
const isUma = styleTheme === 'umamusume';
|
|
const [characters, setCharacters] = useState<UmaCharacter[]>([]);
|
|
|
|
useEffect(() => {
|
|
if (isUma) loadUmaCharacters().then(setCharacters);
|
|
}, [isUma]);
|
|
|
|
if (styleTheme === 'mlp' || styleTheme === 'hellgirl') {
|
|
const emojiLevel = (styleTheme === 'mlp' ? MLP_LEVELS : HG_LEVELS).find(l => items >= l.minItems);
|
|
if (!emojiLevel) return null;
|
|
return (
|
|
<OverlayTrigger placement="top" overlay={<Tooltip>{emojiLevel.title} ({items} jídla)</Tooltip>}>
|
|
<span className={`eater-badge eater-badge-${styleTheme}`} role="img" aria-label={emojiLevel.title}>{emojiLevel.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
|
|
const src = character?.icon ?? (character?.round ? character.images[0] : undefined);
|
|
if (!isUma || !level || !src) return null;
|
|
|
|
return (
|
|
<OverlayTrigger placement="top" overlay={<Tooltip>{level.title} ({items} jídla)</Tooltip>}>
|
|
<img src={src} alt={level.character} className="eater-badge" />
|
|
</OverlayTrigger>
|
|
);
|
|
}
|