implement timer and end conditions; put all constants in a single file …

…b00tc4mp#84
Eden23 · Aug 23, 2024 · e9c305d · e9c305d
1 parent 0db4856
commit e9c305d
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 25 deletions.
diff --git a/staff/marti-herms/project/dodge/src/game/Controller.jsx b/staff/marti-herms/project/dodge/src/game/Controller.jsx
@@ -44,11 +44,11 @@ export default function Controller({ position, setPosition }) {
     }
 
     const handleRight = () => {
-        setPosition({ top: position.top, left: Math.min(window.innerWidth - 50, position.left + 10) })
+        setPosition({ top: position.top, left: Math.min(window.innerWidth - 25, position.left + 10) })
     }
 
     const handleDown = () => {
-        setPosition({ top: Math.min(window.innerHeight - 50, position.top + 10), left: position.left })
+        setPosition({ top: Math.min(window.innerHeight - 25, position.top + 10), left: position.left })
 
     }
 

diff --git a/staff/marti-herms/project/dodge/src/game/Obstacle.jsx b/staff/marti-herms/project/dodge/src/game/Obstacle.jsx
@@ -2,9 +2,9 @@ import { useEffect, useState } from 'react'
 
 import Container from '../library/Container'
 
-const OBS_SPEED = 20
+import { OBS_SPEED, OBS_SIZE, PLAYER_SIZE } from '../../util/constants.js'
 
-export default function Obstacle({ playerPosition, obstacle, pause, onOutOfBounds }) {
+export default function Obstacle({ playerPosition, obstacle, pause, onOutOfBounds, setEnd, clearField }) {
     const [obstaclePosition, setObstaclePosition] = useState({ top: obstacle.top, left: obstacle.left })
     const [intervalId, setIntervalId] = useState(null)
     const [moveY] = useState(playerPosition.top - obstaclePosition.top)
@@ -20,13 +20,23 @@ export default function Obstacle({ playerPosition, obstacle, pause, onOutOfBound
     }, [pause])
 
     useEffect(() => {
-        if (obstaclePosition.top >= window.innerHeight - 50 || obstaclePosition.top < 10 || obstaclePosition.left >= window.innerWidth - 50 || obstaclePosition.left < 10) {
+        if (obstaclePosition.top >= window.innerHeight - OBS_SIZE - 10 || obstaclePosition.top < 0 || obstaclePosition.left >= window.innerWidth - OBS_SIZE - 10 || obstaclePosition.left < 0) {
             obstacle.top = obstaclePosition.top
             obstacle.left = obstaclePosition.left
             onOutOfBounds(obstacle)
         }
     }, [obstaclePosition])
 
+    useEffect(() => {
+        if (obstaclePosition.top < playerPosition.top + PLAYER_SIZE && obstaclePosition.top > playerPosition.top ||
+            obstaclePosition.top + OBS_SIZE < playerPosition.top + PLAYER_SIZE && obstaclePosition.top + OBS_SIZE > playerPosition.top ||
+            obstaclePosition.left < playerPosition.left + PLAYER_SIZE && obstaclePosition.left > playerPosition.left ||
+            obstaclePosition.left + OBS_SIZE < playerPosition.left + PLAYER_SIZE && obstaclePosition.left + OBS_SIZE > playerPosition.left) {
+            setEnd(true)
+            clearField()
+        }
+    }, [obstaclePosition, playerPosition])
+
     const handleMovement = () => {
         if (intervalId)
             clearInterval(intervalId)
@@ -41,8 +51,8 @@ export default function Obstacle({ playerPosition, obstacle, pause, onOutOfBound
                     top: moveY > 0 ? prev.top + Math.floor(OBS_SPEED * (1 - modifier)) : prev.top - Math.floor(OBS_SPEED * (1 - modifier)),
                     left: moveX > 0 ? prev.left + Math.floor(OBS_SPEED * modifier) : prev.left - Math.floor(OBS_SPEED * modifier)
                 }))
-        }, 100))
+        }, 300))
     }
 
-    return <Container className='absolute bg-red-500 w-[50px] aspect-square text-white text-4xl' style={{ top: `${obstaclePosition.top}px`, left: `${obstaclePosition.left}px` }}>{obstacle.id}</Container>
+    return <Container className={`absolute bg-red-500 w-[${OBS_SIZE}px] aspect-square text-white text-4xl`} style={{ top: `${obstaclePosition.top}px`, left: `${obstaclePosition.left}px` }}>{obstacle.id}</Container>
 }
diff --git a/staff/marti-herms/project/dodge/src/game/Player.jsx b/staff/marti-herms/project/dodge/src/game/Player.jsx
@@ -1,5 +1,7 @@
 import Container from '../library/Container'
 
+import { PLAYER_SIZE } from '../../util/constants.js'
+
 export default function Player({ position }) {
-    return <Container className='absolute w-[25px] aspect-square bg-white' style={{ top: `${position.top}px`, left: `${position.left}px` }}></Container>
+    return <Container className={`absolute w-[${PLAYER_SIZE}px] aspect-square bg-white`} style={{ top: `${position.top}px`, left: `${position.left}px` }}></Container>
 }
diff --git a/staff/marti-herms/project/dodge/src/game/Screen.jsx b/staff/marti-herms/project/dodge/src/game/Screen.jsx
@@ -7,14 +7,36 @@ import Controller from './Controller'
 import Obstacle from './Obstacle'
 
 import randomNumberGenerator from '../../util/randomNumberGenerator.js'
