Replace keyboard emojis with the app's own lucide icons (quiz reactions, +XP, welcome hand, party popper, streak flame)
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { AnimatePresence, motion } from 'motion/react';
|
||||
import { Brain, Check, ChevronLeft, Coins, Flag, Heart, Infinity as InfinityIcon, Star, X } from 'lucide-react';
|
||||
import { Brain, Check, ChevronLeft, Coins, Compass, Flag, Heart, Infinity as InfinityIcon, Lightbulb, Ruler, Sparkles, Star, Target, ThumbsUp, X, Zap, type LucideIcon } from 'lucide-react';
|
||||
import { api, ApiError, type AnswerResult, type Hearts, type Question, type ReportReason } from '@/api';
|
||||
import { useAppData } from '@/state/AppData';
|
||||
import { findNode, findNodeOfLesson, nextLessonOf, unitColor } from '@/state/curriculum';
|
||||
@@ -291,7 +291,7 @@ export function QuizScreen({ lessonId, nodeId }: { lessonId?: number; nodeId?: s
|
||||
transition={{ type: 'spring', stiffness: 400, damping: 14 }}
|
||||
className="mr-2 inline-block rounded-full bg-[#FFF3C4] px-2 py-0.5 text-[11px] font-black text-[#8A5A00]"
|
||||
>
|
||||
+{toFa(answer.xpEarned)} ⭐
|
||||
+{toFa(answer.xpEarned)} <Star size={11} className="mb-0.5 inline" fill="#E8A400" color="#E8A400" />
|
||||
</motion.span>
|
||||
)}
|
||||
</div>
|
||||
@@ -430,7 +430,7 @@ function Result({
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl font-black text-ink">{result.stars === 3 ? 'عالی بود!' : result.stars === 2 ? 'آفرین!' : 'تموم شد!'}</h2>
|
||||
{nodeMode && <p className="mt-1 text-sm font-bold" style={{ color }}>این جزیره رو تموم کردی 🏝️</p>}
|
||||
{nodeMode && <p className="mt-1 text-sm font-bold" style={{ color }}>این جزیره رو تموم کردی</p>}
|
||||
<p className="mt-1 text-sm text-muted">{toFa(correct)} جوابِ درست از {toFa(total)} سوال</p>
|
||||
</div>
|
||||
<div className="flex w-full gap-3">
|
||||
@@ -520,20 +520,21 @@ function ReportSheet({ open, questionId, onClose }: { open: boolean; questionId:
|
||||
);
|
||||
}
|
||||
|
||||
/** شکلکِ کوچکِ بعد از جواب؛ هر سوال یکی از مجموعه، با یک تکانِ کوتاه. فقط ایموجی و transform. */
|
||||
const WIN = ['🧠', '💪', '🎯', '⚡', '🤩'];
|
||||
const MISS = ['🤔', '💡', '📐'];
|
||||
/** آیکنِ کوچکِ بعد از جواب (همان خانوادهی آیکنِ اپ، نه ایموجیِ کیبورد)؛ هر سوال یکی از مجموعه، با یک تکانِ کوتاه. */
|
||||
const WIN: [LucideIcon, string][] = [[Brain, '#9B7BFF'], [Zap, '#E8A400'], [Target, '#ED6956'], [ThumbsUp, '#3E9E73'], [Sparkles, '#4C5FD5']];
|
||||
const MISS: [LucideIcon, string][] = [[Lightbulb, '#E8A400'], [Ruler, '#4C5FD5'], [Compass, '#9B7BFF']];
|
||||
function Reaction({ correct, seed }: { correct: boolean; seed: number }) {
|
||||
const set = correct ? WIN : MISS;
|
||||
const [Icon, color] = set[seed % set.length];
|
||||
return (
|
||||
<motion.span
|
||||
aria-hidden
|
||||
className="mr-1.5 inline-block"
|
||||
className="mr-1.5 inline-block align-middle"
|
||||
initial={{ scale: 0.4, rotate: 0 }}
|
||||
animate={{ scale: 1, rotate: [0, -14, 14, -8, 8, 0] }}
|
||||
transition={{ duration: 0.6, ease: 'easeOut' }}
|
||||
>
|
||||
{set[seed % set.length]}
|
||||
<Icon size={18} color={color} strokeWidth={2.4} />
|
||||
</motion.span>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user