+ {drawnSymbols.map((symbol, index) => (
+
+
+
+ ))}
+
+ );
+};
+
+const Banner = (props: BannerProps) => {
+ const {
+ balance,
+ selectedBet,
+ topPayout,
+ cooldownActive,
+ cooldownSeconds,
+ working,
+ lastSpin,
+ } = props;
+
+ const [page, setPage] = useState(0);
+ const defaultTitle = useRef(pickRandom(BANNER_TEXTS));
+
+ useEffect(() => {
+ const interval = window.setInterval(() => {
+ setPage((current) => (current + 1) % 4);
+ }, 4500);
+ return () => window.clearInterval(interval);
+ }, []);
+
+ let title = defaultTitle.current;
+ let subtitle = `Set your bet and chase up to ${topPayout} metacoins.`;
+ let flashy = false;
+ let jackpot = false;
+
+ if (working) {
+ title = 'REELS SPINNING';
+ subtitle = 'Settlement lands after the reveal.';
+ } else if (lastSpin?.resultState === 'jackpot') {
+ title = `JACKPOT +${lastSpin.payout}`;
+ subtitle = 'Five 7s on center line.';
+ flashy = true;
+ jackpot = true;
+ } else if (lastSpin?.resultState === 'win') {
+ title = `WIN +${lastSpin.payout}`;
+ subtitle = `Line ${lastSpin.lineLength} at bet ${lastSpin.bet}.`;
+ flashy = true;
+ } else {
+ switch (page) {
+ case 0:
+ title = defaultTitle.current;
+ subtitle = `Current stake: ${selectedBet}`;
+ break;
+ case 1:
+ title = `BALANCE ${balance}`;
+ subtitle = `Each spin costs your selected bet.`;
+ break;
+ case 2:
+ title = cooldownActive ? `COOLDOWN ${cooldownSeconds}s` : 'SPIN READY';
+ subtitle = cooldownActive
+ ? 'Spin unlocks when timer ends.'
+ : 'Press spin to roll all reels.';
+ break;
+ default:
+ title = `TOP PRIZE ${topPayout}`;
+ subtitle = 'Hit 7 7 7 7 7 on center line.';
+ }
+ }
+
+ return (
+