From d6c46d8781a4031afd5f5a8d1b03f20edf22d414 Mon Sep 17 00:00:00 2001 From: hoseacodes Date: Wed, 22 May 2024 20:41:32 -0500 Subject: [PATCH] fix(assets): move svg to components --- src/Components/Games/BirdShooter/bird.jsx | 56 ++- src/Components/Games/BirdShooter/birds.jsx | 262 +++++----- src/Components/Games/FoodFall/foodfall.jsx | 471 ++++++++++-------- src/Components/Games/Frogger/frogger.jsx | 216 ++++---- src/Components/Games/Race/race.jsx | 116 +++-- src/Components/Games/Scroll/scroll.jsx | 302 ++++++----- src/Components/Games/WackMole/wackmole.jsx | 232 +++++---- src/Components/Games/games.css | 22 +- .../SVG/ambulance-svgrepo-com.svg | 0 .../SVG/animal-kingdom-coati-svgrepo-com.svg | 0 .../SVG/arrow-svgrepo-com.svg | 0 .../SVG/axe-svgrepo-com.svg | 0 .../baby-animal-shaped-plate-svgrepo-com.svg | 0 .../SVG/bat-svgrepo-com.svg | 0 .../SVG/bicycle-bike-svgrepo-com.svg | 0 .../SVG/burger-svgrepo-com.svg | 0 .../SVG/burrito-svgrepo-com.svg | 0 .../SVG/bus-front-view-svgrepo-com.svg | 0 .../SVG/cab-svgrepo-com.svg | 0 .../SVG/campfire-svgrepo-com.svg | 0 .../SVG/cancel-svgrepo-com.svg | 0 .../SVG/car-svgrepo-com.svg | 0 .../SVG/checked-tick-svgrepo-com.svg | 0 .../SVG/click-svgrepo-com.svg | 0 .../SVG/cloud-svgrepo-com-2.svg | 0 .../SVG/cloud-svgrepo-com.svg | 0 .../SVG/clouds-cloud-svgrepo-com.svg | 0 .../SVG/computer-mouse-with-wheel.svg | 0 .../SVG/crosshairs-solid-svgrepo-com.svg | 0 .../SVG/donut-svgrepo-com.svg | 0 src/{Assets => Components}/SVG/edit.svg | 0 .../SVG/firebog-ground-entrance2.svg | 0 src/{Assets => Components}/SVG/frame-1v.svg | 0 src/{Assets => Components}/SVG/frame-2v.svg | 0 src/{Assets => Components}/SVG/frame-3v.svg | 0 src/{Assets => Components}/SVG/frame-4v.svg | 0 src/{Assets => Components}/SVG/frame-5v.svg | 0 src/{Assets => Components}/SVG/frame-6v.svg | 0 src/{Assets => Components}/SVG/frame-7v.svg | 0 src/{Assets => Components}/SVG/frame-8v.svg | 0 .../SVG/fuse-weapon-svgrepo-com.svg | 0 .../SVG/leaf-svgrepo-com.svg | 0 .../SVG/mole-svgrepo-com.svg | 0 .../SVG/mouse-svgrepo-com.svg | 0 .../SVG/ostrich-animal-svgrepo-com.svg | 0 .../SVG/pizza-svgrepo-com.svg | 0 .../SVG/snail-svgrepo-com.svg | 0 .../SVG/truck-lorry-svgrepo-com.svg | 0 .../SVG/turtle-svgrepo-com.svg | 0 src/{Assets => Components}/SVG/wordcloud.svg | 0 .../SVG/zpvo_43sn_180514 copy.jpg | Bin src/Pages/GameStore/GameHome.jsx | 4 +- 52 files changed, 943 insertions(+), 738 deletions(-) rename src/{Assets => Components}/SVG/ambulance-svgrepo-com.svg (100%) rename src/{Assets => Components}/SVG/animal-kingdom-coati-svgrepo-com.svg (100%) rename src/{Assets => Components}/SVG/arrow-svgrepo-com.svg (100%) rename src/{Assets => Components}/SVG/axe-svgrepo-com.svg (100%) rename src/{Assets => Components}/SVG/baby-animal-shaped-plate-svgrepo-com.svg (100%) rename src/{Assets => Components}/SVG/bat-svgrepo-com.svg (100%) rename src/{Assets => Components}/SVG/bicycle-bike-svgrepo-com.svg (100%) rename src/{Assets => Components}/SVG/burger-svgrepo-com.svg (100%) rename src/{Assets => Components}/SVG/burrito-svgrepo-com.svg (100%) rename src/{Assets => Components}/SVG/bus-front-view-svgrepo-com.svg (100%) rename src/{Assets => Components}/SVG/cab-svgrepo-com.svg (100%) rename src/{Assets => Components}/SVG/campfire-svgrepo-com.svg (100%) rename src/{Assets => Components}/SVG/cancel-svgrepo-com.svg (100%) rename src/{Assets => Components}/SVG/car-svgrepo-com.svg (100%) rename src/{Assets => Components}/SVG/checked-tick-svgrepo-com.svg (100%) rename src/{Assets => Components}/SVG/click-svgrepo-com.svg (100%) rename src/{Assets => Components}/SVG/cloud-svgrepo-com-2.svg (100%) rename src/{Assets => Components}/SVG/cloud-svgrepo-com.svg (100%) rename src/{Assets => Components}/SVG/clouds-cloud-svgrepo-com.svg (100%) rename src/{Assets => Components}/SVG/computer-mouse-with-wheel.svg (100%) rename src/{Assets => Components}/SVG/crosshairs-solid-svgrepo-com.svg (100%) rename src/{Assets => Components}/SVG/donut-svgrepo-com.svg (100%) rename src/{Assets => Components}/SVG/edit.svg (100%) rename src/{Assets => Components}/SVG/firebog-ground-entrance2.svg (100%) rename src/{Assets => Components}/SVG/frame-1v.svg (100%) rename src/{Assets => Components}/SVG/frame-2v.svg (100%) rename src/{Assets => Components}/SVG/frame-3v.svg (100%) rename src/{Assets => Components}/SVG/frame-4v.svg (100%) rename src/{Assets => Components}/SVG/frame-5v.svg (100%) rename src/{Assets => Components}/SVG/frame-6v.svg (100%) rename src/{Assets => Components}/SVG/frame-7v.svg (100%) rename src/{Assets => Components}/SVG/frame-8v.svg (100%) rename src/{Assets => Components}/SVG/fuse-weapon-svgrepo-com.svg (100%) rename src/{Assets => Components}/SVG/leaf-svgrepo-com.svg (100%) rename src/{Assets => Components}/SVG/mole-svgrepo-com.svg (100%) rename src/{Assets => Components}/SVG/mouse-svgrepo-com.svg (100%) rename src/{Assets => Components}/SVG/ostrich-animal-svgrepo-com.svg (100%) rename src/{Assets => Components}/SVG/pizza-svgrepo-com.svg (100%) rename src/{Assets => Components}/SVG/snail-svgrepo-com.svg (100%) rename src/{Assets => Components}/SVG/truck-lorry-svgrepo-com.svg (100%) rename src/{Assets => Components}/SVG/turtle-svgrepo-com.svg (100%) rename src/{Assets => Components}/SVG/wordcloud.svg (100%) rename src/{Assets => Components}/SVG/zpvo_43sn_180514 copy.jpg (100%) diff --git a/src/Components/Games/BirdShooter/bird.jsx b/src/Components/Games/BirdShooter/bird.jsx index 77d14685..6f80322c 100644 --- a/src/Components/Games/BirdShooter/bird.jsx +++ b/src/Components/Games/BirdShooter/bird.jsx @@ -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 ( -
-
handleHit()} /> -
- ); -} \ No newline at end of file + return ( +
+
handleHit()} /> +
+ ); +} diff --git a/src/Components/Games/BirdShooter/birds.jsx b/src/Components/Games/BirdShooter/birds.jsx index 9c70fa50..62976492 100644 --- a/src/Components/Games/BirdShooter/birds.jsx +++ b/src/Components/Games/BirdShooter/birds.jsx @@ -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 = [ - - // handleWin()} randomYindex={40} /> - ] + const { x, y } = mouse(); + const [positionX, setPositionX] = useState(x); + const [positionY, setPositionY] = useState(y); - const [birds, setBirds] = useState(birdArray) + let birdArray = [ + , + // 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( handleWin()} randomYindex={randomYindex} />) - birdArray.push() - setBirds([...birdArray]) - }, 500); - const to = setTimeout(() => { - clearInterval(int) - birdArray = [ - // handleWin()} randomYindex={40} /> - - ] - // setBirds([ handleWin()} randomYindex={40} />]) - setBirds([]) - // 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( handleWin()} randomYindex={randomYindex} />) + birdArray.push(); + setBirds([...birdArray]); + }, 500); + const to = setTimeout(() => { + clearInterval(int); + birdArray = [ + // handleWin()} randomYindex={40} /> + , + ]; + // setBirds([ handleWin()} randomYindex={40} />]) + setBirds([]); + // 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 ( -
mouseLock()} onClick={() => handleClick()} > - {birds} - - - - - {localPause &&

click on the birds

} -
- {showTimer && Time left: {timer}} -
-
- ); -} \ No newline at end of file + return ( +
mouseLock()} + onClick={() => handleClick()} + > + {birds} + + + + + {localPause &&

click on the birds

} +
+ {showTimer && ( + + Time left: {timer} + + )} +
+
+ ); +} diff --git a/src/Components/Games/FoodFall/foodfall.jsx b/src/Components/Games/FoodFall/foodfall.jsx index ec42308f..332ce156 100644 --- a/src/Components/Games/FoodFall/foodfall.jsx +++ b/src/Components/Games/FoodFall/foodfall.jsx @@ -1,226 +1,279 @@ -import React, {useEffect, useState} from 'react'; +import React, { useEffect, useState } from "react"; -import mouse from '../../../Utils/useMousePosition' -import useWindowSize from '../../../Utils/useWindowSize' -import '../games.css'; +import mouse from "../../../Utils/useMousePosition"; +import useWindowSize from "../../../Utils/useWindowSize"; +import "../games.css"; -import plate from '../../../Assets/SVG/baby-animal-shaped-plate-svgrepo-com.svg' -import burger from '../../../Assets/SVG/burger-svgrepo-com.svg' -import burrito from '../../../Assets/SVG/burrito-svgrepo-com.svg' -import donut from '../../../Assets/SVG/donut-svgrepo-com.svg' -import pizza from '../../../Assets/SVG/pizza-svgrepo-com.svg' +import plate from "../../SVG/baby-animal-shaped-plate-svgrepo-com.svg"; +import burger from "../../SVG/burger-svgrepo-com.svg"; +import burrito from "../../SVG/burrito-svgrepo-com.svg"; +import donut from "../../SVG/donut-svgrepo-com.svg"; +import pizza from "../../SVG/pizza-svgrepo-com.svg"; -import fire from '../../../Assets/SVG/campfire-svgrepo-com.svg' +import fire from "../../SVG/campfire-svgrepo-com.svg"; -import tick from '../../../Assets/SVG/checked-tick-svgrepo-com.svg' -import cross from '../../../Assets/SVG/cancel-svgrepo-com.svg' +import tick from "../../SVG/checked-tick-svgrepo-com.svg"; +import cross from "../../SVG/cancel-svgrepo-com.svg"; -import winSound from '../../../Assets/Sounds/445974__breviceps__cartoon-slurp.wav' -import loseSound from '../../../Assets/Sounds/burn.wav' - -let showInst = true +let showInst = true; // function FoodFall({ handleWin, losePoint, setPaused }) { function FoodFall() { - document.body.style.backgroundColor = '#ffb3b3' - const { x } = mouse(); - const [positionX, setPositionX] = useState(x) - const buffet = [burger, burrito, donut, pizza, fire] - - const size = useWindowSize(); - - const [food, setFood] = useState(buffet[0]) - const [foodY, setFoodY] = useState(2) - const [spawnPosition, setSpawnPosition] = useState(10) - const [foodScale, setFoodScale] = useState(1) - - const [food2, setFood2] = useState(buffet[4]) - const [foodY2, setFoodY2] = useState(2) - const [spawnPosition2, setSpawnPosition2] = useState(75) - const [foodScale2, setFoodScale2] = useState(1) - - const [food3, setFood3] = useState(buffet[2]) - const [foodY3, setFoodY3] = useState(-20) - const [spawnPosition3, setSpawnPosition3] = useState(40) - const [foodScale3, setFoodScale3] = useState(1) - - const [localPause, setLocalPause] = useState(true) - - function handleMove () { - setPositionX(x-100) + const winSound = + "https://d2nrcsymqn25pk.cloudfront.net/Assets/Sounds/445974__breviceps__cartoon-slurp.wav"; + const loseSound = + "https://d2nrcsymqn25pk.cloudfront.net/Assets/Sounds/burn.wav"; + document.body.style.backgroundColor = "#ffb3b3"; + const { x } = mouse(); + const [positionX, setPositionX] = useState(x); + const buffet = [burger, burrito, donut, pizza, fire]; + + const size = useWindowSize(); + + const [food, setFood] = useState(buffet[0]); + const [foodY, setFoodY] = useState(2); + const [spawnPosition, setSpawnPosition] = useState(10); + const [foodScale, setFoodScale] = useState(1); + + const [food2, setFood2] = useState(buffet[4]); + const [foodY2, setFoodY2] = useState(2); + const [spawnPosition2, setSpawnPosition2] = useState(75); + const [foodScale2, setFoodScale2] = useState(1); + + const [food3, setFood3] = useState(buffet[2]); + const [foodY3, setFoodY3] = useState(-20); + const [spawnPosition3, setSpawnPosition3] = useState(40); + const [foodScale3, setFoodScale3] = useState(1); + + const [localPause, setLocalPause] = useState(true); + + function handleMove() { + setPositionX(x - 100); + } + + useEffect(() => { + if (localPause === false) { + let y = 2; + const foodDrop = setInterval(() => { + y++; + setFoodY(y); + if (y > 100) { + y = -15; + setFoodScale(1); + setFood(buffet[Math.floor(Math.random() * buffet.length)]); + setSpawnPosition(Math.floor(80 * Math.random())); + } + }, 12); + return () => clearInterval(foodDrop); } + }, [localPause]); - useEffect(() => { - if (localPause === false) { - let y = 2 - const foodDrop = setInterval(() => { - y++ - setFoodY(y) - if (y > 100) { - y = -15 - setFoodScale(1) - setFood(buffet[Math.floor(Math.random() * buffet.length)]) - setSpawnPosition(Math.floor(80 * Math.random())) - } - - }, 12) - return () => clearInterval(foodDrop) + useEffect(() => { + if (localPause === false) { + let y2 = 2; + const foodDrop = setInterval(() => { + y2++; + setFoodY2(y2); + if (y2 > 100) { + y2 = -15; + setFoodScale2(1); + setFood2(buffet[Math.floor(Math.random() * buffet.length)]); + setSpawnPosition2(Math.floor(80 * Math.random())); + } + }, 15); + return () => clearInterval(foodDrop); } - }, [localPause]) - - useEffect(() => { - if (localPause === false) { - let y2 = 2 - const foodDrop = setInterval(() => { - y2++ - setFoodY2(y2) - if (y2 > 100) { - y2 = -15 - setFoodScale2(1) - setFood2(buffet[Math.floor(Math.random() * buffet.length)]) - setSpawnPosition2(Math.floor(80 * Math.random())) - } - }, 15) - return () => clearInterval(foodDrop) + }, [localPause]); + + useEffect(() => { + if (localPause === false) { + let y3 = 2; + const foodDrop = setInterval(() => { + y3++; + setFoodY3(y3); + if (y3 > 100) { + y3 = -15; + setFoodScale3(1); + setFood3(buffet[Math.floor(Math.random() * buffet.length)]); + setSpawnPosition3(Math.floor(80 * Math.random())); + } + }, 18); + return () => clearInterval(foodDrop); + } + }, [localPause]); + + useEffect(() => { + if ( + foodY === 75 && + (spawnPosition * size.width) / 100 - x > -200 && + (spawnPosition * size.width) / 100 - x < 50 + ) { + let f = 1; + let i = 0; + const scaleInt = setInterval(() => { + setFoodScale((f -= 0.1)); + i++; + if (i === 10) { + clearInterval(scaleInt); + } + }, 10); + if (food.search("fire") === -1) { + // win() + let winGame = new Audio(winSound); + winGame.loop = false; + winGame.play(); + // handleWin() + } else { + // lose() + let lose = new Audio(loseSound); + lose.loop = false; + lose.play(); + // losePoint() + } } - }, [localPause]) - - useEffect(() => { - if (localPause === false) { - let y3 = 2 - const foodDrop = setInterval(() => { - y3++ - setFoodY3(y3) - if (y3 > 100) { - y3 = -15 - setFoodScale3(1) - setFood3(buffet[Math.floor(Math.random() * buffet.length)]) - setSpawnPosition3(Math.floor(80 * Math.random())) - } - }, 18) - return () => clearInterval(foodDrop) + }, [foodY]); + + useEffect(() => { + if ( + foodY2 === 75 && + (spawnPosition2 * size.width) / 100 - x > -200 && + (spawnPosition2 * size.width) / 100 - x < 50 + ) { + let f = 1; + let i = 0; + const scaleInt = setInterval(() => { + setFoodScale2((f -= 0.1)); + i++; + if (i === 10) { + clearInterval(scaleInt); + } + }, 10); + if (food2.search("fire") === -1) { + // win() + let winGame = new Audio(winSound); + winGame.loop = false; + winGame.play(); + // handleWin() + } else { + lose(); + let lose = new Audio(loseSound); + lose.loop = false; + lose.play(); + // losePoint() + } } - }, [localPause]) - - useEffect(() => { - if (foodY === 75 && (spawnPosition * size.width)/100 - x > -200 && (spawnPosition * size.width)/100 - x < 50) { - let f = 1 - let i = 0 - const scaleInt = setInterval(() => { - setFoodScale(f -= 0.1) - i++ - if (i === 10) { - clearInterval(scaleInt) - } - }, 10) - if (food.search('fire') === - 1) { - // win() - let winGame = new Audio(winSound); - winGame.loop = false; - winGame.play(); - // handleWin() - } else { - // lose() - let lose = new Audio(loseSound); - lose.loop = false; - lose.play(); - // losePoint() - } - } - }, [foodY]) - - useEffect(() => { - if (foodY2 === 75 && (spawnPosition2 * size.width)/100 - x > -200 && (spawnPosition2 * size.width)/100 - x < 50) { - let f = 1 - let i = 0 - const scaleInt = setInterval(() => { - setFoodScale2(f -= 0.1) - i++ - if (i === 10) { - clearInterval(scaleInt) - } - }, 10) - if (food2.search('fire') === - 1) { - // win() - let winGame = new Audio(winSound); - winGame.loop = false; - winGame.play(); - // handleWin() - } else { - lose() - let lose = new Audio(loseSound); - lose.loop = false; - lose.play(); - // losePoint() - } - } - }, [foodY2]) - - useEffect(() => { - if (foodY3 === 75 && (spawnPosition3 * size.width)/100 - x > -200 && (spawnPosition3 * size.width)/100 - x < 50) { - let f = 1 - let i = 0 - const scaleInt = setInterval(() => { - setFoodScale3(f -= 0.1) - i++ - if (i === 10) { - clearInterval(scaleInt) - } - }, 10) - if (food3.search('fire') === - 1) { - // win() - let winGame = new Audio(winSound); - winGame.loop = false; - winGame.play(); - // handleWin() - } else { - lose() - let lose = new Audio(loseSound); - lose.loop = false; - lose.play(); - // losePoint() - } - } - }, [foodY3]) - - function startGame () { - setLocalPause(false) - showInst = false - // setPaused(false) + }, [foodY2]); + + useEffect(() => { + if ( + foodY3 === 75 && + (spawnPosition3 * size.width) / 100 - x > -200 && + (spawnPosition3 * size.width) / 100 - x < 50 + ) { + let f = 1; + let i = 0; + const scaleInt = setInterval(() => { + setFoodScale3((f -= 0.1)); + i++; + if (i === 10) { + clearInterval(scaleInt); + } + }, 10); + if (food3.search("fire") === -1) { + // win() + let winGame = new Audio(winSound); + winGame.loop = false; + winGame.play(); + // handleWin() + } else { + lose(); + let lose = new Audio(loseSound); + lose.loop = false; + lose.play(); + // losePoint() + } } - - return ( - <> - {showInst &&

