forked from Tadrisino/MathApp_frontend
AliReza
348bfecea6
The whole app lived in one 3,071-line App.tsx on a Figma scaffold (60 unused packages, 45 unused UI components, no type-check). The live site could not reach the backend, Persian-keyboard digits were erased from the phone field, guests were signed out after an hour, "mark read" hit a method the server does not accept (405), and iOS Safari blocked the payment window. What changed: - src/ split into api/ (one typed client: timeouts, GET retry, single-flight refresh, SSE), screens/ (one file each), components/, state/, nav/, lib/. - The API address is configuration only: public/config.js at runtime, then VITE_API_BASE_URL at build time, then same-origin /api. No domain in code. - Responsive shell instead of a fixed 390x844 phone frame; self-hosted Vazirmatn instead of Google Fonts; strict TypeScript, `npm run build` type-checks first. - Everything on the handoff list: tutor answers keep their line breaks, have thumbs up/down, follow-ups, "from the book" badge, retry, history that survives tab switches and reloads, "why was I wrong" from a wrong answer with questionId; question reports; hearts with maxHearts/unlimited and a no-hearts screen with the refill time; result screen and a visible error when lesson completion fails; subscription status, badge, discount code before the gateway and the payment-return message; guest refresh token; 6-digit OTP with resend timer; age saved as a Jalali birthYear; PATCH read-all; leaderboard refetched on open with "you" highlighted; selected companion shown across the app; logout that revokes the refresh token. - New screens for endpoints that had none: profile, streak calendar, support tickets and bug reports, parents, invite-a-friend (with ?ref= tracking), guest-to-phone upgrade. - Browser/phone back button walks the screen stack. Checked with a headless-Chrome walkthrough against a local backend at 390x844 and 360x740 (fresh guest: onboarding, setup, a full lesson, map, island sheet, every tab and sub-screen, one real tutor question, reload, logout): no console errors, no failed API calls. Real SMS login and a real Zarinpal payment were not exercised. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
37 lines
1.3 KiB
TypeScript
37 lines
1.3 KiB
TypeScript
import { memo, useMemo } from 'react';
|
|
import { motion } from 'motion/react';
|
|
import { SEYAR_INFO, SEYAR_SVG, type SeyarChar, type SeyarMood } from './seyar';
|
|
|
|
interface Props {
|
|
char: SeyarChar;
|
|
mood?: SeyarMood;
|
|
size?: number;
|
|
/** بالا و پایین رفتنِ آرام، برای ماسکوتی که منتظر است. */
|
|
bob?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
function SeyarMascotBase({ char, mood = 'idle', size = 100, bob = false, className }: Props) {
|
|
const svg = useMemo(() => SEYAR_SVG[char](mood), [char, mood]);
|
|
return (
|
|
<motion.div
|
|
key={char + mood}
|
|
role="img"
|
|
aria-label={SEYAR_INFO[char].name}
|
|
className={className}
|
|
initial={{ scale: 0.8, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1, y: bob ? [0, -6, 0] : 0 }}
|
|
transition={
|
|
bob
|
|
? { y: { duration: 1.8, repeat: Infinity, ease: 'easeInOut' }, scale: { type: 'spring', stiffness: 280, damping: 18 } }
|
|
: { type: 'spring', stiffness: 280, damping: 18 }
|
|
}
|
|
style={{ width: size, height: size, lineHeight: 0, flexShrink: 0 }}
|
|
// SVG از seyar.ts ساخته میشود و هیچ ورودیِ کاربر در آن نیست.
|
|
dangerouslySetInnerHTML={{ __html: svg }}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export const SeyarMascot = memo(SeyarMascotBase);
|