endingcredit & errorpagetologin #11 #9

package.json

@@ -10,7 +10,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.24.1",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "socket.io-client": "^4.7.5",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -2,6 +2,10 @@ import { BrowserRouter, Route, Routes } from "react-router-dom";
 import Loading from "./page/Loading";
 import Login from "./page/Login";
 import Main from "./page/Main";
+import Duckpond from "./page/Duckpond"; // Duckpond 컴포넌트 임포트
+import EndingCredit from "./page/Endingcredit";
+import Errortologin from "./page/Errortologin";
+import DuckShape from "./page/DuckShape";
 
 function App() {
   return (
@@ -10,6 +14,10 @@ function App() {
         <Route path="/" element={<Loading />} />
         <Route path="/login" element={<Login />} />
         <Route path="/main" element={<Main />} />
+        <Route path="/duckpond" element={<Duckpond />} />
+        <Route path="/ending" element={<EndingCredit />} /> 
+        <Route path="/errortologin" element={<Errortologin/>} />
+        <Route path="/duckshape" element={<DuckShape/>} />
       </Routes>
     </BrowserRouter>
   );

src/index.css

@@ -1,3 +1,4 @@
+/* 기존 스타일 */
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
@@ -11,3 +12,12 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+/* Google Fonts 링크 추가 */
+@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');
+
+/* 에러 메시지 글씨체 스타일 */
+.error-message {
+  font-family: 'Creepster', sans-serif;
+  font-size: 24px;
+}

src/page/DuckShape.js

@@ -0,0 +1,63 @@
+import React, { useEffect } from 'react';
+
+const DuckShape = () => {
+  useEffect(() => {
+    const canvas = document.getElementById('duckCanvas');
+    const ctx = canvas.getContext('2d');
+
+    // Clear canvas
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // Set background color
+    ctx.fillStyle = '#FFFFFF'; // White background
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    // Draw body (oval shape)
+    ctx.beginPath();
+    ctx.ellipse(150, 200, 100, 70, 0, 0, Math.PI * 2); // Ellipse for body
+    ctx.fillStyle = '#F3D605'; // Yellowish color for body
+    ctx.fill();
+    ctx.strokeStyle = '#000000'; // Black outline
+    ctx.lineWidth = 3;
+    ctx.stroke();
+    ctx.closePath();
+
+    // Draw head (circle)
+    ctx.beginPath();
+    ctx.arc(100, 150, 40, 0, Math.PI * 2); // Head circle
+    ctx.fillStyle = '#FFFFFF'; // White color
+    ctx.fill();
+    ctx.stroke();
+    ctx.closePath();
+
+    // Draw eyes (small circles)
+    ctx.beginPath();
+    ctx.arc(85, 135, 5, 0, Math.PI * 2); // Left eye
+    ctx.fillStyle = 'black';
+    ctx.fill();
+    ctx.closePath();
+
+    ctx.beginPath();
+    ctx.arc(115, 135, 5, 0, Math.PI * 2); // Right eye
+    ctx.fillStyle = 'black';
+    ctx.fill();
+    ctx.closePath();
+
+    // Draw beak (triangle)
+    ctx.beginPath();
+    ctx.moveTo(90, 145);
+    ctx.lineTo(110, 145);
+    ctx.lineTo(100, 160);
+    ctx.closePath();
+    ctx.fillStyle = '#FFD700'; // Yellowish color for beak
+    ctx.fill();
+  }, []);
+
+  return (
+    <div>
+      <canvas id="duckCanvas" width="300" height="300" style={{ backgroundColor: '#FFFFFF' }}></canvas>
+    </div>
+  );
+};
+
+export default DuckShape;

src/page/Duckpond.js

@@ -0,0 +1,139 @@
+import React, { useEffect, useRef } from 'react';
+import duckImage from '../img/main_pond_duck.png'; // 오리 이미지 경로 설정
+
+const Duckpond = () => {
+  const canvasRef = useRef(null);
+  const imgRefs = useRef([null, null]); // 두 개의 오리 이미지를 담는 배열
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+
+    const waves = [
+      { // 첫 번째 오리 파동
+        x: canvas.width * 0.25,
+        y: canvas.height / 2,
+        radius: 0,
+        opacity: 1,
+        maxRadius: 200,
+        speed: 2,
+        waveFrequency: 1000, // 파동 생성 주기 (밀리초)
+        lastWaveTime: 0,
+      },
+      { // 두 번째 오리 파동
+        x: canvas.width * 0.75,
+        y: canvas.height / 2,
+        radius: 0,
+        opacity: 1,
+        maxRadius: 200,
+        speed: 2.5,
+        waveFrequency: 1200, // 파동 생성 주기 (밀리초)
+        lastWaveTime: 0,
+      }
+    ];
+
+    const drawBackground = () => {
+      ctx.fillStyle = '#FFFFFF'; // 흰 배경
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+      ctx.save();
+      ctx.beginPath();
+      ctx.fillStyle = '#D2F7FF'; // 하늘색 타원
+      ctx.ellipse(canvas.width / 2, canvas.height / 2, canvas.width * 0.6, canvas.height * 0.4, 0, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.restore();
+    };
+
+    const createWave = (wave) => {
+      wave.waveFrequency = Math.random() * 300 + 800; // 파동 생성 주기를 랜덤으로 설정
+      wave.lastWaveTime = 0; // 마지막 파동 시간 초기화
+      wave.radius = 0; // 파동 반지름 초기화
+      wave.opacity = 1; // 파동 투명도 초기화
+    };
+
+    const drawWaves = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      drawBackground();
+
+      waves.forEach((wave) => {
+        if (Date.now() - wave.lastWaveTime > wave.waveFrequency) {
+          createWave(wave);
+          wave.lastWaveTime = Date.now();
+        }
+
+        if (wave.radius > wave.maxRadius) {
+          wave.opacity -= 0.02;
+          if (wave.opacity <= 0) {
+            wave.opacity = 0;
+          }
+        } else {
+          wave.radius += wave.speed;
+        }
+
+        ctx.beginPath();
+        ctx.arc(wave.x, wave.y, wave.radius, 0, Math.PI * 2, false);
+        ctx.strokeStyle = `rgba(55, 129, 170, ${wave.opacity})`;
+        ctx.lineWidth = 2;
+        ctx.stroke();
+      });
+
+      imgRefs.current.forEach((imgRef, index) => {
+        const imgWidth = 100;
+        const imgHeight = 100;
+        ctx.drawImage(
+          imgRef,
+          waves[index].x - imgWidth / 2,
+          waves[index].y - imgHeight / 2,
+          imgWidth,
+          imgHeight
+        );
+      });
+    };
+
+    const animate = () => {
+      drawWaves();
+      requestAnimationFrame(animate);
+    };
+
+    imgRefs.current = imgRefs.current.map((_, index) => {
+      const img = new Image();
+      img.src = duckImage;
+      img.onload = () => {
+        imgRefs.current[index] = img;
+        if (index === imgRefs.current.length - 1) {
+          animate();
+        }
+      };
+      return img;
+    });
+
+    const handleResize = () => {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      style={{
+        display: 'block',
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100vw',
+        height: '100vh',
+      }}
+    />
+  );
+};
+
+export default Duckpond;

src/page/Endingcredit.js

@@ -0,0 +1,92 @@
+import React, { useEffect, useRef } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+const EndingCredit = () => {
+  const canvasRef = useRef(null);
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const [user, setUser] = React.useState('');
+
+  useEffect(() => {
+    if (location.state && location.state.username) {
+      setUser(location.state.username);
+    }
+  }, [location.state]);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+
+    const credits = [
+      'Producer - ha',
+      'Director - haha',
+      'Developer - jimini, minzero',
+      'Special thanx to : dk & class 4 & GPT',
+      'Graphic Designer - hahaha',
+      'Sound Designer - hahahaha',
+      'Editor - hahahahaha',
+      'Casting Director - hahahahaha',
+      'Camera Operator - hahahahahahahah',
+      'WOWOWOW : ' + user,
+    ];
+
+    const creditPositions = credits.map((credit, index) => ({
+      text: credit,
+      opacity: 1 - index * 0.1,
+      y: canvas.height + index * 30 + 20,
+      speed: 1.0,
+    }));
+
+    const animate = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      creditPositions.forEach((credit, index) => {
+        credit.y -= credit.speed;
+        ctx.fillStyle = 'white'; // 흰색으로 설정
+        ctx.font = '20px Arial';
+        ctx.fillText(credit.text, canvas.width / 2 - 200, credit.y);
+
+        if (credit.y < -30) {
+          setTimeout(() => {
+            navigate('/errortologin');
+          }, 8000); // 3초 후에 '/' 경로로 이동
+        }
+      });
+
+      requestAnimationFrame(animate);
+    };
+
+    animate();
+
+    const handleResize = () => {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [navigate, user]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      style={{
+        display: 'block',
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100vw',
+        height: '100vh',
+        backgroundColor: 'black',
+        color: 'white',
+      }}
+    />
+  );
+};
+
+export default EndingCredit;