catch food. don't catch fire. click to start

} - -
handleMove()} onClick={() => startGame()} > - plate - - food - - food - - food - - {showInst && - <> -
- tickcross -
-
-
- - - - -
- -
- } + }, [foodY3]); + + function startGame() { + setLocalPause(false); + showInst = false; + // setPaused(false) + } + + return ( + <> + {showInst && ( +

+ catch food. don't catch fire. click to start +

+ )} + +
handleMove()} + onClick={() => startGame()} + > + plate -
- - ); + food + + food + + food + + {showInst && ( + <> +
+ tick + cross +
+
+
+ + + + +
+ +
+ + )} +
+ + ); } -export default FoodFall; \ No newline at end of file +export default FoodFall; diff --git a/src/Components/Games/Frogger/frogger.jsx b/src/Components/Games/Frogger/frogger.jsx index ccd9519d..153274b3 100644 --- a/src/Components/Games/Frogger/frogger.jsx +++ b/src/Components/Games/Frogger/frogger.jsx @@ -1,97 +1,137 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useState } from "react"; -import squeek from '../../../Assets/Sounds/squeek.wav' -import win from '../../../Assets/Sounds/99636__tomlija__small-crowd-yelling-yeah.wav' -import crashSound from '../../../Assets/Sounds/crash.wav' -import '../games.css'; +import "../games.css"; -import turtle from '../../../Assets/SVG/turtle-svgrepo-com.svg' -import click from '../../../Assets/SVG/click-svgrepo-com.svg' -import ambulance from '../../../Assets/SVG/ambulance-svgrepo-com.svg' -import bicycle from '../../../Assets/SVG/bicycle-bike-svgrepo-com.svg' -import bus from '../../../Assets/SVG/bus-front-view-svgrepo-com.svg' -import cab from '../../../Assets/SVG/cab-svgrepo-com.svg' -import car from '../../../Assets/SVG/car-svgrepo-com.svg' -import truck from '../../../Assets/SVG/truck-lorry-svgrepo-com.svg' +import turtle from "../../SVG/turtle-svgrepo-com.svg"; +import click from "../../SVG/click-svgrepo-com.svg"; +import ambulance from "../../SVG/ambulance-svgrepo-com.svg"; +import bicycle from "../../SVG/bicycle-bike-svgrepo-com.svg"; +import bus from "../../SVG/bus-front-view-svgrepo-com.svg"; +import cab from "../../SVG/cab-svgrepo-com.svg"; +import car from "../../SVG/car-svgrepo-com.svg"; +import truck from "../../SVG/truck-lorry-svgrepo-com.svg"; -let showMouse = true +let showMouse = true; // function ClickLots ({ setPaused, handleWin, losePoint }) { -function ClickLots ( ) { - document.body.style.backgroundColor = '#88cc00' - const trafficArray = [ambulance, bicycle, bus, cab, car, truck] - const [vehicle, setVehicle] = useState(trafficArray[Math.floor(Math.random() * trafficArray.length)]) - const [vehiclePosition, setVehiclePosition] = useState(15) - const [vehicle2, setVehicle2] = useState(trafficArray[Math.floor(Math.random() * trafficArray.length)]) - const [vehicle2Position, setVehicle2Position] = useState(5) - const [positionX, setPositionX] = useState(5) - - useEffect(() => { - const int = setInterval(() => { - if (vehiclePosition < 120) { - setVehiclePosition(vehiclePosition + 1.6) - } else { - setVehicle(trafficArray[Math.floor(Math.random() * trafficArray.length)]) - setVehiclePosition(0) - } - if (vehicle2Position < 120) { - setVehicle2Position(vehicle2Position + 2.4) - } else { - setVehicle2(trafficArray[Math.floor(Math.random() * trafficArray.length)]) - setVehicle2Position(0) - } - if (vehiclePosition >= 40 && vehiclePosition <= 41 && positionX >= 45 && positionX <= 55) { - // losePoint() - let creash = new Audio(crashSound); - creash.loop = false; - creash.play(); - } - if (vehicle2Position >= 50 && vehicle2Position <= 51 && positionX >= 35 && positionX <= 45) { - // losePoint() - let creash = new Audio(crashSound); - creash.loop = false; - creash.play(); - } - }, 20); - return () => clearInterval(int) - }) +function ClickLots() { + const squeek = + "https://d2nrcsymqn25pk.cloudfront.net/Assets/Sounds/squeek.wav"; + const win = + "https://d2nrcsymqn25pk.cloudfront.net/Assets/Sounds/99636__tomlija__small-crowd-yelling-yeah.wav"; + const crashSound = + "https://d2nrcsymqn25pk.cloudfront.net/Assets/Sounds/crash.wav"; + document.body.style.backgroundColor = "#88cc00"; + const trafficArray = [ambulance, bicycle, bus, cab, car, truck]; + const [vehicle, setVehicle] = useState( + trafficArray[Math.floor(Math.random() * trafficArray.length)] + ); + const [vehiclePosition, setVehiclePosition] = useState(15); + const [vehicle2, setVehicle2] = useState( + trafficArray[Math.floor(Math.random() * trafficArray.length)] + ); + const [vehicle2Position, setVehicle2Position] = useState(5); + const [positionX, setPositionX] = useState(5); - function handleClick () { - showMouse = false - let move = new Audio(squeek); - move.loop = false; - move.play(); - // setPaused(false) - let x = positionX - let i = 0 - const int = setInterval(() => { - x++ - i++ - setPositionX(x) - if (i > 4) { clearInterval(int) } - if (positionX >= 85 && i > 4) { - let winGame = new Audio(win); - winGame.loop = false; - winGame.play(); - // handleWin(true) - setPositionX(0) - } - }, 10) - } - return ( -
handleClick()} className='clickWrapper' > - {showMouse &&

click lots. don't get hit by traffic

} + useEffect(() => { + const int = setInterval(() => { + if (vehiclePosition < 120) { + setVehiclePosition(vehiclePosition + 1.6); + } else { + setVehicle( + trafficArray[Math.floor(Math.random() * trafficArray.length)] + ); + setVehiclePosition(0); + } + if (vehicle2Position < 120) { + setVehicle2Position(vehicle2Position + 2.4); + } else { + setVehicle2( + trafficArray[Math.floor(Math.random() * trafficArray.length)] + ); + setVehicle2Position(0); + } + if ( + vehiclePosition >= 40 && + vehiclePosition <= 41 && + positionX >= 45 && + positionX <= 55 + ) { + // losePoint() + let creash = new Audio(crashSound); + creash.loop = false; + creash.play(); + } + if ( + vehicle2Position >= 50 && + vehicle2Position <= 51 && + positionX >= 35 && + positionX <= 45 + ) { + // losePoint() + let creash = new Audio(crashSound); + creash.loop = false; + creash.play(); + } + }, 20); + return () => clearInterval(int); + }); - -
- {showMouse && click } -
- - -
-
-
- ); + function handleClick() { + showMouse = false; + let move = new Audio(squeek); + move.loop = false; + move.play(); + // setPaused(false) + let x = positionX; + let i = 0; + const int = setInterval(() => { + x++; + i++; + setPositionX(x); + if (i > 4) { + clearInterval(int); + } + if (positionX >= 85 && i > 4) { + let winGame = new Audio(win); + winGame.loop = false; + winGame.play(); + // handleWin(true) + setPositionX(0); + } + }, 10); + } + return ( +
handleClick()} className="clickWrapper"> + {showMouse && ( +

click lots. don't get hit by traffic

+ )} + + +
+ {showMouse && click} +
+ + +
+
+
+ ); } -export default ClickLots; \ No newline at end of file +export default ClickLots; diff --git a/src/Components/Games/Race/race.jsx b/src/Components/Games/Race/race.jsx index 3f0af64d..82151ec2 100644 --- a/src/Components/Games/Race/race.jsx +++ b/src/Components/Games/Race/race.jsx @@ -1,56 +1,76 @@ -import React, { useState } from 'react'; -import mouse from '../../../Utils/useMousePosition' -import '../games.css'; +import React, { useState } from "react"; +import mouse from "../../../Utils/useMousePosition"; +import "../games.css"; -import crunch from '../../../Assets/Sounds/429591__inspectorj__chewing-breadstick-single-d.wav' -import snail from '../../../Assets/SVG/snail-svgrepo-com.svg' -import leaf from '../../../Assets/SVG/leaf-svgrepo-com.svg' -import mouseIcon from '../../../Assets/SVG/mouse-svgrepo-com.svg' +import snail from "../../SVG/snail-svgrepo-com.svg"; +import leaf from "../../SVG/leaf-svgrepo-com.svg"; +import mouseIcon from "../../SVG/mouse-svgrepo-com.svg"; -let showMouse = true -let lastX = 1000 +let showMouse = true; +let lastX = 1000; // export default function Race({ handleWin, setPaused }) { export default function Race() { - document.body.style.backgroundColor = 'rgb(159, 136, 86)' - const { x, y } = mouse(); - - let randomWidth = Math.floor(80 * Math.random()) + 10 - let randomHeight = Math.floor(70 * Math.random()) + 10 - const [finishPositionX, setFinishPositionX] = useState(80) - const [finishPositionY, setFinishPositionY] = useState(20) - - const [positionX, setPositionX] = useState(200) - const [positionY, setPositionY] = useState(50) - const [direction, setDirection] = useState(1) - - function handleDrag () { - setPositionX(x-35) - setPositionY(y-120) - if (lastX < x) { - setDirection(1) - } else if (lastX > x) { - setDirection(-1) - } - lastX = x - } + const crunch = + "https://d2nrcsymqn25pk.cloudfront.net/Assets/Sounds/429591__inspectorj__chewing-breadstick-single-d.wav"; + document.body.style.backgroundColor = "rgb(159, 136, 86)"; + const { x, y } = mouse(); + + let randomWidth = Math.floor(80 * Math.random()) + 10; + let randomHeight = Math.floor(70 * Math.random()) + 10; + const [finishPositionX, setFinishPositionX] = useState(80); + const [finishPositionY, setFinishPositionY] = useState(20); + + const [positionX, setPositionX] = useState(200); + const [positionY, setPositionY] = useState(50); + const [direction, setDirection] = useState(1); - function handleMouseOver () { - showMouse = false - let loseSound = new Audio(crunch); - loseSound.loop = false; - loseSound.play(); - setFinishPositionX(randomWidth) - setFinishPositionY(randomHeight) + function handleDrag() { + setPositionX(x - 35); + setPositionY(y - 120); + if (lastX < x) { + setDirection(1); + } else if (lastX > x) { + setDirection(-1); } + lastX = x; + } + + function handleMouseOver() { + showMouse = false; + let loseSound = new Audio(crunch); + loseSound.loop = false; + loseSound.play(); + setFinishPositionX(randomWidth); + setFinishPositionY(randomHeight); + } + + return ( +
handleDrag()} className="raceWrapper"> + {showMouse && ( +

guide snail to food with mouse

+ )} + snail - return ( -
handleDrag()} className='raceWrapper'> - {showMouse &&

guide snail to food with mouse

} - snail - - finish - {showMouse && mouse} -
- ); -} \ No newline at end of file + finish + {showMouse && mouse} +
+ ); +} diff --git a/src/Components/Games/Scroll/scroll.jsx b/src/Components/Games/Scroll/scroll.jsx index 0eccf16a..3a2a1de3 100644 --- a/src/Components/Games/Scroll/scroll.jsx +++ b/src/Components/Games/Scroll/scroll.jsx @@ -1,147 +1,185 @@ -import React, { useEffect, useState } from 'react'; -import '../games.css'; +import React, { useEffect, useState } from "react"; +import "../games.css"; -import animal from '../../../Assets/SVG/animal-kingdom-coati-svgrepo-com.svg' -import arrow from '../../../Assets/SVG/arrow-svgrepo-com.svg' -import axe from '../../../Assets/SVG/axe-svgrepo-com.svg' -import bomb from '../../../Assets/SVG/fuse-weapon-svgrepo-com.svg' +import animal from "../../SVG/animal-kingdom-coati-svgrepo-com.svg"; +import arrow from "../../SVG/arrow-svgrepo-com.svg"; +import axe from "../../SVG/axe-svgrepo-com.svg"; +import bomb from "../../SVG/fuse-weapon-svgrepo-com.svg"; -import ding from '../../../Assets/Sounds/ding.wav' -import ugh from '../../../Assets/Sounds/ugh.wav' +import cross from "../../SVG/cancel-svgrepo-com.svg"; +import mouse from "../../SVG/computer-mouse-with-wheel.svg"; -import cross from '../../../Assets/SVG/cancel-svgrepo-com.svg' -import mouse from '../../../Assets/SVG/computer-mouse-with-wheel.svg' - -let localPause = true +let localPause = true; // function Scroll({ setPaused, handleWin, losePoint}) { function Scroll() { - document.body.style.backgroundColor = '#ffd966' - - const [positionY, setPositionY] = useState(40) - const [arrowPositionX, setArrowPositionX] = useState(0) - const [arrowPositionY, setArrowPositionY] = useState(20) - const [axePositionX, setAxePositionX] = useState(-40) - const [axePositionY, setAxePositionY] = useState(60) - const [bombPositionX, setBombPositionX] = useState(-80) - const [bombPositionY, setBombPositionY] = useState(60) - - useEffect(() => { - if (!localPause) { - const int = requestAnimationFrame(() => { - if (arrowPositionX < 100) { - setArrowPositionX(arrowPositionX + 1) - } else { - setArrowPositionX(-10) - setArrowPositionY(Math.random() * 90) - } - }); + const ding = "https://d2nrcsymqn25pk.cloudfront.net/Assets/Sounds/ding.wav"; + const ugh = "https://d2nrcsymqn25pk.cloudfront.net/Assets/Sounds/ugh.wav"; + document.body.style.backgroundColor = "#ffd966"; + + const [positionY, setPositionY] = useState(40); + const [arrowPositionX, setArrowPositionX] = useState(0); + const [arrowPositionY, setArrowPositionY] = useState(20); + const [axePositionX, setAxePositionX] = useState(-40); + const [axePositionY, setAxePositionY] = useState(60); + const [bombPositionX, setBombPositionX] = useState(-80); + const [bombPositionY, setBombPositionY] = useState(60); + + useEffect(() => { + if (!localPause) { + const int = requestAnimationFrame(() => { + if (arrowPositionX < 100) { + setArrowPositionX(arrowPositionX + 1); + } else { + setArrowPositionX(-10); + setArrowPositionY(Math.random() * 90); } - }) - - useEffect(() => { - if (!localPause) { - const int = requestAnimationFrame(() => { - if (axePositionX < 100) { - setAxePositionX(axePositionX + 1) - } else { - setAxePositionX(-10) - setAxePositionY(Math.random() * 90) - } - }); + }); } - }) - - useEffect(() => { - if (!localPause) { - const int = requestAnimationFrame(() => { - if (bombPositionX < 100) { - setBombPositionX(bombPositionX + 1) - } else { - setBombPositionX(-10) - setBombPositionY(Math.random() * 90) - } - }); - } - }) - - useEffect(() => { - if (arrowPositionX === 90 && arrowPositionY - positionY >= -10 && arrowPositionY - positionY <= 10) { - let loseSound = new Audio(ugh); - loseSound.loop = false; - loseSound.play(); - } else if (arrowPositionX === 90) { - let winSound = new Audio(ding); - winSound.loop = false; - winSound.play(); - - } - }, [arrowPositionX]) - - useEffect(() => { - if (axePositionX === 90 && axePositionY - positionY >= -10 && axePositionY - positionY <= 10) { - let loseSound = new Audio(ugh); - loseSound.loop = false; - loseSound.play(); - } else if (axePositionX === 90) { - let winSound = new Audio(ding); - winSound.loop = false; - winSound.play(); - } - }, [axePositionX]) - - useEffect(() => { - if (bombPositionX === 90 && bombPositionY - positionY >= -10 && bombPositionY - positionY <= 10) { - let loseSound = new Audio(ugh); - loseSound.loop = false; - loseSound.play(); - } else if (bombPositionX === 90) { - - let winSound = new Audio(ding); - winSound.loop = false; - winSound.play(); + }); + + useEffect(() => { + if (!localPause) { + const int = requestAnimationFrame(() => { + if (axePositionX < 100) { + setAxePositionX(axePositionX + 1); + } else { + setAxePositionX(-10); + setAxePositionY(Math.random() * 90); } - }, [bombPositionX]) - - function handleScroll (e) { - if (e.nativeEvent.wheelDelta > 0 && positionY > 0) { - setPositionY(positionY - 1) - } else if (e.nativeEvent.wheelDelta < 0 && positionY < 83){ - setPositionY(positionY + 1) + }); + } + }); + + useEffect(() => { + if (!localPause) { + const int = requestAnimationFrame(() => { + if (bombPositionX < 100) { + setBombPositionX(bombPositionX + 1); + } else { + setBombPositionX(-10); + setBombPositionY(Math.random() * 90); } + }); } + }); - function handleClick () { - localPause = false - setTimeout(() => { - }, 1500); - setTimeout(() => { - localPause = true - }, 8500); + useEffect(() => { + if ( + arrowPositionX === 90 && + arrowPositionY - positionY >= -10 && + arrowPositionY - positionY <= 10 + ) { + let loseSound = new Audio(ugh); + loseSound.loop = false; + loseSound.play(); + } else if (arrowPositionX === 90) { + let winSound = new Audio(ding); + winSound.loop = false; + winSound.play(); } - - return ( -
handleScroll(e)} onClick={() => handleClick()} className='scrollContainer'> - {localPause &&

scroll wheel or track pad moves animal. avoid everything. click to start

} - - - - - - {localPause && - <> -
- cross -
- - - -
-
- - } -
- ); + }, [arrowPositionX]); + + useEffect(() => { + if ( + axePositionX === 90 && + axePositionY - positionY >= -10 && + axePositionY - positionY <= 10 + ) { + let loseSound = new Audio(ugh); + loseSound.loop = false; + loseSound.play(); + } else if (axePositionX === 90) { + let winSound = new Audio(ding); + winSound.loop = false; + winSound.play(); + } + }, [axePositionX]); + + useEffect(() => { + if ( + bombPositionX === 90 && + bombPositionY - positionY >= -10 && + bombPositionY - positionY <= 10 + ) { + let loseSound = new Audio(ugh); + loseSound.loop = false; + loseSound.play(); + } else if (bombPositionX === 90) { + let winSound = new Audio(ding); + winSound.loop = false; + winSound.play(); + } + }, [bombPositionX]); + + function handleScroll(e) { + if (e.nativeEvent.wheelDelta > 0 && positionY > 0) { + setPositionY(positionY - 1); + } else if (e.nativeEvent.wheelDelta < 0 && positionY < 83) { + setPositionY(positionY + 1); + } + } + + function handleClick() { + localPause = false; + setTimeout(() => {}, 1500); + setTimeout(() => { + localPause = true; + }, 8500); + } + + return ( +
handleScroll(e)} + onClick={() => handleClick()} + className="scrollContainer" + > + {localPause && ( +

+ scroll wheel or track pad moves animal. avoid everything. click to + start +

+ )} + + + + + + {localPause && ( + <> +
+ cross +
+ + + +
+
+ + + )} +
+ ); } -export default Scroll; \ No newline at end of file +export default Scroll; diff --git a/src/Components/Games/WackMole/wackmole.jsx b/src/Components/Games/WackMole/wackmole.jsx index e332f613..bea7bf1b 100644 --- a/src/Components/Games/WackMole/wackmole.jsx +++ b/src/Components/Games/WackMole/wackmole.jsx @@ -1,110 +1,148 @@ -import React, { useState } from 'react' -import mouse from '../../../Utils/useMousePosition' +import React, { useState } from "react"; +import mouse from "../../../Utils/useMousePosition"; -import '../games.css'; -import whack from '../../../Assets/Sounds/wack.wav' +import "../games.css"; -import quack from '../../../Assets/Sounds/ostrich.wav' -import mole from '../../../Assets/SVG/mole-svgrepo-com.svg' -import ostrich from '../../../Assets/SVG/ostrich-animal-svgrepo-com.svg' -import click from '../../../Assets/SVG/click-svgrepo-com.svg' -import tick from '../../../Assets/SVG/checked-tick-svgrepo-com.svg' -import cross from '../../../Assets/SVG/cancel-svgrepo-com.svg' -import bat from '../../../Assets/SVG/bat-svgrepo-com.svg' -import mound from '../../../Assets/SVG/firebog-ground-entrance2.svg' +import mole from "../../SVG/mole-svgrepo-com.svg"; +import ostrich from "../../SVG/ostrich-animal-svgrepo-com.svg"; +import click from "../../SVG/click-svgrepo-com.svg"; +import tick from "../../SVG/checked-tick-svgrepo-com.svg"; +import cross from "../../SVG/cancel-svgrepo-com.svg"; +import bat from "../../SVG/bat-svgrepo-com.svg"; +import mound from "../../SVG/firebog-ground-entrance2.svg"; -let showMouse = true +let showMouse = true; // export default function WackMole ({ setPaused, handleClick, losePoint }) { -export default function WackMole () { - document.body.style.backgroundColor = '#B37C51' - - const positionArray = [5, 25, 45, 65, 85] - let randomWidthA = positionArray[Math.floor(Math.random() * 5)] - let randomHeightA = positionArray[Math.floor(Math.random() * 5)] - let randomWidthB = positionArray[Math.floor(Math.random() * 5)] - let randomHeightB = positionArray[Math.floor(Math.random() * 5)] - const [positionX, setPositionX] = useState(5) - const [positionY, setPositionY] = useState(25) - const [animalPositionX, setAnimalPositionX] = useState(85) - const [animalPositionY, setAnimalPositionY] = useState(25) - - const { x, y } = mouse(); - const [mouseX, setMouseX] = useState(x) - const [mouseY, setMouseY] = useState(y) - const [batSkew, setBatSkew] = useState(0) - const [animalClass, setAnimalClass] = useState('wackAnimal') - - let moundArray = [] - for (var i = 0; i < 25; i++) { moundArray.push(mound) -} - function handleMouseMove () { - setMouseX(x-140) - setMouseY(y-30) - } +export default function WackMole() { + const whack = "https://d2nrcsymqn25pk.cloudfront.net/Assets/Sounds/wack.wav"; + const quack = "https://d2nrcsymqn25pk.cloudfront.net/Assets/Sounds/ostrich.wav"; + document.body.style.backgroundColor = "#B37C51"; - function handleHit () { - let hitSound = new Audio(whack); - hitSound.loop = false; - hitSound.play(); - next() - } + const positionArray = [5, 25, 45, 65, 85]; + let randomWidthA = positionArray[Math.floor(Math.random() * 5)]; + let randomHeightA = positionArray[Math.floor(Math.random() * 5)]; + let randomWidthB = positionArray[Math.floor(Math.random() * 5)]; + let randomHeightB = positionArray[Math.floor(Math.random() * 5)]; + const [positionX, setPositionX] = useState(5); + const [positionY, setPositionY] = useState(25); + const [animalPositionX, setAnimalPositionX] = useState(85); + const [animalPositionY, setAnimalPositionY] = useState(25); - function lose () { - let loseSound = new Audio(quack); - loseSound.loop = false; - loseSound.play(); - next() - } + const { x, y } = mouse(); + const [mouseX, setMouseX] = useState(x); + const [mouseY, setMouseY] = useState(y); + const [batSkew, setBatSkew] = useState(0); + const [animalClass, setAnimalClass] = useState("wackAnimal"); - function next () { - showMouse = false - // setPaused(false) - setAnimalClass('wackAnimal animalPop') - setTimeout(() => { - setPositionX(randomWidthA) - setPositionY(randomHeightA) - setAnimalPositionX(randomWidthB) - setAnimalPositionY(randomHeightB) - if (randomWidthA === randomWidthB && randomHeightA === randomHeightB) { - setPositionX(5) - setPositionY(5) - setAnimalPositionX(85) - setAnimalPositionY(85) - } - }, 250) - setTimeout(() => { - setAnimalClass('wackAnimal') - }, 500); - } + let moundArray = []; + for (var i = 0; i < 25; i++) { + moundArray.push(mound); + } + function handleMouseMove() { + setMouseX(x - 140); + setMouseY(y - 30); + } - function handleBatDown () { setBatSkew(10) } - function handleBatUp () { setBatSkew(0) } - - return ( - <> - {showMouse &&

