create introductionPage

src/main.jsx

@@ -6,7 +6,9 @@ import './css/global.css';
 import HomePage from './pages/homePage.jsx';
 import WarningPage from './pages/warningPage.jsx';
 import NamePage from './pages/namePage.jsx';
-import Animation from './pages/components/testAnimation_onefile.jsx';
+import Animation from './pages/components/animation.jsx';
+import IntroductionPage from './pages/introductionPage.jsx';
+
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
@@ -16,6 +18,8 @@ createRoot(document.getElementById('root')).render(
         <Route path="/warn" element={<WarningPage />} />
         <Route path="/name" element={<NamePage />} />
         <Route path="/sprite" element={<Animation />} />
+        <Route path="/introduction" element={<IntroductionPage />} />
+
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>
     </BrowserRouter>

src/pages/components/animation.jsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react';
+import JSZip from 'jszip';
+
+const Animation = ({src="src/assets/mainCharacters/M_Porsche_cross_arm.zip" ,animationWidth="500px"}) => {
+  const [images, setImages] = useState([]);
+  const [currentFrame, setCurrentFrame] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const frameRate = 1000/24; 
+
+  useEffect(() => {
+    const loadImages = async () => {
+      const zip = new JSZip();
+      try {
+        const response = await fetch(src);
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
+        }
+        const data = await response.arrayBuffer();
+        const zipContent = await zip.loadAsync(data);
+
+        const imgPromises = [];
+        zipContent.forEach((relativePath, file) => {
+          if (file.name.endsWith('.webp')) {
+            imgPromises.push(
+              file.async('base64').then(base64 => {
+                return `data:image/webp;base64,${base64}`;
+              })
+            );
+          }
+        });
+
+        const imgUrls = await Promise.all(imgPromises);
+
+        if (imgUrls.length === 0) {
+          console.error('No images found in the ZIP file.');
+        }
+
+        setImages(imgUrls);
+      } catch (error) {
+        console.error('Error loading images:', error);
+      } finally {
+        setLoading(false); 
+      }
+    };
+
+    loadImages();
+
+  }, []);
+
+  useEffect(() => {
+    if (images.length > 0) {
+      const interval = setInterval(() => {
+        setCurrentFrame((prevFrame) => (prevFrame + 1) % images.length);
+      }, frameRate);
+
+      return () => clearInterval(interval);
+    }
+  }, [images]);
+
+  if (loading) {
+    return <div>Loading...</div>; 
+  } else {
+    return (
+      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+        {images.length > 0 ? (
+          <img
+            src={images[currentFrame]}
+            alt={`Animation frame ${currentFrame + 1}`}
+            style={{ maxWidth: animationWidth, height: 'auto' }} 
+          />
+        ) : (
+          <div>No images to display.</div> 
+        )}
+      </div>
+    );
+  }
+};
+
+export default Animation;

src/pages/components/testAnimation_manyfiles.jsx

@@ -42,4 +42,5 @@ const CharacterAnimation = () => {
     );
 };
 
+
 export default CharacterAnimation;

src/pages/components/testAnimation_onefile.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import JSZip from 'jszip';
 
-const Animation = () => {
+const TestAnimation = () => {
   const [images, setImages] = useState([]);
   const [currentFrame, setCurrentFrame] = useState(0);
   const [loading, setLoading] = useState(true);
@@ -11,7 +11,7 @@ const Animation = () => {
     const loadImages = async () => {
       const zip = new JSZip();
       try {
-        const response = await fetch('src/assets/characters/M_Porsche_cross_arm.zip');
+        const response = await fetch('src/assets/mainCharacters/M_Porsche_cross_arm.zip');
         if (!response.ok) {
           throw new Error('Network response was not ok');
         }
@@ -78,4 +78,4 @@ const Animation = () => {
   }
 };
 
-export default Animation;
+export default TestAnimation;

src/pages/introductionPage.jsx

@@ -0,0 +1,58 @@
+import { useState } from 'react'
+import '../css/global.css'
+import BlackButton from './components/customButton'
+import Animation from './components/animation.jsx';
+
+function IntroductionPage() {
+  return(
+  	  <div style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100vh',
+        maxWidth:"100vw",
+        flexDirection: 'column',
+      }}>
+        <div style={{position:"absolute"}}>
+            <Animation src='src/assets/introduction/6_Classroom.zip' animationWidth='100vw'/>
+        </div>
+        <div style={{position:"absolute"}}>
+            <Animation src='src/assets/introduction/5_M_Pie.zip' animationWidth='100vw'/>  
+        </div>
+        <div style={{position:"absolute"}}>
+            <Animation src='src/assets/introduction/4_NPC+hallway.zip' animationWidth='100vw'/>
+        </div>
+        <div style={{position:"absolute"}}>
+            <Animation src='src/assets/introduction/3_M_Patt.zip' animationWidth='100vw'/>
+        </div>
+        <div style={{position:"absolute"}}>
+            <Animation src='src/assets/introduction/2_M_Porsche.zip' animationWidth='100vw'/>
+        </div>
+        <div style={{position:"absolute"}}>
+            <Animation src='src/assets/introduction/1_NPC+pillar.zip' animationWidth='100vw'/>
+        </div>
+        
+        <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
+        }}>
+            <label style={{color:"rgb(var(--white))", fontWeight:"bold"}}>
+                You are a new student who just <br />
+                transfered to this school not long ago. <br />
+                You don't know anyone yet, <br />
+                but eventually you  meet...
+            </label>
+        </div>
+  	  </div>
+  )
+}
+
+export default IntroductionPage

src/pages/namePage.jsx

@@ -29,7 +29,7 @@ function NamePage() {
                 name==''?
                     <></>
                 :
-                    <BlackButton text="Continue" to='/name'/>
+                    <BlackButton text="Continue" to='/introduction'/>
             }
         </div>
     )