import { useEffect, useState, useRef } from "react";
import pic_logo from "@night/pic_logo.png";
import music_off from "@night/btn_music_off.png";
import music_on from "@night/btn_music_on.png";
import age from "@night/age.png";
import start from "@night/btn_start.png";
import pic_linear from "@night/pic_linear.png";
import bg from "@night/bg.jpg";
import bg_qa from "@night/bg_qa.png";
import bg_2 from "@night/bg_2.png";
import btn_log from "@night/btn_log.png";
import qa_line from "@night/qa_line.png";
import shareBtn from "@night/btn_share.png";
import pic_bottom from "@night/pic_bottom.png";
import res_bg from "@night/res_bg.png";
import rules from "@night/rules.png";
import closeBtn from "@night/closeBtn.png";
import OutMask from "@/components/OutMask.tsx";
import "./index.less";

const Nightingale = () => {
	// 默认格式
	interface qaProps {
		[propName: string]: any;
	}
	interface reqProps {
		[propName: string]: any;
	}
	interface reqItemProps {
		[propName: string]: any;
	}
	// state
	const [step, setStep] = useState(-1);
	// 选择的选项
	const [req, setReq] = useState("first");
	const [qa, setQa] = useState("first");
	const [figure, setFigure] = useState("Flihine");
	// 是否可点击
	const [btnClick, setBtn] = useState(false);
	// 当前点击按钮
	const [btnValue, setBtnValue] = useState("");
	const [showRules, setRules] = useState(false);
	// 动画是否结束
	const [isOver, setOver] = useState(false);

	// 控制是否播放
	const [isPlaying, setIsPlaying] = useState(false);
	// 1.定义audioRef获取audio标签
	const audioRef = useRef<HTMLAudioElement>(null);
	useEffect(() => {
		// DOM渲染完成后给audio赋值播放地址
		audioRef.current!.src = "https://cdn.star-linear.com/voice/hd/nightingale_bgm.wav";
	}, []);

	const qaList: qaProps = {
		first: ["当你步入夜莺", "您看到的身影是一位"],
		man: ["您所期待的，", "是怎样年龄阶段的男性呢？"],
		hair: ["您所期待的人，", "拥有怎样的发型呢？"],
		color: ["在您的眼中，", "看到了怎样的色彩？"],
		name: ["请确认您的指名对象。"],
		character: ["您希望对方是什么性格？"]
	};
	//全部答案选项列表 设置下一个答案选项数组
	const reqList: reqProps = {
		first: [
			{ title: "身份成谜的男性", value: "man", qa: "man" },
			{ title: "身份成谜的女性", value: "woman", qa: "hair" }
		],
		// 男性
		man: [
			{ title: "看起来稚嫩的人", value: "immature", qa: "color" },
			{ title: "看起来成熟的人", value: "mature", qa: "character" }
		],
		// 稚嫩
		immature: [
			{ title: "浅色", value: "light", qa: "name" },
			{ title: "深色", value: "dark", qa: "name" }
		],
		light: [{ title: "目中无人的冰山恶龙", value: "Limmel", qa: "end" }],
		dark: [
			{ title: "古灵精怪的炼金术师", value: "Kikidi", qa: "end" },
			{ title: "淘气好动的松鼠兽族", value: "Cocodi", qa: "end" },
			{ title: "勤奋上进的魔法学徒", value: "ethan", qa: "end" }
		],
		// 成熟
		mature: [
			{ title: "温和的", value: "mild_mature", qa: "color" },
			{ title: "活泼的", value: "lively_mature", qa: "hair" },
			{ title: "神秘的", value: "cold_mature", qa: "hair" }
		],
		//成熟- 温和
		mild_mature: [
			{ title: "浅色", value: "mature_light", qa: "name" },
			{ title: "深色", value: "mature_dark", qa: "name" }
		],
		// 成熟- 温和 - 浅色
		mature_light: [
			{ title: "温柔谦逊的第一王子", value: "Demian", qa: "end" },
			{ title: "包容固执的远古精灵", value: "Selieu", qa: "end" }
		],
		// 成熟- 温和 - 浅色
		mature_dark: [
			{ title: "温文尔雅的商会当家", value: "Norden", qa: "end" },
			{ title: "酔心拳法的习武之人", value: "Liyan", qa: "end" }
		],
		// 成熟-活泼
		lively_mature: [
			{ title: "长发", value: "mature_long", qa: "name" },
			{ title: "短发", value: "mature_short", qa: "name" }
		],
		// 成熟-活泼-长发
		mature_long: [
			{ title: "口蜜腹剑的完美执事", value: "Luya", qa: "end" },
			{ title: "天性自由洒脱的船长", value: "Alvaro", qa: "end" }
		],
		// 成熟-活泼-短发
		mature_short: [
			{ title: "热情风趣的吟游诗人", value: "Fermon", qa: "end" },
			{ title: "讹言谎语的神秘妖怪", value: "Fumiya", qa: "end" }
		],
		// 成熟-冷淡
		cold_mature: [
			{ title: "中长发", value: "cold_long", qa: "color" },
			{ title: "短发", value: "cold_short", qa: "color" }
		],
		// 成熟-冷淡-长发
		cold_long: [
			{ title: "冷色", value: "middle_light", qa: "name" },
			{ title: "暖色", value: "middle_dark", qa: "name" }
		],
		middle_light: [
			{ title: "善于交涉的年少骑士", value: "Shafie", qa: "end" },
			{ title: "精明善辩的狡诈商人", value: "Flihine", qa: "end" }
		],
		middle_dark: [
			{ title: "顾影自怜的独角兽", value: "Emic", qa: "end" },
			{ title: "才思敏捷的自由骑士", value: "Bethina", qa: "end" }
		],
		// 成熟-冷淡-短发
		cold_short: [
			{ title: "浅色", value: "short_light", qa: "name" },
			{ title: "深色", value: "short_dark", qa: "name" }
		],
		// 成熟-冷淡-短发-浅色
		short_light: [
			{ title: "成熟稳重的剑术教官", value: "Regis", qa: "end" },
			{ title: "笑起来很诡异的忍者", value: "Hisoga", qa: "end" }
		],
		// 成熟-冷淡-短发- 深色
		short_dark: [
			{ title: "严厉果决的海军统领", value: "Isreall", qa: "end" },
			{ title: "聪慧可靠的雇佣法师", value: "Gluna", qa: "end" }
		],
		// 女性
		woman: [
			{ title: "中短发", value: "short", qa: "character" },
			{ title: "长发", value: "long", qa: "character" }
		],
		// 长发
		short: [
			{ title: "活泼的", value: "livel_long", qa: "name" },
			{ title: "温和的", value: "mild_long", qa: "name" }
		],
		// 长发-活泼
		livel_long: [{ title: "卖面包的人气小说家", value: "Mellie", qa: "end" }],
		// 长发-温和
		mild_long: [
			{ title: "精明能干的优雅淑女", value: "Lillian", qa: "end" },
			{ title: "清和平允的银白骑士", value: "Ophelia", qa: "end" }
		],
		// 短发
		long: [
			{ title: "神秘的", value: "woman_short", qa: "name" },
			{ title: "活泼的", value: "lively_short", qa: "name" }
		],
		// 短发 -冷淡
		woman_short: [
			{ title: "神秘莫测的深红女巫", value: "Rosana", qa: "end" },
			{ title: "优雅疏离的帽子女巫", value: "Filin", qa: "end" }
		],
		// 短发 - 活泼
		lively_short: [
			{ title: "活力四射的铃铛巫女", value: "Suzune", qa: "end" },
			{ title: "狡黠可爱的狐狸小妖", value: "JinYingZi", qa: "end" }
		]
	};
	// 结果列表
	// const figureList: reqProps = {
	// 	Kikidi: [
	// 		"“乐园真是个好地方呀，总是会有络绎不绝的人走进来被我捉弄呢！”",
	// 		"传说暗夜里不仅有危险，还有奇琪蒂——深红馆中唯一的男性巫师，外表看起来还算可爱，实际上是个对外隐藏自己真实身份，喜欢捉弄“猎物”，如同蝙蝠一般昼伏夜出的小恶魔。换句话说，如果不想被奇琪蒂抓住，那就不要熬夜，早些休息。"
	// 	],
	// 	Limmel: [
	// 		"“耀眼又美丽的宝石，我的名字是莱米尔。从今以后就是你的守护者了。别害怕，我会好好保护你的。”",
	// 		"不知为何忽然出现在洛维斯的龙族少年，光凭外表就知道他肯定拥有尊贵的身份。莱米尔性格古怪，对待陌生人十分粗暴冷漠，对待亲近的人则时而霸道时而乖顺，让人难以捉摸。据说离开家乡是为了寻找只属于自己的，重要的“珍宝”。"
	// 	],
	// 	Cocodi: [
	// 		"“高大的兽族总是趾高气昂，他们不过是块头大了一点而已......”",
	// 		"活泼可爱有点娇气的松鼠兽族。才来到人类社会，并不熟悉这里的规则，处于对一切都感到非常新鲜的时期。虽然模样可爱但有过大闹坚果店的恶劣记录！……所以，实际上是个名声在外的麻烦人物。对于柔软蓬松的尾巴非常自豪！关系好的话会让你摸一摸也说不定。"
	// 	],
	// 	ethan: [
	// 		"“老师说我在发传单方面有异常的才华，是不是放弃魔法成为推销员会比较好？”",
	// 		"因为有一些魔术天赋，伊森走上了学习魔法的道路，虽然付出了许多努力，但收获颇少。时常因为成绩不理想而苦恼着。“比起魔法师，果然还是做一个街头魔术师更适合我……”伊森时常这样懊恼着。"
	// 	],
	// 	Demian: [
	// 		"“骑士，德米安。我以手中的剑起誓，绝不会让你受到任何伤害。”",
	// 		"洛维斯的王子，同时也是拂晓骑士们的首领。他年轻有为，但从不骄傲，待人始终温和有礼。他虽然拥有强大的力量，但绝对不会滥用，是世人眼里完美的王子殿下——尽管他也有不擅长的事情。"
	// 	],
	// 	Selieu: [
	// 		"“比起提前知道答案，我更想和你一起慢慢前进……直到最后。”",
	// 		"在精灵王的庇护与指引下，白雾之森的生灵与世隔绝、宁静悠闲。他喜爱和平，厌恶纷争，温和得如同春天吹过永盛花原的第一缕风。不过作为一个生命漫长无涯的远古精灵，瑟琉偶尔也会显露出偏执的一面，他有自己的坚持。"
	// 	],
	// 	Norden: [
	// 		"“同你合作非常顺心，以后也请多关照了。”",
	// 		"温和有礼的成功商人，时常彬彬有礼地提出一些过分的要求……让人难以琢磨。如果他主动提出合作需求，请一定仔细考虑，并详读他撰写的合同。"
	// 	],
	// 	Liyan: [
	// 		"“又到修行的时间了。”",
	// 		"出身陶缘的武道家，为挑战强者、精进武艺而不断游历中。沉稳、踏实，但是不太会说话，对于该如何与异性相处一窍不通，和女孩对视就会不由自主变口吃。总的来说是个认真且正直的人，承诺过的事无论多难都会做到，出了名的可靠。"
	// 	],
	// 	Luya: [
	// 		"“没有比我更完美的执事，请您记住这一点。”",
	// 		"总在塔吉玛出没的神秘执事。只要是雇主的要求，无论多么奇怪，都能百分之百完美完成，以“为雇主提供优质生活”而努力。不过在执事这一身份的背后，路亚似乎有着不为人知的一面……"
	// 	],
	// 	Alvaro: [
	// 		"“要戴这顶帽子吗，以后你是船长，我是你的副手。”",
	// 		"虽然阿尔瓦罗宣称自己“只是个不起眼的船长罢了”，但谁都知道塔吉玛的海面曾因他而掀起风浪。黑色的船在大海上肆意掠夺宝藏，尽管最终被塔吉玛的海军击败，但这未必意味着结束。"
	// 	],
	// 	Fermon: [
	// 		"“我可不想一直留在同一个地方，诗人注定漂泊。”",
	// 		"来自洛维斯的吟游诗人，深受洛维斯乡村中的妇女和儿童们喜爱。经常在诗歌中描绘各地的风景，但实际上由于晕车严重，身为吟游诗人的他其实连洛维斯都没出过。费尔蒙偶尔会因此感到苦恼，不过只要唱一首歌就能回归无忧无虑的状态。"
	// 	],
	// 	Fumiya: [
	// 		"“我不想再变成其他人的样子顶替他们工作了！这不是人...不对，这不是妖怪该做的事情！”",
	// 		"以他人记忆为食的妖怪，来自遥远的坊国。拥有随意改变自身外貌的能力，这为他四处行骗提供了非常大的帮助。虽然看着很好相处，但到了进食期就会不择手段去夺取或篡改他人的记忆，与他相处时千万不能掉以轻心。"
	// 	],
	// 	Emic: [
	// 		"“我知道我的美丽足以让阳光暗淡，但你无须为此感到畏惧。”",
	// 		"用“自恋”也不足以形容的家伙。当人们对上他的眼睛时，一切似乎又变得理所当然。他伏在泉水边忧郁的身影，让人想起关于水仙花的传说故事。那种对美貌的极度自信和极致追求，在梦乐园里也许再找不到第二个这样的人了。"
	// 	],
	// 	Flihine: [
	// 		"“离我的收藏室远一点，别以为我不知道你在打什么主意。”",
	// 		"在充满海洋与商业气息的塔吉玛，许多人拥有无与伦比的经商天赋。不过要论商务谈判能力，可能很少有人能胜过弗林海因。这个拥有一头柔软金发的男人，当他藏在镜片后狡黠的眼睛望向你时，请小心。"
	// 	],
	// 	Shafie: [
	// 		"“你问我会不会感到无聊？不，这样安安静静呆着挺好的。”",
	// 		"拂晓骑士中最为年轻的一位，在学生时代是当之无愧的天才级学生，成绩、家世样样完美，是绝对令人羡慕的“别人家的孩子”。处世圆滑，讨人喜爱，因为太过优秀，未到规定年龄便破格成为了拂晓骑士。"
	// 	],
	// 	Bethina: [
	// 		"“只是站在这里看着你，就让人觉得神清气爽。你充满活力的目光就像是正午盛开的花朵，非常吸引我。”",
	// 		"虽然在四骑士（德米安等人）中较为年长，不过据其他三人称，贝汀那大部分时候并没有起到年长者的作用……平日里总说自己有着更为远大的目标，但这“远大的目标”几乎每天都是不同的。在旁人看来是个极其难定义的自由之人。"
	// 	],
	// 	Regis: [
	// 		"“到我这个年纪，其实已经很难再有突破。但为了你，我愿意超越极限，成为你最坚固的盾牌。而且……不能总让年轻人出风头啊。”",
	// 		"看似严肃的剑术教官，实际也有轻松活跃的一面。曾任拂晓骑士团高级指挥官，现在则更愿意退居二线担当教习，将机会让给年轻人。",
	// 		"兴趣是棋牌类活动——某种意义上的老谋深算。很会做饭和照顾人，并且意外地很会说冷笑话。"
	// 	],
	// 	Hisoga: [
	// 		"“别担心，我身上没有藏蜘蛛。”",
	// 		"喜爱制作标本，总是笑眯眯地说很恐怖的话。时密完全不喜欢忍者的工作，经常偷懒在自己房间里做标本。后来有一次利用标本技术成功从妖怪肚子里找出关键情报，自此组织便允许他在忍者城楼里拥有自己的标本制作室。"
	// 	],
	// 	Isreall: [
	// 		"“过多的介绍就不必了，之后会慢慢让你知道我的为人。”",
	// 		"作为一名雷厉风行的执行者，伊斯雷尔其人不苟言笑，曾经是海上令人闻风丧胆的海军统领，但因为平日太过于严厉，性格也过于刻板强硬，所以没有朋友。不过据本人称，他并不在意。"
	// 	],
	// 	Gluna: [
	// 		"“那么，要开始讲课了，准备好记笔记了吗？”",
	// 		"身份神秘的魔法师，游走在世界各地。因其性格原因，十分喜爱指导他人做事。有时甚至会亲自出马帮他人做事，直到做对为止。所以……如果有难以攻克的试题，可以试着拿给格伦亚看看。"
	// 	],
	// 	Mellie: [
	// 		"“这一期准备刊登的稿子写好了，给我提点建议吧。”",
	// 		"在面包店工作的梅莉非常喜欢写作，做完面包后她会拿着本子和笔，坐在窗户边记下今天一天的写作想法。梅莉总是担心自己写出来的文字会不受人欢迎，但在发表了第一篇作品后，梅莉逐渐找回了自信。"
	// 	],
	// 	Lillian: [
	// 		"“嗯~努力的模样也必须比别人优雅十倍，这就是我的信条。”",
	// 		"优雅有礼的大小姐，作为商人也能独当一面，如果因为外貌和年龄而看轻她，可是会吃大亏的。至于爱看浪漫小说？这是淑女的爱好，请不要大惊小怪。"
	// 	],
	// 	Ophelia: [
	// 		"“我是只属于你一人的骑士奥菲利亚。来，请放心将手交给我——无论何时，我都不会放开的。”",
	// 		"作为洛维斯王国拂晓骑兵团成员之一，奥菲利亚的骑术、剑术等全都是顶尖水准。她为人坚强、正直，因其对待女性格外温柔，总是毫不吝啬对女性的夸赞，所以在女性中十分有人气。兴趣爱好广泛，似乎找不出她不擅长的事。"
	// 	],
	// 	Rosana: [
	// 		"“即便是我也有看不透你的时候，所以我才觉得你有趣。”",
	// 		"一个不知从何处而来，也不知要去往何处的女巫。明明是温柔的絮语却让人不寒而栗，被她“喜欢”上的人会有怎样的结局……还是不要知道的太清楚比较好。"
	// 	],
	// 	Filin: [
	// 		"“帽子和人一样，需要精心维护才能保持美丽。”",
	// 		"来自深红馆的女巫。模样看似是十几岁的女童，但实际年龄始终成谜，似乎连百年前的战争都亲眼见证过，总是以长辈的口吻说话。不喜欢外出，平日会安安静静地待在自己的房间里面，一边听着古典乐曲，一边制作各式各样的帽子。"
	// 	],
	// 	Suzune: [
	// 		"“有点无聊啊......要不要看我跳舞？我最近又新学了一支舞哦！”",
	// 		"自称巫女的可疑家伙。真身是铃铛化出的妖怪，按照妖怪的年纪来算其实还很小。十分有元气，虽然缺乏人类社会的基本常识但自信满满！为了振兴祈愿寺在不断努力着，虽然方式或许并不可取，但这份积极进取的精神值得嘉许。"
	// 	],
	// 	JinYingZi: [
	// 		"“你身上的味道很好闻呢，是不是有用熏香之类的东西？”",
	// 		"离开老家，云游在外的狐狸妖怪少女，总能分寸正好地拿捏着任性的程度。旅途中，金樱子经常被认作是兽族，有时候她会反驳，有时候她会默认，还有的时候她会主动声称自己是兽族——一切都要看她心情。"
	// 	]
	// };

	const rulesElement = () => {
		return (
			<div className="rulesBox">
				<img className="rules" src={rules} alt="" />
				<img className="close" src={closeBtn} alt="" onClick={closeRuleBtn} />
				<a
					className="link"
					href="https://weibo.com/p/100808f765ceea1fb70a179203dc3232c71ab8/super_index"
					target="_blank"
					rel="noreferrer"
				></a>
			</div>
		);
	};

	const closeRuleBtn = () => {
		setRules(false);
	};

	const startBtn = () => {
		setOver(true);
		setStep(0);
		setTimeout(() => {
			setOver(false);
		}, 1000);
	};

	const step1Btn = () => {
		if (isOver) return;
		setOver(true);
		setStep(1);
		setTimeout(() => {
			setOver(false);
		}, 1500);
	};
	const step2Btn = () => {
		if (isOver) return;
		setOver(true);
		setStep(2);
		setTimeout(() => {
			setOver(false);
		}, 1500);
	};
	// 选项按钮
	const reqBtn = (element: any) => {
		if (btnClick) return;
		setBtn(true);
		setBtnValue(element.value);
		if (element.qa === "end") {
			setStep(3);
			setFigure(element.value);
			return;
		}
		setTimeout(() => {
			// 设置问题
			setQa(element.qa);
			// 设置对应答案选项
			setReq(element.value);
			setBtn(false);
			setBtnValue("");
		}, 1200);
	};
	const showRuleBtn = () => {
		setRules(true);
	};

	const playAudio = (e: React.MouseEvent<HTMLDivElement>) => {
		e.stopPropagation();
		isPlaying ? audioRef.current?.pause() : audioRef.current?.play().catch(() => setIsPlaying(false));
		// 改变isPlaying的状态
		setIsPlaying(!isPlaying);
	};

	return (
		<div className="home card">
			{/* <img src={isPlaying ? music_on : music_off} alt="" className="playBtn" onClick={playAudio} /> */}
			<div className={`startBox ${step !== -1 ? "fadeOut" : ""}`} style={{ backgroundImage: `url(${bg}` }} onClick={startBtn}>
				<img src={isPlaying ? music_on : music_off} alt="" className="playBtn" onClick={playAudio} />
				<img className="logo" src={pic_logo} alt="welcome" />
				<img src={age} alt="" className="age" />
				<img src={start} alt="" className="start" />
				<p className="tips">推荐使用手机端竖屏体验</p>
				<img src={pic_linear} alt="" className="starlinear" />
			</div>
			{/* 开篇 */}
			<div className={`beginText ${step !== 0 ? "fadeOut" : ""}`} style={{ backgroundImage: `url(${bg_2}` }}>
				<img src={isPlaying ? music_on : music_off} alt="" className="playBtn" onClick={playAudio} />
				<ul className={`textList ${step === 0 ? "fadein" : ""}`}>
					<li className="textItem">欢迎您来到「夜莺」，这里是一个能让您</li>
					<li className="textItem">忘却所有烦恼，感到身心愉悦的地方。</li>
					<li className="textItem mt">现在，</li>
					<li className="textItem">请选择您今夜的指名对象。</li>
				</ul>
				<div className={`step2  ${step === 0 ? "fadein" : ""}`} style={{ backgroundImage: `url(${btn_log}` }} onClick={step1Btn}>
					等等，我第一次来，怎么上来就要指名啊！！
				</div>
			</div>
			{/* 开篇 */}
			<div className={`startText ${step !== 1 ? "fadeOut" : ""}`} style={{ backgroundImage: `url(${bg_2}` }}>
				<img src={isPlaying ? music_on : music_off} alt="" className="playBtn" onClick={playAudio} />
				<ul className={`textList ${step === 1 ? "fadein" : ""}`}>
					<li className="textItem">客人竟然是第一次到访么？</li>
					<li className="textItem">……</li>
					<li className="textItem">没关系，只要是客人您的需求，</li>
					<li className="textItem">本店全都可以满足。</li>
					<li className="textItem">只需要回答几个简单的小问题。</li>
				</ul>
				<div className={`step2  ${step === 1 ? "fadein" : ""}`} style={{ backgroundImage: `url(${btn_log}` }} onClick={step2Btn}>
					唔……真的么？让我试试好了
				</div>
			</div>
			{/* 问答 */}
			<div className={`qa ${step !== 2 ? "fadeOut" : ""}`} style={{ backgroundImage: `url(${bg_qa}` }}>
				<img src={isPlaying ? music_on : music_off} alt="" className="playBtn" onClick={playAudio} />
				{/* 问题 */}
				<div className={`req ${btnClick ? "active" : ""}`} style={{ backgroundImage: `url(${qa_line}` }}>
					{qaList[qa]!.map((element: any) => {
						return (
							<p className={`${btnValue === element.value ? "fadein" : "fadeout"}`} key={element.value}>
								{element}
							</p>
						);
					})}
				</div>

				{/* 选项 */}
				{reqList[req].map((element: reqItemProps) => {
					return (
						<div
							className={`reqBtn ${btnClick && btnValue === element.value ? "active" : ""}`}
							style={{ backgroundImage: `url(${res_bg}` }}
							key={element.value}
							onClick={() => reqBtn(element)}
						>
							<p> {element.title}</p>
						</div>
					);
				})}
			</div>
			{/* 结果 */}
			<div className={`resultBox ${step === 3 && !showRules ? "active" : null}`}>
				<img src={isPlaying ? music_on : music_off} alt="" className="playBtn" onClick={playAudio} />
				<img
					className="figure"
					src={step === 3 ? `https://cdn.star-linear.com/img/hd/nightingale/result/${figure}.png` : ""}
					alt=""
				/>
				<div className="shareBtn" style={{ backgroundImage: `url(${shareBtn}` }} onClick={showRuleBtn}></div>
				<div className="saveTips">长按保存图片</div>
				<div className="pic_bottom" style={{ backgroundImage: `url(${pic_bottom}` }}>
					<a className="toDream" href="http://dream.star-linear.com" target="_blank" rel="noopener noreferrer"></a>
				</div>
				{/*  这里是需要保存成图片的内容 */}
				<img
					className={`canvasImg ${step === 3 ? "active" : null}`}
					src={step === 3 ? `https://cdn.star-linear.com/img/hd/nightingale/${figure}.png` : ""}
					alt=""
				/>
				{/* 背景音乐 */}
			</div>
			<div id="audioBox">
				<audio ref={audioRef} />
			</div>

			{showRules ? <OutMask child={rulesElement} /> : <></>}
		</div>
	);
};

export default Nightingale;