+import { SPAWN_RATE } from '../../util/constants.js'
 
-export default function Screen({ pause }) {
+
+let obstacleCount = 0
+
+export default function Screen({ pause, end, setEnd }) {
     const [position, setPosition] = useState({ top: window.innerHeight / 2 - 25, left: window.innerWidth / 2 - 25 })
     const [obstacles, setObstacles] = useState([])
-    let obstacleCount = 0
+    const [intervalId, setIntervalId] = useState(null)
 
     useEffect(() => {
-        const intervalId = setInterval(() => {
+        if (pause || end) {
+            clearInterval(intervalId)
+        } else if (!pause && !end) {
+            handleSpawn()
+        }
+    }, [pause, end])
+
+    const handleOutOfBounds = (obstacle) => {
+        const newArray = obstacles.filter(_obstacle => _obstacle.id !== obstacle.id)
+
+        setObstacles(newArray)
+    }
+
+    const clearField = () => {
+        setObstacles([])
+    }
+
+    const handleSpawn = () => {
+        setIntervalId(setInterval(() => {
             const side = randomNumberGenerator(1, 4)
             let x, y
             switch (side) {
@@ -39,19 +61,19 @@ export default function Screen({ pause }) {
             }
 
             setObstacles(prev => ([...prev, { top: y, left: x, id: obstacleCount++ }]))
-        }, 500)
-
-        const timeoutId = setTimeout(() => clearInterval(intervalId), 2000)
-    }, [])
-
-    const handleOutOfBounds = (obstacle) => {
-        const newArray = obstacles.filter(_obstacle => _obstacle.id !== obstacle.id)
-
-        setObstacles(newArray)
+        }, SPAWN_RATE))
     }
 
     return <Container className='h-full w-full'>
-        {obstacles.map(obstacle => <Obstacle key={obstacle.id} playerPosition={position} obstacle={obstacle} pause={pause} onOutOfBounds={handleOutOfBounds} />)}
+        {obstacles.map(obstacle =>
+            <Obstacle
+                key={obstacle.id}
+                playerPosition={position}
+                obstacle={obstacle}
+                pause={pause}
+                onOutOfBounds={handleOutOfBounds}
+                setEnd={setEnd}
+                clearField={clearField} />)}
         <Player position={position} />
         <Controller position={position} setPosition={setPosition} />
     </Container>

diff --git a/staff/marti-herms/project/dodge/src/game/Timer.jsx b/staff/marti-herms/project/dodge/src/game/Timer.jsx
@@ -0,0 +1,24 @@
+import { useEffect } from 'react'
+
+import { TIME } from '../../util/constants.js'
+
+export default function Timer({ pause, seconds, setSeconds, setEnd }) {
+    useEffect(() => {
+        let intervalId = null
+
+        if (!pause && TIME >= (seconds * 1000)) {
+            intervalId = setInterval(() => {
+                setSeconds((prevSeconds) => prevSeconds + 1)
+            }, 1000)
+        } else if (pause && seconds !== 0) {
+            clearInterval(intervalId)
+        } else if (TIME <= (seconds * 1000)) {
+            clearInterval(intervalId)
+            setEnd(true)
+        }
+
+        return () => clearInterval(intervalId)
+    }, [pause, seconds])
+
+    return <div className='text-white text-lg'>{seconds}</div>
+} 
diff --git a/staff/marti-herms/project/dodge/src/game/index.jsx b/staff/marti-herms/project/dodge/src/game/index.jsx
@@ -3,12 +3,12 @@ import { useState, useEffect } from 'react'
 import Button from '../library/Button'
 
 import Screen from './Screen'
+import Timer from './Timer'
 
 export default function Game({ username, onHomeClick }) {
     const [pause, setPause] = useState(false)
-
-    // useEffect(() => {
-    // }, [pause])
+    const [seconds, setSeconds] = useState(0)
+    const [end, setEnd] = useState(false)
 
     const handleHomeClick = () => {
         sessionStorage.username = ''
@@ -23,14 +23,15 @@ export default function Game({ username, onHomeClick }) {
     return <>
         <header className='fixed top-0 left-0 w-full p-1 bg-transparent flex flex-row justify-between items-center'>
             <p className='text-white text-lg mt-2 ml-2'>{username}</p>
+            <Timer pause={pause} seconds={seconds} setSeconds={setSeconds} setEnd={setEnd} />
             <div>
                 <Button className='text-white text-lg bg-transparent border border-solid border-white mt-2 mr-2 p-1 rounded' onClick={handlePauseClick}>Pause</Button>
                 <Button className='text-white text-lg bg-transparent border border-solid border-white mt-2 mr-2 p-1 rounded' onClick={handleHomeClick}>Home</Button>
             </div>
         </header >
 
         <main className='h-full w-full flex flex-col justify-start items-center'>
-            <Screen pause={pause} />
+            <Screen pause={pause} end={end} setEnd={setEnd} />
         </main>
 
     </>

diff --git a/staff/marti-herms/project/dodge/util/constants.js b/staff/marti-herms/project/dodge/util/constants.js
@@ -0,0 +1,13 @@
+const TIME = 10000
+const OBS_SPEED = 20
+const PLAYER_SIZE = 25
+const OBS_SIZE = 35
+const SPAWN_RATE = 2000
+
+export {
+    TIME,
+    OBS_SPEED,
+    PLAYER_SIZE,
+    OBS_SIZE,
+    SPAWN_RATE
+}