wack the mole. don't wack the ostrich

} -
handleMouseMove()} onMouseDown={() => handleBatDown()} onMouseUp={() => handleBatUp()}> - mole handleHit()} /> - - ostrich lose()}/> + function handleHit() { + let hitSound = new Audio(whack); + hitSound.loop = false; + hitSound.play(); + next(); + } - + function lose() { + let loseSound = new Audio(quack); + loseSound.loop = false; + loseSound.play(); + next(); + } - {showMouse && <>click -
-
- tickcross -
-
- moleostrich -
-
- } -
- {moundArray} + function next() { + showMouse = false; + // setPaused(false) + setAnimalClass("wackAnimal animalPop"); + setTimeout(() => { + setPositionX(randomWidthA); + setPositionY(randomHeightA); + setAnimalPositionX(randomWidthB); + setAnimalPositionY(randomHeightB); + if (randomWidthA === randomWidthB && randomHeightA === randomHeightB) { + setPositionX(5); + setPositionY(5); + setAnimalPositionX(85); + setAnimalPositionY(85); + } + }, 250); + setTimeout(() => { + setAnimalClass("wackAnimal"); + }, 500); + } + + function handleBatDown() { + setBatSkew(10); + } + function handleBatUp() { + setBatSkew(0); + } + + return ( + <> + {showMouse && ( +

wack the mole. don't wack the ostrich

+ )} +
handleMouseMove()} + onMouseDown={() => handleBatDown()} + onMouseUp={() => handleBatUp()} + > + mole handleHit()} + /> + + ostrich lose()} + /> + + + + {showMouse && ( + <> + click +
+
+ tick + cross +
+
+ mole + ostrich +
-
- - ) + + )} +
{moundArray}
+
+ + ); } diff --git a/src/Components/Games/games.css b/src/Components/Games/games.css index 2df30dc3..e9d96b67 100644 --- a/src/Components/Games/games.css +++ b/src/Components/Games/games.css @@ -564,15 +564,15 @@ } @keyframes birdflap { - 0% {background-image: url('../../Assets/SVG/frame-1v.svg')} - 12.5% {background-image: url('../../Assets/SVG/frame-2v.svg')} - 25% {background-image: url('../../Assets/SVG/frame-3v.svg')} - 37.5% {background-image: url('../../Assets/SVG/frame-4v.svg')} - 50% {background-image: url('../../Assets/SVG/frame-5v.svg')} - 62.5% {background-image: url('../../Assets/SVG/frame-6v.svg')} - 75% {background-image: url('../../Assets/SVG/frame-7v.svg')} - 87.5% {background-image: url('../../Assets/SVG/frame-8v.svg')} - 100% {background-image: url('../../Assets/SVG/frame-1v.svg')} + 0% {background-image: url('../SVG/frame-1v.svg')} + 12.5% {background-image: url('../SVG/frame-2v.svg')} + 25% {background-image: url('../SVG/frame-3v.svg')} + 37.5% {background-image: url('../SVG/frame-4v.svg')} + 50% {background-image: url('../SVG/frame-5v.svg')} + 62.5% {background-image: url('../SVG/frame-6v.svg')} + 75% {background-image: url('../SVG/frame-7v.svg')} + 87.5% {background-image: url('../SVG/frame-8v.svg')} + 100% {background-image: url('../SVG/frame-1v.svg')} } @keyframes birdfly { @@ -584,8 +584,8 @@ } @keyframes birdhit { - 0% {background-image: url('../../Assets/SVG/frame-1v.svg'); transform:translateY(0vh) translateX(0vw) rotate(0deg)} - 100% {background-image: url('../../Assets/SVG/frame-1v.svg'); transform:translateY(120vh) translateX(50vw) rotate(360deg)} + 0% {background-image: url('../SVG/frame-1v.svg'); transform:translateY(0vh) translateX(0vw) rotate(0deg)} + 100% {background-image: url('../SVG/frame-1v.svg'); transform:translateY(120vh) translateX(50vw) rotate(360deg)} } .crosshairs { diff --git a/src/Assets/SVG/ambulance-svgrepo-com.svg b/src/Components/SVG/ambulance-svgrepo-com.svg similarity index 100% rename from src/Assets/SVG/ambulance-svgrepo-com.svg rename to src/Components/SVG/ambulance-svgrepo-com.svg diff --git a/src/Assets/SVG/animal-kingdom-coati-svgrepo-com.svg b/src/Components/SVG/animal-kingdom-coati-svgrepo-com.svg similarity index 100% rename from src/Assets/SVG/animal-kingdom-coati-svgrepo-com.svg rename to src/Components/SVG/animal-kingdom-coati-svgrepo-com.svg diff --git a/src/Assets/SVG/arrow-svgrepo-com.svg b/src/Components/SVG/arrow-svgrepo-com.svg similarity index 100% rename from src/Assets/SVG/arrow-svgrepo-com.svg rename to src/Components/SVG/arrow-svgrepo-com.svg diff --git a/src/Assets/SVG/axe-svgrepo-com.svg b/src/Components/SVG/axe-svgrepo-com.svg similarity index 100% rename from src/Assets/SVG/axe-svgrepo-com.svg rename to src/Components/SVG/axe-svgrepo-com.svg diff --git a/src/Assets/SVG/baby-animal-shaped-plate-svgrepo-com.svg b/src/Components/SVG/baby-animal-shaped-plate-svgrepo-com.svg similarity index 100% rename from src/Assets/SVG/baby-animal-shaped-plate-svgrepo-com.svg rename to src/Components/SVG/baby-animal-shaped-plate-svgrepo-com.svg diff --git a/src/Assets/SVG/bat-svgrepo-com.svg b/src/Components/SVG/bat-svgrepo-com.svg similarity index 100% rename from src/Assets/SVG/bat-svgrepo-com.svg rename to src/Components/SVG/bat-svgrepo-com.svg diff --git a/src/Assets/SVG/bicycle-bike-svgrepo-com.svg b/src/Components/SVG/bicycle-bike-svgrepo-com.svg similarity index 100% rename from src/Assets/SVG/bicycle-bike-svgrepo-com.svg rename to src/Components/SVG/bicycle-bike-svgrepo-com.svg diff --git a/src/Assets/SVG/burger-svgrepo-com.svg b/src/Components/SVG/burger-svgrepo-com.svg similarity index 100% rename from src/Assets/SVG/burger-svgrepo-com.svg rename to src/Components/SVG/burger-svgrepo-com.svg diff --git a/src/Assets/SVG/burrito-svgrepo-com.svg b/src/Components/SVG/burrito-svgrepo-com.svg similarity index 100% rename from src/Assets/SVG/burrito-svgrepo-com.svg rename to src/Components/SVG/burrito-svgrepo-com.svg diff --git a/src/Assets/SVG/bus-front-view-svgrepo-com.svg b/src/Components/SVG/bus-front-view-svgrepo-com.svg similarity index 100% rename from src/Assets/SVG/bus-front-view-svgrepo-com.svg rename to src/Components/SVG/bus-front-view-svgrepo-com.svg diff --git a/src/Assets/SVG/cab-svgrepo-com.svg b/src/Components/SVG/cab-svgrepo-com.svg similarity index 100% rename from src/Assets/SVG/cab-svgrepo-com.svg rename to src/Components/SVG/cab-svgrepo-com.svg diff --git a/src/Assets/SVG/campfire-svgrepo-com.svg b/src/Components/SVG/campfire-svgrepo-com.svg similarity index 100% rename from src/Assets/SVG/campfire-svgrepo-com.svg rename to src/Components/SVG/campfire-svgrepo-com.svg diff --git a/src/Assets/SVG/cancel-svgrepo-com.svg b/src/Components/SVG/cancel-svgrepo-com.svg similarity index 100% rename from src/Assets/SVG/cancel-svgrepo-com.svg rename to src/Components/SVG/cancel-svgrepo-com.svg diff --git a/src/Assets/SVG/car-svgrepo-com.svg b/src/Components/SVG/car-svgrepo-com.svg similarity index 100% rename from src/Assets/SVG/car-svgrepo-com.svg rename to src/Components/SVG/car-svgrepo-com.svg diff --git a/src/Assets/SVG/checked-tick-svgrepo-com.svg b/src/Components/SVG/checked-tick-svgrepo-com.svg similarity index 100% rename from src/Assets/SVG/checked-tick-svgrepo-com.svg rename to src/Components/SVG/checked-tick-svgrepo-com.svg diff --git a/src/Assets/SVG/click-svgrepo-com.svg b/src/Components/SVG/click-svgrepo-com.svg similarity index 100% rename from src/Assets/SVG/click-svgrepo-com.svg rename to src/Components/SVG/click-svgrepo-com.svg diff --git a/src/Assets/SVG/cloud-svgrepo-com-2.svg b/src/Components/SVG/cloud-svgrepo-com-2.svg similarity index 100% rename from src/Assets/SVG/cloud-svgrepo-com-2.svg rename to src/Components/SVG/cloud-svgrepo-com-2.svg diff --git a/src/Assets/SVG/cloud-svgrepo-com.svg b/src/Components/SVG/cloud-svgrepo-com.svg similarity index 100% rename from src/Assets/SVG/cloud-svgrepo-com.svg rename to src/Components/SVG/cloud-svgrepo-com.svg diff --git a/src/Assets/SVG/clouds-cloud-svgrepo-com.svg b/src/Components/SVG/clouds-cloud-svgrepo-com.svg similarity index 100% rename from src/Assets/SVG/clouds-cloud-svgrepo-com.svg rename to src/Components/SVG/clouds-cloud-svgrepo-com.svg diff --git a/src/Assets/SVG/computer-mouse-with-wheel.svg b/src/Components/SVG/computer-mouse-with-wheel.svg similarity index 100% rename from src/Assets/SVG/computer-mouse-with-wheel.svg rename to src/Components/SVG/computer-mouse-with-wheel.svg diff --git a/src/Assets/SVG/crosshairs-solid-svgrepo-com.svg b/src/Components/SVG/crosshairs-solid-svgrepo-com.svg similarity index 100% rename from src/Assets/SVG/crosshairs-solid-svgrepo-com.svg rename to src/Components/SVG/crosshairs-solid-svgrepo-com.svg diff --git a/src/Assets/SVG/donut-svgrepo-com.svg b/src/Components/SVG/donut-svgrepo-com.svg similarity index 100% rename from src/Assets/SVG/donut-svgrepo-com.svg rename to src/Components/SVG/donut-svgrepo-com.svg diff --git a/src/Assets/SVG/edit.svg b/src/Components/SVG/edit.svg similarity index 100% rename from src/Assets/SVG/edit.svg rename to src/Components/SVG/edit.svg diff --git a/src/Assets/SVG/firebog-ground-entrance2.svg b/src/Components/SVG/firebog-ground-entrance2.svg similarity index 100% rename from src/Assets/SVG/firebog-ground-entrance2.svg rename to src/Components/SVG/firebog-ground-entrance2.svg diff --git a/src/Assets/SVG/frame-1v.svg b/src/Components/SVG/frame-1v.svg similarity index 100% rename from src/Assets/SVG/frame-1v.svg rename to src/Components/SVG/frame-1v.svg diff --git a/src/Assets/SVG/frame-2v.svg b/src/Components/SVG/frame-2v.svg similarity index 100% rename from src/Assets/SVG/frame-2v.svg rename to src/Components/SVG/frame-2v.svg diff --git a/src/Assets/SVG/frame-3v.svg b/src/Components/SVG/frame-3v.svg similarity index 100% rename from src/Assets/SVG/frame-3v.svg rename to src/Components/SVG/frame-3v.svg diff --git a/src/Assets/SVG/frame-4v.svg b/src/Components/SVG/frame-4v.svg similarity index 100% rename from src/Assets/SVG/frame-4v.svg rename to src/Components/SVG/frame-4v.svg diff --git a/src/Assets/SVG/frame-5v.svg b/src/Components/SVG/frame-5v.svg similarity index 100% rename from src/Assets/SVG/frame-5v.svg rename to src/Components/SVG/frame-5v.svg diff --git a/src/Assets/SVG/frame-6v.svg b/src/Components/SVG/frame-6v.svg similarity index 100% rename from src/Assets/SVG/frame-6v.svg rename to src/Components/SVG/frame-6v.svg diff --git a/src/Assets/SVG/frame-7v.svg b/src/Components/SVG/frame-7v.svg similarity index 100% rename from src/Assets/SVG/frame-7v.svg rename to src/Components/SVG/frame-7v.svg diff --git a/src/Assets/SVG/frame-8v.svg b/src/Components/SVG/frame-8v.svg similarity index 100% rename from src/Assets/SVG/frame-8v.svg rename to src/Components/SVG/frame-8v.svg diff --git a/src/Assets/SVG/fuse-weapon-svgrepo-com.svg b/src/Components/SVG/fuse-weapon-svgrepo-com.svg similarity index 100% rename from src/Assets/SVG/fuse-weapon-svgrepo-com.svg rename to src/Components/SVG/fuse-weapon-svgrepo-com.svg diff --git a/src/Assets/SVG/leaf-svgrepo-com.svg b/src/Components/SVG/leaf-svgrepo-com.svg similarity index 100% rename from src/Assets/SVG/leaf-svgrepo-com.svg rename to src/Components/SVG/leaf-svgrepo-com.svg diff --git a/src/Assets/SVG/mole-svgrepo-com.svg b/src/Components/SVG/mole-svgrepo-com.svg similarity index 100% rename from src/Assets/SVG/mole-svgrepo-com.svg rename to src/Components/SVG/mole-svgrepo-com.svg diff --git a/src/Assets/SVG/mouse-svgrepo-com.svg b/src/Components/SVG/mouse-svgrepo-com.svg similarity index 100% rename from src/Assets/SVG/mouse-svgrepo-com.svg rename to src/Components/SVG/mouse-svgrepo-com.svg diff --git a/src/Assets/SVG/ostrich-animal-svgrepo-com.svg b/src/Components/SVG/ostrich-animal-svgrepo-com.svg similarity index 100% rename from src/Assets/SVG/ostrich-animal-svgrepo-com.svg rename to src/Components/SVG/ostrich-animal-svgrepo-com.svg diff --git a/src/Assets/SVG/pizza-svgrepo-com.svg b/src/Components/SVG/pizza-svgrepo-com.svg similarity index 100% rename from src/Assets/SVG/pizza-svgrepo-com.svg rename to src/Components/SVG/pizza-svgrepo-com.svg diff --git a/src/Assets/SVG/snail-svgrepo-com.svg b/src/Components/SVG/snail-svgrepo-com.svg similarity index 100% rename from src/Assets/SVG/snail-svgrepo-com.svg rename to src/Components/SVG/snail-svgrepo-com.svg diff --git a/src/Assets/SVG/truck-lorry-svgrepo-com.svg b/src/Components/SVG/truck-lorry-svgrepo-com.svg similarity index 100% rename from src/Assets/SVG/truck-lorry-svgrepo-com.svg rename to src/Components/SVG/truck-lorry-svgrepo-com.svg diff --git a/src/Assets/SVG/turtle-svgrepo-com.svg b/src/Components/SVG/turtle-svgrepo-com.svg similarity index 100% rename from src/Assets/SVG/turtle-svgrepo-com.svg rename to src/Components/SVG/turtle-svgrepo-com.svg diff --git a/src/Assets/SVG/wordcloud.svg b/src/Components/SVG/wordcloud.svg similarity index 100% rename from src/Assets/SVG/wordcloud.svg rename to src/Components/SVG/wordcloud.svg diff --git a/src/Assets/SVG/zpvo_43sn_180514 copy.jpg b/src/Components/SVG/zpvo_43sn_180514 copy.jpg similarity index 100% rename from src/Assets/SVG/zpvo_43sn_180514 copy.jpg rename to src/Components/SVG/zpvo_43sn_180514 copy.jpg diff --git a/src/Pages/GameStore/GameHome.jsx b/src/Pages/GameStore/GameHome.jsx index 5a2c3ba5..09746e76 100644 --- a/src/Pages/GameStore/GameHome.jsx +++ b/src/Pages/GameStore/GameHome.jsx @@ -17,11 +17,11 @@ import { Link, useHistory } from "react-router-dom"; import Cart from "../../Components/Cart/Cart"; import AnimatedScroll from "./AnimatedScroll"; import games from "./games"; -// import gameOverlay from ""https://d2nrcsymqn25pk.cloudfront.net/Videos/pyke.mp4"; -// import scarySound from "../../Assets/Sounds/garden-vocal-experimental-26509.mp3"; import AutoplayAudio from "./AutoplayAudio"; const GameHome = (props) => { + // const gameOverlay = ""https://d2nrcsymqn25pk.cloudfront.net/Videos/pyke.mp4"; + // const scarySound = "https://d2nrcsymqn25pk.cloudfront.net/Assets/Sounds/garden-vocal-experimental-26509.mp3"; const { shownGames, cartAmount,