Skip to content

Commit

Permalink
fix(assets): move svg to components
Browse files Browse the repository at this point in the history
  • Loading branch information
@HoseaCodes
HoseaCodes committed May 23, 2024
1 parent 990f9df commit d6c46d8
Show file tree
Hide file tree
Showing 52 changed files with 943 additions and 738 deletions.
56 changes: 30 additions & 26 deletions src/Components/Games/BirdShooter/bird.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,37 @@
import React, { useState } from 'react';
import mouse from '../../../Utils/useMousePosition'
import useWindowSize from '../../../Utils/useWindowSize'

import birdhit from '../../../Assets/Sounds/squawk.wav'
import React, { useState } from "react";
import mouse from "../../../Utils/useMousePosition";
import useWindowSize from "../../../Utils/useWindowSize";

// export default function Bird({ randomYindex, handleWin }) {
export default function Bird({ randomYindex }) {
const birdhit =
"https://d2nrcsymqn25pk.cloudfront.net/Assets/Sounds/squawk.wav";

const { x, y } = mouse();
const size = useWindowSize();
const { x, y } = mouse();
const size = useWindowSize();

const [positionX, setPositionX] = useState('')
const [positionY, setPositionY] = useState(randomYindex)
const [birdClass, setBirdClass] = useState('bird birdfly')

const [positionX, setPositionX] = useState("");
const [positionY, setPositionY] = useState(randomYindex);
const [birdClass, setBirdClass] = useState("bird birdfly");

function handleHit () {
setPositionX(x - 65)
setPositionY(((y / size.height) * 100) - 4)
setBirdClass('bird birdhit')
let birdSound = new Audio(birdhit);
birdSound.loop = false;
birdSound.play();
// handleWin()
}
function handleHit() {
setPositionX(x - 65);
setPositionY((y / size.height) * 100 - 4);
setBirdClass("bird birdhit");
let birdSound = new Audio(birdhit);
birdSound.loop = false;
birdSound.play();
// handleWin()
}

return (
<div draggable='false' className={birdClass} style={{top: `${positionY}vh`, left: positionX}} alt="bird" >
<div className='birdTarget' onClick={() => handleHit()} />
</div>
);
}
return (
<div
draggable="false"
className={birdClass}
style={{ top: `${positionY}vh`, left: positionX }}
alt="bird"
>
<div className="birdTarget" onClick={() => handleHit()} />
</div>
);
}
262 changes: 137 additions & 125 deletions src/Components/Games/BirdShooter/birds.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,142 +1,154 @@
import React, { useState, useEffect } from 'react';
import mouse from '../../../Utils/useMousePosition';
import Bird from './bird';
import '../games.css';
import React, { useState, useEffect } from "react";
import mouse from "../../../Utils/useMousePosition";
import Bird from "./bird";
import "../games.css";

import crosshairs from '../../../Assets/SVG/crosshairs-solid-svgrepo-com.svg'
import cloud1 from '../../../Assets/SVG/cloud-svgrepo-com-2.svg'
import cloud2 from '../../../Assets/SVG/cloud-svgrepo-com.svg'
import cloud3 from '../../../Assets/SVG/clouds-cloud-svgrepo-com.svg'
import crosshairs from "../../SVG/crosshairs-solid-svgrepo-com.svg";
import cloud1 from "../../SVG/cloud-svgrepo-com-2.svg";
import cloud2 from "../../SVG/cloud-svgrepo-com.svg";
import cloud3 from "../../SVG/clouds-cloud-svgrepo-com.svg";

import gunshot from '../../../Assets/Sounds/bang.wav'

let localPause = false
let localPause = false;

