Vasu7389 · Yoko-ship · May 10, 2025
diff --git a/day006/dino-game/index.html b/day006/dino-game/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dino-Game</title>
+</head>
+<body>
+    <div id="module"></div>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+</body>
+</html>
diff --git a/day006/dino-game/package-lock.json b/day006/dino-game/package-lock.json
diff --git a/day006/dino-game/package.json b/day006/dino-game/package.json
@@ -3,17 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   },
   "scripts": {
+    "dev":"vite",
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "vite build",
+    "preview":"vite preview",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
@@ -34,5 +34,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.4.1",
+    "vite": "^6.3.5"
   }
 }
diff --git a/day006/dino-game/public/index.html b/day006/dino-game/public/index.html
diff --git a/day006/dino-game/public/logo192.png b/day006/dino-game/public/logo192.png
diff --git a/day006/dino-game/public/logo512.png b/day006/dino-game/public/logo512.png
diff --git a/day006/dino-game/public/manifest.json b/day006/dino-game/public/manifest.json
diff --git a/day006/dino-game/src/App.js → day006/dino-game/src/App.jsx b/day006/dino-game/src/App.js → day006/dino-game/src/App.jsx
diff --git a/day006/dino-game/src/components/Dino/Dino.css b/day006/dino-game/src/components/Dino/Dino.css
@@ -1,8 +1,9 @@
 .game {
-  width: 600px;
+  width: 70%;
   height: 225px;
   border: 1px solid black;
-  margin: auto;
+  margin: 10rem auto 0 auto;
+  border-radius: 10px;
 }
 
 #dino {

diff --git a/day006/dino-game/src/components/Dino/Dino.js b/day006/dino-game/src/components/Dino/Dino.js
diff --git a/day006/dino-game/src/components/Dino/Dino.jsx b/day006/dino-game/src/components/Dino/Dino.jsx
@@ -0,0 +1,86 @@
+import React, { useEffect, useRef, useState } from "react";
+import "./Dino.css";
+import Modal from "../Modal";
+
+function Dino() {
+  const dinoRef = useRef();
+  const cactusRef = useRef();
+  const [score, setScore] = useState(0);
+  const [modalScore, setModalScore] = useState(0);
+  const [isOpened, setIsOpened] = useState(false);
+
+  const jump = () => {
+    if (!isOpened) {
+      if (!!dinoRef.current && dinoRef.current.classList != "jump") {
+
+        dinoRef.current.classList.add("jump");
+        const audio = new Audio("src\\components\\Dino\\sound\\jump.wav")
+        audio.play()
+
+        setTimeout(function () {
+          dinoRef.current.classList.remove("jump");
+
+        }, 300);
+      }
+    }
+  };
+
+  useEffect(() => {
+    const isAlive = setInterval(function () {
+      // get current dino Y position
+      if (!isOpened) {
+        const dinoTop = parseInt(
+          getComputedStyle(dinoRef.current).getPropertyValue("top")
+        );
+
+
+        // get current cactus X position
+        let cactusLeft = parseInt(
+          getComputedStyle(cactusRef.current).getPropertyValue("left")
+        );
+        // detect collision
+        if (cactusLeft < 40 && cactusLeft > 0 && dinoTop >= 140) {
+          // collision
+          // alert("Game Over! Your Score : " + score);
+          const deathAudio = new Audio("src\\components\\Dino\\sound\\die.wav")
+          deathAudio.play()
+          setIsOpened(true);
+          setModalScore(score);
+          clearInterval(isAlive);
+          setScore(0);
+        } else {
+          setScore((prevValue) => prevValue + 1);
+        }
+      }
+    }, 10);
+
+    return () => clearInterval(isAlive);
+  });
+
+  useEffect(() => {
+    document.addEventListener("keydown", function(event){
+      if(["Space","ArrowUp"].includes(event.code)){
+        jump()
+      }
+    });
+    return () => document.removeEventListener("keydown", jump);
+  }, []);
+
+  return (
+    <>
+      {!isOpened ? (
+        <div className="game">
+          Score : {score}
+          <div id="dino" ref={dinoRef}></div>
+          <div id="cactus" ref={cactusRef}></div>
+        </div>
+      ) : (
+        <Modal isOpened={isOpened} setIsOpened={setIsOpened}>
+          <p>Game Over! Your score : {modalScore}</p>
+        </Modal>
+      )}
+    </>
+  );
+}
+
+export default Dino;
diff --git a/day006/dino-game/src/components/Dino/sound/die.wav b/day006/dino-game/src/components/Dino/sound/die.wav
diff --git a/day006/dino-game/src/components/Dino/sound/jump.wav b/day006/dino-game/src/components/Dino/sound/jump.wav
diff --git a/day006/dino-game/src/components/Modal.jsx b/day006/dino-game/src/components/Modal.jsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { useState } from 'react'
+import { createPortal } from 'react-dom'
+import "./modal.css"
+function Modal({isOpened,setIsOpened,children}) {
+
+
+    return createPortal(
+    <>
+    <dialog open={isOpened}>
+        <button onClick={() => setIsOpened(false)}></button>
+        {children}
+    </dialog>
+    </>,document.querySelector("#module")
+  )
+}
+
+export default Modal
diff --git a/day006/dino-game/src/components/modal.css b/day006/dino-game/src/components/modal.css
@@ -0,0 +1,22 @@
+dialog{
+    width: 50%;
+    position: fixed;
+    top: 60px;
+    z-index: 10;
+    border: none;
+    outline: none;
+    border-radius: 10px;
+    background-color: cadetblue;
+    color: white;
+}
+
+dialog button{
+    background: none;
+    border: none;
+    cursor: pointer;
+}
+dialog button::before{
+    content: "❌";
+    font-size: 1.3rem;
+
+}
diff --git a/day006/dino-game/src/index.js → day006/dino-game/src/main.jsx b/day006/dino-game/src/index.js → day006/dino-game/src/main.jsx
diff --git a/day006/dino-game/vite.config.js b/day006/dino-game/vite.config.js
@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react"
+
+export default defineConfig({
+    plugins:[react()]
+})