+
+ );
+};
+
+export default GameCenterFallback;
\ No newline at end of file
diff --git a/src/Components/GameCenterWrapper.jsx b/src/Components/GameCenterWrapper.jsx
new file mode 100644
index 00000000..5a8af122
--- /dev/null
+++ b/src/Components/GameCenterWrapper.jsx
@@ -0,0 +1,33 @@
+import React, { Suspense, lazy } from 'react';
+
+// Use React.lazy with error boundaries for remote module loading
+const GameCenter = lazy(() => {
+ return import('game/GameCenter')
+ .catch(err => {
+ console.error('Error loading Game Center:', err);
+ return {
+ default: () => (
+ Game Center
+Our awesome game center is currently being updated. Please check back soon!
+
+
+ )
+ };
+ });
+});
+
+const GameCenterWrapper = () => {
+ return (
+ Unable to load Game Center
+Please make sure the Game Center server is running at http://localhost:3001
+
+
+ Technical Details
+{err.message}
+
+ Loading Game Center...
}>
+
+ handleWin()} randomYindex={40} />
+ ];
+
+ const [birds, setBirds] = useState(birdArray);
+
+ useEffect(() => {
+ console.log(localPause);
+ console.log(birds);
+
+ if (localPause === false) {
+ const int = setInterval(() => {
+ let randomYindex = Math.floor(Math.random() * 80) - 10;
+ // birdArray.push( handleWin()} randomYindex={randomYindex} />)
+ birdArray.push( handleWin()} randomYindex={40} />
+ handleWin()} randomYindex={40} />])
+ setBirds([
+
+ )
+};
+
+export default Alert;
\ No newline at end of file
diff --git a/src/Components/Games/ConnectFour/Button.jsx b/src/Components/Games/ConnectFour/Button.jsx
new file mode 100644
index 00000000..9624d725
--- /dev/null
+++ b/src/Components/Games/ConnectFour/Button.jsx
@@ -0,0 +1,21 @@
+// Framework Imports
+import React from 'react';
+
+// CSS Imports
+import StyledButton from './StyledButton';
+
+const Button = ({onClick, message}) => {
+
+ console.log(message);
+
+ /**
+ * Button Component
+ */
+ return (
+
+
+
+ )
+};
+
+export default Button;
\ No newline at end of file
diff --git a/src/Components/Games/ConnectFour/ConnectFour.jsx b/src/Components/Games/ConnectFour/ConnectFour.jsx
new file mode 100644
index 00000000..af1bac82
--- /dev/null
+++ b/src/Components/Games/ConnectFour/ConnectFour.jsx
@@ -0,0 +1,123 @@
+import React, { useState, useEffect, useContext } from "react";
+
+// Component Imports */
+import FourBoard from "./FourBoard";
+import ScoreKeeper from "./ScoreKeeper";
+import Button from "./Button";
+import { ConnectFourContext } from "./ConnectFourContext";
+
+// Asset Imports
+import StyledConnectFour from "./StyledConnectFour";
+import UpdateRecords from "./UpdateRecords";
+import Alert from "./Alert";
+
+
+const ConnectFour = () => {
+ const {
+ board,
+ playerTurn,
+ setPlayerTurn,
+ computerPlayer,
+ phase,
+ winner,
+ error,
+ handleComputerMove,
+ handleSetup,
+ resetGame,
+ makeBoard,
+ handlePickSquare,
+ checkForValidSquares,
+ checkForAscendingWin,
+ checkForDescendingWin,
+ checkForHorizontalWin,
+ checkForVerticalWin,
+ } = useContext(ConnectFourContext);
+
+ const [record, setRecord] = useState({
+ player_one: 0,
+ player_two: 0,
+ draw: 0,
+ });
+
+ const { handleUpdateRecord } = UpdateRecords;
+
+ useEffect(() => {
+ makeBoard();
+ }, []);
+
+ useEffect(() => {
+ checkForValidSquares(board);
+ checkForVerticalWin(board);
+ checkForHorizontalWin(board);
+ checkForAscendingWin(board);
+ checkForDescendingWin(board);
+ if (!computerPlayer) {
+ if (playerTurn === 1) {
+ setPlayerTurn(2);
+ } else {
+ setPlayerTurn(1);
+ }
+ }
+ if (computerPlayer) {
+ console.log("computerPlayer!");
+ if (playerTurn === 1) {
+ setPlayerTurn(2);
+ handleComputerMove();
+ } else {
+ setPlayerTurn(1);
+ }
+ }
+ }, [board]);
+
+ useEffect(() => {
+ if (winner !== 0) {
+ winner === 1
+ ? setRecord(handleUpdateRecord("player_one", record))
+ : setRecord(handleUpdateRecord("player_two", record));
+ }
+ }, [winner]);
+
+
+ /**
+ * Holds Components neccessary for playing Connect Four Game
+ * * Imports game logic from ConnectFourContext, lifecycle handles gameplay
+ */
+ return (
+
+
+
+ );
+};
+
+export default ConnectFour;
\ No newline at end of file
diff --git a/src/Components/Games/ConnectFour/ConnectFourContext.jsx b/src/Components/Games/ConnectFour/ConnectFourContext.jsx
new file mode 100644
index 00000000..ef31e30c
--- /dev/null
+++ b/src/Components/Games/ConnectFour/ConnectFourContext.jsx
@@ -0,0 +1,218 @@
+import React, { createContext, useState } from "react";
+
+export const ConnectFourContext = createContext({});
+
+export function ConnectFourContextProvider(props) {
+ const [board, setBoard] = useState([]);
+ const [playerTurn, setPlayerTurn] = useState(1);
+ const [computerPlayer, setComputerPlayer] = useState(false);
+ const [phase, setPhase] = useState("play");
+ const [winner, setWinner] = useState(0);
+
+ const [error, setError] = useState({});
+
+ const handleComputerMove = () => {
+ console.log("handlingcomputermove!");
+ let newBoard = [...board];
+ for (let i = 0; i < newBoard.length; i++) {
+ for (let x = 0; x < newBoard[i].length; x++) {
+ if (newBoard[i][x].available === true) {
+ console.log("found free square");
+ console.log(i, x);
+ newBoard[i][x].selected = 2;
+ newBoard[i][x].available = false;
+ console.log(newBoard[i][x]);
+ // setBoard(newBoard);
+ let validatedBoard = checkForValidSquares(newBoard);
+ setBoard(validatedBoard);
+ return;
+ }
+ }
+ }
+ };
+
+ const handleSetup = (computer) => {
+ setComputerPlayer(computer);
+ setPhase("play");
+ };
+
+ const resetGame = () => {
+ setPhase("reset");
+ makeBoard();
+ setPhase("play");
+ };
+
+ const makeBoard = () => {
+ let array = [];
+ let subArray = [];
+ for (let i = 0; i < 6; i++) {
+ for (let x = 0; x < 8; x++) {
+ let indexArray = [i, x];
+ let index = Number(indexArray.join(""));
+ subArray.push({
+ indexArray: indexArray,
+ index: index,
+ selected: 0,
+ available: index >= 50 ? true : false,
+ });
+ }
+ array.push(subArray);
+ subArray = [];
+ }
+ setBoard(array); // Abstract this out into separate file
+ };
+
+ const handlePickSquare = (numOne, numTwo) => {
+ let newBoard = [...board];
+ if (newBoard[numOne][numTwo].available == true) {
+ newBoard[numOne][numTwo].selected = playerTurn;
+ newBoard[numOne][numTwo].available = false;
+ // setBoard(newBoard);
+ let validatedBoard = checkForValidSquares(board);
+ setBoard(validatedBoard);
+ } else {
+ setError({
+ message: "Square not available",
+ color: "red",
+ visible: true,
+ });
+ setTimeout(() => {
+ setError({
+ message: "",
+ color: null,
+ visible: false,
+ });
+ }, 3000);
+ }
+ };
+
+ const checkForValidSquares = (array) => {
+ let arrayCopy = [...array];
+ for (let i = arrayCopy.length - 1; i >= 0; i--) {
+ for (let x = arrayCopy[i].length - 1; x >= 0; x--) {
+ if (i > 0) {
+ let bottomSquare = arrayCopy[i][x];
+ let topSquare = arrayCopy[i - 1][x];
+ if (bottomSquare.selected !== 0 && topSquare.selected === 0) {
+ topSquare.available = true;
+ }
+ }
+ }
+ }
+ return arrayCopy;
+ };
+
+ const checkForVerticalWin = (array) => {
+ for (let i = array.length - 1; i >= 0; i--) {
+ for (let x = array[i].length - 1; x >= 0; x--) {
+ if (i - 3 > 0) {
+ let firstSquare = array[i][x];
+ let secondSquare = array[i - 1][x];
+ let thirdSquare = array[i - 2][x];
+ let fourthSquare = array[i - 3][x];
+ if (
+ firstSquare.selected === secondSquare.selected &&
+ secondSquare.selected === thirdSquare.selected &&
+ thirdSquare.selected === fourthSquare.selected &&
+ firstSquare.selected !== 0
+ ) {
+ setWinner(playerTurn);
+ }
+ }
+ }
+ }
+ };
+
+ const checkForHorizontalWin = (array) => {
+ for (let i = array.length - 1; i >= 0; i--) {
+ for (let x = array[i].length - 1; x >= 0; x--) {
+ if (x - 3 > 0) {
+ let firstSquare = array[i][x];
+ let secondSquare = array[i][x - 1];
+ let thirdSquare = array[i][x - 2];
+ let fourthSquare = array[i][x - 3];
+ if (
+ firstSquare.selected === secondSquare.selected &&
+ secondSquare.selected === thirdSquare.selected &&
+ thirdSquare.selected === fourthSquare.selected &&
+ firstSquare.selected !== 0
+ ) {
+ setWinner(playerTurn);
+ }
+ }
+ }
+ }
+ };
+
+ const checkForAscendingWin = (array) => {
+ for (let i = array.length - 1; i >= 0; i--) {
+ for (let x = array[i].length - 1; x >= 0; x--) {
+ if (x - 3 > 0 && i - 3 > 0) {
+ let firstSquare = array[i][x];
+ let secondSquare = array[i - 1][x - 1];
+ let thirdSquare = array[i - 2][x - 2];
+ let fourthSquare = array[i - 3][x - 3];
+ if (
+ firstSquare.selected === secondSquare.selected &&
+ secondSquare.selected === thirdSquare.selected &&
+ thirdSquare.selected === fourthSquare.selected &&
+ firstSquare.selected !== 0
+ ) {
+ setWinner(playerTurn);
+ }
+ }
+ }
+ }
+ };
+
+ const checkForDescendingWin = (array) => {
+ for (let i = array.length - 1; i >= 0; i--) {
+ for (let x = array[i].length - 1; x >= 0; x--) {
+ if (x + 3 < array[i].length && i - 3 > 0) {
+ let firstSquare = array[i][x];
+ let secondSquare = array[i - 1][x + 1];
+ let thirdSquare = array[i - 2][x + 2];
+ let fourthSquare = array[i - 3][x + 3];
+ if (
+ firstSquare.selected === secondSquare.selected &&
+ secondSquare.selected === thirdSquare.selected &&
+ thirdSquare.selected === fourthSquare.selected &&
+ firstSquare.selected !== 0
+ ) {
+ setWinner(playerTurn);
+ }
+ }
+ }
+ }
+ };
+
+ /**
+ * Context Component to handle Connect Four Game Logic
+ */
+
+ return (
+
+ {props.children}
+
+ );
+}
\ No newline at end of file
diff --git a/src/Components/Games/ConnectFour/FourBoard.jsx b/src/Components/Games/ConnectFour/FourBoard.jsx
new file mode 100644
index 00000000..20e1c56b
--- /dev/null
+++ b/src/Components/Games/ConnectFour/FourBoard.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+
+import FourSquare from './FourSquare';
+import StyledFourBoard from './StyledFourBoard';
+
+const FourBoard = ({board, onSelect, winner}) => {
+
+
+ const renderBoard = (array) => {
+ return array.map((element) => {
+ return element.map((square) => {
+ return
+ {renderBoard(board)}
+ {winner !== 0 &&
+ )
+};
+
+export default FourBoard
\ No newline at end of file
diff --git a/src/Components/Games/ConnectFour/FourSquare.jsx b/src/Components/Games/ConnectFour/FourSquare.jsx
new file mode 100644
index 00000000..72826109
--- /dev/null
+++ b/src/Components/Games/ConnectFour/FourSquare.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import StyledFourSquare from './StyledFourSquare';
+
+const FourSquare = ({props, onSelect}) => {
+
+
+ /**
+ * Individual square on Connect Four Board
+ * * Props control selective CSS styling to display selected vs. unselected state.
+ * * Onclick handles player select
+ */
+ return (
+ onSelect(props.indexArray[0], props.indexArray[1])}
+ available={props.available}
+ selected={props.selected} >
+
+
+ )
+};
+
+export default FourSquare;
\ No newline at end of file
diff --git a/src/Components/Games/ConnectFour/ScoreKeeper.jsx b/src/Components/Games/ConnectFour/ScoreKeeper.jsx
new file mode 100644
index 00000000..323aae46
--- /dev/null
+++ b/src/Components/Games/ConnectFour/ScoreKeeper.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+
+// CSS Imports
+import StyledScoreKeeper from './StyledScoreKeeper';
+
+const ScoreKeeper = ({record, name}) => {
+
+ const displayRecord = (object) => {
+ let array = []
+ for (const property in object) {
+ if (name && property === "player_two" ) {
+ array.push()
+ } else {
+ array.push();
+ }
+ }
+ return (array.map((element, index) => {
+ return
+
+ )
+};
+
+export default ScoreKeeper;
\ No newline at end of file
diff --git a/src/Components/Games/ConnectFour/StyledAlert.jsx b/src/Components/Games/ConnectFour/StyledAlert.jsx
new file mode 100644
index 00000000..3660f626
--- /dev/null
+++ b/src/Components/Games/ConnectFour/StyledAlert.jsx
@@ -0,0 +1,16 @@
+import styled from "styled-components";
+
+const StyledAlert = styled.div`
+ border: 1px solid ${(props) => props.color};
+ border-radius: 10px;
+ color: ${(props) => props.color};
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin: 2px;
+ min-height: 50px;
+ opacity: ${(props) => (props.visible ? 1 : 0)};
+ padding: 10px;
+ transition: opacity 0.3s ease-out;
+`;
+export default StyledAlert;
\ No newline at end of file
diff --git a/src/Components/Games/ConnectFour/StyledButton.jsx b/src/Components/Games/ConnectFour/StyledButton.jsx
new file mode 100644
index 00000000..ecd19798
--- /dev/null
+++ b/src/Components/Games/ConnectFour/StyledButton.jsx
@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+const StyledButton = styled.div`
+button {
+ background: #24282f;
+ border-radius: 5px;
+ border: 1px solid #00FFFF;
+ color: #00FFFF;
+ font-size: 20px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+button:hover {
+ background: #323445;
+}
+`
+export default StyledButton;
\ No newline at end of file
diff --git a/src/Components/Games/ConnectFour/StyledConnectFour.jsx b/src/Components/Games/ConnectFour/StyledConnectFour.jsx
new file mode 100644
index 00000000..5f2f55e5
--- /dev/null
+++ b/src/Components/Games/ConnectFour/StyledConnectFour.jsx
@@ -0,0 +1,38 @@
+import styled from "styled-components";
+
+const StyledConnectFour = styled.section`
+ display: flex;
+ flex-direction: column;
+ padding: 10px;
+ #game-wrapper {
+ border: 1px solid #00ffff;
+ margin-bottom: 10px;
+ padding: 10px;
+ text-align: center;
+ h4 {
+ font-size: 28px;
+ margin: 10px;
+ }
+ h6 {
+ font-size: 24px;
+ margin-bottom: 5px;
+ }
+ }
+ #scoreboard-wrapper {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ }
+ #setup-wrapper {
+ button {
+ margin-bottom: 5px;
+ }
+ }
+ @media (min-width: 978px) {
+ margin: 0 auto;
+ width: 1000px;
+ }
+`;
+
+export default StyledConnectFour;
\ No newline at end of file
diff --git a/src/Components/Games/ConnectFour/StyledFourBoard.jsx b/src/Components/Games/ConnectFour/StyledFourBoard.jsx
new file mode 100644
index 00000000..9c329970
--- /dev/null
+++ b/src/Components/Games/ConnectFour/StyledFourBoard.jsx
@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+const StyledFourBoard = styled.div`
+display: grid;
+grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+grid-gap: 0px;
+margin: 0 auto;
+margin-bottom: 10px;
+width: 320px;
+@media (min-width: 576px) {
+ width: 496px;
+}
+@media (min-width: 768px) {
+ width: 560px;
+}
+@media (min-width: 976px) {
+ width: 816px;
+}
+`
+
+export default StyledFourBoard;
\ No newline at end of file
diff --git a/src/Components/Games/ConnectFour/StyledFourSquare.jsx b/src/Components/Games/ConnectFour/StyledFourSquare.jsx
new file mode 100644
index 00000000..72826109
--- /dev/null
+++ b/src/Components/Games/ConnectFour/StyledFourSquare.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import StyledFourSquare from './StyledFourSquare';
+
+const FourSquare = ({props, onSelect}) => {
+
+
+ /**
+ * Individual square on Connect Four Board
+ * * Props control selective CSS styling to display selected vs. unselected state.
+ * * Onclick handles player select
+ */
+ return (
+ onSelect(props.indexArray[0], props.indexArray[1])}
+ available={props.available}
+ selected={props.selected} >
+
+
+ )
+};
+
+export default FourSquare;
\ No newline at end of file
diff --git a/src/Components/Games/ConnectFour/StyledScoreKeeper.jsx b/src/Components/Games/ConnectFour/StyledScoreKeeper.jsx
new file mode 100644
index 00000000..844af13b
--- /dev/null
+++ b/src/Components/Games/ConnectFour/StyledScoreKeeper.jsx
@@ -0,0 +1,22 @@
+import styled from "styled-components";
+
+const StyledScoreKeeper = styled.div`
+ border: 1px solid #00ffff;
+ max-height: 200px;
+ max-width: 300px;
+ min-width: 250px;
+ h4 {
+ font-size: 28px;
+ margin: 5px;
+ }
+ .score {
+ display: flex;
+ justify-content: space-between;
+ border: 1px solid #00ffff;
+ p {
+ margin: 4px;
+ }
+ }
+`;
+
+export default StyledScoreKeeper;
\ No newline at end of file
diff --git a/src/Components/Games/ConnectFour/UpdateRecords.jsx b/src/Components/Games/ConnectFour/UpdateRecords.jsx
new file mode 100644
index 00000000..a41b8ce6
--- /dev/null
+++ b/src/Components/Games/ConnectFour/UpdateRecords.jsx
@@ -0,0 +1,9 @@
+
+
+const handleUpdateRecord = (winner, record) => {
+ let newRecord = {...record};
+ newRecord[winner]++;
+ return newRecord;
+ };
+
+ export default { handleUpdateRecord };
\ No newline at end of file
diff --git a/src/Components/Games/ConnectFour/index.jsx b/src/Components/Games/ConnectFour/index.jsx
new file mode 100644
index 00000000..6c14a147
--- /dev/null
+++ b/src/Components/Games/ConnectFour/index.jsx
@@ -0,0 +1,17 @@
+import { ConnectFourContextProvider } from "./ConnectFourContext";
+import ConnectFour from "./ConnectFour";
+
+
+const ConnectFourGame = () => {
+
+ /**
+ * Alert Component for displaying game errors and warnings
+ */
+ return (
+
+
+ )
+ };
+
+ export default ConnectFourGame;
\ No newline at end of file
diff --git a/src/Components/Games/FoodFall/foodfall.jsx b/src/Components/Games/FoodFall/foodfall.jsx
new file mode 100644
index 00000000..332ce156
--- /dev/null
+++ b/src/Components/Games/FoodFall/foodfall.jsx
@@ -0,0 +1,279 @@
+import React, { useEffect, useState } from "react";
+
+import mouse from "../../../Utils/useMousePosition";
+import useWindowSize from "../../../Utils/useWindowSize";
+import "../games.css";
+
+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 "../../SVG/campfire-svgrepo-com.svg";
+
+import tick from "../../SVG/checked-tick-svgrepo-com.svg";
+import cross from "../../SVG/cancel-svgrepo-com.svg";
+
+let showInst = true;
+
+// function FoodFall({ handleWin, losePoint, setPaused }) {
+function FoodFall() {
+ 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 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()
+ }
+ }
+ }, [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)
+ }
+
+ return (
+ <>
+ {showInst && (
+
+ {clsName && (
+
+ );
+};
+
+export default Square;
\ No newline at end of file
diff --git a/src/Components/Games/TicTacToe/style.css b/src/Components/Games/TicTacToe/style.css
new file mode 100644
index 00000000..9830cf13
--- /dev/null
+++ b/src/Components/Games/TicTacToe/style.css
@@ -0,0 +1,125 @@
+
+.tic-tac-toe {
+ width: fit-content;
+ margin: 40px auto;
+ text-align: center;
+}
+.tic-tac-toe h1 {
+ color: rgb(53, 53, 53);
+}
+
+.tic-tac-toe button {
+ padding: 8px 12px;
+ margin: 25px;
+ background: transparent;
+ border: 2px solid rgb(53, 53, 53);
+ color: rgb(53, 53, 53);
+ width: 100px;
+ border-radius: 5px;
+ transition: 0.2s;
+ font-weight: bold;
+ cursor: pointer;
+}
+
+.tic-tac-toe button:hover {
+ background: rgb(53, 53, 53);
+ color: #222;
+}
+.tic-tac-toe .game {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 10px;
+}
+.turn {
+ display: flex;
+ justify-content: center;
+ margin: 15px auto;
+ width: fit-content;
+ position: relative;
+ border-radius: 10px;
+}
+
+.turn .square,
+.winner .square {
+ width: 70px;
+ height: 70px;
+ pointer-events: none;
+ border-color: transparent;
+}
+
+.turn .square span.x::before,
+.turn .square span.x::after {
+ background: #222;
+ transition: 0.2s;
+}
+
+.turn .square span.o {
+ transition: 0.2s;
+ border-color: #222;
+}
+
+.turn::after {
+ position: absolute;
+ content: "";
+ width: 50%;
+ height: 100%;
+ top: 0;
+ background: #49ff58;
+ border-radius: 9px;
+ z-index: -1;
+ transition: 0.2s;
+}
+
+.turn.left::after {
+ left: 0;
+}
+
+.turn.left span.o {
+ border-color: rgb(53, 53, 53);
+}
+.turn.right span.x::before,
+.turn.right span.x::after {
+ background: rgb(53, 53, 53);
+}
+.turn.right::after {
+ left: 50%;
+}
+
+.winner {
+ position: absolute;
+ width: 100vw;
+ height: 100vh;
+ top: 0;
+ left: 0;
+ display: grid;
+ place-items: center;
+ background-color: rgba(0, 0, 0, 0.7);
+}
+.winner .text {
+ background: #111;
+ width: 70%;
+ max-width: 400px;
+ height: 300px;
+ border: 2px solid rgb(53, 53, 53);
+ border-radius: 10px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 20px;
+}
+
+.winner .text h2 {
+ font-size: 2.5em;
+ margin: 15px 0;
+ color: rgb(53, 53, 53);
+}
+
+.winner .win {
+ margin: 0 auto;
+ width: fit-content;
+ border: 2px solid rgb(53, 53, 53);
+ border-radius: 10px;
+ display: flex;
+ gap: 15px;
+}
\ No newline at end of file
diff --git a/src/Components/Games/TicTacToe/tictactoe.jsx b/src/Components/Games/TicTacToe/tictactoe.jsx
new file mode 100644
index 00000000..9c5ff3bc
--- /dev/null
+++ b/src/Components/Games/TicTacToe/tictactoe.jsx
@@ -0,0 +1,154 @@
+import { motion, AnimatePresence } from "framer-motion";
+import React, {useState} from 'react'
+import Board from './board'
+import Square from "./square";
+import './style.css'
+
+const TicTacToe = () => {
+ const [squares, setSquares] = useState(Array(9).fill(""));
+ const [turn, setTurn] = useState("x");
+ const [winner, setWinner] = useState(null);
+
+ const checkEndTheGame = () => {
+ for (let square of squares) {
+ if (!square) return false;
+ }
+ return true;
+ };
+
+ const checkWinner = () => {
+ const combos = [
+ [0, 1, 2],
+ [3, 4, 5],
+ [6, 7, 8],
+ [0, 3, 6],
+ [1, 4, 7],
+ [2, 5, 8],
+ [0, 4, 8],
+ [2, 4, 6],
+ ];
+
+ for (let combo of combos) {
+ const [a, b, c] = combo;
+ if (
+ squares[a] &&
+ squares[a] === squares[b] &&
+ squares[a] === squares[c]
+ ) {
+ return squares[a];
+ }
+ }
+ return null;
+ };
+
+ const updateSquares = (ind) => {
+ if (squares[ind] || winner) {
+ return;
+ }
+ const s = squares;
+ s[ind] = turn;
+ setSquares(s);
+ setTurn(turn === "x" ? "o" : "x");
+ const W = checkWinner();
+ if (W) {
+ setWinner(W);
+ } else if (checkEndTheGame()) {
+ setWinner("x | o");
+ }
+ };
+
+ const resetGame = () => {
+ setSquares(Array(9).fill(""));
+ setTurn("x");
+ setWinner(null);
+ };
+
+ return (
+ 
);
+ }
+ function handleMouseMove() {
+ setMouseX(x - 140);
+ setMouseY(y - 30);
+ }
+
+ 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();
+ }
+
+ 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 && (
+
+ {children}
+
+ )
+}
+
+export default AnimatedCard;
\ No newline at end of file
diff --git a/src/Pages/GameStore/AnimatedCard.module.css b/src/Pages/GameStore/AnimatedCard.module.css
new file mode 100644
index 00000000..76b3555e
--- /dev/null
+++ b/src/Pages/GameStore/AnimatedCard.module.css
@@ -0,0 +1,11 @@
+
+
+* {
+ margin: 0;
+ padding: 0
+}
+
+motiondiv {
+ margin: 0;
+ padding: 0;
+}
\ No newline at end of file
diff --git a/src/Pages/GameStore/AnimatedGamePage.jsx b/src/Pages/GameStore/AnimatedGamePage.jsx
new file mode 100644
index 00000000..8e7db601
--- /dev/null
+++ b/src/Pages/GameStore/AnimatedGamePage.jsx
@@ -0,0 +1,23 @@
+import { motion } from "framer-motion";
+import React from "react";
+
+const animations = {
+ initial: { opacity: 0, x: -200 },
+ animate: { opacity: 1, x: 0, transition: { x: { type: "spring", duration: 0.9, bounce: 0.4 }} },
+ exit: { opacity: 0, x: -200, transition: { x: { type: "tween", duration: 0.4, bounce: 0.3 }} },
+}
+
+const AnimatedGamePage = ({children}) => {
+ return (
+
+ {children}
+
+ )
+}
+
+export default AnimatedGamePage;
\ No newline at end of file
diff --git a/src/Pages/GameStore/AnimatedPage.jsx b/src/Pages/GameStore/AnimatedPage.jsx
new file mode 100644
index 00000000..e5d967e9
--- /dev/null
+++ b/src/Pages/GameStore/AnimatedPage.jsx
@@ -0,0 +1,23 @@
+import { motion } from "framer-motion";
+import React from "react";
+
+const animations = {
+ initial: { opacity: 0, x: -150 },
+ animate: { opacity: 1, x: 0, transition: { x: { type: "spring", duration: 0.9, bounce: 0.4 }} },
+ exit: { opacity: 0, x: 150, transition: { x: { type: "tween", duration: 0.4, bounce: 0.3 }} },
+}
+
+const AnimatedPage = ({children}) => {
+ return (
+
+ {children}
+
+ )
+}
+
+export default AnimatedPage;
\ No newline at end of file
diff --git a/src/Pages/GameStore/AnimatedScroll.jsx b/src/Pages/GameStore/AnimatedScroll.jsx
new file mode 100644
index 00000000..fdbfad50
--- /dev/null
+++ b/src/Pages/GameStore/AnimatedScroll.jsx
@@ -0,0 +1,23 @@
+import { motion } from "framer-motion";
+import React from "react";
+
+const animations = {
+ initial: { x: 200 },
+ animate: { x: 0, transition: { x: { type: "spring", duration: 0.8, bounce: 0.35 }} },
+ exit: { x: 200, transition: { x: { type: "spring", duration: 1.5, bounce: 0.575 }} },
+}
+
+const AnimatedScroll = ({children}) => {
+ return (
+
+ {children}
+
+ )
+}
+
+export default AnimatedScroll;
\ No newline at end of file
diff --git a/src/Pages/GameStore/AnimatedText.jsx b/src/Pages/GameStore/AnimatedText.jsx
new file mode 100644
index 00000000..9753dd83
--- /dev/null
+++ b/src/Pages/GameStore/AnimatedText.jsx
@@ -0,0 +1,23 @@
+import { motion } from "framer-motion";
+import React from "react";
+
+const animations = {
+ initial: { opacity: 0, y: -40 },
+ animate: { opacity: 1, y: 0, transition: { opacity: { type: "spring", duration: 0.4, bounce: 0.5, delay: 0.4 }, y: { type: "spring", duration: 1.25, bounce: 0.575, delay: 0.4 }} },
+ exit: { opacity: 0, transition: { opacity: { type: "tween", duration: 0.2 }}},
+}
+
+const AnimatedText = ({children}) => {
+ return (
+
+ {children}
+
+ )
+}
+
+export default AnimatedText;
\ No newline at end of file
diff --git a/src/Pages/GameStore/AudioPlayer.css b/src/Pages/GameStore/AudioPlayer.css
new file mode 100644
index 00000000..351cb426
--- /dev/null
+++ b/src/Pages/GameStore/AudioPlayer.css
@@ -0,0 +1,39 @@
+#autoplay-audio {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ /* height: 100vh; */
+ /* Adjust as needed to center vertically */
+}
+
+/* Style the appearance of the audio controls */
+audio {
+ width: 100px; /* Adjust the size of the audio player */
+ height: 100px;
+ background-color: #fff;
+ border-radius: 50%;
+ border: 2px solid #333;
+ outline: none;
+}
+
+/* Style the appearance of the play button */
+audio::-webkit-media-controls-play-button {
+ /* display: none; */
+ /* Hide the default play button */
+}
+
+audio::before {
+ content: '\25B6'; /* Unicode character for play symbol */
+ font-size: 48px;
+ line-height: 1;
+ color: #333; /* Color of the play button */
+ text-align: center;
+}
+
+/* Center the play button */
+audio::before {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
diff --git a/src/Pages/GameStore/AutoplayAudio.jsx b/src/Pages/GameStore/AutoplayAudio.jsx
new file mode 100644
index 00000000..e7bb29c1
--- /dev/null
+++ b/src/Pages/GameStore/AutoplayAudio.jsx
@@ -0,0 +1,44 @@
+import { use } from "marked";
+import React, { useEffect, useState } from "react";
+// import "./AudioPlayer.css";
+
+const AutoplayAudio = ({ src }) => {
+ const [hover, setHover] = useState(false);
+ useEffect(() => {
+ // Access the audio element using the ref
+ const audioElement = document.getElementById("autoplay-audio");
+
+ // Start playing the audio when the component mounts
+ audioElement.play();
+
+ // Optionally, you can pause or stop the audio when the component unmounts
+ return () => {
+ audioElement.pause(); // Pause the audio
+ audioElement.currentTime = 0; // Optionally reset the audio to the beginning
+ };
+ }, []); // Run this effect only once, when the component mounts
+
+ useEffect(() => {
+ const audioElement = document.getElementById("autoplay-audio");
+ if (hover) {
+ audioElement.play();
+ } else {
+ audioElement.pause();
+ }
+ }
+ , [hover])
+ return (
+
+ );
+};
+
+export default AutoplayAudio;
diff --git a/src/Pages/GameStore/Browser.jsx b/src/Pages/GameStore/Browser.jsx
new file mode 100644
index 00000000..1d806c17
--- /dev/null
+++ b/src/Pages/GameStore/Browser.jsx
@@ -0,0 +1,195 @@
+import styles from './Browser.module.css';
+import React, { useEffect, useState } from 'react';
+// import { useLocation, useNavigate } from 'react-router-dom';
+// import { AnimatePresence } from "framer-motion";
+import AnimatedPage from './AnimatedPage';
+import { ReactComponent as Grids } from "./image/grid.svg";
+import { ReactComponent as Columns } from "./image/columns.svg";
+import Filters from './Filters';
+import Grid from './Grid';
+import NavBar from './NavBar';
+
+const Browser = props => {
+ const {
+ handleHover,
+ handleSelect,
+ hoverState,
+ currentFilter,
+ shownGames,
+ setShownGames,
+ clearFilter,
+ setReviewDisplay,
+ reviewDisplay,
+ allGames,
+ setAllGames,
+ handleLike,
+ handleHoverGame,
+ cart,
+ cartAmount,
+ handleAddToCart,
+ handleSelectGame,
+ handleSearch,
+ handleSearchSubmit,
+ search,
+ searching,
+ browsing,
+ handleBrowse,
+ handleHome,
+ handleOpenCart,
+ handleCloseCart,
+ cartDisplayed,
+ clearCart,
+ handleRemoveFromCart,
+ setHoverState,
+ openGamePage
+ } = props;
+
+ // const navigate = useNavigate();
+ // const [landingPage, setLandingPage] = useState(false);
+ const [grid, setGrid] = useState(true);
+
+ const handleLayoutSwitch = (e) => {
+ if (e.target.id == "grid") {
+ setGrid(true);
+ } else {
+ setGrid(false);
+ }
+ }
+
+ useEffect(() => {
+ if (currentFilter == "none") {
+ setShownGames(allGames);
+ } else if (currentFilter != "Ratings" && currentFilter != "Reviews" && currentFilter != "Wishlist") {
+ let filteredShownGames = allGames.filter(game => game.genre === currentFilter);
+ setShownGames(filteredShownGames);
+ } else if (currentFilter === "Ratings") {
+ let filteredShownGames = allGames.slice(0);
+ filteredShownGames = filteredShownGames.sort(function(a, b) {
+ return b.rating - a.rating;
+ })
+ setShownGames(filteredShownGames);
+ } else if (currentFilter === "Reviews") {
+ setReviewDisplay(true);
+
+ } else if (currentFilter === "Wishlist") {
+ let filteredShownGames = allGames.filter(game => game.isLiked === true);
+ setShownGames(filteredShownGames);
+ }
+ if (currentFilter != "Reviews") {
+ setReviewDisplay(false);
+ }
+ }, [currentFilter])
+
+ useEffect(() => {
+ document.body.style.overflow = "scroll";
+ }, [cartDisplayed])
+
+ useEffect(() => {
+ let unhoveredState = hoverState.map((element, i) => {
+ if (i >= 25) {
+ return
+ } else {
+ element.hovered = false;
+ return element;
+ }
+ });
+
+ setHoverState(unhoveredState);
+ }, []);
+
+ return (
+
+
+
+
+
+ );
+ }
+
+ export default Browser;
\ No newline at end of file
diff --git a/src/Pages/GameStore/Browser.module.css b/src/Pages/GameStore/Browser.module.css
new file mode 100644
index 00000000..8180a468
--- /dev/null
+++ b/src/Pages/GameStore/Browser.module.css
@@ -0,0 +1,177 @@
+* {
+ margin: 0;
+ padding: 0;
+}
+
+html,
+body {
+ overflow-x: hidden;
+}
+
+::-webkit-scrollbar {
+ display: none;
+}
+
+.Browse {
+ background-color: #0f1011;
+}
+
+.browseContent {
+ margin-top: 15px;
+ display: flex;
+ padding-top: 25px;
+ width: 100vw;
+ padding-bottom: 280px;
+ background-color: #0f1011;
+}
+
+.filters {
+ padding: 26px 40px 0px 40px;
+ width: 270px;
+}
+
+.filterList {
+ display: flex;
+ gap: 8px;
+}
+
+.clearButton {
+ font-family: "GT Bold" !important;
+}
+
+.filters h2 {
+ font-family: "GT Medium";
+ color: white;
+ font-size: 1.6em;
+ letter-spacing: 1px;
+}
+
+.list {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ padding-right: 60px;
+}
+
+.list h1,
+.list p {
+ color: white;
+}
+
+.list h1 {
+ font-family: "GT Bold";
+ font-size: 4em;
+}
+
+.applied {
+ margin-top: 28px;
+ display: flex;
+ justify-content: space-between;
+}
+
+.filterButton {
+ padding: 8px 22px;
+ height: 40px;
+ background-color: #262626;
+ color: #fff;
+ font-family: "GT Light";
+ font-size: 0.95em;
+ border: 1px transparent;
+ border-radius: 10px;
+ cursor: pointer;
+ transition: all 0.3s;
+}
+
+.filterButton:hover {
+ background-color: #2d2d2d;
+}
+
+.filterButton:active {
+ transform: scale(0.9);
+}
+
+.applied button span {
+ color: #fff;
+ font-family: "GT Bold";
+}
+
+.displayStyle {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+}
+
+.displayStyle p {
+ color: #696969;
+ font-family: "GT Medium";
+}
+
+.displayBtn {
+ border: 1px transparent;
+ border-radius: 8px;
+ outline: none;
+ background-color: #282828;
+ transition: 0.3s all;
+ padding: 0px 3px;
+}
+
+.displayBtn * {
+ pointer-events: none;
+}
+
+.displayBtn:hover {
+ background-color: #313131;
+}
+
+.displayBtn:active {
+ transform: scale(0.9125);
+}
+
+.displayItem {
+ transform: scale(0.9);
+ transition: 0.3s all;
+}
+
+@media screen and (max-width: 850px) {
+ .displayStyle p {
+ display: none;
+ }
+}
+
+@media screen and (max-width: 770px) {
+ .displayStyle {
+ display: none;
+ }
+
+ .list h1 {
+ font-size: 40px;
+ }
+}
+
+@media screen and (max-width: 600px) {
+ .list {
+ padding-left: 35px;
+ padding-right: 35px;
+ }
+
+ .list h1 {
+ font-size: 48px;
+ }
+}
+
+@media screen and (max-width: 375px) {
+ .list {
+ padding-left: 20px;
+ padding-right: 20px;
+ }
+
+ .list h1 {
+ font-size: 38px;
+ }
+}
+
+@media screen and (max-width: 320px) {
+ .filterButton {
+ font-size: 12px;
+ }
+}
\ No newline at end of file
diff --git a/src/Pages/GameStore/Card.jsx b/src/Pages/GameStore/Card.jsx
new file mode 100644
index 00000000..ed76dba5
--- /dev/null
+++ b/src/Pages/GameStore/Card.jsx
@@ -0,0 +1,55 @@
+import styles from './Card.module.css';
+import React from 'react';
+import { ReactComponent as Like } from "./image/like.svg";
+import { ReactComponent as Add } from "./image/add.svg";
+import { motion } from "framer-motion";
+import AnimatedCard from './AnimatedCard';
+// import { useLocation } from 'react-router-dom';
+
+const Card = props => {
+ const {
+ game,
+ handleHover,
+ hoverState,
+ handleLike,
+ handleHoverGame,
+ handleSelectGame
+ } = props;
+
+ const variants = {
+ initial: { opacity: 0 },
+ animate: { opacity: 1 },
+ exit: { opacity: 0 },
+ }
+
+ // const location = useLocation();
+
+ return (
+
+ 
+
+ );
+ }
+
+ export default Card;
\ No newline at end of file
diff --git a/src/Pages/GameStore/Card.module.css b/src/Pages/GameStore/Card.module.css
new file mode 100644
index 00000000..b4cc470c
--- /dev/null
+++ b/src/Pages/GameStore/Card.module.css
@@ -0,0 +1,339 @@
+
+.card {
+ background-color: #202020;
+ grid-column: auto;
+ border: 1px transparent;
+ border-radius: 12px;
+ transition: 0.3s all;
+ position: relative;
+ padding-bottom: 56.25%;
+}
+
+.cardHome {
+ background-color: #202020;
+ grid-column: auto;
+ border: 1px transparent;
+ border-radius: 12px;
+ transition: 0.3s all;
+ position: absolute;
+ width: 285px;
+ left: 25.95%;
+ top: 35.25%;
+}
+
+.cardHome:hover {
+ background-color: #2d2d2d;
+ transform: scale(1.015);
+}
+
+.cardHome:active {
+ transform: scale(0.975);
+}
+
+.cardHome img {
+ border-top-left-radius: 12px;
+ border-top-right-radius: 12px;
+ max-width: 100%;
+ -webkit-user-drag: none;
+ user-select: none;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+}
+
+.cardHome div {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 6px 15px 3px 7px;
+ cursor: pointer;
+}
+
+.fifa {
+ background-color: #202020;
+ grid-column: auto;
+ border: 1px transparent;
+ border-radius: 12px;
+ transition: 0.3s all;
+ position: absolute;
+ width: 285px;
+ left: 42.5%;
+ top: 35.25%;
+}
+
+.fifa:hover {
+ background-color: #2d2d2d;
+ transform: scale(1.015);
+}
+
+.fifa:active {
+ transform: scale(0.975);
+}
+
+.fifa img {
+ border-top-left-radius: 12px;
+ border-top-right-radius: 12px;
+ max-width: 100%;
+ -webkit-user-drag: none;
+ user-select: none;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+}
+
+.fifa div {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 6px 15px 3px 7px;
+ cursor: pointer;
+}
+
+.mariokart {
+ background-color: #202020;
+ grid-column: auto;
+ border: 1px transparent;
+ border-radius: 12px;
+ transition: 0.3s all;
+ position: absolute;
+ width: 285px;
+ left: 75.6%;
+ top: 35.25%;
+}
+
+.mariokart:hover {
+ background-color: #2d2d2d;
+ transform: scale(1.015);
+}
+
+.mariokart:active {
+ transform: scale(0.975);
+}
+
+.mariokart img {
+ border-top-left-radius: 12px;
+ border-top-right-radius: 12px;
+ max-width: 100%;
+ -webkit-user-drag: none;
+ user-select: none;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+}
+
+.mariokart div {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 6px 15px 3px 7px;
+ cursor: pointer;
+}
+
+.minecraft {
+ background-color: #202020;
+ grid-column: auto;
+ border: 1px transparent;
+ border-radius: 12px;
+ transition: 0.3s all;
+ position: absolute;
+ width: 285px;
+ left: 9.4%;
+ top: 35.25%;
+}
+
+.minecraft:hover {
+ background-color: #2d2d2d;
+ transform: scale(1.015);
+}
+
+.minecraft:active {
+ transform: scale(0.975);
+}
+
+.minecraft img {
+ border-top-left-radius: 12px;
+ border-top-right-radius: 12px;
+ max-width: 100%;
+ -webkit-user-drag: none;
+ user-select: none;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+}
+
+.minecraft div {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 6px 15px 3px 7px;
+ cursor: pointer;
+}
+
+.tombraider {
+ background-color: #202020;
+ grid-column: auto;
+ border: 1px transparent;
+ border-radius: 12px;
+ transition: 0.3s all;
+ position: absolute;
+ width: 285px;
+ left: 59.05%;
+ top: 35.25%;
+}
+
+.tombraider:hover {
+ background-color: #2d2d2d;
+ transform: scale(1.015);
+}
+
+.tombraider:active {
+ transform: scale(0.975);
+}
+
+.tombraider img {
+ border-top-left-radius: 12px;
+ border-top-right-radius: 12px;
+ max-width: 100%;
+ -webkit-user-drag: none;
+ user-select: none;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+}
+
+.tombraider div {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 6px 15px 3px 7px;
+ cursor: pointer;
+}
+
+.card:hover {
+ background-color: #2d2d2d;
+ transform: scale(1.015);
+}
+
+.card:active {
+ transform: scale(0.975);
+}
+
+.card img {
+ border-top-left-radius: 12px;
+ border-top-right-radius: 12px;
+ max-width: 100%;
+ -webkit-user-drag: none;
+ user-select: none;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+}
+
+.card div {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 6px 15px 3px 7px;
+}
+
+.tombraider .name {
+ font-size: 23px;
+}
+
+.name {
+ color: white;
+ padding-left: 14px;
+ font-family: "GT Bold";
+ padding-bottom: 40px;
+ cursor: pointer;
+}
+
+.name,
+.img {
+ cursor: pointer;
+}
+
+.price {
+ color: white;
+ font-family: "GT Medium";
+}
+
+.price div {
+ color: #999;
+}
+
+.like {
+ background-color: transparent;
+ border: none;
+ position: absolute;
+ width: 18px;
+ bottom: 5%;
+ right: 4.5%;
+ transition: 0.3s;
+ cursor: pointer;
+}
+
+.like * {
+ pointer-events: none;
+}
+
+.likeSVG {
+ transition: 0.2s all;
+}
+
+
+.likeSVG:focus {
+ transform: scale(1.25);
+}
+
+@media screen and (max-width: 1700px) {
+ .name {
+ padding-right: 20px;
+ }
+}
+
+@media screen and (max-width: 1240px) {
+ .name {
+ font-size: 30px;
+ }
+}
+
+@media screen and (max-width: 975px) {
+ .name {
+ font-size: 25px;
+ }
+}
+
+@media screen and (max-width: 840px) {
+ .name {
+ font-size: 22px;
+ }
+}
+
+@media screen and (max-width: 770px) {
+ .name {
+ font-size: 30px;
+ }
+}
+
+@media screen and (max-width: 600px) {
+ .name {
+ font-size: 40px;
+ }
+
+ .card img {
+ width: 100%;
+ }
+}
+
+@media screen and (max-width: 475px) {
+ .name {
+ font-size: 34px;
+ }
+}
+
+@media screen and (max-width: 375px) {
+ .name {
+ font-size: 26px;
+ }
+}
diff --git a/src/Pages/GameStore/Filters.jsx b/src/Pages/GameStore/Filters.jsx
new file mode 100644
index 00000000..37ceeb8f
--- /dev/null
+++ b/src/Pages/GameStore/Filters.jsx
@@ -0,0 +1,349 @@
+
+
+import React from "react";
+import styles from "./Filters.module.css";
+import { ReactComponent as Wishlist } from "./image/wishlist.svg";
+import { ReactComponent as Ratings } from "./image/ratings.svg";
+import { ReactComponent as Reviews } from "./image/reviews.svg";
+import { ReactComponent as Action } from "./image/action.svg";
+import { ReactComponent as Strategy } from "./image/strategy.svg";
+import { ReactComponent as RPG } from "./image/RPG.svg";
+import { ReactComponent as Shooter } from "./image/shooter.svg";
+import { ReactComponent as Adventure } from "./image/adventure.svg";
+import { ReactComponent as Puzzle } from "./image/puzzle.svg";
+import { ReactComponent as Classic } from "./image/classic.svg";
+import { ReactComponent as Racing } from "./image/racing.svg";
+import { ReactComponent as Sports } from "./image/sports.svg";
+
+const Filters = props => {
+ const {
+ hoverState,
+ handleHover,
+ handleSelect,
+ currentFilter
+ } = props;
+
+ return (
+
+ {props.game}
+
+ );
+}
+
+export default GameComponent;
\ No newline at end of file
diff --git a/src/Pages/GameStore/GameHome.jsx b/src/Pages/GameStore/GameHome.jsx
new file mode 100644
index 00000000..e40c2037
--- /dev/null
+++ b/src/Pages/GameStore/GameHome.jsx
@@ -0,0 +1,242 @@
+import React, { useState } from "react";
+import styles from "./Home.module.css";
+import { ReactComponent as GitHubLogo } from "./image/githublogo.svg";
+import { ReactComponent as Enter } from "./image/enter.svg";
+import { ReactComponent as Dice } from "./image/dice.svg";
+import { ReactComponent as LinkedIn } from "./image/linkedin.svg";
+import { ReactComponent as Game } from "./image/game.svg";
+import { ReactComponent as NotFound } from "./image/notfound.svg";
+import { ReactComponent as NotFoundQuery } from "./image/notfoundquery.svg";
+import { ReactComponent as Git } from "./image/git.svg";
+import { ReactComponent as Performance } from "./image/performance.svg";
+import { ReactComponent as Sources } from "./image/sources.svg";
+// import { ReactComponent as WhatRuns } from "./image/whatruns.png";
+import WhatRuns from "./image/whatruns.png";
+import { motion, AnimatePresence, m } from "framer-motion";
+import { Link, useHistory } from "react-router-dom";
+// import Cart from "../../Components/Cart/Cart";
+import AnimatedScroll from "./AnimatedScroll";
+import games from "./games";
+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,
+ cart,
+ cartDisplayed,
+ handleOpenCart,
+ handleCloseCart,
+ clearCart,
+ handleRemoveFromCart,
+ hoverState,
+ setHoverState,
+ overlap,
+ setOverlap,
+ openGamePage,
+ } = props;
+
+ const [browsing, setBrowsing] = useState(false);
+ const [landingPage, setLandingPage] = useState(true);
+
+ // const navigate = useNavigate();
+ const history = useHistory();
+
+ const handleHover = (e) => {
+ let newHoverState = hoverState[e.target.id];
+ newHoverState.hovered = !newHoverState.hovered;
+
+ setHoverState([...hoverState, (hoverState[e.target.id] = newHoverState)]);
+ };
+
+ const handleBrowse = () => {
+ setOverlap(true);
+ setTimeout(() => {
+ setBrowsing(true);
+ history.push("/gamecorner/browse");
+ }, 1500);
+ };
+
+ const handleHome = () => {
+ setBrowsing(false);
+ history.push("/");
+ };
+
+ const handlePlayDice = () => {
+ // let randomIndex = Math.floor(Math.random() * 32);
+ let randomIndex = Math.floor(Math.random() * 11);
+ let randomSurname = games[randomIndex].surname;
+ console.log(randomSurname);
+ setOverlap(true);
+ setTimeout(() => {
+ setBrowsing(true);
+ history.push(`/gamecorner/game/${randomIndex}`);
+ }, 1500);
+ };
+
+ const variants = {
+ hidden: { opacity: 1, x: -150 },
+ visible: { opacity: 1, x: 0 },
+ exit: { opacity: 0, x: 150 },
+ };
+
+ const buttonVariants = {
+ hidden: { opacity: 0, y: 900 },
+ visible: {
+ opacity: 1,
+ y: 0,
+ transition: { y: { type: "tween", duration: 1.5, bounce: 0.3 } },
+ },
+ };
+
+ return (
+
+
+
+ );
+}
+
+export default NavBar;
\ No newline at end of file
diff --git a/src/Pages/GameStore/NavBar.module.css b/src/Pages/GameStore/NavBar.module.css
new file mode 100644
index 00000000..b5afd635
--- /dev/null
+++ b/src/Pages/GameStore/NavBar.module.css
@@ -0,0 +1,222 @@
+* {
+ margin: 0;
+ padding: 0;
+}
+
+.navbar {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 5px 40px 2px 30px;
+ z-index: 12;
+}
+
+/* form {
+ display: flex;
+ align-items: center;
+} */
+
+form button {
+ background: transparent;
+ cursor: pointer;
+ border: 1px transparent;
+}
+
+.navbar_left {
+ display: flex;
+ gap: 50px;
+}
+
+.navbar_right {
+ display: flex;
+ gap: 50px;
+}
+
+.logodiv,
+.pathdiv,
+.cartdiv,
+.githubdiv,
+.searchdiv,
+.browsediv {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 6px;
+ cursor: pointer;
+ transition: ease-in-out 0.2s;
+ z-index: 9;
+}
+
+.logodiv *,
+.cartdiv *,
+.githubdiv * {
+ pointer-events: none;
+}
+
+.logodiv:active,
+.cartdiv:active,
+.browsediv:active,
+.githubdiv:active {
+ transform: scale(0.945);
+}
+
+.svg {
+ transform: scale(0.525);
+ fill: #CCCCCC;
+ padding-top: 3px;
+ transition: 0.3s;
+}
+
+.svg2 {
+ width: 20px;
+ margin-right: 6px;
+ transition: 0.3s;
+}
+
+.githubdiv {
+ gap: 18px;
+}
+
+.gh {
+ padding-bottom: 3px;
+ transform: scale(1.5);
+ fill: white;
+ padding-top: 3px;
+ transition: 0.3s;
+}
+
+.cartdiv h3,
+.logodiv h3,
+.pathdiv h3,
+.githubdiv h3 {
+ color: white;
+ font-family: "GT Bold";
+}
+
+.pathdiv h3,
+.navbar_right h3 {
+ font-family: "GT Bold";
+}
+
+.searchdiv input {
+ margin-left: 55px;
+ background-color: #262626;
+ border: 1px transparent;
+ border-radius: 8px;
+ height: 35px;
+ width: 450px;
+ padding-left: 18px;
+ font-size: 0.92em;
+ font-family: "GT Medium";
+ color: #CCCCCC;
+ outline: none;
+ transition: all .3s,
+}
+
+.searchdiv input:hover {
+ background-color: #2d2d2d;
+}
+
+.searchdiv input:focus {
+ background-color: #333;
+}
+
+form input:active {
+ transform: scale(0.97);
+}
+
+form button {
+ transition: 0.2s all;
+}
+
+form button:active {
+ transform: scale(0.9);
+}
+
+@media screen and (max-width: 1160px) and (min-width: 1021px) {
+ .searchdiv input {
+ width: 350px;
+ margin-left: 20px;
+ }
+}
+
+@media screen and (max-width: 1020px) and (min-width: 926px) {
+ .searchdiv input {
+ width: 250px;
+ margin-left: 20px;
+ }
+}
+
+@media screen and (max-width: 925px) and (min-width: 851px) {
+ .searchdiv input {
+ width: 200px;
+ margin-left: 0px;
+ }
+}
+
+@media screen and (max-width: 850px) and (min-width: 770px) {
+ .searchdiv input {
+ width: 150px;
+ margin-left: 0px;
+ }
+
+ .navbar_left,
+ .navbar_right {
+ gap: 35px;
+ }
+}
+
+@media screen and (max-width: 770px) {
+ .logodiv,
+ .githubdiv {
+ display: none;
+ }
+
+ .searchdiv input {
+ margin-left: 0px;
+ }
+
+ .searchdiv {
+ margin-right: 20px;
+ }
+}
+
+@media screen and (max-width: 700px) {
+ .cartdiv {
+ width: 20vw;
+ }
+
+ .searchdiv input {
+ width: 50vw;
+ }
+}
+
+@media screen and (max-width: 485px) {
+ .searchdiv {
+ margin-right: 10px;
+ }
+
+ .searchdiv input {
+ width: 40vw;
+ }
+
+ .navbar {
+ padding: 5px 15px;
+ }
+
+ .cartdiv {
+ width: 25vw;
+ }
+}
+
+@media screen and (max-width: 485px) {
+ .cartdiv {
+ width: 30vw;
+ }
+}
+
+@media screen and (max-width: 325px) {
+ .cartdiv h3 {
+ font-size: 14px;
+ }
+}
\ No newline at end of file
diff --git a/src/Pages/GameStore/Slider.jsx b/src/Pages/GameStore/Slider.jsx
new file mode 100644
index 00000000..200518b2
--- /dev/null
+++ b/src/Pages/GameStore/Slider.jsx
@@ -0,0 +1,171 @@
+import styles from './Slider.module.css';
+import React, { useEffect, useState } from 'react';
+import { motion, AnimatePresence } from "framer-motion";
+import { ReactComponent as Left } from "./image/left.svg";
+import { ReactComponent as Right } from "./image/right.svg";
+import { ReactComponent as Dot } from "./image/dot.svg";
+// import { useLocation } from 'react-router-dom';
+import "react-slideshow-image/dist/styles.css";
+import { Slide } from "react-slideshow-image";
+import templateGame from '../../Utils/templateGame';
+
+const Slider = props => {
+ const {
+ selectedGame,
+ setSelectedGame,
+ allGames,
+ incrementCarousel,
+ decrementCarousel,
+ carouselState,
+ setCarouselState,
+ hoverState,
+ handleHover
+ } = props;
+
+ const [footageIndex, setFootageIndex] = useState(0);
+ const slideRef = React.createRef();
+// const location = useLocation();
+
+// useEffect(() => {
+// const selectedGameIndex = allGames.findIndex(game => "/react-ecommerce-store/games/" + game.surname === location.pathname);
+// setSelectedGame(allGames[selectedGameIndex]);
+// }, []);
+
+ const properties = {
+ duration: 6000,
+ autoplay: false,
+ transitionDuration: 800,
+ arrows: false,
+ infinite: true,
+ easing: "ease"
+ };
+
+ const slideImages = [
+ selectedGame ? selectedGame.footage[0] : null,
+ selectedGame ? selectedGame.footage[1] : null,
+ selectedGame ? selectedGame.footage[2] : null,
+ selectedGame ? selectedGame.footage[3] : null,
+ ];
+
+ const templateImages = [
+ templateGame.footage[0],
+ templateGame.footage[1],
+ templateGame.footage[2],
+ templateGame.footage[3]
+ ]
+
+ const back = () => {
+ if (carouselState > 0) {
+ setCarouselState(carouselState - 1);
+ } else {
+ setCarouselState(3);
+ }
+ slideRef.current.goBack();
+ }
+
+ const next = () => {
+ if (carouselState < 3) {
+ setCarouselState(carouselState + 1);
+ } else {
+ setCarouselState(0);
+ }
+ slideRef.current.goNext();
+ }
+
+ const jumpToIndex = (e) => {
+ console.log(e.target.id);
+ let index = parseInt(e.target.id);
+ console.log(index);
+ setCarouselState(index);
+ slideRef.current.goTo(index);
+ }
+
+ return (
+
+
+);
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();
+
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
diff --git a/src/constants/games.js b/src/constants/games.js
new file mode 100644
index 00000000..7d53619a
--- /dev/null
+++ b/src/constants/games.js
@@ -0,0 +1,293 @@
+import TicTacToe from "../Components/Games/TicTacToe/tictactoe";
+import SpaceInvaders from '../Components/Games/SpaceInvaders/spaceinvaders';
+import Pacman from '../Components/Games/Pacman/pacman';
+import SweetCrush from '../Components/Games/SweetCrush/sweetcrush';
+import ConnectFourGame from '../Components/Games/ConnectFour/index';
+import Birds from "../Components/Games/BirdShooter/birds";
+import WackMole from "../Components/Games/WackMole/wackmole";
+import Scroll from "../Components/Games/Scroll/scroll";
+import Race from "../Components/Games/Race/race";
+import ClickLots from "../Components/Games/Frogger/frogger";
+import FoodFall from "../Components/Games/FoodFall/foodfall";
+
+const games = [
+ // {
+ // name: "Food Fall",
+ // surname: "foodfall",
+ // price: "44.99",
+ // desc: 'Sequel to the acclaimed Portal (2007), Portal 2 pits the protagonist of the original game, Chell, and her new robot friend, Wheatley, against more puzzles conceived by GLaDOS, an A.I. with the sole purpose of testing the Portal Guns mechanics and taking revenge on Chell for the events of Portal. As a result of several interactions and revelations, Chell once again pushes to escape Aperture Science Labs.',
+ // link:
- ,
- document.getElementById('root')
-);
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
-
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+// Use dynamic import to load the bootstrap file
+// This ensures that the federation modules are loaded first
+import('./bootstrap.js');
\ No newline at end of file
handleHit()} />
+
+ );
+}
diff --git a/src/Components/Games/BirdShooter/birds.jsx b/src/Components/Games/BirdShooter/birds.jsx
new file mode 100644
index 00000000..62976492
--- /dev/null
+++ b/src/Components/Games/BirdShooter/birds.jsx
@@ -0,0 +1,154 @@
+import React, { useState, useEffect } from "react";
+import mouse from "../../../Utils/useMousePosition";
+import Bird from "./bird";
+import "../games.css";
+
+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";
+
+let localPause = false;
+
+// export default function Birds({ setPaused, handleWin }) {
+export default function Birds() {
+ 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)
+ // }
+
+ 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
+
+ // 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])
+
+ const { x, y } = mouse();
+ const [positionX, setPositionX] = useState(x);
+ const [positionY, setPositionY] = useState(y);
+
+ let birdArray = [
+ mouseLock()}
+ onClick={() => handleClick()}
+ >
+ {birds}
+ 
+ 
+ 
+ 
+ {localPause &&
+ );
+}
diff --git a/src/Components/Games/ConnectFour/Alert.jsx b/src/Components/Games/ConnectFour/Alert.jsx
new file mode 100644
index 00000000..d2425442
--- /dev/null
+++ b/src/Components/Games/ConnectFour/Alert.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+// CSS Imports
+import StyledAlert from './StyledAlert';
+
+const Alert = ({visible, message, color}) => {
+
+ /**
+ * Alert Component for displaying game errors and warnings
+ */
+ return (
+ click on the birds
} +
+ {showTimer && (
+
+ Time left: {timer}
+
+ )}
+
+ {message}
+
+
+ {phase === "play" && (
+ Connect Four!
+ {phase === "setup" &&Select Your Opponent
} + {phase === "play" && ( +
+
+ )}
+ {phase === "setup" && (
+ Player {playerTurn}'s Turn
+
+
+ )}
+
+
+ )}
+ Player {winner} is victorious!
} +{name}:
{object[property]}
{property}:
{object[property]}
{element}
+ }))
+ };
+
+ /**
+ * Component to display win-loss-draw statistics for ongoing series
+ */
+ return (
+ Scoreboard
+ {displayRecord(record)} ++ catch food. don't catch fire. click to start +
+ )} + + handleMove()}
+ onClick={() => startGame()}
+ >
+ 
+
+ 
+
+ 
+
+ 
+
+ {showInst && (
+ <>
+
+
+ );
+}
+
+export default FoodFall;
diff --git a/src/Components/Games/Frogger/frogger.jsx b/src/Components/Games/Frogger/frogger.jsx
new file mode 100644
index 00000000..153274b3
--- /dev/null
+++ b/src/Components/Games/Frogger/frogger.jsx
@@ -0,0 +1,137 @@
+import React, { useEffect, useState } from "react";
+
+import "../games.css";
+
+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;
+
+// function ClickLots ({ setPaused, handleWin, losePoint }) {
+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);
+
+ 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 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 && (
+ 
+
+ {showMouse && 
}
+
+ );
+}
+
+export default ClickLots;
diff --git a/src/Components/Games/Pacman/pacman.jsx b/src/Components/Games/Pacman/pacman.jsx
new file mode 100644
index 00000000..9e48cdf5
--- /dev/null
+++ b/src/Components/Games/Pacman/pacman.jsx
@@ -0,0 +1,227 @@
+import { Button, Grid, Result } from "../common";
+import { layout, legends } from "./resource";
+import React, { useEffect, useState } from "react";
+import styled from "styled-components";
+
+
+const PacmanImg = "https://d2nrcsymqn25pk.cloudfront.net/Assets/Gif/pacman.gif";
+const ClydeImg = "https://d2nrcsymqn25pk.cloudfront.net/Assets/Images/clyde.png";
+const BlinkyImg = "https://d2nrcsymqn25pk.cloudfront.net/Assets/Images/blinky.png";
+const InkyImg = "https://d2nrcsymqn25pk.cloudfront.net/Assets/Images/inky.png";
+const PinkyImg = "https://d2nrcsymqn25pk.cloudfront.net/Assets/Images/pinky.png";
+const GhostImg = "https://d2nrcsymqn25pk.cloudfront.net/Assets/Images/scared-ghost.png";
+const Block = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 14.3px;
+ height: 14.3px;
+`;
+const Wall = styled(Block)`
+ background: #182e60;
+`;
+const Dot = styled(Block)`
+ div {
+ width: 3px;
+ height: 3px;
+ background: white;
+ border-radius: 50%;
+ }
+`;
+const PowerPellet = styled(Block)`
+ div {
+ width: 6px;
+ height: 6px;
+ background: white;
+ border-radius: 50%;
+ }
+`;
+const Empty = styled(Block)``;
+const PacManChar = styled(Block)`
+ transform: rotate(${({ rotate }) => rotate + "deg"});
+ img {
+ width: 70%;
+ }
+`;
+const Alien = styled(Block)`
+ img {
+ width: 70%;
+ }
+`;
+export const Components = {
+ 0: Dot,
+ 1: Wall,
+ 2: Empty,
+ 3: PowerPellet,
+ 4: Empty,
+};
+const getRotationDeg = (direction) => {
+ const degrees = {
+ RIGHT: "0",
+ LEFT: "180",
+ UP: "270",
+ DOWN: "90",
+ };
+ return degrees[direction];
+};
+let pacmanTimer = null;
+let ghostTimer = [];
+let energyTimer = null;
+let width = 28;
+const directionAmt = {
+ RIGHT: 1,
+ LEFT: -1,
+ UP: -width,
+ DOWN: width,
+};
+const PacMan = () => {
+ const [cells, setCells] = useState(layout);
+ const [pacman, setPacman] = useState(490);
+ const [direction, setDirection] = useState("LEFT");
+ const [start, setStart] = useState(false);
+ const [score, setScore] = useState(0);
+ const [gameOver, setGameOver] = useState("");
+ const [energize, setEnergize] = useState(false);
+ const [ghosts, setGhosts] = useState([
+ { index: 403, direction: 1, img: BlinkyImg },
+ { index: 405, direction: -1, img: ClydeImg },
+ { index: 408, direction: width, img: PinkyImg },
+ { index: 379, direction: -width, img: InkyImg },
+ ]);
+ useEffect(() => {
+ //packman slider
+ if (start && !gameOver) {
+ let newPosition = pacman + directionAmt[direction];
+ let leftTunnel = direction === "LEFT" && pacman === 364;
+ let rightTunnel = direction === "RIGHT" && pacman === 391;
+ if (leftTunnel) newPosition = pacman + width - 1;
+ if (rightTunnel) newPosition = pacman - width + 1;
+ if (cells[newPosition] !== legends.wall)
+ pacmanTimer = setTimeout(() => {
+ setPacman(newPosition);
+ }, 200);
+ let ghostPresent = ghosts.find((e) => e.index === pacman);
+ if (ghostPresent) setGameOver("Game Over");
+ }
+ return () => clearTimeout(pacmanTimer);
+ }, [pacman, start, cells, direction, gameOver]);
+
+ const getValidSquare = (value, addAmount) => {
+ const dir = [1, -1, width, -width];
+ const newPos = addAmount || dir[Math.floor(Math.random() * dir.length)];
+ const otherGhost = ghosts.find((e) => e.index === value + newPos);
+ if (cells[value + newPos] !== legends.wall && !otherGhost) {
+ return { index: value + newPos, direction: newPos };
+ } else {
+ return getValidSquare(value);
+ }
+ };
+ const moveGhosts = (values, callback) => {
+ ghostTimer.push(
+ setTimeout(() => {
+ let newValue = [];
+ values.forEach(({ index, direction, img }) => {
+ newValue.push({ img, ...getValidSquare(index, direction) });
+ });
+ callback(newValue);
+ }, 200)
+ );
+ };
+ useEffect(() => {
+ //blinky quick path search
+ if (start && !gameOver) moveGhosts(ghosts, setGhosts);
+ return () => ghostTimer.forEach((e) => clearTimeout(e));
+ }, [ghosts, direction, start, gameOver]);
+ const keyHandler = (e) => {
+ let keyMap = {
+ ArrowUp: "UP",
+ ArrowDown: "DOWN",
+ ArrowLeft: "LEFT",
+ ArrowRight: "RIGHT",
+ };
+ if (keyMap[e.key]) setDirection(keyMap[e.key]);
+ };
+ useEffect(() => {
+ if (start) window.addEventListener("keydown", keyHandler);
+ return () => window.removeEventListener("keydown", keyHandler);
+ }, [start]);
+ useEffect(() => {
+ //eating pellet
+ if (cells[pacman] === legends.pacDots) {
+ setScore((prev) => prev + 1);
+ let newCells = [...cells];
+ newCells[pacman] = legends.empty;
+ setCells(newCells);
+ }
+ if (cells[pacman] === legends.powerPellet) {
+ let newCells = [...cells];
+ newCells[pacman] = legends.empty;
+ setEnergize("id" + pacman);
+ setCells(newCells);
+ }
+ if (!cells.includes(legends.pacDots)) {
+ setGameOver("Success!!!");
+ }
+ }, [pacman, score, cells]);
+ useEffect(() => {
+ if (energize) {
+ energyTimer = setTimeout(() => {
+ setEnergize(false);
+ }, 10000);
+ }
+ return () => clearTimeout(energyTimer);
+ }, [energize]);
+ const resetGame = () => {
+ setCells(layout);
+ setPacman(490);
+ setDirection("LEFT");
+ setGameOver(false);
+ };
+ const toggleGame = () => {
+ if (start) setStart(false);
+ else {
+ resetGame();
+ setStart(true);
+ }
+ };
+ return (
+ click lots. don't get hit by traffic
+ )} + +
+ 
+ 
+
+
+
+
+ {cells.map((e, i) => {
+ if (i === pacman)
+ return (
+
+ 
+
+ );
+ let ghost = ghosts.find((e) => e.index === i);
+ if (ghost)
+ return (
+
+ 
+
+ );
+ let Comp = Components[e];
+ return (
+
+
+
+ );
+ })}
+
+
+ );
+};
+
+export default PacMan;
\ No newline at end of file
diff --git a/src/Components/Games/Pacman/resource.jsx b/src/Components/Games/Pacman/resource.jsx
new file mode 100644
index 00000000..45cd5330
--- /dev/null
+++ b/src/Components/Games/Pacman/resource.jsx
@@ -0,0 +1,37 @@
+export const layout = [
+ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
+ 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
+ 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1,
+ 1, 3, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 3, 1,
+ 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1,
+ 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
+ 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1,
+ 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1,
+ 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
+ 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1,
+ 1, 1, 1, 1, 1, 1, 0, 1, 1, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 1, 0, 1, 1, 1, 1, 1, 1,
+ 1, 1, 1, 1, 1, 1, 0, 1, 1, 4, 1, 1, 1, 2, 2, 1, 1, 1, 4, 1, 1, 0, 1, 1, 1, 1, 1, 1,
+ 1, 1, 1, 1, 1, 1, 0, 1, 1, 4, 1, 2, 2, 2, 2, 2, 2, 1, 4, 1, 1, 0, 1, 1, 1, 1, 1, 1,
+ 4, 4, 4, 4, 4, 4, 0, 0, 0, 4, 1, 2, 2, 2, 2, 2, 2, 1, 4, 0, 0, 0, 4, 4, 4, 4, 4, 4,
+ 1, 1, 1, 1, 1, 1, 0, 1, 1, 4, 1, 2, 2, 2, 2, 2, 2, 1, 4, 1, 1, 0, 1, 1, 1, 1, 1, 1,
+ 1, 1, 1, 1, 1, 1, 0, 1, 1, 4, 1, 1, 1, 1, 1, 1, 1, 1, 4, 1, 1, 0, 1, 1, 1, 1, 1, 1,
+ 1, 1, 1, 1, 1, 1, 0, 1, 1, 4, 1, 1, 1, 1, 1, 1, 1, 1, 4, 1, 1, 0, 1, 1, 1, 1, 1, 1,
+ 1, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 1,
+ 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1,
+ 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1,
+ 1, 3, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 3, 1,
+ 1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1,
+ 1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1,
+ 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1,
+ 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1,
+ 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1,
+ 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
+ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
+]
+export const legends = {
+ pacDots: 0,
+ wall: 1,
+ ghostLair: 2,
+ powerPellet: 3,
+ empty: 4,
+};
\ No newline at end of file
diff --git a/src/Components/Games/Race/race.jsx b/src/Components/Games/Race/race.jsx
new file mode 100644
index 00000000..82151ec2
--- /dev/null
+++ b/src/Components/Games/Race/race.jsx
@@ -0,0 +1,76 @@
+import React, { useState } from "react";
+import mouse from "../../../Utils/useMousePosition";
+import "../games.css";
+
+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;
+
+// export default function Race({ handleWin, setPaused }) {
+export default function Race() {
+ 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 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 (
+
+
+ {score}
+ {gameOver ? {gameOver} : ""}
+
+ handleDrag()} className="raceWrapper">
+ {showMouse && (
+ 
+
+ 
+ {showMouse && 
}
+
+ );
+}
diff --git a/src/Components/Games/Scroll/scroll.jsx b/src/Components/Games/Scroll/scroll.jsx
new file mode 100644
index 00000000..3a2a1de3
--- /dev/null
+++ b/src/Components/Games/Scroll/scroll.jsx
@@ -0,0 +1,185 @@
+import React, { useEffect, useState } from "react";
+import "../games.css";
+
+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 cross from "../../SVG/cancel-svgrepo-com.svg";
+import mouse from "../../SVG/computer-mouse-with-wheel.svg";
+
+let localPause = true;
+
+// function Scroll({ setPaused, handleWin, losePoint}) {
+function Scroll() {
+ 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();
+ }
+ }, [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 (
+ guide snail to food with mouse
+ )} + handleScroll(e)}
+ onClick={() => handleClick()}
+ className="scrollContainer"
+ >
+ {localPause && (
+ 
+ 
+ 
+ 
+
+ {localPause && (
+ <>
+ 
+
+ )}
+
+ );
+}
+
+export default Scroll;
diff --git a/src/Components/Games/SpaceInvaders/spaceinvaders.jsx b/src/Components/Games/SpaceInvaders/spaceinvaders.jsx
new file mode 100644
index 00000000..44f93608
--- /dev/null
+++ b/src/Components/Games/SpaceInvaders/spaceinvaders.jsx
@@ -0,0 +1,171 @@
+import { Button, Grid, Result } from "../common";
+import React, { useEffect, useState } from "react";
+import styled, { css } from "styled-components";
+
+const ExplosionGif =
+ "https://d2nrcsymqn25pk.cloudfront.net/Assets/Gif/explosion.gif";
+const Sound = "https://d2nrcsymqn25pk.cloudfront.net/Assets/Sounds/laser.mp3";
+const Jet = "https://d2nrcsymqn25pk.cloudfront.net/Assets/Images/jet.png";
+const AlienImage = "https://d2nrcsymqn25pk.cloudfront.net/Assets/Images/alien.png";
+const Shooter = css`
+ background-image: url(${Jet});
+ background-size: cover;
+`;
+const Invader = css`
+ background-image: url(${AlienImage});
+ background-size: contain;
+`;
+const Explosion = css`
+ background-image: url(${ExplosionGif});
+ background-size: contain;
+ z-index: 2;
+ position: relative;
+`;
+const Laser = css`
+ background-color: yellow;
+ box-shadow: 0px 0px 16px 7px #ffae00;
+ z-index: 2;
+ position: relative;
+ width: 5px;
+ height: 10px;
+ margin: 0 auto;
+`;
+const Cell = styled.div`
+ width: 20px;
+ height: 20px;
+ box-sizing: border-box;
+ ${({ isInvader }) => isInvader && Invader};
+ ${({ isShooter }) => isShooter && Shooter};
+ ${({ isLaser }) => isLaser && Laser};
+ ${({ isExplosion }) => isExplosion && Explosion};
+`;
+let timer = null;
+let laserTimer = null;
+const SpaceInvaders = () => {
+ const width = 20;
+ const totalAlien = 33;
+ const [shooterIndex, setShooterIndex] = useState(385);
+ const [explodeIndex, setExplodeIndex] = useState("");
+ const [direction, setDirection] = useState(1);
+ const [alienGroup, setAlienGroup] = useState([]);
+ const [gameOver, setGameOver] = useState(false);
+ const [laserIndex, setLaserIndex] = useState("");
+ const [start, setStart] = useState(false);
+ useEffect(() => {
+ // prettier-ignore
+ let alienLayout = [
+ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20,
+ 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 40,
+ 41, 42, 43, 44, 45, 46, 47, 48, 49, 50,];
+ setDirection(1);
+ setAlienGroup(alienLayout);
+ }, [start]);
+ const moveShooter = (e) => {
+ if (!start) return;
+ switch (e.key) {
+ case "ArrowRight":
+ if (shooterIndex % width < width - 1) setShooterIndex(shooterIndex + 1);
+ break;
+ case "ArrowLeft":
+ if (shooterIndex % width) setShooterIndex(shooterIndex - 1);
+ break;
+ case "ArrowUp":
+ shoot();
+ break;
+ }
+ };
+ const moveInvaders = () => {
+ const leftEdge = alienGroup[0] % width === 0;
+ // const rightEdge = (alienGroup[alienGroup.length - 1] % width === width - 1)
+ const rightEdge = alienGroup.find((alien) => alien % width === width - 1);
+ let newDirection = direction;
+ if ((leftEdge && direction === -1) || (rightEdge && direction === 1)) {
+ newDirection = width;
+ } else if (direction === width) {
+ if (leftEdge) newDirection = 1;
+ else newDirection = -1;
+ }
+ setDirection(newDirection);
+ setAlienGroup((prev) => prev.map((e) => e + newDirection));
+ };
+ const shoot = () => {
+ var birdSound = new Audio(Sound);
+ birdSound.loop = false;
+ birdSound.play();
+ setLaserIndex(shooterIndex - width);
+ };
+ useEffect(() => {
+ if (laserIndex) {
+ if (alienGroup.includes(laserIndex)) {
+ setExplodeIndex(laserIndex);
+ let newAlien = [...alienGroup];
+ newAlien.splice(newAlien.indexOf(laserIndex), 1);
+ console.error(laserIndex, newAlien);
+ setLaserIndex("");
+ setAlienGroup(newAlien);
+ setTimeout(() => {
+ setExplodeIndex("");
+ }, 250);
+ } else {
+ laserTimer = setTimeout(() => {
+ setLaserIndex((prev) => prev - width);
+ }, 50);
+ }
+ }
+ return () => clearTimeout(laserTimer);
+ }, [laserIndex]);
+
+ useEffect(() => {
+ if (start) {
+ if (alienGroup.includes(shooterIndex)) {
+ setGameOver("GAME OVER");
+ clearTimeout(timer);
+ } else if (!alienGroup.length) {
+ setGameOver("SUCCESS");
+ clearTimeout(timer);
+ } else {
+ timer = setTimeout(() => {
+ moveInvaders();
+ }, 500);
+ }
+ } else {
+ clearTimeout(timer);
+ }
+ return () => clearTimeout(timer);
+ }, [alienGroup]);
+ useEffect(() => {
+ window.addEventListener("keydown", moveShooter);
+ return () => window.removeEventListener("keydown", moveShooter);
+ }, [shooterIndex, alienGroup, direction]);
+ const toggleGame = () => {
+ setStart((prev) => !prev);
+ };
+ return (
+ + scroll wheel or track pad moves animal. avoid everything. click to + start +
+ )} +
+
+
+
+
+
+
+
+
+
+ {[...Array(width * width)].map((e, i) => (
+ |
+ ))}
+
+
+ {gameOver ? {gameOver} : ""}
+
+ );
+};
+
+export default SpaceInvaders;
\ No newline at end of file
diff --git a/src/Components/Games/SpeedTest/gameLogic.jsx b/src/Components/Games/SpeedTest/gameLogic.jsx
new file mode 100644
index 00000000..5ff3fc5a
--- /dev/null
+++ b/src/Components/Games/SpeedTest/gameLogic.jsx
@@ -0,0 +1,47 @@
+import {useState,useEffect, useRef} from "react"
+
+function useGameLogic(){
+ const STARTING_TIME = 30
+
+ const [text, setText] = useState("")
+ const [timeRemaining, setTimeRemaining] = useState(STARTING_TIME)
+ const [isTimeRunning, setIsTimeRunning] = useState(false)
+ const [wordCount, setWordCount] = useState(0)
+ const textBoxRef = useRef(null)
+
+ function handleChange(e) {
+ const {value} = e.target
+ setText(value)
+ }
+
+ function calculateWordCount(text) {
+ const wordsArr = text.trim().split(" ")
+ return wordsArr.filter(word => word !== "").length
+ }
+ useEffect(() => {
+ if(isTimeRunning && timeRemaining > 0) {
+ setTimeout(() => {
+ setTimeRemaining(time => time - 1)
+ }, 1000)
+ } else if(timeRemaining === 0) {
+ endGame()
+ }
+ }, [timeRemaining, isTimeRunning])
+
+ function startGame() {
+ setIsTimeRunning(true)
+ setTimeRemaining(STARTING_TIME)
+ setText("")
+ textBoxRef.current.disabled = false
+ textBoxRef.current.focus()
+ }
+
+ function endGame() {
+ setIsTimeRunning(false)
+ setWordCount(calculateWordCount(text))
+ }
+
+ return [textBoxRef, handleChange,text,timeRemaining,startGame,isTimeRunning,wordCount]
+
+}
+export default useGameLogic
\ No newline at end of file
diff --git a/src/Components/Games/SpeedTest/speedtest.jsx b/src/Components/Games/SpeedTest/speedtest.jsx
new file mode 100644
index 00000000..de99abf3
--- /dev/null
+++ b/src/Components/Games/SpeedTest/speedtest.jsx
@@ -0,0 +1,29 @@
+import React, {useState, useEffect, useRef} from "react"
+import useGameLogic from "./useGameLogic"
+
+
+function SpeedTest() {
+
+const [textBoxRef, handleChange,text,timeRemaining,startGame,isTimeRunning,wordCount] = useGameLogic()
+ return (
+ your score : {totalAlien - alienGroup.length}
+
+
+ )
+}
+
+export default SpeedTest
\ No newline at end of file
diff --git a/src/Components/Games/SweetCrush/sweetcrush.jsx b/src/Components/Games/SweetCrush/sweetcrush.jsx
new file mode 100644
index 00000000..48c88f5e
--- /dev/null
+++ b/src/Components/Games/SweetCrush/sweetcrush.jsx
@@ -0,0 +1,282 @@
+import { Button, Grid } from "../common";
+import React, { useEffect, useState } from "react";
+import styled, { css, keyframes } from "styled-components";
+
+
+const Confetti =
+ "https://d2nrcsymqn25pk.cloudfront.net/Assets/Gif/confetti.gif";
+const Candy1 = "https://d2nrcsymqn25pk.cloudfront.net/Assets/Images/candy_1.png";
+const Candy2 = "https://d2nrcsymqn25pk.cloudfront.net/Assets/Images/candy_2.png";
+const Candy3 = "https://d2nrcsymqn25pk.cloudfront.net/Assets/Images/candy_3.png";
+const Candy4 = "https://d2nrcsymqn25pk.cloudfront.net/Assets/Images/candy_4.png";
+const Candy5 = "https://d2nrcsymqn25pk.cloudfront.net/Assets/Images/candy_5.png";
+const Candy6 = "https://d2nrcsymqn25pk.cloudfront.net/Assets/Images/candy_6.png";
+const BgImg = "https://d2nrcsymqn25pk.cloudfront.net/Assets/Images/cupcake_bg.jpg";
+const ShakeAnim = keyframes`
+ 0% { transform: translateX(0px) }
+ 10% { transform: translateX(2px) }
+ 20% { transform: translateX(4px) }
+ 30% { transform: translateX(6px) }
+ 40% { transform: translateX(4px) }
+ 50% { transform: translateX(2px) }
+ 60% { transform: translateX(0px) }
+ 70% { transform: translateX(2px) }
+ 80% { transform: translateX(4px) }
+ 90% { transform: translateX(6px) }
+ 100% { transform: translateX(8px) }
+`;
+const Shake = css`
+ animation: ${ShakeAnim} 0.2s infinite;
+`;
+const ZoomAnim = keyframes`
+ 0% {
+ transform: scale(1);
+ }
+ 50% {
+ transform: scale(1.1);
+ }
+ 100% {
+ transform: scale(1);
+ }
+`;
+const Active = css`
+ border: 2px solid white;
+ animation: ${ZoomAnim} 1s infinite;
+ background: #5d7ea8;
+`;
+const CandyImage = styled.img`
+ width: 50px;
+ height: 50px;
+ padding: 2.5px;
+ box-sizing: border-box;
+ :hover {
+ border: ${({ scale }) => (scale ? "none" : "2px solid white")};
+ }
+ ${({ active }) => active && Active};
+ ${({ shake }) => shake && Shake};
+ transform: scale(${({ scale }) => scale});
+`;
+const Score = styled.div`
+ background: #dd7c95;
+ color: white;
+ border-radius: 50%;
+ height: 45px;
+ width: 45px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 4px solid #c90707;
+ box-sizing: border-box;
+ margin: 10px;
+`;
+const Background = styled.img`
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ z-index: -1;
+ filter: blur(1px);
+`;
+
+const CANDIES = [
+ { id: 1, img: Candy1, score: 50 },
+ { id: 2, img: Candy2, score: 60 },
+ { id: 3, img: Candy3, score: 70 },
+ { id: 4, img: Candy4, score: 80 },
+ { id: 5, img: Candy5, score: 90 },
+ { id: 6, img: Candy6, score: 10 },
+];
+let matchTimer = null;
+let fillTimer = null;
+let shakeTimer = null;
+
+const SweetCrush = () => {
+ const width = 8;
+ const [candyArray, setCandyArray] = useState([]);
+ const [start, setStart] = useState(false);
+ const [activeIndex, setActiveIndex] = useState(null);
+ const [score, setScore] = useState(0);
+ const [shake, setShake] = useState([]);
+ const fillArrayWithCandies = () => {
+ const newArray = [...Array(width * width)].map(
+ () => CANDIES[Math.floor(Math.random() * CANDIES.length)]
+ );
+ newArray[7] = CANDIES[0];
+ newArray[8] = CANDIES[0];
+ newArray[9] = CANDIES[0];
+ setCandyArray(newArray);
+ };
+ const clearTimer = () => {
+ clearTimeout(matchTimer);
+ clearTimeout(fillTimer);
+ clearTimeout(shakeTimer);
+ };
+ const restartGame = () => {
+ setScore(0);
+ clearTimer();
+ setShake([]);
+ setActiveIndex(null);
+ fillArrayWithCandies();
+ };
+ useEffect(() => {
+ restartGame();
+ }, []);
+
+ const isValidCombo = (array, index) => {
+ let combo = [
+ [index, index + 1, index + 2],
+ [index - 1, index, index + 1],
+ [index - 2, index - 1, index],
+ [index, index + width, index + 2 * width],
+ [index - width, index, index + width],
+ [index - 2 * width, index - width, index],
+ ];
+ const isSameRow = (a, b, c) =>
+ Math.floor(a / width) === Math.floor(b / width) &&
+ Math.floor(a / width) === Math.floor(c / width);
+ const isSameCol = (a, b, c) =>
+ Math.floor(a / width) !== Math.floor(b / width) &&
+ Math.floor(a / width) !== Math.floor(c / width) &&
+ Math.floor(b / width) !== Math.floor(c / width);
+ return combo.find(
+ ([a, b, c]) =>
+ (isSameCol(a, b, c) || isSameRow(a, b, c)) &&
+ array[a]?.id &&
+ array[a]?.id === array[b]?.id &&
+ array[a]?.id === array[c]?.id
+ );
+ };
+ const findValidMatch = () => {
+ matchTimer = setTimeout(() => {
+ let removableIndices;
+ for (let i = 0; i < candyArray.length; i++) {
+ removableIndices = isValidCombo(candyArray, i);
+ if (removableIndices) {
+ break;
+ }
+ }
+ if (removableIndices) {
+ let newCandyArray = [...candyArray];
+ setScore((prev) => prev + newCandyArray[removableIndices[0]].score);
+ removableIndices.forEach(
+ (e) => (newCandyArray[e] = { img: Confetti, scale: 2.5 })
+ );
+ setCandyArray(newCandyArray);
+ }
+ }, 150);
+ };
+ useEffect(() => {
+ findValidMatch();
+ return () => clearTimeout(matchTimer);
+ }, [candyArray]);
+ const getNextNonEmptyIndex = (array, index) => {
+ let newIndex = -1;
+ for (let i = 1; i < width; i++) {
+ if (array[index - i * width]?.id) {
+ newIndex = index - i * width;
+ break;
+ }
+ }
+ return newIndex;
+ };
+ const fillEmptyArray = (array) =>
+ array.map((e) =>
+ e.id ? e : CANDIES[Math.floor(Math.random() * CANDIES.length)]
+ );
+ const moveArrayDown = () => {
+ fillTimer = setTimeout(() => {
+ let newCandyArray = [...candyArray];
+ let shouldChange = false;
+ for (let i = candyArray.length - 1; i >= width; i--) {
+ if (!newCandyArray[i].id) {
+ let newIndex = getNextNonEmptyIndex(newCandyArray, i);
+ if (newIndex !== -1) {
+ shouldChange = [newIndex, i];
+ newCandyArray[i] = newCandyArray[newIndex];
+ newCandyArray[newIndex] = {};
+ }
+ }
+ }
+ if (shouldChange) {
+ newCandyArray = fillEmptyArray(newCandyArray);
+ setCandyArray(newCandyArray);
+ } else {
+ let isEmptyArrayPresent = newCandyArray.find((e) => !e.id);
+ if (isEmptyArrayPresent) {
+ newCandyArray = fillEmptyArray(newCandyArray);
+ setCandyArray(newCandyArray);
+ }
+ }
+ }, 1000);
+ };
+ useEffect(() => {
+ moveArrayDown();
+ return () => clearTimeout(fillTimer);
+ }, [candyArray]);
+
+ useEffect(() => {
+ if (shake.length) {
+ shakeTimer = setTimeout(() => {
+ setShake([]);
+ }, 200);
+ }
+ return () => clearTimeout(shakeTimer);
+ }, [shake]);
+
+ const swapCandies = (index, newIndex) => {
+ let newArray = [...candyArray];
+ let temp = newArray[index];
+ newArray[index] = newArray[newIndex];
+ newArray[newIndex] = temp;
+ let validNewIndex = [index + 1, index - 1, index + width, index - width];
+ if (validNewIndex.includes(newIndex)) {
+ if (isValidCombo(newArray, index) || isValidCombo(newArray, newIndex)) {
+ setCandyArray(newArray);
+ setActiveIndex(null);
+ } else {
+ setShake([index, newIndex]);
+ }
+ } else {
+ setActiveIndex(newIndex);
+ }
+ };
+ const onClickHandler = (index) => {
+ if (activeIndex === index) return;
+ if (activeIndex !== null) {
+ swapCandies(activeIndex, index);
+ } else {
+ setActiveIndex(index);
+ }
+ };
+
+ return (
+ How many words can you type in 30 seconds?
+ +Time remaining: {timeRemaining}
+ +Word count: {wordCount}
+
+
+ {candyArray.map(({ img, scale }, i) => (
+ onClickHandler(i)}
+ key={i}
+ src={img}
+ scale={scale}
+ active={activeIndex === i}
+ shake={shake.includes(i)}
+ />
+ ))}
+
+
+ );
+};
+
+export default SweetCrush;
diff --git a/src/Components/Games/TicTacToe/board.jsx b/src/Components/Games/TicTacToe/board.jsx
new file mode 100644
index 00000000..b134d667
--- /dev/null
+++ b/src/Components/Games/TicTacToe/board.jsx
@@ -0,0 +1,89 @@
+import React from 'react'
+
+function calculateWinner(squares) {
+ const lines = [
+ [0, 1, 2],
+ [3, 4, 5],
+ [6, 7, 8],
+ [0, 3, 6],
+ [1, 4, 7],
+ [2, 5, 8],
+ [0, 4, 8],
+ [2, 4, 6],
+ ]
+ for (let i = 0; i < lines.length; i++) {
+ const [a, b, c] = lines[i]
+ if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
+ return squares[a]
+ }
+ }
+ return null
+ }
+
+function calculateNextValue(squares) {
+ return squares.filter(Boolean).length % 2 === 0 ? 'X' : 'O'
+}
+
+
+function calculateStatus(winner, squares, nextValue) {
+ return winner
+ ? `Winner: ${winner}`
+ : squares.every(Boolean)
+ ? `Scratch: Cat's game`
+ : `Next player: ${nextValue}`
+}
+
+function Board() {
+ const [squares, setSquares] = React.useState(Array(9).fill(null))
+
+ const nextValue = calculateNextValue(squares)
+ const winner = calculateWinner(squares)
+ const status = calculateStatus(winner, squares, nextValue)
+
+ function selectSquare(square) {
+ if (winner || squares[square]) {
+ return
+ }
+ const squaresCopy = [...squares]
+ squaresCopy[square] = nextValue
+ setSquares(squaresCopy)
+ }
+
+ function restart() {
+ setSquares(Array(9).fill(null))
+ }
+
+ function renderSquare(i) {
+ return (
+
+ )
+ }
+
+ return (
+
+ {score}
+
+
+
+
+ )
+ }
+
+ export default Board;
\ No newline at end of file
diff --git a/src/Components/Games/TicTacToe/square.css b/src/Components/Games/TicTacToe/square.css
new file mode 100644
index 00000000..20b32867
--- /dev/null
+++ b/src/Components/Games/TicTacToe/square.css
@@ -0,0 +1,35 @@
+.square {
+ width: 100px;
+ height: 100px;
+ border: 2px solid #eee;
+ border-radius: 5px;
+ display: grid;
+ place-items: center;
+ cursor: pointer;
+}
+.square span {
+ display: block;
+ position: relative;
+ width: 70%;
+ height: 70%;
+ border-radius: 50%;
+ border: 8px solid transparent;
+}
+.square span.x::after, .square span.x::before {
+ position: absolute;
+ content: "";
+ width: 150%;
+ height: 8px;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%) rotate(-45deg);
+ background: #1a1e23;
+ border-radius: 5px;
+}
+.square span.x::after {
+ transform: translate(-50%, -50%) rotate(45deg);
+ opacity: 1;
+}
+.square span.o {
+ border-color: rgb(235, 183, 65);
+}
diff --git a/src/Components/Games/TicTacToe/square.jsx b/src/Components/Games/TicTacToe/square.jsx
new file mode 100644
index 00000000..74e473ee
--- /dev/null
+++ b/src/Components/Games/TicTacToe/square.jsx
@@ -0,0 +1,26 @@
+import "./square.css";
+import { motion } from "framer-motion";
+
+const Square = ({ ind, updateSquares, clsName }) => {
+ const handleClick = () => {
+ updateSquares(ind);
+ };
+ return (
+ {status}
+
+ {renderSquare(0)}
+ {renderSquare(1)}
+ {renderSquare(2)}
+
+
+ {renderSquare(3)}
+ {renderSquare(4)}
+ {renderSquare(5)}
+
+
+ {renderSquare(6)}
+ {renderSquare(7)}
+ {renderSquare(8)}
+
+
+
+
+ {winner && (
+
+
+
+ {winner === "x | o"
+ ? "No Winner :/"
+ : "Win !! :)"}
+
+
+ {winner === "x | o" ? (
+ <>
+
+
+
+
+
+
+ )}
+
+
+ );
+}
+
+export default TicTacToe;
\ No newline at end of file
diff --git a/src/Components/Games/WackMole/wackmole.jsx b/src/Components/Games/WackMole/wackmole.jsx
new file mode 100644
index 00000000..bea7bf1b
--- /dev/null
+++ b/src/Components/Games/WackMole/wackmole.jsx
@@ -0,0 +1,148 @@
+import React, { useState } from "react";
+import mouse from "../../../Utils/useMousePosition";
+
+import "../games.css";
+
+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;
+
+// export default function WackMole ({ setPaused, handleClick, losePoint }) {
+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";
+
+ 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(TIC-TAC-TOE
+ +
+ {Array.from("012345678").map((ind) => (
+
+
+
+ wack the mole. don't wack the ostrich
+ )} + handleMouseMove()}
+ onMouseDown={() => handleBatDown()}
+ onMouseUp={() => handleBatUp()}
+ >
+ 
handleHit()}
+ />
+
+ 
lose()}
+ />
+
+ 
+
+ {showMouse && (
+ <>
+
+
+
+ );
+}
diff --git a/src/Components/Games/common.jsx b/src/Components/Games/common.jsx
new file mode 100644
index 00000000..38f0c928
--- /dev/null
+++ b/src/Components/Games/common.jsx
@@ -0,0 +1,30 @@
+import styled from "styled-components";
+
+export const Button = styled.button`
+ padding: 5px;
+ width: fit-content;
+ margin: 10px;
+`;
+export const Result = styled.div`
+ padding: 10px;
+ border: 1px solid;
+ width: fit-content;
+ background: deepskyblue;
+ color: white;
+`;
+export const Title = styled.div`
+ padding: 10px;
+ text-align: center;
+ font-weight: bold;
+ text-transform: uppercase;
+`;
+export const Grid = styled.div`
+ display: flex;
+ flex-wrap: wrap;
+ width: ${({ width }) => width || 400}px;
+ height: ${({ height }) => height || 400}px;
+ background: ${({ color }) => color || "transparent"};
+ overflow: hidden;
+ position: relative;
+ border: ${({ border }) => (border ? `1px solid ${border}` : "none")};
+`;
\ No newline at end of file
diff --git a/src/Components/Games/games.css b/src/Components/Games/games.css
new file mode 100644
index 00000000..e9d96b67
--- /dev/null
+++ b/src/Components/Games/games.css
@@ -0,0 +1,695 @@
+
+.start {
+ height: 90vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ }
+
+ .start h4 {
+ font-size: 40px;
+ font-weight: 100;
+ text-align: center;
+ font-family: 'Amatic SC', cursive;
+ }
+
+ .start h2 {
+ font-size: 140px;
+ font-weight: 100;
+ text-align: center;
+ font-family: 'Amatic SC', cursive;
+ margin: 0px;
+ cursor: pointer;
+ }
+
+ .toucan {
+ height: 20vh;
+ position: fixed;
+ top: 20vh;
+ }
+
+ .doge {
+ height: 20vh;
+ position: fixed;
+ bottom: 20vh;
+ right: 0;
+ -webkit-transform: scaleX(-1);
+ transform: scaleX(-1);
+ }
+
+ .raceWrapper {
+ height: 90vh;
+ width: 100vw;
+ position: fixed;
+ cursor: none;
+ }
+
+ .snail {
+ height: 15vh;
+ position: relative;
+ top: 1vh;
+ cursor: none;
+ user-select: none;
+ }
+
+ .finish {
+ height: 10vh;
+ position: fixed;
+ bottom: 5vh;
+ right: 10vw;
+ padding: 80px;
+ }
+
+ .moleContainer {
+ height: 90vh;
+ width: 100vw;
+ position: fixed;
+ cursor: none;
+ }
+
+ .wackAnimal {
+ width: 10vw;
+ position: fixed;
+ user-select: none;
+ }
+
+ .animalPop {
+ animation-name: animalPop;
+ animation-duration: 0.5s;
+ animation-iteration-count: 1;
+ }
+
+ @keyframes animalPop {
+ 0% {width: 10vw; transform:translate(0px, 0px)}
+ 40% {width: 0vw; transform:translate(75px, 150px)}
+ 60% {width: 0vw; transform:translate(75px, 150px)}
+ 100% {width: 10vw; transform:translate(0px, 0px)}
+ }
+
+ .mound {
+ width: 20vw;
+ opacity: 0.5;
+ padding-bottom: 8vh;
+ user-select: none;
+ pointer-events: none;
+ }
+
+ .moundContainer {
+ position: fixed;
+ top: 15vh;
+ left: 0;
+ z-index: -2;
+ pointer-events: none;
+ }
+
+ .bat {
+ position: fixed;
+ height: 180px;
+ pointer-events: none;
+ transform-origin: 0% 100% 0;
+ user-select: none;
+ }
+
+ .click {
+ width: 10vw;
+ opacity: 0.5;
+ position: fixed;
+ left: 45vw;
+ top: 40vh;
+ animation-name: click;
+ animation-duration: 2s;
+ animation-iteration-count: infinite;
+ pointer-events: none;
+ user-select: none;
+ }
+
+ @keyframes click {
+ 0% {left: 18vw; top: 25vh}
+ 50% {left: 25vw; top: 30vh}
+ 100% {left: 18vw; top: 25vh}
+ }
+
+ .exampleMole {
+ height: 200px;
+ opacity: 0.7;
+ }
+
+ .tick {
+ height: 100px;
+ margin-right: 40px;
+ opacity: 0.7;
+ animation-name: pulse;
+ animation-duration: 2s;
+ animation-iteration-count: infinite;
+ user-select: none;
+ }
+
+ .cross {
+ height: 100px;
+ margin-left: 40px;
+ opacity: 0.7;
+ animation-name: pulse;
+ animation-duration: 2s;
+ animation-iteration-count: infinite;
+ user-select: none;
+ }
+
+ @keyframes pulse {
+ 0% {height: 100px}
+ 50% {height: 130px}
+ 100% {height: 100px}
+ }
+
+ .exampleContainer {
+ display: flex;
+ flex-direction: column;
+ align-content: center;
+ justify-content: center;
+ height: 200px;
+ margin-top: 200px;
+ width: 100%;
+ }
+
+ .imgContainer {
+ display: flex;
+ justify-content: center;
+ }
+
+ .monster {
+ position: fixed;
+ bottom: 0;
+ right: 0;
+ height: 40vh;
+ }
+
+ .animal {
+ height: 20vh;
+ position: fixed;
+ z-index: 2;
+ cursor: none;
+ }
+
+ .mouseIcon {
+ width: 15vw;
+ opacity: 0.5;
+ position: fixed;
+ left: 45vw;
+ top: 40vh;
+ animation-name: mouse;
+ animation-duration: 2s;
+ animation-iteration-count: infinite;
+ }
+
+ @keyframes mouse {
+ 0% {left: 40vw; top: 35vh}
+ 50% {left: 50vw; top: 45vh}
+ 100% {left: 40vw; top: 35vh}
+ }
+
+ .animalContainer {
+ height: 90vh;
+ width: 100vw;
+ }
+
+ .duplicateContainer {
+ height: 90vh;
+ width: 100vw;
+ user-select: none;
+ }
+
+ .end h2 {
+ font-size: 100px;
+ font-weight: 100;
+ text-align: center;
+ font-family: 'Amatic SC', cursive;
+ cursor: pointer;
+ }
+
+ .end h3 {
+ font-size: 60px;
+ font-weight: 100;
+ text-align: center;
+ font-family: 'Amatic SC', cursive;
+ }
+
+ .end h4 {
+ font-size: 40px;
+ font-weight: 100;
+ text-align: center;
+ font-family: 'Amatic SC', cursive;
+ }
+
+ .deer {
+ position: fixed;
+ bottom: 0;
+ left: -80px;
+ height: 50vh;
+ }
+
+ .lion {
+ position: fixed;
+ bottom: -60px;
+ right: 0;
+ height: 50vh;
+ -webkit-transform: scaleX(-1);
+ transform: scaleX(-1);
+ }
+
+ .score {
+ font-size: 50px;
+ font-family: 'Amatic SC', cursive;
+ margin-right: 10px;
+ user-select: none;
+ }
+
+ .time {
+ font-size: 50px;
+ font-family: 'Amatic SC', cursive;
+ margin-left: 10px;
+ user-select: none;
+ }
+
+ .title {
+ font-size: 60px;
+ font-family: 'Amatic SC', cursive;
+ user-select: none;
+ }
+
+ .topBar {
+ display: flex;
+ justify-content: space-between;
+ height: 70px;
+ }
+
+ .title {
+ position: absolute;
+ width: 100%;
+ text-align: center;
+ }
+
+ .bug {
+ width: 100px;
+ position: fixed;
+ cursor: crosshair;
+ }
+
+ .fish {
+ width: 200px;
+ position: fixed;
+ z-index: 2;
+ }
+
+ .chips {
+ width: 75px;
+ position: fixed;
+ }
+
+ .fishContainer {
+ display: flex;
+ justify-content: center;
+ height: 90vh;
+ align-items: center;
+ }
+
+ .hiddenInput {
+ opacity: 0;
+ width: 100vw;
+ height: 100vh;
+ z-index: 3;
+ position: fixed;
+ cursor: none;
+ top: 0;
+ left: 0;
+ }
+
+ .keys {
+ width: 400px;
+ opacity: 0.5;
+ animation-name: pulseKeys;
+ animation-duration: 2s;
+ animation-iteration-count: infinite;
+ }
+
+ @keyframes pulseKeys {
+ 0% {width: 400px}
+ 50% {width: 500px}
+ 100% {width: 400px}
+ }
+
+ .letterContainer {
+ width: 200px;
+ position: fixed;
+ }
+
+ .letter {
+ color: #4db8ff;
+ position: absolute;
+ left: 110px;
+ top: 25px;
+ font-size: 60px;
+ font-weight: 500;
+ font-family: 'Amatic SC', cursive;
+ }
+
+ .foodWrapper {
+ height: 90vh;
+ width: 100vw;
+ position: fixed;
+ cursor: none;
+ }
+
+ .mouseCapture {
+ border: 2px solid black;
+ position: fixed;
+ width: 100vw;
+ height: 250px;
+ bottom: 0;
+ cursor: none;
+ }
+
+ .plate {
+ width: 200px;
+ position: fixed;
+ bottom: 0;
+ cursor: none;
+ }
+
+ .food2 {
+ width: 100px;
+ position: fixed;
+ padding: 50px;
+ z-index: 2;
+ }
+
+ .exFoodContainer {
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ }
+
+ .exampleFoodfallContainer {
+ display: flex;
+ align-content: center;
+ justify-content: center;
+ height: 200px;
+ margin-top: 200px;
+ width: 100%;
+ }
+
+ .exampleFood {
+ height: 110px;
+ opacity: 0.65;
+ margin: 10px 40px
+ }
+
+ .turtle {
+ height: 120px;
+ -webkit-transform: scaleX(-1);
+ transform: scaleX(-1);
+ position: fixed;
+ top: 40vh;
+ user-select: none;
+ }
+
+ .finishLine {
+ border-left: 15px dashed #e6ffe66f;
+ height: 90vh;
+ width: 10vw;
+ position: fixed;
+ right: 0;
+ z-index: -1;
+ }
+
+ .road {
+ background-color: #e6ffe66f;
+ height: 100vh;
+ width: 300px;
+ position: fixed;
+ top: 0px;
+ left: 40vw;
+ z-index: -2;
+ }
+
+ .centreline {
+ border-right: 15px dashed #e6ffe66f;
+ height: 100vh;
+ width: 150px;
+ }
+
+ .vehicle {
+ width: 120px;
+ position: absolute;
+ right: 15px;
+ top: 100px;
+ }
+
+ .vehicle2 {
+ width: 120px;
+ position: absolute;
+ left: 15px;
+ bottom: 15px;
+ }
+
+ .clickWrapper {
+ height: 90vh;
+ width: 100vw;
+ cursor: pointer;
+ }
+
+ .clickLots {
+ opacity: 0.5;
+ position: fixed;
+ animation-name: clickclick;
+ animation-duration: 0.3s;
+ animation-iteration-count: infinite;
+ pointer-events: none;
+ }
+
+ @keyframes clickclick {
+ 0% {left: 25vw; top: 40vh; width: 10vw}
+ 50% {left: 24vw; top: 39vh; width: 9vw}
+ 100% {left: 25vw; top: 40vh; width: 10vw}
+ }
+
+ .fly {
+ width: 100px;
+ position: fixed;
+ user-select: none;
+
+ motion-path: path("M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23,101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51,74.56S18.45,58.46,18.45,58.46Z");
+ offset-path: path("M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23,101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51,74.56S18.45,58.46,18.45,58.46Z");
+ motion-rotation: reverse;
+ animation: move 3s linear infinite;
+ }
+
+ .splatClass {
+ width: 100px;
+ position: fixed;
+ z-index: -1;
+ pointer-events: none;
+ user-select: none;
+ }
+
+ .butterflySplatClass {
+ width: 200px;
+ position: fixed;
+ z-index: -1;
+ pointer-events: none;
+ user-select: none;
+ }
+
+ @keyframes move {
+ 100% {
+ motion-offset: 100%;
+ offset-distance: 100%;
+ }
+ }
+
+ .swat {
+ height: 200px;
+ position: fixed;
+ z-index: 2;
+ pointer-events: none;
+ user-select: none;
+ transform-origin: 0% 100% 0;
+ }
+
+ .swatContainer {
+ height: 90vh;
+ width: 100vw;
+ position: fixed;
+ cursor: none;
+ }
+
+ .seaweed {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ opacity: 0.5;
+ height: 500px;
+ z-index: -1;
+ }
+
+ .seaweed2 {
+ position: fixed;
+ bottom: 0;
+ right: 0;
+ opacity: 0.5;
+ height: 500px;
+ transform: scaleX(-1);
+ z-index: -1;
+ }
+
+ .bird {
+ height: 150px;
+ width: 150px;
+ position: fixed;
+ background-size: 150px 150px;
+ }
+
+ .birdTarget {
+ width: 150%;
+ height: 150%;
+ position: absolute;
+ bottom: -40px;
+ left: -40px;
+ }
+
+ .birdfly {
+ animation: birdfly 6s infinite, birdflap linear 1s infinite;
+ }
+
+ .birdhit {
+ animation: birdhit 2s 1 forwards;
+ }
+
+ @keyframes birdflap {
+ 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 {
+ 0% {left: -20vw; transform:translateY(-5vh)}
+ 25% {transform:translateY(10vh)}
+ 50% {transform:translateY(-5vh)}
+ 75% {transform:translateY(10vh)}
+ 100% {left: 120vw; transform:translateY(-5vh)}
+ }
+
+ @keyframes birdhit {
+ 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 {
+ position: fixed;
+ width: 110px;
+ pointer-events: none;
+ user-select: none;
+ }
+
+ .birdWrapper {
+ width: 100vw;
+ height: 90vh;
+ cursor: none;
+ }
+
+ .cloud {
+ position: fixed;
+ width: 300px;
+ opacity: 0.5;
+ z-index: -1;
+ }
+
+ .cloud1 {
+ top: 50px;
+ animation: 30s linear clouds -21s infinite;
+ }
+
+ .cloud2 {
+ top: 100px;
+ animation: 30s linear clouds -1s infinite;
+ }
+
+ .cloud3 {
+ top: 200px;
+ opacity: 0.4;
+ animation: 30s linear clouds -11s infinite;
+ }
+
+ @keyframes clouds {
+ 0% {left: 100vw}
+ 100% {left: -35vw}
+ }
+
+ .scrollContainer {
+ width: 100vw;
+ height: 90vh;
+ cursor: none;
+ }
+
+ .scrollAnimal {
+ height: 150px;
+ position: fixed;
+ }
+
+ .arrow {
+ width: 100px;
+ position: fixed;
+ transform: rotate(135deg);
+ }
+
+ .axe {
+ width: 100px;
+ position: fixed;
+ animation: axespin 1s infinite reverse linear;
+ }
+
+ .bomb {
+ width: 100px;
+ position: fixed;
+ animation: axespin 1s infinite reverse linear;
+ }
+
+ @keyframes axespin {
+ 0% {transform: rotate(0deg)}
+ 100% {transform: rotate(360deg)}
+ }
+
+ .exampleScrollContainer {
+ display: flex;
+ align-content: center;
+ justify-content: center;
+ height: 200px;
+ margin-top: 200px;
+ width: 100%;
+ }
+
+ .exampleMouse {
+ opacity: 0.3;
+ position: absolute;
+ left: 20vw;
+ top: 30vh;
+ animation: mousePulse 2s infinite;
+ }
+
+ @keyframes mousePulse {
+ 0% {height: 300px}
+ 50% {height: 350px}
+ 100% {height: 300px}
+ }
+
+ .instructionText {
+ font-size: 40px;
+ font-weight: 100;
+ font-family: 'Amatic SC', cursive;
+ text-align: center;
+ user-select: none;
+ }
\ No newline at end of file
diff --git a/src/Components/SVG/ambulance-svgrepo-com.svg b/src/Components/SVG/ambulance-svgrepo-com.svg
new file mode 100644
index 00000000..393e7ce0
--- /dev/null
+++ b/src/Components/SVG/ambulance-svgrepo-com.svg
@@ -0,0 +1,67 @@
+
+
+
diff --git a/src/Components/SVG/animal-kingdom-coati-svgrepo-com.svg b/src/Components/SVG/animal-kingdom-coati-svgrepo-com.svg
new file mode 100644
index 00000000..642dc93b
--- /dev/null
+++ b/src/Components/SVG/animal-kingdom-coati-svgrepo-com.svg
@@ -0,0 +1,84 @@
+
+
+
diff --git a/src/Components/SVG/arrow-svgrepo-com.svg b/src/Components/SVG/arrow-svgrepo-com.svg
new file mode 100644
index 00000000..5483e720
--- /dev/null
+++ b/src/Components/SVG/arrow-svgrepo-com.svg
@@ -0,0 +1,41 @@
+
+
+
+
diff --git a/src/Components/SVG/axe-svgrepo-com.svg b/src/Components/SVG/axe-svgrepo-com.svg
new file mode 100644
index 00000000..61472246
--- /dev/null
+++ b/src/Components/SVG/axe-svgrepo-com.svg
@@ -0,0 +1,47 @@
+
+
+
+
diff --git a/src/Components/SVG/baby-animal-shaped-plate-svgrepo-com.svg b/src/Components/SVG/baby-animal-shaped-plate-svgrepo-com.svg
new file mode 100644
index 00000000..875ce2f7
--- /dev/null
+++ b/src/Components/SVG/baby-animal-shaped-plate-svgrepo-com.svg
@@ -0,0 +1,56 @@
+
+
+
+
diff --git a/src/Components/SVG/bat-svgrepo-com.svg b/src/Components/SVG/bat-svgrepo-com.svg
new file mode 100644
index 00000000..a0c92381
--- /dev/null
+++ b/src/Components/SVG/bat-svgrepo-com.svg
@@ -0,0 +1,33 @@
+
+
+
diff --git a/src/Components/SVG/bicycle-bike-svgrepo-com.svg b/src/Components/SVG/bicycle-bike-svgrepo-com.svg
new file mode 100644
index 00000000..195d4795
--- /dev/null
+++ b/src/Components/SVG/bicycle-bike-svgrepo-com.svg
@@ -0,0 +1,57 @@
+
+
+
diff --git a/src/Components/SVG/burger-svgrepo-com.svg b/src/Components/SVG/burger-svgrepo-com.svg
new file mode 100644
index 00000000..0177623f
--- /dev/null
+++ b/src/Components/SVG/burger-svgrepo-com.svg
@@ -0,0 +1,57 @@
+
+
+
diff --git a/src/Components/SVG/burrito-svgrepo-com.svg b/src/Components/SVG/burrito-svgrepo-com.svg
new file mode 100644
index 00000000..93ad24cb
--- /dev/null
+++ b/src/Components/SVG/burrito-svgrepo-com.svg
@@ -0,0 +1,57 @@
+
+
+
diff --git a/src/Components/SVG/bus-front-view-svgrepo-com.svg b/src/Components/SVG/bus-front-view-svgrepo-com.svg
new file mode 100644
index 00000000..8a7f70c4
--- /dev/null
+++ b/src/Components/SVG/bus-front-view-svgrepo-com.svg
@@ -0,0 +1,55 @@
+
+
+
diff --git a/src/Components/SVG/cab-svgrepo-com.svg b/src/Components/SVG/cab-svgrepo-com.svg
new file mode 100644
index 00000000..a0575981
--- /dev/null
+++ b/src/Components/SVG/cab-svgrepo-com.svg
@@ -0,0 +1,73 @@
+
+
+
diff --git a/src/Components/SVG/campfire-svgrepo-com.svg b/src/Components/SVG/campfire-svgrepo-com.svg
new file mode 100644
index 00000000..2f2473a0
--- /dev/null
+++ b/src/Components/SVG/campfire-svgrepo-com.svg
@@ -0,0 +1,61 @@
+
+
+
diff --git a/src/Components/SVG/cancel-svgrepo-com.svg b/src/Components/SVG/cancel-svgrepo-com.svg
new file mode 100644
index 00000000..8bf262dc
--- /dev/null
+++ b/src/Components/SVG/cancel-svgrepo-com.svg
@@ -0,0 +1,64 @@
+
+
+
diff --git a/src/Components/SVG/car-svgrepo-com.svg b/src/Components/SVG/car-svgrepo-com.svg
new file mode 100644
index 00000000..7fa8f041
--- /dev/null
+++ b/src/Components/SVG/car-svgrepo-com.svg
@@ -0,0 +1,69 @@
+
+
+
diff --git a/src/Components/SVG/checked-tick-svgrepo-com.svg b/src/Components/SVG/checked-tick-svgrepo-com.svg
new file mode 100644
index 00000000..eab523d2
--- /dev/null
+++ b/src/Components/SVG/checked-tick-svgrepo-com.svg
@@ -0,0 +1,54 @@
+
+
+
diff --git a/src/Components/SVG/click-svgrepo-com.svg b/src/Components/SVG/click-svgrepo-com.svg
new file mode 100644
index 00000000..74cb56e8
--- /dev/null
+++ b/src/Components/SVG/click-svgrepo-com.svg
@@ -0,0 +1,53 @@
+
+
+
diff --git a/src/Components/SVG/cloud-svgrepo-com-2.svg b/src/Components/SVG/cloud-svgrepo-com-2.svg
new file mode 100644
index 00000000..a0128c7e
--- /dev/null
+++ b/src/Components/SVG/cloud-svgrepo-com-2.svg
@@ -0,0 +1,50 @@
+
+
+
diff --git a/src/Components/SVG/cloud-svgrepo-com.svg b/src/Components/SVG/cloud-svgrepo-com.svg
new file mode 100644
index 00000000..962ac235
--- /dev/null
+++ b/src/Components/SVG/cloud-svgrepo-com.svg
@@ -0,0 +1,61 @@
+
+
+
diff --git a/src/Components/SVG/clouds-cloud-svgrepo-com.svg b/src/Components/SVG/clouds-cloud-svgrepo-com.svg
new file mode 100644
index 00000000..abe1a954
--- /dev/null
+++ b/src/Components/SVG/clouds-cloud-svgrepo-com.svg
@@ -0,0 +1,52 @@
+
+
+
diff --git a/src/Components/SVG/computer-mouse-with-wheel.svg b/src/Components/SVG/computer-mouse-with-wheel.svg
new file mode 100644
index 00000000..38575b59
--- /dev/null
+++ b/src/Components/SVG/computer-mouse-with-wheel.svg
@@ -0,0 +1,11 @@
+
\ No newline at end of file
diff --git a/src/Components/SVG/crosshairs-solid-svgrepo-com.svg b/src/Components/SVG/crosshairs-solid-svgrepo-com.svg
new file mode 100644
index 00000000..f26e1538
--- /dev/null
+++ b/src/Components/SVG/crosshairs-solid-svgrepo-com.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/Components/SVG/donut-svgrepo-com.svg b/src/Components/SVG/donut-svgrepo-com.svg
new file mode 100644
index 00000000..ba2153bf
--- /dev/null
+++ b/src/Components/SVG/donut-svgrepo-com.svg
@@ -0,0 +1,53 @@
+
+
+
diff --git a/src/Components/SVG/edit.svg b/src/Components/SVG/edit.svg
new file mode 100755
index 00000000..3137142c
--- /dev/null
+++ b/src/Components/SVG/edit.svg
@@ -0,0 +1,81 @@
+
+
+
diff --git a/src/Components/SVG/firebog-ground-entrance2.svg b/src/Components/SVG/firebog-ground-entrance2.svg
new file mode 100644
index 00000000..d5421dc3
--- /dev/null
+++ b/src/Components/SVG/firebog-ground-entrance2.svg
@@ -0,0 +1,181 @@
+
+
+
diff --git a/src/Components/SVG/frame-1v.svg b/src/Components/SVG/frame-1v.svg
new file mode 100644
index 00000000..bfc052d9
--- /dev/null
+++ b/src/Components/SVG/frame-1v.svg
@@ -0,0 +1,22 @@
+
+
+
diff --git a/src/Components/SVG/frame-2v.svg b/src/Components/SVG/frame-2v.svg
new file mode 100644
index 00000000..33fc6e9e
--- /dev/null
+++ b/src/Components/SVG/frame-2v.svg
@@ -0,0 +1,20 @@
+
+
+
diff --git a/src/Components/SVG/frame-3v.svg b/src/Components/SVG/frame-3v.svg
new file mode 100644
index 00000000..a40cb3e6
--- /dev/null
+++ b/src/Components/SVG/frame-3v.svg
@@ -0,0 +1,23 @@
+
+
+
diff --git a/src/Components/SVG/frame-4v.svg b/src/Components/SVG/frame-4v.svg
new file mode 100644
index 00000000..7221a083
--- /dev/null
+++ b/src/Components/SVG/frame-4v.svg
@@ -0,0 +1,21 @@
+
+
+
diff --git a/src/Components/SVG/frame-5v.svg b/src/Components/SVG/frame-5v.svg
new file mode 100644
index 00000000..36586fa2
--- /dev/null
+++ b/src/Components/SVG/frame-5v.svg
@@ -0,0 +1,22 @@
+
+
+
diff --git a/src/Components/SVG/frame-6v.svg b/src/Components/SVG/frame-6v.svg
new file mode 100644
index 00000000..bacadd17
--- /dev/null
+++ b/src/Components/SVG/frame-6v.svg
@@ -0,0 +1,20 @@
+
+
+
diff --git a/src/Components/SVG/frame-7v.svg b/src/Components/SVG/frame-7v.svg
new file mode 100644
index 00000000..a83f5de4
--- /dev/null
+++ b/src/Components/SVG/frame-7v.svg
@@ -0,0 +1,23 @@
+
+
+
diff --git a/src/Components/SVG/frame-8v.svg b/src/Components/SVG/frame-8v.svg
new file mode 100644
index 00000000..a059374c
--- /dev/null
+++ b/src/Components/SVG/frame-8v.svg
@@ -0,0 +1,21 @@
+
+
+
diff --git a/src/Components/SVG/fuse-weapon-svgrepo-com.svg b/src/Components/SVG/fuse-weapon-svgrepo-com.svg
new file mode 100644
index 00000000..1735d62d
--- /dev/null
+++ b/src/Components/SVG/fuse-weapon-svgrepo-com.svg
@@ -0,0 +1,61 @@
+
+
+
diff --git a/src/Components/SVG/leaf-svgrepo-com.svg b/src/Components/SVG/leaf-svgrepo-com.svg
new file mode 100644
index 00000000..994a5584
--- /dev/null
+++ b/src/Components/SVG/leaf-svgrepo-com.svg
@@ -0,0 +1,121 @@
+
+
+
diff --git a/src/Components/SVG/mole-svgrepo-com.svg b/src/Components/SVG/mole-svgrepo-com.svg
new file mode 100644
index 00000000..6bc88fe2
--- /dev/null
+++ b/src/Components/SVG/mole-svgrepo-com.svg
@@ -0,0 +1,108 @@
+
+
+
diff --git a/src/Components/SVG/mouse-svgrepo-com.svg b/src/Components/SVG/mouse-svgrepo-com.svg
new file mode 100644
index 00000000..12ab50c3
--- /dev/null
+++ b/src/Components/SVG/mouse-svgrepo-com.svg
@@ -0,0 +1,55 @@
+
+
+
diff --git a/src/Components/SVG/ostrich-animal-svgrepo-com.svg b/src/Components/SVG/ostrich-animal-svgrepo-com.svg
new file mode 100644
index 00000000..5a56ae49
--- /dev/null
+++ b/src/Components/SVG/ostrich-animal-svgrepo-com.svg
@@ -0,0 +1,100 @@
+
+
+
diff --git a/src/Components/SVG/pizza-svgrepo-com.svg b/src/Components/SVG/pizza-svgrepo-com.svg
new file mode 100644
index 00000000..6ebd0c3b
--- /dev/null
+++ b/src/Components/SVG/pizza-svgrepo-com.svg
@@ -0,0 +1,55 @@
+
+
+
diff --git a/src/Components/SVG/snail-svgrepo-com.svg b/src/Components/SVG/snail-svgrepo-com.svg
new file mode 100644
index 00000000..7ece1065
--- /dev/null
+++ b/src/Components/SVG/snail-svgrepo-com.svg
@@ -0,0 +1,95 @@
+
+
+
diff --git a/src/Components/SVG/truck-lorry-svgrepo-com.svg b/src/Components/SVG/truck-lorry-svgrepo-com.svg
new file mode 100644
index 00000000..d66fce58
--- /dev/null
+++ b/src/Components/SVG/truck-lorry-svgrepo-com.svg
@@ -0,0 +1,66 @@
+
+
+
diff --git a/src/Components/SVG/turtle-svgrepo-com.svg b/src/Components/SVG/turtle-svgrepo-com.svg
new file mode 100644
index 00000000..15fbce28
--- /dev/null
+++ b/src/Components/SVG/turtle-svgrepo-com.svg
@@ -0,0 +1,93 @@
+
+
+
diff --git a/src/Components/SVG/wordcloud.svg b/src/Components/SVG/wordcloud.svg
new file mode 100755
index 00000000..e1990cff
--- /dev/null
+++ b/src/Components/SVG/wordcloud.svg
@@ -0,0 +1,31 @@
+
\ No newline at end of file
diff --git a/src/Components/SVG/zpvo_43sn_180514 copy.jpg b/src/Components/SVG/zpvo_43sn_180514 copy.jpg
new file mode 100644
index 00000000..48fd697f
Binary files /dev/null and b/src/Components/SVG/zpvo_43sn_180514 copy.jpg differ
diff --git a/src/GlobalState.js b/src/GlobalState.js
index 9a00d58f..04bd78c8 100755
--- a/src/GlobalState.js
+++ b/src/GlobalState.js
@@ -7,10 +7,10 @@ import React, {
} from "react";
import axios from "axios";
import { v4 } from "uuid";
-import ArticlesAPI from "./API/ArticlesAPI";
-import ProductsAPI from "./API/ProductsAPI";
-import UserAPI from "./API/UserAPI";
-import Notification from "./Components/Notification/Notification";
+import ArticlesAPI from "./API/ArticlesAPI.jsx";
+import ProductsAPI from "./API/ProductsAPI.jsx";
+import UserAPI from "./API/UserAPI.jsx";
+import Notification from "./Components/Notification/Notification.jsx";
import { useCookies } from "react-cookie";
export const GlobalState = createContext();
diff --git a/src/Pages/GameStore/AnimatedCard.jsx b/src/Pages/GameStore/AnimatedCard.jsx
new file mode 100644
index 00000000..307a76b7
--- /dev/null
+++ b/src/Pages/GameStore/AnimatedCard.jsx
@@ -0,0 +1,22 @@
+import { motion } from "framer-motion";
+import React from "react";
+import styles from "./AnimatedCard.module.css";
+
+const animations = {
+ initial: { opacity: 0 },
+ animate: { opacity: 1, transition: { opacity: { type: "spring", duration: 2, bounce: 0.4 }} }
+}
+
+const AnimatedCard = ({children}) => {
+ return (
+
+
+
+ )}
+
+
+
+
+
+
+
+
+ {moundArray}
+
+
+
+
+ Trending and interesting
+Based on player counts and ratings
+ +
+
+
+
+
+
+
+
+
+ Display options:
+ + + +{game.name}
+ +
+
+ );
+}
+
+export default Filters;
\ No newline at end of file
diff --git a/src/Pages/GameStore/Filters.module.css b/src/Pages/GameStore/Filters.module.css
new file mode 100644
index 00000000..599bfa3e
--- /dev/null
+++ b/src/Pages/GameStore/Filters.module.css
@@ -0,0 +1,107 @@
+.filters {
+ padding: 26px 40px 0px 40px;
+ width: 270px;
+}
+
+.globalFilters {
+ margin-bottom: 24px;
+}
+
+.filters h2 {
+ font-family: "GT Medium";
+ color: white;
+ font-size: 1.6em;
+ letter-spacing: 1px;
+ margin-bottom: 22px;
+}
+
+.filterDiv {
+ color: white;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ font-family: "GT Regular";
+ font-size: 1.2em;
+ margin-bottom: 10px;
+ cursor: pointer;
+}
+
+.filterDiv * {
+ pointer-events: none;
+}
+
+.filterBtn {
+ background-color: #2d2d2d;
+ padding: 4px;
+ border: 1px transparent;
+ border-radius: 8px;
+ cursor: pointer;
+}
+
+.filterSVG2 {
+ width: 25px;
+}
+
+.filterSVG3 {
+ width: 29px;
+ height: 29px;
+}
+
+.filterBtn2,
+.filterBtn4 {
+ background-color: #2d2d2d;
+ padding: 7px;
+ border: 1px transparent;
+ border-radius: 8px;
+ cursor: pointer;
+}
+
+.filterBtn4 {
+ padding-left: 8px;
+ padding-right: 6px;
+ padding-bottom: 7px;
+ padding-top: 6px;
+}
+
+.filterBtn4 .filterSVG3 {
+ width: 26px;
+}
+
+.filterBtn3 {
+ padding: 6px 5px 4px 5px;
+ background-color: #2d2d2d;
+ border: 1px transparent;
+ border-radius: 8px;
+ cursor: pointer;
+}
+
+.filterImg {
+ width: 26px;
+}
+
+.filterBtn,
+.filterBtn2,
+.filterBtn3,
+.filterBtn4 {
+ transition: 0.2s all;
+}
+
+.filterBtn:hover,
+.filterBtn2:hover,
+.filterBtn3:hover,
+.filterBtn4:hover {
+ background-color: #fff;
+}
+
+.filterSVG1,
+.filterSVG2,
+.filterSVG3,
+.filterSVG4 {
+ transition: 0.2s all;
+}
+
+@media screen and (max-width: 600px) {
+ .filters {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/src/Pages/GameStore/Game.jsx b/src/Pages/GameStore/Game.jsx
new file mode 100644
index 00000000..7af9bc81
--- /dev/null
+++ b/src/Pages/GameStore/Game.jsx
@@ -0,0 +1,301 @@
+import styles from "./Game.module.css";
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { motion, AnimatePresence } from "framer-motion";
+import AnimatedGamePage from "./AnimatedGamePage";
+import { ReactComponent as Arrow } from "./image/arrow.svg";
+import { ReactComponent as Up } from "./image/up.svg";
+import { ReactComponent as Down } from "./image/down.svg";
+import { ReactComponent as Like } from "./image/like.svg";
+import Slider from "./Slider";
+import games from "../../Constants/games";
+import AnimatedText from "./AnimatedText";
+import { ReactComponent as Add } from "./image/add.svg";
+import templateGame from "../../Utils/templateGame";
+import { Link } from "react-router-dom";
+import GameComponent from "./GameComponent";
+import styled from "styled-components";
+
+const GamePage = (props) => {
+ const {
+ handleHover,
+ hoverState,
+ handleHome,
+ landingPage,
+ cartAmount,
+ cart,
+ search,
+ searching,
+ handleSearch,
+ handleSearchSubmit,
+ browsing,
+ handleBrowse,
+ selectedGame,
+ setSelectedGame,
+ allGames,
+ // extended,
+ // setExtended,
+ handleAddToCart,
+ handleLike,
+ // textExtended,
+ // setTextExtended,
+ handleOpenCart,
+ handleCloseCart,
+ cartDisplayed,
+ clearCart,
+ handleRemoveFromCart,
+ openGamePage,
+ } = props;
+
+ // let { gameId } = useParams();
+ // const location = useLocation();
+ const params = useParams();
+
+ const [carouselState, setCarouselState] = useState(0);
+ const [currentGame, setCurrentGame] = useState();
+ const [extended, setExtended] = useState(false);
+ const [textExtended, setTextExtended] = useState(false);
+
+ const incrementCarousel = (e) => {
+ if (carouselState === 3) {
+ setCarouselState(0);
+ } else {
+ setCarouselState(carouselState + 1);
+ }
+ };
+
+ const decrementCarousel = (e) => {
+ if (carouselState === 0) {
+ setCarouselState(3);
+ } else {
+ setCarouselState(carouselState - 1);
+ }
+ };
+
+ const extendText = () => {
+ setTextExtended(!textExtended);
+ };
+
+ const handleExtend = (e) => {
+ if (document.getElementById("20").innerHTML === "More") {
+ document.getElementById("20").className = "aboutBottom";
+ } else if (document.getElementById("20").innerHTML === "Hide") {
+ document.getElementById("20").className = "aboutBottomClosed";
+ }
+ setExtended(!extended);
+ if (textExtended === false) {
+ setTimeout(extendText, 500);
+ } else {
+ setTextExtended(!textExtended);
+ }
+ };
+
+ useEffect(() => {
+ if (params.id) {
+ games.forEach((game) => {
+ if (game.id == params.id) setCurrentGame(game);
+ });
+ }
+ }, [params.id]);
+
+ const GameContainer = styled.div`
+ width: 60%;
+ display: flex;
+ align-self: center;
+ justify-content: center;
+ `;
+
+ return (
+ <>
+ Filters
+ +
+
+
+
+
+ Playlist
+
+
+
+
+ Ratings
+
+
+
+
+ Reviews
+
+
+
+ Genres
+ + {/*
+
+ Action
+
*/}
+
+
+
+ Strategy
+
+
+ {/*
+
+ RPG
+
*/}
+
+
+
+ Shooter
+
+
+ {/*
+
+ Adventure
+
*/}
+
+
+
+ Puzzle
+
+
+
+ Classic
+
+
+ {/*
+
+ Racing
+
*/}
+
+ {/*
+
+ Sports
+
*/}
+
+
+
+
+
+ );
+};
+
+export default GamePage;
diff --git a/src/Pages/GameStore/Game.module.css b/src/Pages/GameStore/Game.module.css
new file mode 100644
index 00000000..f9d83712
--- /dev/null
+++ b/src/Pages/GameStore/Game.module.css
@@ -0,0 +1,536 @@
+.gamepage {
+ height: 100vh;
+ background-color: #0f1011;
+}
+
+.gamepageContent {
+ padding: 30px 50px;
+ display: flex;
+ flex-direction: column;
+}
+
+/* header {
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+} */
+
+header h1 {
+ font-family: "GT Ultrabold";
+ color: white;
+ font-size: 3.3em;
+ transform: scaleY(1.1);
+ letter-spacing: 1px;
+}
+
+.goBack {
+ background-color: transparent;
+ border: 1px transparent;
+ display: flex;
+ font-family: "GT Medium";
+ font-size: 1.5em;
+ gap: 8px;
+ align-items: center;
+ cursor: pointer;
+}
+
+.goBack * {
+ pointer-events: none;
+}
+
+.goBack:active {
+ transform: scale(0.925);
+}
+
+.arrow {
+ padding-top: 1px;
+ width: 20px;
+ height: 20px;
+ pointer-events: none;
+}
+
+.arrow,
+.goBack {
+ transition: 0.275s all;
+}
+
+.game {
+ display: flex;
+ justify-content: flex-start;
+ gap: 30px;
+ margin-top: 30px;
+ box-sizing: border-box;
+}
+
+.gameInfo,
+.about,
+.aboutBottom {
+ display: flex;
+ flex-direction: column;
+}
+
+.gameInfo {
+ justify-content: space-between;
+ width: 28%;
+ flex-shrink: 0;
+}
+
+.aboutTop {
+ padding: 30px 70px 30px 34px;
+ width: 110%;
+ height: 280px;
+ box-sizing: border-box;
+ border-top-left-radius: 16px;
+ border-top-right-radius: 16px;
+ border: 1px transparent;
+ background-color: #1A1A1A;
+ overflow: scroll;
+ overflow-x: hidden;
+}
+
+.aboutTop::after {
+ background-image: linear-gradient(180deg, transparent, #1a1a1a);
+ bottom: -32px;
+ content: "";
+ display: block;
+ height: 50px;
+ margin-top: -20px;
+ pointer-events: none;
+ position: -webkit-sticky;
+ position: sticky;
+ width: 100%;
+}
+
+.aboutTop h2 {
+ color: white;
+ font-family: "GT Ultrabold";
+ font-size: 26px;
+ margin-bottom: 16px;
+}
+
+.aboutTop p {
+ color: #CCCCCC;
+ font-size: 15px;
+ font-family: "GT Regular";
+ word-spacing: 2px;
+ line-height: 1.65;
+}
+
+.aboutBottom,
+.aboutBottomClosed {
+ background-color: #262626;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ width: 110%;
+ border-bottom-left-radius: 16px;
+ border-bottom-right-radius: 16px;
+ box-sizing: border-box;
+}
+
+.lastChild {
+ padding-bottom: 6px;
+}
+
+.aboutBottom {
+ padding: 30px 35px 20px 34px;
+ height: 270px;
+ box-sizing: border-box;
+ animation: opening 0.5s ease-in-out forwards;
+}
+
+@keyframes opening {
+ 0% {
+ height: 59px;
+ }
+ 100% {
+ height: 270px;
+ }
+}
+
+.aboutBottomClosed {
+ padding: 20px 35px 20px 34px;
+ box-sizing: border-box;
+ height: 59px;
+}
+
+@keyframes closing {
+ 0% {
+ height: 270px;
+ }
+ 100% {
+ height: 59px;
+ }
+}
+
+.open {
+ display: flex;
+ flex-direction: column;
+}
+
+.closed {
+ display: none;
+}
+
+.aboutBottom div a {
+ text-decoration: none;
+ color: white;
+ margin-bottom: 11px;
+ font-size: 1.1em;
+ font-family: "GT Medium";
+ animation: fadeIn 0.35s ease-in-out forwards;
+}
+
+@keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+.aboutBottom div h4 {
+ line-height: 1.2;
+ font-size: 0.9em;
+ letter-spacing: 1px;
+ margin-bottom: 10px;
+ color: #999999;
+ font-family: "GT Light";
+ animation: fadeIn 0.35s ease-in-out forwards;
+}
+
+.buttonNotHovered,
+.buttonHovered {
+ width: 20%;
+ cursor: pointer;
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ align-self: flex-end;
+ background-color: transparent;
+ border: 1px transparent;
+ font-family: "GT Medium";
+ font-size: 1.025em;
+ gap: 4px;
+ transition: 0.2s all;
+}
+
+.buttonHovered *,
+.buttonNotHovered * {
+ pointer-events: none;
+}
+
+.buttonHovered {
+ color: #fff;
+}
+
+.buttonNotHovered {
+ color: #cccccc;
+}
+
+.aboutBottom button:active {
+ transform: scale(0.9);
+}
+
+.up,
+.down {
+ fill: #CCCCCC;
+ height: 16px;
+}
+
+.down {
+ transform: rotate(180deg);
+}
+
+::-webkit-scrollbar {
+ width: 7px;
+ }
+
+
+ ::-webkit-scrollbar-track {
+ background: transparent;
+
+ }
+
+
+ ::-webkit-scrollbar-thumb {
+ background: #888;
+ border-radius: 10px;
+ }
+
+
+ ::-webkit-scrollbar-thumb:hover {
+ background: #555;
+ }
+
+.addToCart {
+ background: #1A1A1A;
+ padding: 20px 30px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-radius: 15px;
+ box-sizing: border-box;
+ width: 110%;
+}
+
+.addToCart h3 {
+ font-family: "GT Light";
+ font-size: 18px;
+ letter-spacing: 1px;
+}
+
+.addToCart button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 22px;
+ font-family: "GT Medium";
+ gap: 12px;
+ background-color: transparent;
+ border: 1px transparent;
+ color: #999999;
+ transition: 0.25s all;
+ cursor: pointer;
+}
+
+.addToCart button * {
+ pointer-events: none;
+}
+
+.addToCart button:active {
+ transform: scale(0.925);
+}
+
+.add {
+ height: 18px;
+ padding-top: 3px;
+ fill: #999999;
+ transition: 0.25s all;
+ pointer-events: none;
+}
+
+.infos {
+ display: flex;
+ gap: 14px;
+ align-items: center;
+}
+
+.infos h3 {
+ color: #ccc;
+ font-family: "GT Light";
+}
+
+.infos button {
+ width: 26px;
+ height: 26px;
+}
+
+.like,
+.liked {
+ cursor: pointer;
+ width: 25px;
+ height: 25px;
+}
+
+.like {
+ fill: #999;
+
+ transition-duration: 0.3s;
+}
+
+.liked {
+ fill: #F53333;
+ transition-duration: 0.3s;
+}
+
+@media screen and (max-width: 1770px) {
+ .gameInfo {
+ width: 35%;
+ }
+
+ .aboutTop {
+ height: 200px;
+ }
+
+ .aboutBottom {
+ height: 210px !important;
+ font-size: 12px !important;
+ animation: opening 0.5s ease-in-out forwards;
+ }
+}
+
+@media screen and (max-width: 1530px) {
+ .gameInfo {
+ width: 28%;
+ }
+
+ .aboutBottom {
+ height: 220px !important;
+ font-size: 12px !important;
+ animation: opening 0.5s ease-in-out forwards;
+ }
+}
+
+@media screen and (max-width: 1400px) {
+ .game {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .gamepage {
+ overflow: scroll;
+ }
+
+ .gameInfo {
+ width: 91%;
+ }
+
+ .aboutBottom,
+ .aboutBottomClosed {
+ margin-bottom: 15px;
+ }
+
+ .open a,
+ .open h4,
+ .buttonHovered,
+ .buttonNotHovered {
+ font-size: 18px !important;
+ }
+
+ .aboutBottom {
+ height: 280px !important;
+ font-size: 12px !important;
+ animation: opening 0.5s ease-in-out forwards;
+ padding-top: 40px;
+ }
+}
+
+@media screen and (max-width: 1100px) {
+ .aboutTop {
+ height: 240px !important;
+ }
+}
+
+@media screen and (max-width: 1000px) {
+ header h1 {
+ font-size: 40px;
+ }
+}
+
+@media screen and (max-width: 825px) {
+ header h1 {
+ font-size: 32px;
+ }
+
+ .aboutTop {
+ height: 270px !important;
+ }
+
+ .aboutBottom {
+ height: 295px !important;
+ font-size: 12px !important;
+ animation: opening 0.5s ease-in-out forwards;
+ padding-top: 40px;
+ }
+}
+
+@media screen and (max-width: 675px) {
+ header h1 {
+ font-size: 26px;
+ }
+}
+
+@media screen and (max-width: 590px) {
+ header h1 {
+ font-size: 20px;
+ padding-top: 6px;
+ }
+}
+
+@media screen and (max-width: 590px) {
+ header h1 {
+ font-size: 20px;
+ padding-top: 6px;
+ }
+
+ .gamepageContent {
+ padding: 30px 25px;
+ }
+
+ .aboutTop {
+ padding: 30px 40px 30px 34px;
+ }
+
+ .open a,
+ .open h4,
+ .buttonHovered,
+ .buttonNotHovered {
+ font-size: 16px !important;
+ }
+}
+
+@media screen and (max-width: 450px) {
+ .game {
+ gap: 15px;
+ }
+
+ .aboutTop {
+ height: 320px !important;
+ }
+
+ header h1 {
+ font-size: 17px;
+ padding-top: 3px;
+ }
+
+ .goBack {
+ font-size: 20px;
+ }
+
+ .aboutBottom {
+ height: 330px !important;
+ font-size: 12px !important;
+ animation: opening 0.5s ease-in-out forwards;
+ padding-top: 40px;
+ }
+}
+
+@media screen and (max-width: 400px) {
+ header h1 {
+ font-size: 14px;
+ padding-top: 3px;
+ }
+
+ header {
+ gap: 20px;
+ }
+}
+
+@media screen and (max-width: 360px) {
+ .aboutBottom {
+ height: 320px !important;
+ }
+
+ .open a,
+ .open h4,
+ .buttonHovered,
+ .buttonNotHovered {
+ font-size: 14px !important;
+ }
+
+ .addToCart {
+ gap: 20px;
+ }
+
+ .addToCartButton {
+ font-size: 16px !important;
+ }
+}
+
+@media screen and (max-width: 308px) {
+ .aboutBottom {
+ height: 370px !important;
+ }
+}
\ No newline at end of file
diff --git a/src/Pages/GameStore/GameComponent.jsx b/src/Pages/GameStore/GameComponent.jsx
new file mode 100644
index 00000000..6c0980b4
--- /dev/null
+++ b/src/Pages/GameStore/GameComponent.jsx
@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import React from 'react';
+import "react-slideshow-image/dist/styles.css";
+
+const GameComponent = props => {
+
+ const GameComponentContainer = styled.div`
+ background: whitesmoke;
+ border-radius: 12px;
+ height: 90%;
+ width: 85%;
+`;
+
+ return (
+
+
+
+
+
+
+
+ {currentGame ? (
+
+ {/* {currentGame.isSelected ?
+
+ {currentGame ? currentGame.name : templateGame.name}
+{currentGame.link}
*/}
+ {/* : false
} */} +
+
+
+
+
+
+
+ About
+{currentGame ? currentGame.desc : templateGame.desc}
+
+
+
+
+
+
+
+
+ {currentGame ? currentGame.name : "No"} Website
+
+
+ + Released:{" "} + {currentGame + ? currentGame.release + : templateGame.release} +
++ Platforms:{" "} + {currentGame + ? currentGame.platforms + : templateGame.platforms} +
++ Main Genre:{" "} + {currentGame ? currentGame.genre : templateGame.genre} +
++ Developers:{" "} + {currentGame + ? currentGame.developers + : templateGame.developers} +
++ Publishers:{" "} + {currentGame + ? currentGame.publishers + : templateGame.publishers} +
+
+
+
+
+ {/* {selectedGame ? selectedGame.inCart ? + ${currentGame ? currentGame.price : templateGame.price} +
+ +
+ {overlap ? (
+
+ );
+};
+
+export default GameHome;
diff --git a/src/Pages/GameStore/Grid.jsx b/src/Pages/GameStore/Grid.jsx
new file mode 100644
index 00000000..a9bd7b88
--- /dev/null
+++ b/src/Pages/GameStore/Grid.jsx
@@ -0,0 +1,93 @@
+import styles from './Grid.module.css';
+import React, { useEffect } from 'react';
+import Card from './Card';
+import { Link } from "react-router-dom";
+
+const Grid = props => {
+ const {
+ shownGames,
+ reviewDisplay,
+ handleLike,
+ handleHoverGame,
+ hoverState,
+ grid,
+ search,
+ cartDisplayed,
+ searching,
+ handleSelectGame,
+ } = props;
+
+ useEffect(() => {
+ if (grid === false) {
+ if (document.getElementsByClassName('gridContainer')) {
+ let grid = document.getElementById('gridContainer')
+ grid.className = styles.noGrid
+ }
+ } else if (grid) {
+ if (document.getElementById('gridContainer').className === styles.noGrid) {
+ let grid = document.getElementById('gridContainer')
+ grid.className = styles.gridContainer
+ }
+ }
+ }, [grid])
+
+ return (
+ <>
+
+
+ {/*
+
+
+
+
+
+
+
+
+
+ Game Corner
++ Welcome to Dom's game corner, the best destination to play react + online games. I have classic games, responsive support, and a + flawless UX. Wish for more? Tell me {""} + below +
+
+
+
+ 
+ Technologies
+
+
+
+
+ Quick Navigation
+ +
+
+ There are no reviews yet!
+You can add some, soon.
+
+ {
+ shownGames.map((game, i) => {
+
+ // return
+ return
+
+ );
+ }
+
+ export default Grid;
\ No newline at end of file
diff --git a/src/Pages/GameStore/Grid.module.css b/src/Pages/GameStore/Grid.module.css
new file mode 100644
index 00000000..19c68559
--- /dev/null
+++ b/src/Pages/GameStore/Grid.module.css
@@ -0,0 +1,175 @@
+.gridContainer {
+ margin-top: 25px;
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr 1fr;
+ grid-template-rows: 320px;
+ grid-auto-rows: 320px;
+ grid-gap: 20px;
+ padding-bottom: 50px;
+}
+
+.noGrid {
+ padding-top: 35px;
+ display: grid;
+ margin: 0 auto;
+ grid-template-columns: 500px;
+ grid-auto-columns: 500px;
+ grid-template-rows: 400px;
+ grid-auto-rows: 400px;
+ grid-gap: 20px;
+ padding-bottom: 50px;
+}
+
+.reviews {
+ margin-top: 30px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.reviews h2 {
+ font-size: 3em;
+ font-family: "GT Bold";
+ color: white;
+}
+
+.reviews h3 {
+ color: #ccc;
+}
+
+@media screen and (max-width: 1700px) {
+ .gridContainer {
+ grid-template-rows: 290px;
+ grid-auto-rows: 290px;
+ }
+}
+
+@media screen and (max-width: 1450px) {
+ .gridContainer {
+ grid-template-rows: 325px;
+ grid-auto-rows: 325px;
+ grid-template-columns: 1fr 1fr 1fr;
+ }
+}
+
+@media screen and (max-width: 1350px) {
+ .gridContainer {
+ grid-template-rows: 305px;
+ grid-auto-rows: 305px;
+ }
+}
+
+@media screen and (max-width: 1240px) {
+ .gridContainer {
+ grid-template-rows: 290px;
+ grid-auto-rows: 290px;
+ }
+}
+
+@media screen and (max-width: 1240px) {
+ .gridContainer {
+ grid-template-rows: 370px;
+ grid-auto-rows: 370px;
+ grid-template-columns: 1fr 1fr;
+ }
+}
+
+@media screen and (max-width: 1100px) {
+ .gridContainer {
+ grid-template-rows: 355px;
+ grid-auto-rows: 355px;
+ }
+}
+
+@media screen and (max-width: 1050px) {
+ .gridContainer {
+ grid-template-rows: 330px;
+ grid-auto-rows: 330px;
+ }
+}
+
+@media screen and (max-width: 975px) {
+ .gridContainer {
+ grid-template-rows: 285px;
+ grid-auto-rows: 285px;
+ }
+}
+
+@media screen and (max-width: 840px) {
+ .gridContainer {
+ grid-template-rows: 270px;
+ grid-auto-rows: 270px;
+ }
+}
+
+@media screen and (max-width: 800px) {
+ .gridContainer {
+ grid-template-rows: 250px;
+ grid-auto-rows: 250px;
+ }
+}
+
+@media screen and (max-width: 770px) {
+ .gridContainer {
+ grid-template-rows: 390px;
+ grid-auto-rows: 390px;
+ grid-template-columns: 1fr;
+ }
+}
+
+@media screen and (max-width: 710px) {
+ .gridContainer {
+ grid-template-rows: 360px;
+ grid-auto-rows: 360px;
+ }
+}
+
+@media screen and (max-width: 635px) {
+ .gridContainer {
+ grid-template-rows: 335px;
+ grid-auto-rows: 335px;
+ }
+}
+
+@media screen and (max-width: 600px) {
+ .gridContainer {
+ grid-template-rows: 450px;
+ grid-auto-rows: 450px;
+ }
+}
+
+@media screen and (max-width: 525px) {
+ .gridContainer {
+ grid-template-rows: 420px;
+ grid-auto-rows: 420px;
+ }
+}
+
+@media screen and (max-width: 475px) {
+ .gridContainer {
+ grid-template-rows: 390px;
+ grid-auto-rows: 390px;
+ }
+}
+
+@media screen and (max-width: 425px) {
+ .gridContainer {
+ grid-template-rows: 340px;
+ grid-auto-rows: 340px;
+ }
+}
+
+@media screen and (max-width: 375px) {
+ .gridContainer {
+ grid-template-rows: 310px;
+ grid-auto-rows: 310px;
+ }
+}
+
+@media screen and (max-width: 320px) {
+ .gridContainer {
+ grid-template-rows: 285px;
+ grid-auto-rows: 285px;
+ }
+}
\ No newline at end of file
diff --git a/src/Pages/GameStore/Home.module.css b/src/Pages/GameStore/Home.module.css
new file mode 100644
index 00000000..a9bd402e
--- /dev/null
+++ b/src/Pages/GameStore/Home.module.css
@@ -0,0 +1,275 @@
+
+
+* {
+ margin: 0;
+ padding: 0;
+}
+
+.overlap {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-color: #0f1011;
+ z-index: 10;
+}
+
+html,
+body {
+ margin: 0;
+ width: 100vw;
+}
+
+.parent * {
+ pointer-events: none;
+}
+
+.container {
+ display: flex;
+ justify-content: space-between;
+}
+
+.careers {
+ color: #45c1bc;
+ font-family: "GT Medium";
+ cursor: pointer;
+}
+
+a {
+ text-decoration: none;
+}
+.left,
+.right {
+ width: 50vw;
+ height: 90vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+.right {
+ align-items: flex-end;
+}
+
+.left .buttons .browseBtn {
+ background-color: #45c1bc;
+}
+
+.buttonsRight {
+ margin-right: 40px;
+ position: relative;
+ border-radius: 20px;
+ padding: 22px 30px 30px 30px;
+ box-sizing: border-box;
+ gap: 5px;
+ display: flex;
+ flex-direction: column;
+ backdrop-filter: blur(6px);
+}
+
+.buttonsRight button {
+ width: 100%;
+ justify-content: flex-start;
+ padding-left: 48px;
+ gap: 15px;
+}
+
+.buttonsRight h2 {
+ font-size: 26px;
+ margin-bottom: 14px;
+}
+
+.technologies {
+ height: 18px;
+ width: 18px;
+}
+
+.video {
+ position: fixed;
+ right: 0;
+ bottom: 0;
+ min-width: 100%;
+ min-height: 100%;
+ z-index: -1;
+ background-attachment: fixed;
+ }
+
+.splash {
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ width: 630px;
+ height: 240px;
+ box-sizing: border-box;
+ padding: 22px 35px 55px 50px;
+ margin-left: 44px;
+ border-radius: 30px;
+ z-index: 6;
+ backdrop-filter: blur(8px);
+}
+
+.buttons {
+ display: flex;
+ position: relative;
+ width: fit-content;
+
+ height: 70px;
+ box-sizing: border-box;
+ padding: 14px 20px 15px 20px;
+ margin-left: 44px;
+ margin-top: 15px;
+ border-radius: 30px;
+ z-index: 6;
+ backdrop-filter: blur(8px);
+ justify-content: space-between;
+ gap: 0.5rem;
+}
+
+.cta {
+ background-color: #fff;
+ border: 1px transparent;
+ border-radius: 18px;
+ color: black;
+ padding: 10px 28px;
+ display: flex;
+ gap: 12px;
+ font-family: "GT Medium";
+ font-size: 16px;
+ transition: 0.3s all;
+ cursor: pointer;
+}
+
+.cta:hover {
+ transform: scale(1.03);
+ background-color: #45c1bc;
+}
+
+.cta * {
+ pointer-events: none;
+}
+
+.cta .linkedin {
+ padding-bottom: 1px;
+}
+
+.lastChild {
+ gap: 10px;
+}
+
+.cta span {
+ padding-top: 1px;
+}
+
+.ctaSVG {
+ height: 18px;
+ width: 18px;
+}
+
+.buttons::after,
+.splash::after,
+.buttonsRight::after {
+ content: "";
+ position: absolute;
+ border-radius: 30px;
+ inset: 0.01%;
+ height: inherit;
+ /* width: inherit; */
+ z-index: -1;
+ background-color: white;
+ opacity: 0.285;
+}
+
+.intro {
+ color: white;
+ padding-left: 5px;
+ font-family: "GT Regular";
+ font-size: 19px;
+ opacity: 1;
+}
+
+.splash h1 {
+ font-family: "GT Bold";
+ font-size: 90px;
+ color: white;
+}
+
+.home h2 {
+ color: white;
+ font-family: "GT Bold";
+}
+
+@media only screen and (max-width: 1000px) {
+ .container {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ }
+
+ .left,
+ .right {
+ width: auto;
+ height: auto;
+ margin-top: 100px;
+ }
+
+ .buttonsRight,
+ .buttons,
+ .splash {
+ margin-right: 0px;
+ margin-left: 0px;
+ }
+}
+
+@media screen and (max-width: 700px) {
+ .left,
+ .splash {
+ width: 450px;
+ }
+
+ .right {
+ margin-top: 20px;
+ margin-bottom: 100px;
+ }
+
+ .buttons {
+ width: 276px;
+ height: 190px;
+ align-self: center;
+ flex-direction: column;
+ }
+
+ .buttons button {
+ width: 100%;
+ gap: 20px;
+ padding-left: 75px;
+ }
+
+ .splash {
+ height: 225px;
+ }
+
+ .splash h1 {
+ font-size: 56px;
+ }
+}
+
+@media screen and (max-width: 500px) {
+ .left,
+ .splash {
+ width: 276px;
+ }
+
+ .splash {
+ padding: 10px 35px 10px 35px;
+ height: 60px;
+ justify-content: center;
+ }
+
+ .splash h1 {
+ font-size: 36px;
+ }
+
+ .splash p {
+ display: none;
+ }
+}
diff --git a/src/Pages/GameStore/NavBar.jsx b/src/Pages/GameStore/NavBar.jsx
new file mode 100644
index 00000000..821c383e
--- /dev/null
+++ b/src/Pages/GameStore/NavBar.jsx
@@ -0,0 +1,142 @@
+import React, { useState } from 'react';
+import styles from './NavBar.module.css';
+import { ReactComponent as Logo } from "./image/logo.svg";
+import { ReactComponent as Browse } from "./image/browse.svg";
+import { ReactComponent as Cart } from "./image/cart.svg";
+import { ReactComponent as GitHub } from "./image/github.svg";
+import { ReactComponent as Search } from "./image/search.svg";
+import { motion } from "framer-motion";
+
+const NavBar = props => {
+ const {
+ handleHover,
+ hoverState,
+ handleHome,
+ handleBrowse,
+ browsing,
+ // landingPage,
+ // cart,
+ cartAmount,
+ search,
+ searching,
+ handleSearch,
+ handleSearchSubmit,
+ handleOpenCart,
+ handleCloseCart
+ } = props;
+
+ const variants = {
+ hidden: { opacity: 1, y: 15 },
+ visible: { opacity: 1, y: 0 },
+ }
+
+ const searchVariants = {
+ hidden: { opacity: 0 },
+ visible: { opacity: 1 },
+ }
+
+// const location = useLocation();
+
+ return (
+ <>
+
+
+
+
+
+
+ Game Corner
+
+ {/* {browsing ?
+ <>
+
+
+
+
+
+ :
+
+
+
+
+ } */}
+ Browse Store
+
+
+
+
+
+ {/* HoseaCodes
+
+
*/}
+ Cart: {cartAmount}
+
+
+ {selectedGame ? slideImages.map((each, index) => (
+
+
+
+
+
+
+ );
+}
+
+export default Slider;
\ No newline at end of file
diff --git a/src/Pages/GameStore/Slider.module.css b/src/Pages/GameStore/Slider.module.css
new file mode 100644
index 00000000..dfe22a06
--- /dev/null
+++ b/src/Pages/GameStore/Slider.module.css
@@ -0,0 +1,152 @@
+.slider {
+ width: 67.5%;
+ height: 100%;
+ position: relative;
+ box-sizing: border-box;
+}
+
+.slide {
+ height: 100%;
+}
+
+.currentImg {
+ width: 100%;
+ height: 100%;
+ border-radius: 20px;
+}
+
+.currentImg {
+ -webkit-user-drag: none;
+ user-select: none;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+}
+
+.currentImg {
+ cursor: move;
+ cursor: grab;
+ cursor: -moz-grab;
+ cursor: -webkit-grab;
+}
+
+.currentImg:active {
+ cursor: grabbing;
+ cursor: -moz-grabbing;
+ cursor: -webkit-grabbing;
+}
+
+.forward,
+.backwards {
+ height: 100%;
+ top: 0%;
+ width: 48px;
+ position: absolute;
+ background-color: transparent;
+ border: 1px transparent;
+}
+
+.left,
+.right {
+ transition: 0.3s all;
+}
+
+.selectorContainer button * {
+ pointer-events: none;
+}
+
+.forward *,
+.backwards * {
+ pointer-events: none;
+}
+
+.backwards {
+ left: 2%;
+ fill: #ccc;
+}
+
+.forward {
+ right: 1.5%;
+ fill: #ccc;
+}
+
+.forward,
+.backwards {
+ cursor: pointer;
+ transition: 0.3s all;
+}
+
+.forward:active,
+.backwards:active {
+ transform: scale(0.9);
+}
+
+.selectorContainer {
+ position: absolute;
+ bottom: 1.5%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 136px;
+ border-radius: 10px;
+ padding: 11px 18px;
+ height: 34px;
+ box-sizing: border-box;
+ background-color: #0F1011;
+ opacity: 0.8;
+ transition: 0.75s all;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.selectorContainer:hover {
+ opacity: 1;
+}
+
+.button {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ padding-bottom: 1px;
+ background-color: #474747;
+ transition: 0.3s all;
+ border: 1px transparent;
+ cursor: pointer;
+}
+
+.button:hover {
+ background-color: #999;
+ transition-duration: 0.6s;
+}
+
+.buttonSelected {
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ border: 1px transparent;
+ padding-bottom: 2px;
+ background-color: #92f;
+ transition-duration: 0.6s;
+ cursor: pointer;
+}
+
+@media screen and (max-width: 1770px) {
+ .slider {
+ width: 60%;
+
+ }
+}
+
+@media screen and (max-width: 1530px) {
+ .slider {
+ width: 67.5%;
+
+ }
+}
+
+@media screen and (max-width: 1400px) {
+ .slider {
+ width: 100%;
+
+ }
+}
\ No newline at end of file
diff --git a/src/Pages/GameStore/games.js b/src/Pages/GameStore/games.js
new file mode 100644
index 00000000..864a0e4e
--- /dev/null
+++ b/src/Pages/GameStore/games.js
@@ -0,0 +1,863 @@
+import TicTacToe from "../../Components/Games/TicTacToe/tictactoe";
+import SpaceInvaders from '../../Components/Games/SpaceInvaders/spaceinvaders';
+import Pacman from '../../Components/Games/Pacman/pacman';
+import SweetCrush from '../../Components/Games/SweetCrush/sweetcrush';
+import ConnectFourGame from '../../Components/Games/ConnectFour/index';
+import Birds from "../../Components/Games/BirdShooter/birds";
+import WackMole from "../../Components/Games/WackMole/wackmole";
+
+const games = [
+ {
+ name: "Test 2077",
+ surname: "cyberpunk",
+ price: "59.99",
+ desc: 'Cyberpunk 2077 is a continuation of the events of Cyberpunk 2020, taking an alternate path to that of Cyberpunk V3.0. The game is set in the dystopian metropolis of Night City. It is set in the Free State of Northern California. Night City is located south of San Francisco around the area of Morro Bay, CA. During Cyberpunk 2020, Night City is said to have a population of more than five million inhabitants. However, this number is suspected to be considerably larger in 2077. Following an economic collapse sometime during the early 21st century, the United States is forced to rely on large corporations to survive. These corporations deal in a wide range of areas, such as weapons, robotics, cybernetics, pharmaceuticals, communications, and biotechnology; many of these companies operate above the law. The game follows the story of V — a hired gun on the rise in Night City, the most violent and dangerous metropolis of the corporate-ruled future. A robust character creator will allow players to choose Vs gender, visual appearance, as well as historical background — all of which may influence the shape of the game. The world is inspired by the works of authors such as William Gibson (author of Neuromancer) and Phillip K Dick, whose novel Do Androids Dream of Electric Sheep? and subsequent movie adaption Blade Runner heavily influenced the creator, Mike Pondsmith, in creating the original tabletop RPG.',
+ link: 'https://www.cyberpunk.net/',
+ release: '10th of December, 2020',
+ platforms: 'Playstation 4, PC, Xbox Series S/X, Playstation 5, Xbox One',
+ genre: 'RPG',
+ developers: 'CD PROJECT RED, CD PROJECT',
+ publishers: 'CD PROJECT RED',
+ inCart: false,
+ selected: false,
+ isHovered: false,
+ isLiked: false,
+ rating: 78,
+ id: 0,
+ cover: "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_500/v1658188604/cyberpunk_n6jitl.jpg",
+ footage: [
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658188604/cyberpunk_n6jitl.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_1920/v1658235373/cyberpunk_1_s00vwf.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_1920/v1658235372/cyberpunk_2_mq46xm.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_1920/v1658235378/cyberpunk_3_fajdmi.jpg"
+ ]
+ },
+ {
+ name: "Battlefield V",
+ surname: "battlefield",
+ price: "29.99",
+ desc: 'The Battlefield series goes back to its roots in a never-before-seen portrayal of World War 2. Take on physical, all-out multiplayer with your squad in modes like the vast Grand Operations and the cooperative Combined Arms, or witness human drama set against global combat in the single player War Stories. As you fight in epic, unexpected locations across the globe, enjoy the richest and most immersive Battlefield yet.',
+ link: 'https://www.origin.com/store/battlefield/battlefield-v',
+ release: '9th of November, 2018',
+ platforms: 'Playstation 4, PC, Xbox Series S/X, Xbox One',
+ genre: 'Shooter',
+ developers: 'EA Digital Illusions CE',
+ publishers: 'Electronic Arts',
+ inCart: false,
+ selected: false,
+ isHovered: false,
+ isLiked: false,
+ rating: 71,
+ id: 1,
+ cover: "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_500/v1658188621/battlefield_n0gd5a.jpg",
+ footage: [
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658188621/battlefield_n0gd5a.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658235437/battlefield_1_jpudhq.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658235437/battlefield_3_zy9ewv.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658235438/battlefield_2_txs230.jpg"
+ ]
+ },
+ {
+ name: "Life is Strange",
+ surname: "lis",
+ price: "14.99",
+ desc: 'Life Is Strange is a five-part episodic game that sets out to revolutionize story-based choice and consequence games by allowing the player to rewind time and affect the past, present, and future. You are Max, a photography senior who saves her old friend Chloe by discovering she can rewind time. The pair soon find themselves exposed to the darker side of Arcadia Bay as they uncover the disturbing truth behind the sudden disappearance of a fellow student. Meanwhile, Max begins to have premonitions as she struggles to understand the implications of her power. She must quickly learn that changing the past can sometimes lead to a devastating future.',
+ link: 'https://lifeisstrange.square-enix-games.com/',
+ release: '30th of January, 2015',
+ platforms: 'Playstation 4, PC, Xbox One, Xbox 360, Playstation 3',
+ genre: 'Adventure',
+ developers: 'Dontnod Entertainment',
+ publishers: 'Square Enix',
+ inCart: false,
+ selected: false,
+ isHovered: false,
+ isLiked: false,
+ rating: 83,
+ id: 2,
+ cover: "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_500/v1658188606/lis_ft0puo.jpg",
+ footage: [
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658188606/lis_ft0puo.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658236055/lis_1_rkrxt5.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658236272/lis_2_dcrdwz.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658236055/lis_3_komskf.jpg"
+ ]
+ },
+ {
+ name: "Mario Kart 8: Deluxe",
+ surname: "mariokart",
+ price: "24.99",
+ desc: 'Hit the road with the definitive version of Mario Kart 8 and play anytime, anywhere! Race your friends or battle them in a revised battle mode on new and returning battle courses. Play locally in up to 4-player multiplayer in 1080p while playing in TV Mode. Every track from the Wii U version, including DLC, makes a glorious return. Plus, the Inklings appear as all-new guest characters, along with returning favorites, such as King Boo, Dry Bones, and Bowser Jr.!',
+ link: 'https://mariokart8deluxe.nintendo.com/',
+ release: '28th of April, 2017',
+ platforms: 'Nintendo Switch',
+ genre: 'Racing',
+ developers: 'Nintendo EAD',
+ publishers: 'Nintendo',
+ inCart: false,
+ selected: false,
+ isHovered: false,
+ isLiked: false,
+ rating: 84,
+ id: 3,
+ cover: "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_500/v1658232678/mariokart_0_mhgbeg.jpg",
+ footage: [
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658232678/mariokart_0_mhgbeg.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_1920/v1658236315/mariokart_1_heekfq.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_1920/v1658236316/mariokart_3_yzhdje.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658236315/mariokart_2_peeyho.jpg"
+ ]
+ },
+ {
+ name: "BioShock Infinite",
+ surname: "bioshockinfinite",
+ price: "18.99",
+ desc: 'This first-person story-driven shooter and entry in the Bioshock franchise follows Booker DeWitt as he enters the floating independent (formerly US) city of Columbia in 1912 and attempts to retrieve a girl trapped in a tower by the citys self-proclaimed despot/prophet in order to erase his financial debt. Throughout the story, themes of violence, racism and fatalism are brought up. Viewer & User Discretion is advised.',
+ link: 'https://2k.com/en-US/game/bioshock-infinite/',
+ release: '26th of February, 2013',
+ platforms: 'Xbox One, PlayStation 4, Linux, Xbox 360, PC, Nintendo Switch, PlayStation 3',
+ genre: 'Puzzle',
+ developers: 'Irrational Games',
+ publishers: '2K Games',
+ inCart: false,
+ selected: false,
+ isHovered: false,
+ isLiked: false,
+ rating: 86,
+ id: 4,
+ cover: "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_500/v1658188602/bioshockinfinite_qyo3pi.jpg",
+ footage: [
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658188602/bioshockinfinite_qyo3pi.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658236359/bioshockinfinite_1_vutin0.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658236360/bioshockinfinite_2_bphusb.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658236361/bioshockinfinite_3_v1ckvh.jpg"
+ ]
+ },
+ {
+ name: "Anno: 1800",
+ surname: "anno",
+ price: "12.99",
+ desc: 'Anno 1800 takes place in the 19th century at the dawn of the Industrial Age. Like other Anno games, Anno 1800 is a city-building and strategy game. While it is set in the context of colonial trade, the featured architecture is Victorian Era and the economic engine is factory labor. The core gameplay of Anno 1800 takes place in the Old World, where the needs of the citizens, workers and artisans are central to the management of production and supply chains. A parallel New World city exists, which produces products that laborers in the Old World want to purchase, thus trade routes need to be established. Unlike its colonial 18th century predecessor Anno 1701, the game has a blueprint feature that helps the player to plan out the city.',
+ link: 'https://anno-union.com/',
+ release: '16th of April, 2019',
+ platforms: 'PC (Microsoft Windows)',
+ genre: 'Strategy',
+ developers: 'Blue Byte',
+ publishers: 'Ubisoft',
+ inCart: false,
+ selected: false,
+ isHovered: false,
+ isLiked: false,
+ rating: 81,
+ id: 5,
+ cover: "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_500/v1658188622/anno_cbmzye.jpg",
+ footage: [
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658188622/anno_cbmzye.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658236405/anno_1_bpil6t.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_1920/v1658236405/anno_2_udh5ep.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658236405/anno_3_hoqcp0.jpg"
+ ]
+ },
+ {
+ name: "Red Dead Redemption 2",
+ surname: "rdr",
+ price: "34.99",
+ desc: 'America, 1899. The end of the Wild West era has begun. After a robbery goes badly wrong in the western town of Blackwater, Arthur Morgan and the Van der Linde gang are forced to flee. With federal agents and the best bounty hunters in the nation massing on their heels, the gang must rob, steal and fight their way across the rugged heartland of America in order to survive. As deepening internal divisions threaten to tear the gang apart, Arthur must make a choice between his own ideals and loyalty to the gang who raised him.',
+ link: 'https://www.rockstargames.com/reddeadredemption2',
+ release: '26th of October, 2018',
+ platforms: 'Xbox One, PlayStation 4, PC, Google Stadia',
+ genre: 'RPG',
+ developers: 'Rockstar Studios',
+ publishers: 'Rockstar Games',
+ inCart: false,
+ selected: false,
+ isHovered: false,
+ isLiked: false,
+ rating: 92,
+ id: 6,
+ cover: "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_500/v1658188613/rdr_fhqs3d.jpg",
+ footage: [
+ "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,w_1920/v1658188613/rdr_fhqs3d.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658236494/rdr_3_euhfwh.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_1920/v1658236495/rdr_2_aodums.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658236494/rdr_1_v6xhov.jpg"
+ ]
+ },
+ {
+ name: "Horizon Zero Dawn",
+ surname: "horizon",
+ price: "29.99",
+ desc: 'Horizon Zero Dawn takes place in the 31st century, in a post-apocalyptic world where colossal machines dominate the land. Human civilization has regressed to tribal societies of hunters and gatherers who survive in immense forests, imposing mountain ranges, and the atmospheric ruins of their ancestors – all while the machines become increasingly powerful. The player controls Aloy, a huntress who uses her speed, cunning, and agility to stay alive and protect herself and others against the force, size, and power of the machines. The game features sci-fi and mythical elements.',
+ link: 'https://www.guerrilla-games.com/games',
+ release: '28th of February, 2017',
+ platforms: 'PlayStation 4, PC',
+ genre: 'Adventure',
+ developers: 'Guerrilla Games',
+ publishers: 'Sony Interactive Entertainment',
+ inCart: false,
+ selected: false,
+ isHovered: false,
+ isLiked: false,
+ rating: 90,
+ id: 7,
+ cover: "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_500/v1658188606/horizon_jzlhsd.jpg",
+ footage: [
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658188606/horizon_jzlhsd.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_1920/v1658236576/horizon_3_vwjcpi.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658236574/horizon_2_ara05m.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_1920/v1658236574/horizon_1_johwym.jpg"
+ ]
+ },
+ {
+ name: "Grand Theft Auto: V",
+ surname: "gtav",
+ price: "39.99",
+ desc: 'Grand Theft Auto V is a vast open world game set in Los Santos, a sprawling sun-soaked metropolis struggling to stay afloat in an era of economic uncertainty and cheap reality TV. The game blends storytelling and gameplay in new ways as players repeatedly jump in and out of the lives of the games three lead characters, playing all sides of the games interwoven story.',
+ link: 'https://www.rockstargames.com/gta-v',
+ release: '17th of September, 2013',
+ platforms: 'Xbox One, PlayStation 4, Xbox 360, PlayStation 5, PC, PlayStation 3, Xbox Series S/X',
+ genre: 'Action',
+ developers: 'Rockstar North',
+ publishers: 'Rockstar Games',
+ inCart: false,
+ selected: false,
+ isHovered: false,
+ isLiked: false,
+ rating: 90,
+ id: 8,
+ cover: "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_500/v1658188604/gtav_x1ccio.jpg",
+ footage: [
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658188604/gtav_x1ccio.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658236641/gtav_1_gkelkb.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658236641/gtav_3_dswcgm.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658236641/gtav_2_b1xno6.jpg"
+ ]
+ },
+ {
+ name: "The Elder Scrolls: Skyrim",
+ surname: "skyrim",
+ price: "19.99",
+ desc: 'Two hundred years have passed since the events of The Elder Scrolls IV: Oblivion, and it is now 4E 201. The High King of Skyrim has been killed, and the threat of Civil War looms over the land of Skyrim; One side wishes to secede from the weakened Third Empire, while the other wishes to remain a part of it. To make matters worse, this schism is the final event in a prophecy foretold by the Elder Scrolls that will lead to the return of the dragons under Alduin, the Nordic god of destruction. The player starts the game on a cart heading for the chopping block after being caught with the Stormcloaks in an ambush by the Imperial Legion. As the player lays their head on the chopping block, the dragon Alduin attacks. In the midst of the chaos, Hadvar, several Stormcloaks, along with their leader and fellow prisoner, Ulfric Stormcloak, assist in the players escape. The player may choose between the assistance of Ralof, the Stormcloak who arrived with Ulfric, or Hadvar, the Imperial soldier tasked with reading off the names of the prisoners being sent to their execution. After assisting and gaining the favor of Jarl Balgruuf the Greater, The player later learns that they are Dovahkiin, or Dragonborn, a person charged with the duty of defeating Alduin and the dragons. Eventually, the player meets Delphine, and Esbern, two of the last remaining Blades, and becomes the pupil of the esteemed Greybeards of High Hrothgar.',
+ link: 'https://elderscrolls.bethesda.net/de/',
+ release: '10th of November, 2011',
+ platforms: 'Xbox 360, PC (Microsoft Windows), PlayStation 3',
+ genre: 'RPG',
+ developers: 'Bethesda Game Studios',
+ publishers: 'Bethesda Softworks',
+ inCart: false,
+ selected: false,
+ isHovered: false,
+ isLiked: false,
+ rating: 88,
+ id: 9,
+ cover: "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_500/v1658584215/skyrim_js5pmg.jpg",
+ footage: [
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658584215/skyrim_js5pmg.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658583241/skyrim_1_ludikr.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_1920/v1658583241/skyrim_2_zgnhf5.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_1920/v1658584731/maxresdefault_mciyjz.jpg"
+ ]
+ },
+ {
+ name: "Warframe",
+ surname: "warframe",
+ price: "5.99",
+ desc: 'Warframe situates players as members of the Tenno race, newly awoken after years of cryo-sleep into a solar system at war. Reborn into a corrupt era, the Tenno are sought by the oppressive Grineer Empire for annihilation. Warframe armor is the key to overthrowing the Grineer by providing players with unique offensive and defensive powers to explore, upgrade and master during purpose-driven radical raids.',
+ link: 'https://www.warframe.com/de/landing',
+ release: '25th of March, 2013',
+ platforms: 'Xbox One, PlayStation 4, PlayStation 5, PC, Nintendo Switch, Xbox Series S/X',
+ genre: 'Action',
+ developers: 'Digital Extremes',
+ publishers: 'Digital Extremes',
+ inCart: false,
+ selected: false,
+ isHovered: false,
+ isLiked: false,
+ rating: 76,
+ id: 10,
+ cover: "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_500/v1658188601/warframe_kghu8g.jpg",
+ footage: [
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658188601/warframe_kghu8g.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_1920/v1658236676/warframe_3_t2bwvx.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_1920/v1658236676/warframe_2_ihvoqj.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_1920/v1658236674/warframe_1_txaury.jpg"
+ ]
+ },
+ {
+ name: "Minecraft",
+ surname: "minecraft",
+ price: "25.99",
+ desc: 'Minecraft focuses on allowing the player to explore, interact with, and modify a dynamically-generated map made of one-cubic-meter-sized blocks. In addition to blocks, the environment features plants, mobs, and items. Some activities in the game include mining for ore, fighting hostile mobs, and crafting new blocks and tools by gathering various resources found in the game. The games open-ended model allows players to create structures, creations, and artwork on various multiplayer servers or their single-player maps. Other features include redstone circuits for logic computations and remote actions, minecarts and tracks, and a mysterious underworld called the Nether. A designated but completely optional goal of the game is to travel to a dimension called the End, and defeat the ender dragon.',
+ link: 'https://www.minecraft.net',
+ release: '15th of August, 2011',
+ platforms: 'Android, Linux, Mac, PC',
+ genre: 'Adventure',
+ developers: 'Mojang',
+ publishers: 'Mojang / Xbox Game Studios / Sony Interactive Entertainment',
+ inCart: false,
+ selected: false,
+ isHovered: false,
+ isLiked: false,
+ rating: 84,
+ id: 11,
+ cover: "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_500/v1658188606/minecraft_iuejtm.jpg",
+ footage: [
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658188606/minecraft_iuejtm.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658236747/minecraft_2_pqo4tv.png",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658236749/minecraft_1_vyp8bd.png",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658236744/minecraft_3_cea2dc.png"
+ ]
+ },
+ {
+ name: "Rise of the Tomb Raider",
+ surname: "riseofthetombraider",
+ price: "12.99",
+ desc: 'Rise of the Tomb Raider is a third-person action-adventure game in which players control Lara Croft, who is on a quest to discover the legendary city of Kitezh. Combat is a major gameplay mechanic; Lara has a large variety of weapons at her disposal (including assault rifles, shotguns, and pistols), some of which have an alternate firing mode. Players may also utilize stealth to progress through portions of the game, using bows and arrows to take out enemies, creating distractions to draw enemy attention away from Lara, or hiding in bushes to evade enemies. Lara can use the environment to fight enemies, shooting explosive barrels, tearing down rope-wrapped structures with rope arrows, or ambushing enemies from high ground. She can also use her ice axe and combat knife to engage in melee combat with enemies.',
+ link: 'https://tombraider.square-enix-games.com/en-us',
+ release: '10th of November, 2015',
+ platforms: 'Xbox One, PlayStation 4, Linux, Xbox 360, Mac, PC, Google Stadia',
+ genre: 'Adventure',
+ developers: 'Crystal Dynamics',
+ publishers: 'Microsoft Studios / Square Enix Europe',
+ inCart: false,
+ selected: false,
+ isHovered: false,
+ isLiked: false,
+ rating: 82,
+ id: 12,
+ cover: "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_500/v1658188610/riseofthetombraider_uq2q6t.jpg",
+ footage: [
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658188610/riseofthetombraider_uq2q6t.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_1920/v1658236831/riseofthetombraider_2_vvhbqe.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_1920/v1658236829/riseofthetombraider_1_bq8avn.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_1920/v1658236830/riseofthetombraider_3_xm9ggz.jpg"
+ ]
+ },
+ {
+ name: "Metro Exodus",
+ surname: "metro",
+ price: "37.99",
+ desc: 'Metro Exodus is an epic, story-driven first person shooter from 4A Games that blends deadly combat and stealth with exploration and survival horror in one of the most immersive game worlds ever created. Explore the Russian wilderness across vast, non-linear levels and follow a thrilling story-line that spans an entire year through spring, summer and autumn to the depths of nuclear winter. Inspired by the novels of Dmitry Glukhovsky, Metro Exodus continues Artyoms story in the greatest Metro adventure yet.',
+ link: 'https://www.metrothegame.com/de/',
+ release: '15th of February, 2019',
+ platforms: 'Xbox One, PlayStation 4, PlayStation 5, PC, Xbox Series S/X, Google Stadia',
+ genre: 'Shooter',
+ developers: '4A Games',
+ publishers: 'Deep Silver',
+ inCart: false,
+ selected: false,
+ isHovered: false,
+ isLiked: false,
+ rating: 83,
+ id: 13,
+ cover: "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_500/v1658188608/metro_o45ytf.jpg",
+ footage: [
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658188608/metro_o45ytf.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658236875/metro_1_mseeps.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_1920/v1658236878/metro_2_wtk9ux.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658236875/metro_3_y6ux12.jpg"
+ ]
+ },
+ {
+ name: "Terraria",
+ surname: "terraria",
+ price: "14.99",
+ desc: 'Dig, Fight, Explore, Build: The very world is at your fingertips as you fight for survival, fortune, and glory. Will you delve deep into cavernous expanses in search of treasure and raw materials with which to craft ever-evolving gear, machinery, and aesthetics? Perhaps you will choose instead to seek out ever-greater foes to test your mettle in combat? Maybe you will decide to construct your own city to house the host of mysterious allies you may encounter along your travels? In the World of Terraria, the choice is yours!',
+ link: 'https://terraria.org/',
+ release: '16th of May, 2011',
+ platforms: 'A lot.',
+ genre: 'Adventure',
+ developers: 'Re-Logic',
+ publishers: '505 Games',
+ inCart: false,
+ selected: false,
+ isHovered: false,
+ isLiked: false,
+ rating: 81,
+ id: 14,
+ cover: "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_500/v1658188609/terraria_yb3iuc.jpg",
+ footage: [
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658188609/terraria_yb3iuc.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658236904/terraria_1_sw79la.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658236905/terraria_2_kqpdyq.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658236905/terraria_3_wghczh.jpg"
+ ]
+ },
+ {
+ name: "Rocket League",
+ surname: "rocketleague",
+ price: "23.99",
+ desc: 'Rocket League is a high-powered hybrid of arcade-style soccer and vehicular mayhem with easy-to-understand controls and fluid, physics-driven competition. Rocket League includes casual and competitive Online Matches, a fully-featured offline Season Mode, special “Mutators” that let you change the rules entirely, hockey and basketball-inspired Extra Modes, and more than 500 trillion possible cosmetic customization combinations.',
+ link: 'https://www.rocketleague.com/',
+ release: '7th of July, 2015',
+ platforms: 'Xbox One, PlayStation 4, Linux, Mac, PlayStation 5, PC, Nintendo Switch, Xbox Series S/X',
+ genre: 'Sports',
+ developers: 'Psyonix',
+ publishers: 'Psyonix',
+ inCart: false,
+ selected: false,
+ isHovered: false,
+ isLiked: false,
+ rating: 83,
+ id: 15,
+ cover: "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_500/v1658188608/rocketleague_on6yqd.jpg",
+ footage: [
+ "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,w_1920/v1658188608/rocketleague_on6yqd.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_1920/v1658236932/rocketleague_2_oogr9i.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_1920/v1658236933/rocketleague_3_s6klzw.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658236929/rocketleague_1_qcslm3.jpg"
+ ]
+ },
+ {
+ name: "The Witcher 3: Wild Hunt",
+ surname: "thewitcher",
+ price: "19.99",
+ desc: 'RPG and sequel to The Witcher 2 (2011), The Witcher 3 follows witcher Geralt of Rivia as he seeks out his former lover and his young subject while intermingling with the political workings of the wartorn Northern Kingdoms. Geralt has to fight monsters and deal with people of all sorts in order to solve complex problems and settle contentious disputes, each ranging from the personal to the world-changing.',
+ link: 'https://www.thewitcher.com/en',
+ release: '19th of May, 2015',
+ platforms: 'Xbox One, PlayStation 4, PC, Nintendo Switch',
+ genre: 'RPG',
+ developers: 'CD PROJECT RED',
+ publishers: 'CD PROJECT',
+ inCart: false,
+ selected: false,
+ isHovered: false,
+ isLiked: false,
+ rating: 95,
+ id: 16,
+ cover: "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_500/v1658188610/thewitcher_tllr60.jpg",
+ footage: [
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658188610/thewitcher_tllr60.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658236962/thewitcher_2_tipggu.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658237770/witcher1_zgg86b.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658236962/thewitcher_3_kyoymo.jpg"
+ ]
+ },
+ {
+ name: "Hitman",
+ surname: "hitman",
+ price: "12.99",
+ desc: 'Become the Master Assassin in an intense spy-thriller story. As Agent 47, you perform contract hits on powerful, high-profile targets in exotic locations around the world. Gameplay focuses on taking out targets in huge and intricate sandbox levels with complete freedom of approach. Where to go, when to strike and who to kill – it is all up to you.',
+ link: 'https://hitman.com/global/',
+ release: '11th of March, 2016',
+ platforms: 'Xbox One, PlayStation 4, Linux, Mac, PC, Google Stadia',
+ genre: 'Strategy',
+ developers: 'IO Interactive',
+ publishers: 'Square Enix Europe',
+ inCart: false,
+ selected: false,
+ isHovered: false,
+ isLiked: false,
+ rating: 81,
+ id: 17,
+ cover: "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_500/v1658188605/hitman_pqhnm6.jpg",
+ footage: [
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658188605/hitman_pqhnm6.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658237949/hitman_yj2now.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658237835/hitman_2_s3d61k.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_1920/v1658237835/hitman_1_ny5whm.jpg"
+ ]
+ },
+ {
+ name: "Fallout 4",
+ surname: "fallout",
+ price: "26.99",
+ desc: 'The story of Fallout 4 focuses on a spouse, the Sole Survivor of Vault 111, as they search for their missing child, Shaun. Fallout 4 is set in and around the Boston area in 2287, 10 years after Fallout 3. Along the way, the Sole Survivor discovers a world in fear of a mysterious organization known as the Institute, consumed by paranoia of a race of robotic yet also biological human-like beings known as synths. As a result of the synth-focused narrative, the Sole Survivor, as well as the player, are faced with ethical questions such as how far people should experiment with science, the morality of creating sentient living machines that express emotions and suffering, and what it means to be human.',
+ link: 'https://fallout.bethesda.net/en/games/fallout-4',
+ release: '10th of November, 2015',
+ platforms: 'Xbox One, PlayStation 4, PC',
+ genre: 'RPG',
+ developers: 'Bethesda Game Studios',
+ publishers: 'Bethesda Softworks',
+ inCart: false,
+ selected: false,
+ isHovered: false,
+ isLiked: false,
+ rating: 80,
+ id: 18,
+ cover: "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_500/v1658188603/fallout_kuxjw3.jpg",
+ footage: [
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658188603/fallout_kuxjw3.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658238100/fallout_1_b4smuk.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658238100/fallout_2_rlg0ng.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658238100/fallout_3_tc6vd8.jpg"
+ ]
+ },
+ {
+ name: "GTA: San Andreas",
+ surname: "gtasanandreas",
+ price: "3.99",
+ desc: 'Returning after his mothers murder to the semi-fictional city of Los Santos (based on Los Angeles), Carl Johnson, a former gang banger, must take back the streets for his family and friends by gaining respect and once again gaining control over the streets. However, a story filled with crime, lies and corruption will lead him to trudge the entire state of San Andreas (based on California and Nevada) to rebuild his life.',
+ link: 'https://www.rockstargames.com/games/sanandreas',
+ release: '26th of October, 2004',
+ platforms: 'Android, PlayStation 4, PlayStation 2, Xbox 360, Xbox, PC, PlayStation 3',
+ genre: 'Action',
+ developers: 'Rockstar North',
+ publishers: 'Rockstar Games',
+ inCart: false,
+ selected: false,
+ isHovered: false,
+ isLiked: false,
+ rating: 90,
+ id: 19,
+ cover: "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_500/v1658188606/gtasanandreas_xkkyyp.jpg",
+ footage: [
+ "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,w_1920/v1658188606/gtasanandreas_xkkyyp.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658238143/gtasanandreas_1_zah5ph.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658238142/gtasanandreas_2_vhvzyf.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658238143/gtasanandreas_3_pb1aih.jpg"
+ ]
+ },
+ {
+ name: "Golf with your Friends",
+ surname: "golfwithyourfriends",
+ price: "7.99",
+ desc: 'Golf With Your Friends is an entertaining, challenging, multiplayer mini golf game for up to 12 players. The controls are simple and the game is designed for the user to be able to host or join a game within a few seconds. The game will be hosted on our servers where the user has the ability to add a password if so required or leave it open to the public. Players on PC, have the ability to access the level editor to create your own or test thousands of community made maps.',
+ link: 'http://www.blacklightinteractive.com/',
+ release: '29th of January, 2016',
+ platforms: 'Xbox One, PlayStation 4, Linux, PC, Nintendo Switch, Google Stadia',
+ genre: 'Sports',
+ developers: 'Blacklight Interactive',
+ publishers: 'Team17 Digital / Blacklight Interactive',
+ inCart: false,
+ selected: false,
+ isHovered: false,
+ isLiked: false,
+ rating: 70,
+ id: 20,
+ cover: "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_500/v1658188609/golfwithyourfriends_rxrsbv.jpg",
+ footage: [
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658188609/golfwithyourfriends_rxrsbv.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658238166/golfwithyourfriends_1_hoq6ii.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658238166/golfwithyourfriends_2_zecdjb.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658238166/golfwithyourfriends_3_euuouh.jpg"
+ ]
+ },
+ {
+ name: "Heavy Rain",
+ surname: "heavyrain",
+ price: "23.99",
+ desc: 'Heavy Rain is a cinematic psychological thriller from game developer Quantic Dream exclusively for the PlayStation 3. Dealing with a range of adult themes, the game revolves around a sophisticated plot and strong narrative threads that explore a complex moral proposition. You assume the role of multiple characters with very different backgrounds, motivations, and skills in a world where each player decision affects what will follow.',
+ link: 'https://www.www.quanticdream.com/en/#!/en/category/heavy-rain',
+ release: '18th of February, 2010',
+ platforms: 'PlayStation 4, PC, PlayStation 3',
+ genre: 'Puzzle',
+ developers: 'Quantic Dream',
+ publishers: 'Sony Computer Entertainment / Quantic Dream',
+ inCart: false,
+ selected: false,
+ isHovered: false,
+ isLiked: false,
+ rating: 82,
+ id: 21,
+ cover: "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_500/v1658188605/heavyrain_bljnwv.jpg",
+ footage: [
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658188605/heavyrain_bljnwv.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658238195/heavyrain_1_vvpszy.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658238195/heavyrain_2_f8y4rn.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658238196/heavyrain_3_fmkc8p.jpg"
+ ]
+ },
+ {
+ name: "Dota 2",
+ surname: "dota",
+ price: "12.99",
+ desc: 'Dota 2 is an RTS-styled MOBA-type competitive team game with RPG elements. Two competing teams (Radiant and Dire) consist of five players each. The main objective in Dota 2 is to destroy the enemy Ancient inside their stronghold. These strongholds are protected by multiple towers down 3 lanes. Instead of building armies of units like in classical RTS games, each player controls a single Hero, a strategically-powerful unit with unique abilities and characteristics which can be improved over the course of the game. Experience is earned when nearby creeps and heroes die, and once collecting enough experience, the hero gains a level, which increases the heros stats, and at most levels the hero gains a skill point which can be spent to unlock or upgrade one of the heros abilities. Alongside a heros fixed abilities, each hero has 6 inventory slots which can be filled with Items which provide various benefits and abilities. To purchase these items, Gold is gained passively over time, by killing creeps, by killing enemy heroes and by destroying buildings.',
+ link: 'https://www.dota2.com/home',
+ release: '9th of July, 2013',
+ platforms: 'Linux, Mac, PC',
+ genre: 'Strategy',
+ developers: 'Valve',
+ publishers: 'Valve',
+ inCart: false,
+ selected: false,
+ isHovered: false,
+ isLiked: false,
+ rating: 79,
+ id: 22,
+ cover: "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_500/v1658188603/dota_gdjxqx.jpg",
+ footage: [
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658188603/dota_gdjxqx.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658238225/dota_1_lld4aw.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658238227/dota_2_pguv1e.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658238225/dota_3_ef1lec.jpg"
+ ]
+ },
+ {
+ name: "Portal 2",
+ surname: "portal2",
+ price: "44.99",
+ desc: 'Sequel to the acclaimed Portal (2007), Portal 2 pits the protagonist of the original game, Chell, and her new robot friend, Wheatley, against more puzzles conceived by GLaDOS, an A.I. with the sole purpose of testing the Portal Guns mechanics and taking revenge on Chell for the events of Portal. As a result of several interactions and revelations, Chell once again pushes to escape Aperture Science Labs.',
+ link: 'https://www.thinkwithportals.com/',
+ release: '19th of April, 2011',
+ platforms: 'Linux, Xbox 360, Mac, PC, PlayStation 3',
+ genre: 'Puzzle',
+ developers: 'Valve',
+ publishers: 'Valve',
+ inCart: false,
+ selected: false,
+ isHovered: false,
+ isLiked: false,
+ rating: 92,
+ id: 23,
+ cover: "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_500/v1658188606/portal2_eugfiq.jpg",
+ footage: [
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658188606/portal2_eugfiq.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658238290/portal2_1_tm6kyw.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658238290/portal2_2_kmrlol.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658238292/portal2_3_pjhzkj.jpg"
+ ]
+ },
+ {
+ name: "Sid Meier's Civilization VI",
+ surname: "civilization",
+ price: "27.99",
+ desc: 'Civilization is a turn-based strategy game in which you attempt to build an empire to stand the test of time. Become Ruler of the World by establishing and leading a civilization from the Stone Age to the Information Age. Wage war, conduct diplomacy, advance your culture, and go head-to-head with historys greatest leaders as you attempt to build the greatest civilization the world has ever known.',
+ link: 'https://www.civilization.com/',
+ release: '20th of October, 2016',
+ platforms: 'Xbox One, PlayStation 4, Linux, Mac, iOS, PC, Nintendo Switch',
+ genre: 'Strategy',
+ developers: 'Firaxis Games',
+ publishers: '2K Games / Aspyr Media',
+ inCart: false,
+ selected: false,
+ isHovered: false,
+ isLiked: false,
+ rating: 82,
+ id: 24,
+ cover: "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_500/v1658188603/civilization_jcuqap.jpg",
+ footage: [
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658188603/civilization_jcuqap.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_1920/v1658238319/civilization_2_gpuqrk.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_1920/v1658238319/civilization_1_cc21ew.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658238318/civilization_3_qv8ben.jpg"
+ ]
+ },
+ {
+ name: "God of War",
+ surname: "godofwar",
+ price: "41.99",
+ desc: 'Many years have passed since Kratos took his vengeance against the Olympian gods. Having survived his final encounter with his father Zeus, Kratos has since travelled to Midgard in Ancient Norway and now lives with his young son Atreus in the world of the Norse gods, a savage land inhabited by many ferocious monsters and warriors. In order to teach his son, whose mother (and Kratoss second wife) has recently died, how to survive in such a world, Kratos must master the rage that has driven him for many years and embrace his newfound role as a father and a mentor.',
+ link: 'https://www.playstation.com/de-de/god-of-war/',
+ release: '20th of April, 2018',
+ platforms: 'PlayStation 4, PC',
+ genre: 'Adventure',
+ developers: 'Santa Monica Studio',
+ publishers: 'Sony Interactive Entertainment',
+ inCart: false,
+ selected: false,
+ isHovered: false,
+ isLiked: false,
+ rating: 94,
+ id: 25,
+ cover: "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_500/v1658188602/godofwar_cbqzk1.jpg",
+ footage: [
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658188602/godofwar_cbqzk1.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658238374/godofwar_1_c7k5as.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658238373/godofwar_2_tiemyf.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658238377/godofwar_3_qohtw3.jpg"
+ ]
+ },
+ {
+ name: "FIFA 22",
+ surname: "fifa",
+ price: "15.99",
+ desc: 'Powered by Football, FIFA 22 brings the game even closer to the real thing with fundamental gameplay advances and a new season of innovation across every mode. Play with 17,000+ players, over 700 teams in 90+ stadiums and more than 30 leagues from all over the globe.',
+ link: 'https://www.ea.com/de-de/games/fifa/fifa-22',
+ release: '30th of September, 2021',
+ platforms: 'Xbox One, PlayStation 4, PlayStation 5, PC, Xbox Series S/X, Google Stadia',
+ genre: 'Sports',
+ developers: 'EA Vancouver / EA Romania',
+ publishers: 'EA Sports',
+ inCart: false,
+ selected: false,
+ isHovered: false,
+ isLiked: false,
+ rating: 80,
+ id: 26,
+ cover: "https://res.cloudinary.com/gianlucajahn/image/upload/c_scale,q_100,w_500/v1658188603/fifa_zb6ook.jpg",
+ footage: [
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658188603/fifa_zb6ook.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658238407/fifa_1_tt7wm8.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658582251/fifa3_faiswk.jpg",
+ "https://res.cloudinary.com/gianlucajahn/image/upload/v1658238406/fifa_3_rwnx2k.jpg"
+ ]
+ },
+ {
+ name: "Whac-A-Mole",
+ surname: "Whac-A-Mole",
+ price: "11.99",
+ desc: 'Whack a mole action game! Hit the mole by touch! Mole monsters invade the peaceful farms! The mole monsters proliferate to ruin the elaborately cultivated field. Kick out the mole monsters without missing to save our farms! Now it’s time to show your ‘instant reaction’ to kick out the mole monsters.',
+ link:
+ 
+
+ )) : templateImages.map((each, index) => (
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+ {/*
+
+ )
+
+}
+
+export default Games;
diff --git a/src/bootstrap.js b/src/bootstrap.js
new file mode 100644
index 00000000..901019d9
--- /dev/null
+++ b/src/bootstrap.js
@@ -0,0 +1,47 @@
+// import './wdyr.js';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App.js';
+import { createBrowserHistory } from 'history';
+import * as Sentry from "@sentry/react";
+import { Integrations } from "@sentry/tracing";
+import * as serviceWorker from './serviceWorker.js';
+import reportWebVitals from './reportWebVitals.js';
+
+const history = createBrowserHistory();
+
+// Create a root for React 18
+const root = ReactDOM.createRoot(document.getElementById('root'));
+
+// Sentry configuration
+process.env.NODE_ENV === "production" && Sentry.init({
+ dsn: "https://496f7401c93d458ab3cf5e4632e7a923@o990278.ingest.sentry.io/6007465",
+ integrations: [new Integrations.BrowserTracing({
+ tracingOrigins: ["localhost", "www.hoseacodes.com", /^\//],
+ routingInstrumentation: Sentry.reactRouterV5Instrumentation(history),
+ })],
+
+ // Set tracesSampleRate to 1.0 to capture 100%
+ // of transactions for performance monitoring.
+ // We recommend adjusting this value in production
+ tracesSampleRate: 0.01,
+});
+
+root.render(
+// ReactDOM.render(
+