// export default function Birds({ setPaused, handleWin }) {
export default function Birds() {
const [backgroundColor, setBackgroundColor] = useState('rgb(179, 217, 255)')
document.body.style.backgroundColor = backgroundColor
let [move, setMove] = useState(false)
// let [win, setWin] = useState(false)
// let [lose, setLose] = useState(false)
let [paused, setPaused] = useState(true)
// let [finalScore, setFinalScore] = useState(0)
let [reset, setReset] = useState(false)
let [showTimer, setShowTimer] = useState(true)
// let counter = 0
const gunshot =
"https://d2nrcsymqn25pk.cloudfront.net/Assets/Sounds/bang.wav";
const [backgroundColor, setBackgroundColor] = useState("rgb(179, 217, 255)");
document.body.style.backgroundColor = backgroundColor;
let [move, setMove] = useState(false);
// let [win, setWin] = useState(false)
// let [lose, setLose] = useState(false)
let [paused, setPaused] = useState(true);
// let [finalScore, setFinalScore] = useState(0)
let [reset, setReset] = useState(false);
let [showTimer, setShowTimer] = useState(true);
// let counter = 0

// function handleLose () {
// counter++
// if (counter === arr.length) {
// counter = 0
// }
// setComponent(arr[counter])
// if (counter > 1 && counter < arr.length - 1) {
// // play()
// }
// setPaused(true)
// }
// function handleLose () {
// counter++
// if (counter === arr.length) {
// counter = 0
// }
// setComponent(arr[counter])
// if (counter > 1 && counter < arr.length - 1) {
// // play()
// }
// setPaused(true)
// }

let [timer, setTimer] = useState(7)

useEffect(() => {
let time
if (reset === true) {
setTimer(7)
}
if (paused === true) {
return null
} else if (move === true) {
clearTimeout(time)
setMove(false)
setTimer(7)
} else if (timer > 0) {
time = setTimeout(() => setTimer(timer - 1), 1000)
} else {
clearTimeout(time)
setTimer(7)
// handleLose()
}
}, [timer, paused])
// let r = 179
// let g = 217
// let b = 255
let [timer, setTimer] = useState(7);

// useEffect(() => {
// if (localPause === false) {
// const int = setInterval(() => {
// r -= 5.11
// g -= 3.43
// b -= 0.71
// setBackgroundColor(`rgb(${Math.floor(r)}, ${Math.floor(g)}, ${Math.floor(b)})`)
// }, 200);
// const time0 = setTimeout(() => {
// localPause = true
// }, 7000);
// return () => clearInterval(int)
// }
// }, [localPause])
useEffect(() => {
let time;
if (reset === true) {
setTimer(7);
}
if (paused === true) {
return null;
} else if (move === true) {
clearTimeout(time);
setMove(false);
setTimer(7);
} else if (timer > 0) {
time = setTimeout(() => setTimer(timer - 1), 1000);
} else {
clearTimeout(time);
setTimer(7);
// handleLose()
}
}, [timer, paused]);
// let r = 179
// let g = 217
// let b = 255

const { x, y } = mouse();
const [positionX, setPositionX] = useState(x)
const [positionY, setPositionY] = useState(y)
// useEffect(() => {
// if (localPause === false) {
// const int = setInterval(() => {
// r -= 5.11
// g -= 3.43
// b -= 0.71
// setBackgroundColor(`rgb(${Math.floor(r)}, ${Math.floor(g)}, ${Math.floor(b)})`)
// }, 200);
// const time0 = setTimeout(() => {
// localPause = true
// }, 7000);
// return () => clearInterval(int)
// }
// }, [localPause])

let birdArray = [
<Bird randomYindex={40} />
// <Bird handleWin={() => handleWin()} randomYindex={40} />
]
const { x, y } = mouse();
const [positionX, setPositionX] = useState(x);
const [positionY, setPositionY] = useState(y);

const [birds, setBirds] = useState(birdArray)
let birdArray = [
<Bird randomYindex={40} />,
// <Bird handleWin={() => handleWin()} randomYindex={40} />
];

useEffect(() => {
console.log(localPause)
console.log(birds)
const [birds, setBirds] = useState(birdArray);

if (localPause === false) {
const int = setInterval(() => {
let randomYindex = Math.floor(Math.random() * 80) - 10
// birdArray.push(<Bird handleWin={() => handleWin()} randomYindex={randomYindex} />)
birdArray.push(<Bird randomYindex={randomYindex} />)
setBirds([...birdArray])
}, 500);
const to = setTimeout(() => {
clearInterval(int)
birdArray = [
// <Bird handleWin={() => handleWin()} randomYindex={40} />
<Bird randomYindex={40} />
]
// setBirds([<Bird handleWin={() => handleWin()} randomYindex={40} />])
setBirds([<Bird randomYindex={40} />])
// localPause = true
}, 7000);
}

}, [localPause])
useEffect(() => {
console.log(localPause);
console.log(birds);

function mouseLock () {
setPositionX(x-55)
setPositionY(y-55)
if (localPause === false) {
const int = setInterval(() => {
let randomYindex = Math.floor(Math.random() * 80) - 10;
// birdArray.push(<Bird handleWin={() => handleWin()} randomYindex={randomYindex} />)
birdArray.push(<Bird randomYindex={randomYindex} />);
setBirds([...birdArray]);
}, 500);
const to = setTimeout(() => {
clearInterval(int);
birdArray = [
// <Bird handleWin={() => handleWin()} randomYindex={40} />
<Bird randomYindex={40} />,
];
// setBirds([<Bird handleWin={() => handleWin()} randomYindex={40} />])
setBirds([<Bird randomYindex={40} />]);
// localPause = true
}, 7000);
}
}, [localPause]);

function handleClick () {
let birdShot = new Audio(gunshot);
birdShot.loop = false;
birdShot.play();
// setPaused(false)
localPause = false
}
function mouseLock() {
setPositionX(x - 55);
setPositionY(y - 55);
}

function handleClick() {
let birdShot = new Audio(gunshot);
birdShot.loop = false;
birdShot.play();
// setPaused(false)
localPause = false;
}

return (
<div className='birdWrapper' onMouseMove={() => mouseLock()} onClick={() => handleClick()} >
{birds}
<img className='crosshairs' src={crosshairs} alt="" style={{left: positionX, top: positionY}} />
<img className='cloud cloud1' src={cloud1} alt="" />
<img className='cloud cloud2' src={cloud2} alt="" />
<img className='cloud cloud3' src={cloud3} alt="" />
{localPause && <p className='instructionText'>click on the birds</p>}
<div>
{showTimer && <span className='time' >Time left: <strong>{timer}</strong></span>}
</div>
</div>
);
}
return (
<div
className="birdWrapper"
onMouseMove={() => mouseLock()}
onClick={() => handleClick()}
>
{birds}
<img
className="crosshairs"
src={crosshairs}
alt=""
style={{ left: positionX, top: positionY }}
/>
<img className="cloud cloud1" src={cloud1} alt="" />
<img className="cloud cloud2" src={cloud2} alt="" />
<img className="cloud cloud3" src={cloud3} alt="" />
{localPause && <p className="instructionText">click on the birds</p>}
<div>
{showTimer && (
<span className="time">
Time left: <strong>{timer}</strong>
</span>
)}
</div>
</div>
);
}
Loading

0 comments on commit d6c46d8

Please sign in to comment.