/** * 米棉之战主组件 * 整合米棉之战的所有子组件:文件、线索、题目 */ import { useEffect } from "react"; import { MimianFile } from "./MimianFile"; import { MimianClues } from "./MimianClues"; import { MimianQuizzes } from "./MimianQuizzes"; import { useMimianState } from "./useMimianState"; import { usePuzzleAnimation } from "@/contexts/PuzzleAnimationContext"; import { usePuzzleStore } from "@/store/puzzleStore"; import { starName } from "../constants"; import type { FileType } from "../shared/types"; import type { ClueData } from "@/components/layout"; export interface MimianBattleProps { /** 当前展开的文件 */ expandedFile: FileType | null; /** 线索状态 */ clueStates: Record; /** 文件点击回调 */ onFileClick: () => void; /** 线索点击回调 */ onClueClick: (clue: ClueData, clueKey: string) => void; /** 是否所有线索都已查看 */ isAllViewed: boolean; /** 收起文件回调 */ onCollapseFile: () => void; /** 结束回调(返回首页) */ onEnd: () => void; } /** * 米棉之战主组件 * 管理米棉之战的所有状态和逻辑 */ export const MimianBattle = ({ expandedFile, clueStates, onFileClick, onClueClick, isAllViewed, onCollapseFile, onEnd, }: MimianBattleProps) => { const state = useMimianState(); const { triggerPuzzleAnimation } = usePuzzleAnimation(); const { isPuzzleUnlocked } = usePuzzleStore(); // 如果所有米棉之战线索都已查看,自动显示单选题1 useEffect(() => { if (isAllViewed && !state.showMimianQuiz1) { state.setShowMimianQuiz1(true); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [isAllViewed]); // 处理单选题1提交 const handleQuiz1Submit = (value: string, isCorrect: boolean) => { if (isCorrect) { state.setShowMimianQuiz1(false); state.setShowMimianSuccessAlert(true); state.setMimianSuccessAlertContent("恭喜你,选择正确!"); } }; // 处理成功提示框1继续 const handleSuccessAlert1Continue = () => { state.setShowMimianSuccessAlert(false); state.setMimianSuccessAlertContent(""); // 显示旁白1(图2) state.setShowMimianNarration1(true); }; // 处理旁白1关闭 const handleNarration1Close = () => { state.setShowMimianNarration1(false); // 显示单选题2 state.setShowMimianQuiz2(true); }; // 处理单选题2提交 const handleQuiz2Submit = (value: string, isCorrect: boolean) => { if (isCorrect) { state.setShowMimianQuiz2(false); state.setShowMimianSuccessAlert(true); state.setMimianSuccessAlertContent( `恭喜你,选择正确!结合当时市场情况,陈云同志在会上做出了"全国一盘棋"的指示。全国统筹调运粮食、棉花、煤炭填补缺口,筑牢物资基础。关键节点集中抛售,让跟风囤货的投机商无力承接,因亏本和高利贷纷纷破产,快速平抑物价、稳固人民币地位。` ); } else { // 根据选项显示不同的错误信息 if (value === "A") { state.setShowMimianSuccessAlert(true); state.setMimianSuccessAlertContent( "很抱歉,你选错了!当时物价上涨已波及多地区,局部限购无法阻止投机商转移物资炒作。上海米、棉依赖外部供应,本地物资匮乏,限购既不解决缺口,还会加剧民众恐慌,扰乱市场秩序。请你再思考一下吧!" ); } else if (value === "B") { state.setShowMimianSuccessAlert(true); state.setMimianSuccessAlertContent( "很抱歉,你选错了!当时国民党滥发货币导致的贬值阴影未消,民众对新货币缺乏信任。此时增发人民币,会使货币供应量远超物资总量,重蹈贬值覆辙,削弱人民币信用,让投机气焰更盛。请你再思考一下吧!" ); } } }; // 处理成功提示框2继续 const handleSuccessAlert2Continue = () => { state.setShowMimianSuccessAlert(false); state.setMimianSuccessAlertContent(""); // 显示旁白2(图4) state.setShowMimianNarration2(true); // 检查碎片14是否已解锁,如果未解锁则触发动画 const pieceId = 14; if (!isPuzzleUnlocked(starName, pieceId)) { triggerPuzzleAnimation(pieceId); } }; // 处理错误提示框继续 const handleErrorAlertContinue = () => { state.setShowMimianSuccessAlert(false); state.setMimianSuccessAlertContent(""); // 重新显示单选题2 state.setShowMimianQuiz2(true); }; // 处理旁白2关闭 const handleNarration2Close = () => { state.setShowMimianNarration2(false); // 显示单选题3 state.setShowMimianQuiz3(true); }; // 处理单选题3提交 const handleQuiz3Submit = (value: string, isCorrect: boolean) => { if (isCorrect) { state.setShowMimianQuiz3(false); state.setShowMimianSuccessAlert(true); state.setMimianSuccessAlertContent( "恭喜你,选择正确!地方配合,调运按时推进。" ); } else { state.setShowMimianQuiz3(false); state.setShowMimianSuccessAlert(true); state.setMimianSuccessAlertContent( "很抱歉,你选错了!地方抵触,调运延误多天。请你再思考一下吧!" ); } }; // 处理单选题3成功/错误提示继续 const handleQuiz3AlertContinue = (isCorrect: boolean) => { state.setShowMimianSuccessAlert(false); state.setMimianSuccessAlertContent(""); if (isCorrect) { // 答对后显示单选题4 state.setShowMimianQuiz4(true); } else { // 答错后重新显示单选题3 state.setShowMimianQuiz3(true); } }; // 处理单选题4提交 const handleQuiz4Submit = (value: string, isCorrect: boolean) => { if (isCorrect) { state.setShowMimianQuiz4(false); state.setShowMimianSuccessAlert(true); state.setMimianSuccessAlertContent( "恭喜你,选择正确!棉农支持,调运量足额完成。" ); } else { state.setShowMimianQuiz4(false); state.setShowMimianSuccessAlert(true); state.setMimianSuccessAlertContent( "很抱歉,你选错了!棉农抵触,调运量减少。请你再思考一下吧!" ); } }; // 处理单选题4成功/错误提示继续 const handleQuiz4AlertContinue = (isCorrect: boolean) => { state.setShowMimianSuccessAlert(false); state.setMimianSuccessAlertContent(""); if (isCorrect) { // 答对后显示旁白3 state.setShowMimianNarration3(true); } else { // 答错后重新显示单选题4 state.setShowMimianQuiz4(true); } }; // 处理旁白3关闭 const handleNarration3Close = () => { state.setShowMimianNarration3(false); // 显示单选题5 state.setShowMimianQuiz5(true); }; // 处理单选题5提交 const handleQuiz5Submit = (value: string, isCorrect: boolean) => { if (isCorrect) { // 标记米棉之战为已解决,并收起文件 state.setIsMimianSolved(true); onCollapseFile(); state.setShowMimianQuiz5(false); state.setShowMimianSuccessAlert(true); state.setMimianSuccessAlertContent( "恭喜你,选择正确!这契合米棉之战史实,多地同步大量抛售,让借高利贷囤货的投机商措手不及。连续抛售使其无力承接,只得亏本抛售,最终纷纷破产,快速稳住物价。" ); } else { state.setShowMimianQuiz5(false); state.setShowMimianSuccessAlert(true); state.setMimianSuccessAlertContent( "很抱歉,你选错了!投机商此前曾吃下政府平价抛售物资获利。逐步降价加舆论引导难让其信服,他们会持续囤货,政府储备会被消耗,反而让投机商掌控节奏,无法遏制物价上涨。请你再思考一下吧!" ); } }; // 处理单选题5成功/错误提示继续 const handleQuiz5AlertContinue = (isEndSuccess: boolean) => { state.setShowMimianSuccessAlert(false); state.setMimianSuccessAlertContent(""); if (isEndSuccess) { // 成功结束:保持 expandedFile 为 null,1 秒后弹出结束语 StudyGuideModal setTimeout(() => { state.setShowMimianNarration5(true); }, 1000); } else { // 答错后重新显示单选题5 state.setShowMimianQuiz5(true); } }; // 处理结束语继续 const handleNarration5Continue = () => { state.setShowMimianNarration5(false); onEnd(); }; return ( <> {/* 文件组件 */} {/* 线索组件 */} {/* 题目组件 */} ); };