update fire

src/components/模块组件/窑炉内部/Center/videoComponents/EnterToFloor1.jsx

@@ -1,33 +1,30 @@
 import { motion, AnimatePresence } from 'framer-motion';
-import { useRef, useEffect, useMemo } from 'react';
+import { useRef, useEffect, useMemo, useCallback, useState } from 'react';
 import cls from '../index.module.css';
+import SocketContext from '../../../../../store/socket-data-provider';
+import { useContext } from 'react';
 
 function EnterToFloorOne(props) {
+	const ctx = useContext(SocketContext);
+	const fireDir = ctx.runState?.fireDirection || null;
+	const [fireCanPlay, setFireCanPlay] = useState(false);
 	const vd = useRef(null);
 	const show = props.opacity || 0;
 
 	useEffect(() => {
-		if (show) vd.current.play();
+		if (show) {
+			vd.current.play();
+			setTimeout(() => {
+				console.log('开启enter的火播放');
+				setFireCanPlay(true);
+			}, 5000);
+		}
+		return () => {
+			console.log('关闭enter的火播放');
+			setFireCanPlay(false);
+		};
 	}, [show]);
 
-	// const show = useMemo(
-	// 	() => ({
-	// 		opacity: 1,
-	// 		display: 'block',
-	// 		duration: 0,
-	// 	}),
-	// 	[],
-	// );
-	// const hide = useMemo(
-	// 	() => ({
-	// 		opacity: 0,
-	// 		transitionEnd: {
-	// 			display: 'none',
-	// 		},
-	// 	}),
-	// 	[],
-	// );
-
 	return (
 		<AnimatePresence>
 			{show && (
@@ -49,6 +46,27 @@ function EnterToFloorOne(props) {
 						<source src="/video/floor1.webm" type="video/mp4" />
 					</video>
 
+					{fireCanPlay && fireDir == '东火' && (
+						<video
+							src="/video/fire_top.webm"
+							muted
+							autoPlay
+							loop
+							width={3900}
+							style={{ position: 'absolute', top: '-20px', left: '-20px' }}
+						></video>
+					)}
+					{fireCanPlay && fireDir == '西火' && (
+						<video
+							src="/video/fire_down.webm"
+							muted
+							autoPlay
+							loop
+							width={3900}
+							style={{ position: 'absolute', top: '-20px', left: '-20px' }}
+						></video>
+					)}
+
 					<motion.div
 						className={cls.videoLayer2}
 						key="eto1div"
@@ -62,23 +80,6 @@ function EnterToFloorOne(props) {
 							transition: { duration: 0.3, delay: 2 },
 						}}
 					></motion.div>
-
-					<video
-						src="/video/fire_top.webm"
-						muted
-						autoPlay
-						loop
-						width={3900}
-						style={{ position: 'absolute', top: '-20px', left: '-20px' }}
-					></video>
-					<video
-						src="/video/fire_down.webm"
-						muted
-						autoPlay
-						loop
-						width={3900}
-						style={{ position: 'absolute', top: '-20px', left: '-20px' }}
-					></video>
 				</motion.div>
 			)}
 		</AnimatePresence>

src/components/模块组件/窑炉内部/Center/videoComponents/Floor1To2.jsx

@@ -1,13 +1,30 @@
 import { motion, AnimatePresence } from 'framer-motion';
-import { useRef, useEffect, useMemo } from 'react';
+import { useRef, useEffect, useMemo, useState } from 'react';
 import cls from '../index.module.css';
+import SocketContext from '../../../../../store/socket-data-provider';
+import { useContext } from 'react';
 
 function FloorOneToTwo(props) {
+	const ctx = useContext(SocketContext);
+	const fireDir = ctx.runState?.fireDirection || null;
+	const [fireCanPlay, setFireCanPlay] = useState(false);
+
 	const vd = useRef(null);
 	const show = props.opacity || 0;
 
 	useEffect(() => {
-		if (show) vd.current.play();
+		if (show) {
+			vd.current.play();
+			setTimeout(() => {
+				console.log('开启1-2的火播放');
+				setFireCanPlay(true);
+			}, 3000);
+		}
+		if (!show) setFireCanPlay(false);
+		return () => {
+			console.log('关闭1-2的火播放');
+			setFireCanPlay(false);
+		};
 	}, [show]);
 
 	return (
@@ -31,6 +48,28 @@ function FloorOneToTwo(props) {
 						<source src="/video/1to2.webm" type="video/mp4" />
 					</video>
 
+					{fireCanPlay && fireDir == '东火' && (
+						<video
+							src="/video/fire_top.webm"
+							muted
+							autoPlay
+							loop
+							width={3700}
+							style={{ position: 'absolute', top: '18px', left: '56px' }}
+						></video>
+					)}
+					{fireCanPlay && fireDir == '西火' && (
+						// {fireCanPlay && (
+						<video
+							src="/video/fire_down.webm"
+							muted
+							autoPlay
+							loop
+							width={3780}
+							style={{ position: 'absolute', top: '-24px', left: '12px' }}
+						></video>
+					)}
+
 					<motion.div
 						className={cls.videoLayer2}
 						key="1to2div"

src/components/模块组件/窑炉内部/Center/videoComponents/Floor2To1.jsx

@@ -1,13 +1,30 @@
 import { motion, AnimatePresence } from 'framer-motion';
-import { useRef, useEffect, useMemo } from 'react';
+import { useRef, useEffect, useMemo, useState } from 'react';
 import cls from '../index.module.css';
+import SocketContext from '../../../../../store/socket-data-provider';
+import { useContext } from 'react';
 
 function FloorTwoToOne(props) {
+	const ctx = useContext(SocketContext);
+	const fireDir = ctx.runState?.fireDirection || null;
+	const [fireCanPlay, setFireCanPlay] = useState(false);
+
 	const vd = useRef(null);
 	const show = props.opacity || 0;
 
 	useEffect(() => {
-		if (show) vd.current.play();
+		if (show) {
+			vd.current.play();
+			setTimeout(() => {
+				console.log('开启2-1的火播放');
+				setFireCanPlay(true);
+			}, 3000);
+		}
+		if (!show) setFireCanPlay(false);
+		return () => {
+			console.log('关闭2-1的火播放');
+			setFireCanPlay(false);
+		};
 	}, [show]);
 
 	return (
@@ -31,6 +48,29 @@ function FloorTwoToOne(props) {
 						<source src="/video/2to1.webm" type="video/mp4" />
 					</video>
 
+					{fireCanPlay && fireDir == '东火' && (
+						// {fireCanPlay && (
+						<video
+							src="/video/fire_top.webm"
+							muted
+							autoPlay
+							loop
+							width={3800}
+							style={{ position: 'absolute', top: '10px', left: '-26px' }}
+						></video>
+					)}
+					{fireCanPlay && fireDir == '西火' && (
+						// {fireCanPlay && (
+						<video
+							src="/video/fire_down.webm"
+							muted
+							autoPlay
+							loop
+							width={3800}
+							style={{ position: 'absolute', top: '-12px', left: '-26px' }}
+						></video>
+					)}
+
 					<motion.div
 						className={cls.videoLayer2}
 						key="eto1div"