add new enemies and animate them

sayjeyhi · Nov 13, 2023 · eb50994 · eb50994
1 parent 87ceebc
commit eb50994
Show file tree

Hide file tree

Showing 27 changed files with 551 additions and 170 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { MotionConfig } from 'framer-motion'
 import { Scroll, ScrollControls } from '@react-three/drei'
 import { Canvas } from '@react-three/fiber'
@@ -17,21 +17,20 @@ import state from './state.json'
 //   studio.extend(extension)
 // }
 
-function App() {
+export default function App() {
   const [section, setSection] = useState(0)
   const [menuOpened, setMenuOpened] = useState(false)
   const sheet = getProject('sayjeyhi.com', { state }).sheet('r3f')
 
-  useEffect(() => {
-    setMenuOpened(false)
-  }, [section])
+  // useEffect(() => {
+  //   setMenuOpened(false)
+  // }, [section])
 
   return (
     <MotionConfig
       transition={{
         ...framerMotionConfig
-      }}
-    >
+      }}>
       <Canvas gl={{ preserveDrawingBuffer: true }} shadows dpr={[1, 1.5]}>
         <SheetProvider sheet={sheet}>
           <PerspectiveCamera theatreKey="Camera" makeDefault position={[0, 3, 10]} />
@@ -61,5 +60,3 @@ function App() {
     </MotionConfig>
   )
 }
-
-export default App
diff --git a/src/atoms/cursor.js b/src/atoms/cursor.js
@@ -0,0 +1,3 @@
+import { atom } from 'jotai'
+
+export const isCursorActiveAtom = atom(false)
diff --git a/src/atoms/game.js b/src/atoms/game.js
@@ -7,15 +7,40 @@ import { currentPrizeAtom, currentPrizeSetAtom } from './prizes'
 export const gameIsStartedAtom = atom(false)
 export const gamePauseAtom = atom(false)
 export const gameHasWonAtom = atom(false)
+export const gameLooseAtom = atom(false)
 
 /**
  * Actions atoms
  */
-export const gameIsShootingAtom = atom(false)
-export const gameIsPlayerHitAtom = atom(false)
+export const PLAYER_ACTIONS = {
+  shoot: 'shoot',
+  jump: 'jump',
+  defend: 'defend',
+  sit: 'sit',
+  idle: 'idle',
+  hit: 'hit'
+}
+export const gamePlayerCurrentAction = atom(PLAYER_ACTIONS.idle)
+
 export const gameIsDinoHitAtom = atom(false)
 export const gameDinosaurLifeAtom = atom(100)
 export const gamePlayerLifeAtom = atom(100)
+export const gamePlayerLifeSetAtom = atom(gamePlayerLifeAtom, (get, set, arg) => {
+  const playerLife = get(gamePlayerLifeAtom)
+  const newLife = playerLife - arg
+  set(gamePlayerLifeAtom, newLife)
+
+  if (newLife < 5) {
+    set(gameLooseAtom, true)
+    set(gamePauseAtom, true)
+    set(gameIsStartedAtom, false)
+    set(gamePlayerCurrentAction, '')
+    set(gameIsDinoHitAtom, false)
+    set(gameDinosaurLifeAtom, 100)
+    set(gamePlayerLifeAtom, 100)
+    set(currentPrizeAtom, '')
+  }
+})
 
 /**
  * Fires location control atoms

diff --git a/src/atoms/prizes.js b/src/atoms/prizes.js
@@ -17,10 +17,16 @@ export const currentPrizeSetAtom = atom(
       index = -1
     }
 
+    /**
+     * Show reward modal
+     */
     if (enabledRewards) {
       set(isPrizeVisibleAtom, true)
       set(gamePauseAtom, true)
       set(nextPrizeAtom, prizeList[index + 1])
+
+      const successAudioRef = document.getElementById('successAudioRef')
+      if (successAudioRef) successAudioRef.play()
     }
   }
 )

