make video can change position and js handle select character

src/css/video.css

@@ -3,18 +3,27 @@
     overflow: hidden;
 } */
 .video-container {
+    position: fixed;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    width: 100%;
     height: 100vh;
     overflow: hidden;
 }
-  
-@media (orientation: landscape) {
-    .video-container {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 100%;
-        height: 100%;
+@media only screen and (max-device-width: 600px) {
+    .video-container.middle {
+        width: 200%;
+        height: 150vh;
+        left: 0%;
+    }
+    .video-container.left {
+        width: 300%;
+        left: 0%;
+    }
+    .video-container.right {
+        width: 200%;
+        left: -100%;
     }
 }
   

src/pages/components/playVideo.jsx

@@ -1,10 +1,10 @@
 import '../../css/video.css';
 
-function PlayVideo({ src = "hallway_FFF.mp4", onVideoReady }) {
+function PlayVideo({ src = "hallway_MMM.mp4" ,side = "middle", onVideoReady }) {
     const urlSource = `${import.meta.env.VITE_ASSETS_URL}/${src}`;
 
     return (
-        <div className="video-container">
+        <div className={`video-container ${side}`}>
             <video
                 autoPlay
                 muted

src/pages/introductionPage.jsx

@@ -5,29 +5,24 @@ import Animation from './components/animation.jsx';
 import PlayVideo from './components/playVideo.jsx';
 import LoadingScene from './components/loadingScene.jsx';
 
-function IntroductionPageData(){
+function IntroductionData({onClickedIntroduction}){
+
     return(
-  	  <div style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        height: '100vh',
-        maxWidth:"100vw",
-        flexDirection: 'column',
-      }}>
-        
-        <div style={{
-            position: "fixed",
-            top: 0,
-            left: 0,
-            width: "100vw",
-            height: "100vh",
-            background: "rgba(var(--black), 0.5)",
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            zIndex: 1 // Ensure this is above other elements
-        }}>
+        <div 
+            onClick={onClickedIntroduction}
+            style={{
+                position: "fixed",
+                top: 0,
+                left: 0,
+                width: "100vw",
+                height: "100vh",
+                background: "rgba(var(--black), 0.5)",
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                zIndex: 1 // Ensure this is above other elements
+            }}
+        >
             <label style={{color:"rgb(var(--white))", fontWeight:"bold"}}>
                 You are a new student who just <br />
                 transfered to this school not long ago. <br />
@@ -35,26 +30,133 @@ function IntroductionPageData(){
                 but eventually you  meet...
             </label>
         </div>
-  	  </div>
   )
 }
 
+function SelectionCharacter(){
+    const [numChar, setNumChar] = useState(1);
+
+    const handleLeftClicked = () => {
+        var temp = numChar - 1
+        if (temp<1){
+            setNumChar(3)
+        }
+        else{
+            setNumChar(temp)
+        }
+    };
+    const handleRightClicked = () => {
+        var temp = numChar + 1
+        if (temp>3){
+            setNumChar(1)
+        }
+        else{
+            setNumChar(temp)
+        }
+    };
+
+    class Character {
+        name(num) {
+            if (num === 1) {
+                return "Porsche";
+            } else if (num === 2) {
+                return "Pie";
+            } else if (num === 3) {
+                return "Patt";
+            } else {
+                return "Invalid";
+            }
+        }
+        position(num) {
+            if (num === 1) {
+                return "left";
+            } else if (num === 2) {
+                return "middle";
+            } else if (num === 3) {
+                return "right";
+            } else {
+                return "Invalid";
+            }
+        }
+    }
+    
+    const character = new Character();;
+
+    return (
+        <div style={{
+            position: "fixed",
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: "100vw",
+            height: "100vh",
+            zIndex: 1,
+        }}>
+            <div className="button left" 
+                onClick={handleLeftClicked}
+                style={{
+                    // background: 'white',
+                    width:'10vw',
+                    height:'20vh'
+                }}
+            >
+                <img src="https://placehold.co/400x600" style={{width:'100%',height:'100%'}}/>
+            </div>
+            <div className="textBox" 
+                style={{
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    width:'10vw',
+                    height:'20vh'
+                }}>
+                {character.name(numChar)}
+            </div>
+            <div className="button right" 
+                onClick={handleRightClicked}
+                style={{
+                    // background: 'white',
+                    width:'10vw',
+                    height:'20vh'
+                }}
+            >
+                <img src="https://placehold.co/400x600" style={{width:'100%',height:'100%'}}/>
+            </div>
+        </div>
+    )
+}
+
 function IntroductionPage() {
     const [loading, setLoading] = useState(true);
+    const [positionState, setPositionState] = useState("middle");
+    const [isClickedIntroduction, setIsClickedIntroduction] = useState(false);
+
+
+    const handleClickIntroduction = () => {
+        setIsClickedIntroduction(true); 
+        console.log(isClickedIntroduction)
+    };
 
     const handleVideoReady = () => {
-        setLoading(false); // Set loading to false when the video is ready
+        setLoading(false); 
     };
 
     return (
-        <div>
+        <div style={{
+            width: "100vw",
+            height: "100vh",
+        }}>
             {loading ? (
                 <LoadingScene />
             ) : (
-                <IntroductionPageData />
+                !isClickedIntroduction ? (
+                    <IntroductionData onClickedIntroduction={handleClickIntroduction} />
+                ) : (
+                    <SelectionCharacter />
+                )
             )}
             
-            <PlayVideo onVideoReady={handleVideoReady} />
+            <PlayVideo src='hallway_FFF.mp4' side='middle' onVideoReady={handleVideoReady} />
         </div>
     );
 }