techtransthai/fifty-shades-of-bully
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

use non-hardcoded URL for assets
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse source
This commit is contained in:
Late Night Defender 2025-03-01 02:34:14 +07:00
parent ec22c22b45
commit 13f966a44c
2 changed files with 215 additions and 399 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

196
src/pages/components/animation.jsx
View file

@ -1,194 +1,8 @@
//version 1
// 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;
//version 2
// import React, { useEffect, useState, useRef } from 'react';
// import JSZip from 'jszip';
// const Animation = ({ src = "src/assets/mainCharacters/M_Porsche_cross_arm.zip", animationWidth = "500px" }) => {
// const [images, setImages] = useState([]);
// const [loading, setLoading] = useState(true);
// const frameRate = 1000 / 24; // Original frame rate (24 FPS)
// const canvasRef = useRef(null);
// const animationRef = useRef(null);
// const currentFrameRef = useRef(0);
// const imageElementsRef = useRef([]);
// 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 => {
// const img = new Image();
// img.src = `data:image/webp;base64,${base64}`;
// return img; // Return the Image object
// })
// );
// }
// });
// const imgElements = await Promise.all(imgPromises);
// if (imgElements.length === 0) {
// console.error('No images found in the ZIP file.');
// }
// imageElementsRef.current = imgElements; // Store preloaded images
// setImages(imgElements); // Set images state
// } catch (error) {
// console.error('Error loading images:', error);
// } finally {
// setLoading(false);
// }
// };
// loadImages();
// }, [src]);
// useEffect(() => {
// if (images.length > 0) {
// const canvas = canvasRef.current;
// const ctx = canvas.getContext('2d');
// let lastFrameTime = 0;
// const animate = (timestamp) => {
// if (lastFrameTime === 0) lastFrameTime = timestamp;
// const elapsed = timestamp - lastFrameTime;
// if (elapsed > frameRate) {
// currentFrameRef.current = (currentFrameRef.current + 1) % images.length;
// lastFrameTime = timestamp;
// }
// // Clear the canvas
// ctx.clearRect(0, 0, canvas.width, canvas.height);
// // Draw the current frame
// ctx.drawImage(imageElementsRef.current[currentFrameRef.current], 0, 0, canvas.width, canvas.height);
// animationRef.current = requestAnimationFrame(animate);
// };
// animationRef.current = requestAnimationFrame(animate);
// return () => {
// if (animationRef.current) {
// cancelAnimationFrame(animationRef.current);
// }
// };
// }
// }, [images]);
// if (loading) {
// return <div>Loading...</div>;
// } else {
// return (
// <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
// <canvas
// ref={canvasRef}
// width={'500px'}
// height={'700'} // Maintain aspect ratio (example: 16:9)
// style={{ maxWidth: animationWidth, height: 'auto' }}
// />
// </div>
// );
// }
// };
// export default Animation;
import React, { useEffect, useState, useRef } from 'react';
import JSZip from 'jszip';
const Animation = ({ src = "https://fsob-assets.techtransthai.org/M_Porsche_cross_arm.zip", animationWidth = "500px" }) => {
const Animation = ({ src = "M_Porsche_cross_arm.zip", animationWidth = "500px" }) => {
const [images, setImages] = useState([]);
const [loading, setLoading] = useState(true);
const frameRate = 1000 / 24; // Original frame rate (24 FPS)
@ -196,13 +10,15 @@
const animationRef = useRef(null);
const currentFrameRef = useRef(0);
const imageElementsRef = useRef([]);
const urlSource = `${import.meta.env.VITE_ASSETS_URL}/${src}`;
// Load images from the ZIP file
useEffect(() => {
const loadImages = async () => {
const zip = new JSZip();
// console.log(import.meta.env.VITE_ASSETS_URL);
try {
const response = await fetch(src);
const response = await fetch(urlSource);
if (!response.ok) {
throw new Error('Network response was not ok');
}
@ -241,7 +57,7 @@
};
loadImages();
}, [src]);
}, [urlSource]);
// WebGL setup and animation loop
useEffect(() => {

12
src/pages/introductionPage.jsx
View file

@ -14,22 +14,22 @@ function IntroductionPage() {
flexDirection: 'column',
}}>
<div style={{position:"absolute"}}>
<Animation src='src/assets/introduction/6_Classroom.zip' animationWidth='100vw'/>
<Animation src='6_Classroom.zip' animationWidth='100vw'/>
</div>
<div style={{position:"absolute"}}>
<Animation src='src/assets/introduction/5_M_Pie.zip' animationWidth='100vw'/>
<Animation src='5_M_Pie.zip' animationWidth='100vw'/>
</div>
<div style={{position:"absolute"}}>
<Animation src='src/assets/introduction/4_NPC+hallway.zip' animationWidth='100vw'/>
<Animation src='4_NPC+hallway.zip' animationWidth='100vw'/>
</div>
<div style={{position:"absolute"}}>
<Animation src='src/assets/introduction/3_M_Patt.zip' animationWidth='100vw'/>
<Animation src='3_M_Patt.zip' animationWidth='100vw'/>
</div>
<div style={{position:"absolute"}}>
<Animation src='src/assets/introduction/2_M_Porsche.zip' animationWidth='100vw'/>
<Animation src='2_M_Porsche.zip' animationWidth='100vw'/>
</div>
<div style={{position:"absolute"}}>
<Animation src='src/assets/introduction/1_NPC+pillar.zip' animationWidth='100vw'/>
<Animation src='1_NPC+pillar.zip' animationWidth='100vw'/>
</div>
<div style={{