diff --git a/src/components/2D/Contact.jsx b/src/components/2D/Contact.jsx
@@ -3,7 +3,7 @@ import { useCursorHandlers } from './Cursor'
 
 export const ContactSection = () => {
   return (
-    <Section key="contact-me" className="mt-[31rem] ml-24">
+    <Section key="contact-me" className="mt-[18rem] ml-24">
       <div className="flex gap-3 py-1">
         <SocialButton title="Linkedin" link="https://www.linkedin.com/in/jafar-rezaei/">
           <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16">

diff --git a/src/components/2D/Cursor.jsx b/src/components/2D/Cursor.jsx
@@ -1,13 +1,13 @@
-import { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import throttle from 'lodash-es/throttle'
-import { useAtomValue } from 'jotai'
+import { useAtomValue, useSetAtom } from 'jotai'
 import { gameIsStartedAtom } from '@/atoms/game'
 import { isMusicEnabledAtom } from '@/atoms/audio'
+import { isCursorActiveAtom } from '@/atoms/cursor.js'
 
 const isTouchDevice =
   'ontouchstart' in window || navigator.MaxTouchPoints > 0 || navigator.msMaxTouchPoints > 0
 
-const CursorContext = createContext({ cursorActive: false, setCursorActive: state => state })
 const audioSection1 = new Audio('/audio/s1.mp3')
 const audioSection2 = new Audio('/audio/s2.mp3')
 const gameSection = new Audio('/audio/game.mp3')
@@ -16,19 +16,6 @@ audioSection2.volume = 0
 audioSection1.volume = 0
 gameSection.volume = 0
 
-export const CursorContextProvider = ({ children }) => {
-  const [cursorActive, setCursorActive] = useState(false)
-
-  return (
-    <CursorContext.Provider
-      value={{
-        cursorActive,
-        setCursorActive
-      }}>
-      {children}
-    </CursorContext.Provider>
-  )
-}
 const useMousePosition = () => {
   const [position, setPosition] = useState({
     clientX: 0,
@@ -66,7 +53,7 @@ export const Cursor = ({ section }) => {
     return null
   }
 
-  const { cursorActive: isCursorActive } = useContext(CursorContext)
+  const isCursorActive = useAtomValue(isCursorActiveAtom)
   const { clientX, clientY } = useMousePosition()
 
   const fadeOutAudioVolume = (audio, { step, key, to } = { step: 0.009 }) =>
@@ -175,22 +162,17 @@ export const Cursor = ({ section }) => {
 }
 
 export const useCursorHandlers = (options = {}) => {
-  const context = useContext(CursorContext)
-  if (!context) {
-    throw new Error('useBrand must be used within a CursorContext')
-  }
-
-  const { setCursorActive } = context
+  const setIsCursorActive = useSetAtom(isCursorActiveAtom)
 
   const onMouseEnter = useCallback(
     event => {
       if (options.onMouseEnter) {
         options.onMouseEnter(event)
       }
 
-      setCursorActive(true)
+      setIsCursorActive(true)
     },
-    [setCursorActive]
+    [setIsCursorActive]
   )
 
   const onMouseLeave = useCallback(
@@ -199,9 +181,9 @@ export const useCursorHandlers = (options = {}) => {
         options.onMouseLeave(event)
       }
 
-      setCursorActive(false)
+      setIsCursorActive(false)
     },
-    [setCursorActive]
+    [setIsCursorActive]
   )
 
   if (isTouchDevice) {

diff --git a/src/components/2D/Game/Components/Audios.jsx b/src/components/2D/Game/Components/Audios.jsx
diff --git a/src/components/2D/Game/Components/Controls.jsx b/src/components/2D/Game/Components/Controls.jsx
@@ -26,6 +26,35 @@ export const Controls = ({ handleTogglePauseTheGame }) => {
   const setHasWon = useSetAtom(gameHasWonAtom)
   const nextPrize = useAtomValue(nextPrizeAtom)
 
+  const handleStartGame = () => {
+    setIsStarted(true)
+  }
+  const handleRestartTheGame = () => {
+    setScore(0)
+    setTime(0)
+    setDinoLife(100)
+    setPlayerLife(100)
+    setIsStarted(false)
+    setHasWon(false)
+  }
+
+  const handleToggleGameSounds = () => {
+    setIsGameSoundsEnabled(a => !a)
+  }
+
+  const handleToggleMusic = () => {
+    setIsMusicEnabled(a => !a)
+  }
+
+  const handleToggleGameRewardsModal = () => {
+    setEnabledRewards(enabled => !enabled)
+  }
+
+  const handleJumpToPrize = () => {
+    setPrize(nextPrize)
+    setEnabledRewards(true)
+  }
+
   return (
     <div className="flex justify-between items-center absolute -bottom-28 w-full left-0 right-0">
       <div className="flex ml-18 items-center font-semibold text-gray-800 pixel">
@@ -41,7 +70,7 @@ export const Controls = ({ handleTogglePauseTheGame }) => {
         {!isStarted && (
           <button
             data-title="Start the game"
-            onClick={() => setIsStarted(a => !a)}
+            onClick={handleStartGame}
             className="bg-primary w-10 h-10 rounded-2xl text-white flex justify-center items-center">
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -82,14 +111,7 @@ export const Controls = ({ handleTogglePauseTheGame }) => {
             </button>
             <button
               data-title="Restart the game"
-              onClick={() => {
-                setScore(0)
-                setTime(0)
-                setDinoLife(100)
-                setPlayerLife(100)
-                setIsStarted(false)
-                setHasWon(false)
-              }}
+              onClick={handleRestartTheGame}
               className="bg-primary w-10 h-10 rounded-2xl text-white flex justify-center items-center">
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                 <path
@@ -103,7 +125,7 @@ export const Controls = ({ handleTogglePauseTheGame }) => {
 
         <button
           data-title="Toggle game sounds"
-          onClick={() => setIsGameSoundsEnabled(a => !a)}
+          onClick={handleToggleGameSounds}
           className="bg-primary w-10 h-10 rounded-2xl flex justify-center items-center">
           {isGameSoundsEnabled ? (
             <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24">
@@ -123,7 +145,7 @@ export const Controls = ({ handleTogglePauseTheGame }) => {
         </button>
         <button
           data-title="Toggle background music"
-          onClick={() => setIsMusicEnabled(a => !a)}
+          onClick={handleToggleMusic}
           className="bg-primary w-10 h-10 rounded-2xl flex justify-center items-center">
           {isMusicEnabled ? (
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
@@ -143,7 +165,7 @@ export const Controls = ({ handleTogglePauseTheGame }) => {
         </button>
         <button
           data-title="Toggle game rewards modal"
-          onClick={() => setEnabledRewards(enabled => !enabled)}
+          onClick={handleToggleGameRewardsModal}
           className="bg-primary w-10 h-10 rounded-2xl flex justify-center items-center">
           {enabledRewards ? (
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
@@ -163,10 +185,7 @@ export const Controls = ({ handleTogglePauseTheGame }) => {
         </button>
 
         <button
-          onClick={() => {
-            setPrize(nextPrize)
-            setEnabledRewards(true)
-          }}
+          onClick={handleJumpToPrize}
           className="no-tooltip bg-primary h-10 text-white rounded-2xl px-4 flex justify-center items-center pixel text-lg">
           Jump to {nextPrize}
         </button>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { atom } from 'jotai'

		export const isCursorActiveAtom = atom(false)