mt-fe-group/xuchang-new
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

setup

Browse Source
This commit is contained in:
lb
2023-11-09 15:34:52 +08:00
parent b0431e4a33
commit b4eb30d76f
146 changed files with 2988 additions and 1328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor1.jsx Normal file
View File

@@ -0,0 +1,92 @@
import { motion, AnimatePresence } from "framer-motion";
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 ctx = null;
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();
setTimeout(() => {
console.log("开启enter的火播放");
setFireCanPlay(true);
}, 5000);
}
return () => {
console.log("关闭enter的火播放");
setFireCanPlay(false);
};
}, [show]);
return (
<AnimatePresence>
{show && (
<motion.div
className="video-wrapper"
style={{
position: "fixed",
top: 0,
left: 0,
width: "100%",
height: "100%",
zIndex: -999,
overflow: "hidden",
}}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: [1, 1, 0], transition: { duration: 0.5 } }}
>
<video ref={vd} muted width={"100%"}>
<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.videoLayer1}
key="eto1div"
style={{
top: "336px",
left: "730px",
width: "2380px",
}}
animate={{
opacity: [0, 0, 0, 0.6, 1],
transition: { duration: 0.3, delay: 2 },
}}
></motion.div>
</motion.div>
)}
</AnimatePresence>
);
}
export default EnterToFloorOne;

44
src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor2.jsx Normal file
View File

@@ -0,0 +1,44 @@
import { motion } from 'framer-motion';
import { useRef, useEffect } from 'react';
function EnterToFloorTwo(props) {
const vd = useRef(null);
const opacity = props.opacity || 0;
if (opacity == 1) {
setTimeout(() => {
vd.current.play();
}, 100);
}
useEffect(() => {
vd.current.addEventListener('ended', () => {
setTimeout(() => {
vd.current.currentTime = 0;
}, 1000);
});
}, []);
return (
<motion.div
className="video-wrapper"
style={{
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: -1000,
opacity: opacity,
zIndex: -999,
}}
transition={{ type: 'tween', duration: 1 }}
>
<video ref={vd} muted width={'100%'}>
<source src="/video/floor2.webm" type="video/mp4" />
</video>
</motion.div>
);
}
export default EnterToFloorTwo;

38
src/components/Modules/KilnInner/Center/videoComponents/EnterVideo.jsx Normal file
View File

@@ -0,0 +1,38 @@
import { motion, AnimatePresence } from 'framer-motion';
import { useEffect, useRef, useMemo } from 'react';
function EnterVideo(props) {
const show = props.opacity || 0;
const vd = useRef(null);
useEffect(() => {
vd.current.addEventListener('ended', props.onVideoEnd);
}, []);
return (
<AnimatePresence>
{show && (
<motion.div
className="video-wrapper"
style={{
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: -1000,
}}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: [1, 1, 0], transition: { duration: 0.5 } }}
>
<video ref={vd} muted autoPlay={true} width={'100%'}>
<source src="/video/enter.webm" type="video/mp4" />
</video>
</motion.div>
)}
</AnimatePresence>
);
}
export default EnterVideo;

97
src/components/Modules/KilnInner/Center/videoComponents/Floor1To2.jsx Normal file
View File

@@ -0,0 +1,97 @@
import { motion, AnimatePresence } from "framer-motion";
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 ctx = null;
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();
setTimeout(() => {
console.log("开启1-2的火播放");
setFireCanPlay(true);
}, 3000);
}
if (!show) setFireCanPlay(false);
return () => {
console.log("关闭1-2的火播放");
setFireCanPlay(false);
};
}, [show]);
return (
<AnimatePresence>
{show && (
<motion.div
className="video-wrapper"
style={{
position: "fixed",
top: "7px",
left: "50px",
width: "calc(100% - 50px)",
height: "calc(100% - 7px)",
zIndex: -998,
overflow: "clip",
}}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0, transition: { duration: 0, delay: 0.1 } }}
>
<video ref={vd} muted>
<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"
style={{
top: "360px",
left: "740px",
width: "2415px",
height: "690px",
}}
animate={{
opacity: [0, 0, 0, 0.6, 1],
transition: { duration: 0.3, delay: 2 },
}}
></motion.div>
</motion.div>
)}
</AnimatePresence>
);
}
export default FloorOneToTwo;

97
src/components/Modules/KilnInner/Center/videoComponents/Floor2To1.jsx Normal file
View File

@@ -0,0 +1,97 @@
import { motion, AnimatePresence } from "framer-motion";
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 ctx = null;
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();
setTimeout(() => {
console.log("开启2-1的火播放");
setFireCanPlay(true);
}, 3000);
}
if (!show) setFireCanPlay(false);
return () => {
console.log("关闭2-1的火播放");
setFireCanPlay(false);
};
}, [show]);
return (
<AnimatePresence>
{show && (
<motion.div
className="video-wrapper"
style={{
position: "fixed",
top: "7px",
left: "50px",
width: "calc(100% - 50px)",
height: "calc(100% - 7px)",
zIndex: -998,
overflow: "clip",
}}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0, transition: { duration: 0.2, delay: 0.2 } }}
>
<video ref={vd} muted>
<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.videoLayer1}
key="eto1div"
style={{
top: "336px",
left: "730px",
width: "2380px",
}}
animate={{
opacity: [0, 0, 0, 0.6, 1],
transition: { duration: 0.3, delay: 2 },
}}
></motion.div>
</motion.div>
)}
</AnimatePresence>
);
}
export default FloorTwoToOne;