├── src
    ├── vite-env.d.ts
    ├── assets
    │   ├── MemorySong.mp3
    │   ├── images
    │   │   ├── app-bg.jpg
    │   │   ├── clock.png
    │   │   ├── score.png
    │   │   ├── sound.png
    │   │   ├── fruit-bg.png
    │   │   ├── gameboard.png
    │   │   ├── restart-btn.png
    │   │   ├── sidebar-bg.png
    │   │   ├── sound-mute.png
    │   │   └── fruits
    │   │   │   ├── apple.png
    │   │   │   ├── durian.png
    │   │   │   ├── pineapple.png
    │   │   │   ├── starfruit.png
    │   │   │   ├── dragonfruit.png
    │   │   │   ├── mangosteen.png
    │   │   │   ├── watermelon.png
    │   │   │   └── passionfruit.png
    │   └── react.svg
    ├── main.tsx
    ├── index.css
    ├── components
    │   ├── GameBoard.tsx
    │   ├── StartModal.tsx
    │   ├── SideBar.tsx
    │   ├── FruitCard.tsx
    │   └── Overlay.tsx
    ├── App.tsx
    └── context
    │   └── MemoryContext.tsx
├── postcss.config.js
├── tsconfig.json
├── vite.config.ts
├── .gitignore
├── index.html
├── tailwind.config.js
├── tsconfig.node.json
├── tsconfig.app.json
├── eslint.config.js
├── package.json
├── public
    └── vite.svg
└── README.md


/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/src/assets/MemorySong.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rendy278/Memory-Games/HEAD/src/assets/MemorySong.mp3


--------------------------------------------------------------------------------
/src/assets/images/app-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rendy278/Memory-Games/HEAD/src/assets/images/app-bg.jpg


--------------------------------------------------------------------------------
/src/assets/images/clock.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rendy278/Memory-Games/HEAD/src/assets/images/clock.png


--------------------------------------------------------------------------------
/src/assets/images/score.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rendy278/Memory-Games/HEAD/src/assets/images/score.png


--------------------------------------------------------------------------------
/src/assets/images/sound.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rendy278/Memory-Games/HEAD/src/assets/images/sound.png


--------------------------------------------------------------------------------
/src/assets/images/fruit-bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rendy278/Memory-Games/HEAD/src/assets/images/fruit-bg.png


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/src/assets/images/gameboard.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rendy278/Memory-Games/HEAD/src/assets/images/gameboard.png


--------------------------------------------------------------------------------
/src/assets/images/restart-btn.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rendy278/Memory-Games/HEAD/src/assets/images/restart-btn.png


--------------------------------------------------------------------------------
/src/assets/images/sidebar-bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rendy278/Memory-Games/HEAD/src/assets/images/sidebar-bg.png


--------------------------------------------------------------------------------
/src/assets/images/sound-mute.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rendy278/Memory-Games/HEAD/src/assets/images/sound-mute.png


--------------------------------------------------------------------------------
/src/assets/images/fruits/apple.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rendy278/Memory-Games/HEAD/src/assets/images/fruits/apple.png


--------------------------------------------------------------------------------
/src/assets/images/fruits/durian.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rendy278/Memory-Games/HEAD/src/assets/images/fruits/durian.png


--------------------------------------------------------------------------------
/src/assets/images/fruits/pineapple.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rendy278/Memory-Games/HEAD/src/assets/images/fruits/pineapple.png


--------------------------------------------------------------------------------
/src/assets/images/fruits/starfruit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rendy278/Memory-Games/HEAD/src/assets/images/fruits/starfruit.png


--------------------------------------------------------------------------------
/src/assets/images/fruits/dragonfruit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rendy278/Memory-Games/HEAD/src/assets/images/fruits/dragonfruit.png


--------------------------------------------------------------------------------
/src/assets/images/fruits/mangosteen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rendy278/Memory-Games/HEAD/src/assets/images/fruits/mangosteen.png


--------------------------------------------------------------------------------
/src/assets/images/fruits/watermelon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rendy278/Memory-Games/HEAD/src/assets/images/fruits/watermelon.png


--------------------------------------------------------------------------------
/src/assets/images/fruits/passionfruit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rendy278/Memory-Games/HEAD/src/assets/images/fruits/passionfruit.png


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "files": [],
3 |   "references": [
4 |     { "path": "./tsconfig.app.json" },
5 |     { "path": "./tsconfig.node.json" }
6 |   ]
7 | }
8 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | })
8 | 


--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import { StrictMode } from 'react'
 2 | import { createRoot } from 'react-dom/client'
 3 | import App from './App.tsx'
 4 | import './index.css'
 5 | 
 6 | createRoot(document.getElementById('root')!).render(
 7 |   <StrictMode>
 8 |     <App />
 9 |   </StrictMode>,
10 | )
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8" />
 6 |   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |   <title>Memory Game</title>
 9 | </head>
10 | 
11 | <body>
12 |   <div id="root"></div>
13 |   <script type="module" src="/src/main.tsx"></script>
14 | </body>
15 | 
16 | </html>


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | export default {
 3 |   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
 4 |   theme: {
 5 |     extend: {
 6 |       backgroundImage: {
 7 |         "app-banner": "url(assets/images/app-bg.jpg)",
 8 |         "gameboard-background": "url(assets/images/gameboard.png)",
 9 |         "fruit-background": "url(assets/images/fruit-bg.png)",
10 |         "sidebar-background": "url(assets/images/sidebar-bg.png)",
11 |       },
12 |     },
13 |   },
14 |   plugins: [],
15 | };
16 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2022",
 4 |     "lib": ["ES2023"],
 5 |     "module": "ESNext",
 6 |     "skipLibCheck": true,
 7 | 
 8 |     /* Bundler mode */
 9 |     "moduleResolution": "bundler",
10 |     "allowImportingTsExtensions": true,
11 |     "isolatedModules": true,
12 |     "moduleDetection": "force",
13 |     "noEmit": true,
14 | 
15 |     /* Linting */
16 |     "strict": true,
17 |     "noUnusedLocals": true,
18 |     "noUnusedParameters": true,
19 |     "noFallthroughCasesInSwitch": true
20 |   },
21 |   "include": ["vite.config.ts"]
22 | }
23 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | /* FruitCard.css */
 6 | 
 7 | .perspective-1000 {
 8 |   perspective: 500px;
 9 | }
10 | 
11 | .flip-card-inner {
12 |   width: 100%;
13 |   height: 100%;
14 |   transition: transform 0.6s;
15 |   transform-style: preserve-3d;
16 |   position: relative;
17 | }
18 | 
19 | .flip-card-front,
20 | .flip-card-back {
21 |   width: 100%;
22 |   height: 100%;
23 |   position: absolute;
24 |   backface-visibility: hidden;
25 | }
26 | 
27 | .flip-card-back {
28 |   transform: rotateY(180deg);
29 | }
30 | 
31 | .flip-card-flipped {
32 |   transform: rotateY(180deg);
33 | }
34 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2020",
 4 |     "useDefineForClassFields": true,
 5 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
 6 |     "module": "ESNext",
 7 |     "skipLibCheck": true,
 8 | 
 9 |     /* Bundler mode */
10 |     "moduleResolution": "bundler",
11 |     "allowImportingTsExtensions": true,
12 |     "isolatedModules": true,
13 |     "moduleDetection": "force",
14 |     "noEmit": true,
15 |     "jsx": "react-jsx",
16 | 
17 |     /* Linting */
18 |     "strict": true,
19 |     "noUnusedLocals": true,
20 |     "noUnusedParameters": true,
21 |     "noFallthroughCasesInSwitch": true
22 |   },
23 |   "include": ["src"]
24 | }
25 | 


--------------------------------------------------------------------------------
/src/components/GameBoard.tsx:
--------------------------------------------------------------------------------
 1 | import FruitCard from "./FruitCard";
 2 | import { useContext } from "react";
 3 | import { GameContext } from "../context/MemoryContext";
 4 | 
 5 | const GameBoard = () => {
 6 |   const gameContext = useContext(GameContext);
 7 | 
 8 |   if (!gameContext) {
 9 |     return null;
10 |   }
11 | 
12 |   const { cards } = gameContext;
13 | 
14 |   return (
15 |     <div className="absolute top-[34%] left-[25.5%] md:top-[35%] md:left-[26.5%] w-[16.5rem] h-[16.5rem]  md:w-[19rem] md:h-[19rem] mx-auto items-center grid grid-cols-4">
16 |       {cards.map((_, index) => (
17 |         <FruitCard key={index} fruitId={index} />
18 |       ))}
19 |     </div>
20 |   );
21 | };
22 | 
23 | export default GameBoard;
24 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import js from '@eslint/js'
 2 | import globals from 'globals'
 3 | import reactHooks from 'eslint-plugin-react-hooks'
 4 | import reactRefresh from 'eslint-plugin-react-refresh'
 5 | import tseslint from 'typescript-eslint'
 6 | 
 7 | export default tseslint.config(
 8 |   { ignores: ['dist'] },
 9 |   {
10 |     extends: [js.configs.recommended, ...tseslint.configs.recommended],
11 |     files: ['**/*.{ts,tsx}'],
12 |     languageOptions: {
13 |       ecmaVersion: 2020,
14 |       globals: globals.browser,
15 |     },
16 |     plugins: {
17 |       'react-hooks': reactHooks,
18 |       'react-refresh': reactRefresh,
19 |     },
20 |     rules: {
21 |       ...reactHooks.configs.recommended.rules,
22 |       'react-refresh/only-export-components': [
23 |         'warn',
24 |         { allowConstantExport: true },
25 |       ],
26 |     },
27 |   },
28 | )
29 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "memorygame",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "tsc -b && vite build",
 9 |     "lint": "eslint .",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "react": "^18.3.1",
14 |     "react-confetti": "^6.1.0",
15 |     "react-dom": "^18.3.1"
16 |   },
17 |   "devDependencies": {
18 |     "@eslint/js": "^9.9.0",
19 |     "@types/react": "^18.3.3",
20 |     "@types/react-dom": "^18.3.0",
21 |     "@vitejs/plugin-react": "^4.3.1",
22 |     "autoprefixer": "^10.4.20",
23 |     "eslint": "^9.9.0",
24 |     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
25 |     "eslint-plugin-react-refresh": "^0.4.9",
26 |     "globals": "^15.9.0",
27 |     "postcss": "^8.4.47",
28 |     "tailwindcss": "^3.4.13",
29 |     "typescript": "^5.5.3",
30 |     "typescript-eslint": "^8.0.1",
31 |     "vite": "^5.4.1"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/src/components/StartModal.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | interface StartModalProps {
 4 |   isModalOpen: boolean;
 5 |   onStart: () => void;
 6 |   closeModal: () => void;
 7 | }
 8 | 
 9 | const StartModal: React.FC<StartModalProps> = ({
10 |   isModalOpen,
11 |   onStart,
12 |   closeModal,
13 | }) => {
14 |   return (
15 |     <div
16 |       className={`fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 ${
17 |         isModalOpen ? "block" : "hidden"
18 |       }`}
19 |     >
20 |       <div className="bg-gameboard-background bg-center bg-no-repeat p-6 rounded-md shadow-lg flex justify-center items-center flex-col">
21 |         <h1 className="text-3xl font-bold mb-4 text-amber-900">
22 |           Start the Game
23 |         </h1>
24 |         <button
25 |           onClick={() => {
26 |             closeModal(); // Close modal first
27 |             onStart(); // Start the game logic after closing modal
28 |           }}
29 |           className="flex justify-center items-center gap-3 bg-sidebar-background bg-center bg-contain bg-no-repeat w-64 h-20 md:h-32"
30 |         >
31 |           <p className="text-amber-900 md:text-2xl font-bold">Start</p>
32 |         </button>
33 |         <h2 className="text-2xl font-bold mt-4 text-amber-900">
34 |           Game Build By : Rendev
35 |         </h2>
36 |       </div>
37 |     </div>
38 |   );
39 | };
40 | 
41 | export default StartModal;
42 | 


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/src/components/SideBar.tsx:
--------------------------------------------------------------------------------
 1 | import { useContext } from "react";
 2 | import ClockBtn from "../assets/images/clock.png";
 3 | import RestartBtn from "../assets/images/restart-btn.png";
 4 | import { GameContext } from "../context/MemoryContext";
 5 | 
 6 | const SideBar: React.FC = () => {
 7 |   const gameContext = useContext(GameContext);
 8 | 
 9 |   if (!gameContext) {
10 |     return null;
11 |   }
12 | 
13 |   const { timeLeft, restartGame, gameOver } = gameContext;
14 | 
15 |   return (
16 |     <section
17 |       className="absolute right-36 md:-right-52 -bottom-[7.5rem] md:bottom-32 flex
18 |   flex-col items-start gap-1"
19 |     >
20 |       <div className="flex items-center justify-center gap-1 bg-sidebar-background bg-center bg-contain bg-no-repeat w-64 h-20 md:h-32 ">
21 |         <img src={ClockBtn} alt="Clock Icon" className="w-5 md:w-6" />
22 |         <p className="text-amber-900 md:text-lg font-bold">
23 |           Time Left:{" "}
24 |           <span className=" text-green-600 shadow">
25 |             {gameOver ? "Game Over" : `${timeLeft} secs`}
26 |           </span>
27 |         </p>
28 |       </div>
29 | 
30 |       <div className="flex items-center justify-center gap-3 bg-sidebar-background bg-center bg-contain bg-no-repeat w-64 h-20 md:h-32">
31 |         <button onClick={restartGame} className="flex items-center gap-3">
32 |           <img
33 |             src={RestartBtn}
34 |             alt="Restart Icon"
35 |             className="w-8 h-8 md:w-10 md:h-10"
36 |           />
37 |           <p className="text-amber-900 md:text-lg font-bold">Replay</p>
38 |         </button>
39 |       </div>
40 |     </section>
41 |   );
42 | };
43 | 
44 | export default SideBar;
45 | 


--------------------------------------------------------------------------------
/src/components/FruitCard.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from "react";
 2 | import { GameContext } from "../context/MemoryContext";
 3 | 
 4 | interface FruitCardProps {
 5 |   fruitId: number;
 6 | }
 7 | 
 8 | const FruitCard: React.FC<FruitCardProps> = ({ fruitId }) => {
 9 |   const gameContext = useContext(GameContext);
10 | 
11 |   if (!gameContext) {
12 |     return null;
13 |   }
14 | 
15 |   const { cards, flipCard, showIcons } = gameContext;
16 | 
17 |   // Ensure cards and fruitId are valid
18 |   if (!cards || cards.length === 0 || fruitId < 0 || fruitId >= cards.length) {
19 |     return null;
20 |   }
21 | 
22 |   const card = cards[fruitId];
23 | 
24 |   const handleClick = () => {
25 |     if (!card.flipped && !showIcons) {
26 |       flipCard(fruitId);
27 |     }
28 |   };
29 | 
30 |   return (
31 |     <div
32 |       onClick={handleClick}
33 |       className={`relative w-[4rem] h-[4rem] md:w-[4.5rem] md:h-[4.5rem] flex justify-center items-center cursor-pointer rounded-lg perspective-1000`}
34 |     >
35 |       <div
36 |         className={`flip-card-inner ${
37 |           card.flipped || showIcons ? "flip-card-flipped" : ""
38 |         }`}
39 |       >
40 |         <div className="flip-card-front bg-amber-800 flex justify-center items-center rounded-lg">
41 |           <p className="text-3xl font-bold text-white">?</p>
42 |         </div>
43 |         <div className="flip-card-back bg-fruit-background bg-center bg-cover flex justify-center items-center">
44 |           <img
45 |             src={card.fruit}
46 |             alt={card.fruit}
47 |             className="w-full h-full object-cover"
48 |           />
49 |         </div>
50 |       </div>
51 |     </div>
52 |   );
53 | };
54 | 
55 | export default FruitCard;
56 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React + TypeScript + Vite
 2 | 
 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 4 | 
 5 | Currently, two official plugins are available:
 6 | 
 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
 9 | 
10 | ## Expanding the ESLint configuration
11 | 
12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
13 | 
14 | - Configure the top-level `parserOptions` property like this:
15 | 
16 | ```js
17 | export default tseslint.config({
18 |   languageOptions: {
19 |     // other options...
20 |     parserOptions: {
21 |       project: ['./tsconfig.node.json', './tsconfig.app.json'],
22 |       tsconfigRootDir: import.meta.dirname,
23 |     },
24 |   },
25 | })
26 | ```
27 | 
28 | - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
29 | - Optionally add `...tseslint.configs.stylisticTypeChecked`
30 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
31 | 
32 | ```js
33 | // eslint.config.js
34 | import react from 'eslint-plugin-react'
35 | 
36 | export default tseslint.config({
37 |   // Set the react version
38 |   settings: { react: { version: '18.3' } },
39 |   plugins: {
40 |     // Add the react plugin
41 |     react,
42 |   },
43 |   rules: {
44 |     // other rules...
45 |     // Enable its recommended rules
46 |     ...react.configs.recommended.rules,
47 |     ...react.configs['jsx-runtime'].rules,
48 |   },
49 | })
50 | ```
51 | 


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useContext, useState } from "react";
 2 | import GameBoard from "./components/GameBoard";
 3 | import SideBar from "./components/SideBar";
 4 | import GameContextProvider, { GameContext } from "./context/MemoryContext";
 5 | import Overlay from "./components/Overlay";
 6 | import StartModal from "./components/StartModal";
 7 | 
 8 | const App: React.FC = () => {
 9 |   const [isModalOpen, setIsModalOpen] = useState(true); // Track modal state
10 | 
11 |   return (
12 |     <GameContextProvider>
13 |       <GameContent setIsModalOpen={setIsModalOpen} />
14 |       <StartModal
15 |         onStart={() => {}}
16 |         isModalOpen={isModalOpen}
17 |         closeModal={() => setIsModalOpen(false)}
18 |       />
19 |     </GameContextProvider>
20 |   );
21 | };
22 | 
23 | const GameContent: React.FC<{
24 |   setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
25 | }> = ({ setIsModalOpen }) => {
26 |   const { startGame, isGameStarted } = useContext(GameContext)!;
27 | 
28 |   const handleStartGame = () => {
29 |     startGame(); // Start the game logic
30 |     setIsModalOpen(false); // Close modal after starting the game
31 |   };
32 | 
33 |   return (
34 |     <main className="bg-app-banner bg-center overflow-hidden bg-cover w-screen h-screen flex flex-col justify-center items-center relative">
35 |       <div className="absolute bg-sky-800 opacity-50 w-full h-full" />
36 |       <div className="relative -mt-28 md:mt-10 md:-ms-72 lg:ms-0 bg-gameboard-background bg-center bg-no-repeat bg-contain w-[34rem] h-[34rem] md:w-[40rem] md:h-[40rem]">
37 |         {isGameStarted && <GameBoard />}
38 |         {isGameStarted && <SideBar />}
39 |       </div>
40 |       <Overlay />
41 |       <StartModal
42 |         isModalOpen={!isGameStarted} // Show the modal only when the game hasn't started
43 |         onStart={handleStartGame}
44 |         closeModal={() => setIsModalOpen(false)} // Close modal function
45 |       />
46 |     </main>
47 |   );
48 | };
49 | 
50 | export default App;
51 | 


--------------------------------------------------------------------------------
/src/components/Overlay.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from "react";
 2 | import { GameContext } from "../context/MemoryContext"; // Pastikan Anda mengimpor tipe GameContextType
 3 | import ScoreIcon from "../assets/images/score.png";
 4 | import RestartIcon from "../assets/images/restart-btn.png";
 5 | import Confetti from "react-confetti";
 6 | 
 7 | const Overlay: React.FC = () => {
 8 |   const context = useContext(GameContext);
 9 | 
10 |   // Periksa apakah context terdefinisi
11 |   if (!context) {
12 |     throw new Error("Overlay must be used within a GameContextProvider"); // Tambahkan error handling
13 |   }
14 | 
15 |   const { gameOver, gameWon, restartGame, score } = context; // Ambil nilai dari context
16 | 
17 |   if (!gameOver && !gameWon) return null; // Return null if neither game over nor won
18 | 
19 |   return (
20 |     <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/80 z-50 rounded-xl">
21 |       <h1 className="text-orange-300 text-5xl md:text-8xl font-serif font-bold mb-8">
22 |         {gameOver ? "Game Over 😥" : "You Win 🎉"}
23 |       </h1>
24 | 
25 |       <div className="flex items-center gap-3 mt-10">
26 |         <img src={ScoreIcon} alt="Score icon" className="w-10 h-10" />
27 |         <p className="text-4xl uppercase font-bold text-white">
28 |           Your Score: <span className="text-green-500 text-5xl">{score}</span>
29 |         </p>
30 |       </div>
31 | 
32 |       <div className="mt-10 flex justify-center items-center gap-3 bg-sidebar-background bg-center bg-contain bg-no-repeat w-64 h-20 md:h-32">
33 |         <button onClick={restartGame} className="flex items-center gap-3">
34 |           <img
35 |             src={RestartIcon}
36 |             alt="Restart icon"
37 |             className="w-8 h-8 md:w-10 md:h-10"
38 |           />
39 |           <p className="text-amber-900 md:text-lg font-bold">Replay</p>
40 |         </button>
41 |       </div>
42 | 
43 |       {gameWon && (
44 |         <Confetti
45 |           width={window.innerWidth}
46 |           height={window.innerHeight}
47 |           numberOfPieces={200}
48 |           gravity={0.03}
49 |           colors={["#f44336", "#00ff00", "#0000ff", "#ffff00", "#9c27b0"]}
50 |         />
51 |       )}
52 |     </div>
53 |   );
54 | };
55 | 
56 | export default Overlay;
57 | 


--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>


--------------------------------------------------------------------------------
/src/context/MemoryContext.tsx:
--------------------------------------------------------------------------------
  1 | import React, {
  2 |   createContext,
  3 |   useEffect,
  4 |   useRef,
  5 |   useState,
  6 |   ReactNode,
  7 | } from "react";
  8 | 
  9 | // Import fruit images
 10 | import apple from "../assets/images/fruits/apple.png";
 11 | import dragonfruit from "../assets/images/fruits/dragonfruit.png";
 12 | import durian from "../assets/images/fruits/durian.png";
 13 | import mangosteen from "../assets/images/fruits/mangosteen.png";
 14 | import passionfruit from "../assets/images/fruits/passionfruit.png";
 15 | import pineapple from "../assets/images/fruits/pineapple.png";
 16 | import starfruit from "../assets/images/fruits/starfruit.png";
 17 | import watermelon from "../assets/images/fruits/watermelon.png";
 18 | 
 19 | // Import memory song
 20 | import memorySong from "../assets/MemorySong.mp3";
 21 | 
 22 | interface Card {
 23 |   id: number;
 24 |   fruit: string;
 25 |   flipped: boolean;
 26 | }
 27 | 
 28 | interface GameContextType {
 29 |   cards: Card[];
 30 |   flipCard: (index: number) => void;
 31 |   matchedPairs: string[];
 32 |   showIcons: boolean;
 33 |   timeLeft: number;
 34 |   gameOver: boolean;
 35 |   gameWon: boolean;
 36 |   restartGame: () => void;
 37 |   score: number;
 38 |   startGame: () => void;
 39 |   isGameStarted: boolean; // State to track if the game has started
 40 | }
 41 | 
 42 | interface GameContextProviderProps {
 43 |   children: ReactNode;
 44 | }
 45 | 
 46 | export const GameContext = createContext<GameContextType | undefined>(
 47 |   undefined
 48 | );
 49 | 
 50 | const GameContextProvider: React.FC<GameContextProviderProps> = ({
 51 |   children,
 52 | }) => {
 53 |   const [cards, setCards] = useState<Card[]>([]);
 54 |   const [flippedCards, setFlippedCards] = useState<number[]>([]);
 55 |   const [matchedPairs, setMatchedPairs] = useState<string[]>([]);
 56 |   const [showIcons, setShowIcons] = useState(true);
 57 |   const [timeLeft, setTimeLeft] = useState(45);
 58 |   const [gameOver, setGameOver] = useState(false);
 59 |   const [gameWon, setGameWon] = useState(false);
 60 |   const [isGameStarted, setIsGameStarted] = useState(false); // Initialize game state
 61 |   const timerRef = useRef<ReturnType<typeof setInterval> | null>(null); // Fix for NodeJS issue
 62 |   const [score, setScore] = useState(0);
 63 |   const audioRef = useRef<HTMLAudioElement | null>(null);
 64 | 
 65 |   const initializeGame = () => {
 66 |     const fruitIcons: string[] = [
 67 |       apple,
 68 |       dragonfruit,
 69 |       durian,
 70 |       mangosteen,
 71 |       passionfruit,
 72 |       pineapple,
 73 |       starfruit,
 74 |       watermelon,
 75 |     ];
 76 | 
 77 |     const pairIcons = [...fruitIcons, ...fruitIcons];
 78 |     const shuffledIcons = pairIcons.sort(() => Math.random() - 0.5);
 79 | 
 80 |     const cardItems: Card[] = shuffledIcons.map((fruit, index) => ({
 81 |       id: index,
 82 |       fruit,
 83 |       flipped: false,
 84 |     }));
 85 | 
 86 |     setCards(cardItems);
 87 |     setShowIcons(true);
 88 |     setIsGameStarted(true); // Mark game as started
 89 | 
 90 |     setTimeout(() => {
 91 |       setShowIcons(false);
 92 |     }, 3000);
 93 | 
 94 |     if (timerRef.current) clearInterval(timerRef.current);
 95 |     setTimeLeft(45);
 96 |     timerRef.current = setInterval(() => {
 97 |       setTimeLeft((prev) => {
 98 |         if (prev <= 1) {
 99 |           if (timerRef.current) clearInterval(timerRef.current);
100 |           if (!gameWon) setGameOver(true);
101 |           return 0;
102 |         }
103 |         return prev - 1;
104 |       });
105 |     }, 1000);
106 |   };
107 | 
108 |   const startGame = () => {
109 |     if (!audioRef.current) {
110 |       audioRef.current = new Audio(memorySong);
111 |     }
112 |     audioRef.current.currentTime = 0; // Reset audio to start
113 |     audioRef.current.play();
114 |     initializeGame();
115 |   };
116 | 
117 |   useEffect(() => {
118 |     return () => {
119 |       if (timerRef.current) clearInterval(timerRef.current);
120 |       if (audioRef.current) audioRef.current.pause();
121 |     };
122 |   }, []);
123 | 
124 |   const flipCard = (index: number) => {
125 |     if (flippedCards.length === 2 || cards[index].flipped) return;
126 | 
127 |     const updatedCards = [...cards];
128 |     updatedCards[index].flipped = true;
129 |     setCards(updatedCards);
130 | 
131 |     setFlippedCards((prevFlippedCards) => {
132 |       const newFlippedCards = [...prevFlippedCards, index];
133 | 
134 |       if (newFlippedCards.length === 2) {
135 |         const [firstIndex, secondIndex] = newFlippedCards;
136 | 
137 |         if (
138 |           updatedCards[firstIndex].fruit === updatedCards[secondIndex].fruit
139 |         ) {
140 |           const newMatchedPairs = [
141 |             ...matchedPairs,
142 |             updatedCards[firstIndex].fruit,
143 |           ];
144 |           setMatchedPairs(newMatchedPairs);
145 | 
146 |           if (newMatchedPairs.length === cards.length / 2) {
147 |             if (timerRef.current) clearInterval(timerRef.current);
148 |             setTimeout(() => {
149 |               setGameWon(true);
150 |               setScore(timeLeft * 10);
151 |             }, 1000);
152 |           }
153 |         } else {
154 |           setTimeout(() => {
155 |             const resetCards = [...updatedCards];
156 |             resetCards[firstIndex].flipped = false;
157 |             resetCards[secondIndex].flipped = false;
158 |             setCards(resetCards);
159 |           }, 1000);
160 |         }
161 | 
162 |         return [];
163 |       }
164 | 
165 |       return newFlippedCards;
166 |     });
167 |   };
168 | 
169 |   const restartGame = () => {
170 |     setFlippedCards([]);
171 |     setMatchedPairs([]);
172 |     setGameOver(false);
173 |     setGameWon(false);
174 |     setScore(0);
175 |     setIsGameStarted(false); // Reset game state
176 |     initializeGame();
177 |   };
178 | 
179 |   return (
180 |     <GameContext.Provider
181 |       value={{
182 |         cards,
183 |         flipCard,
184 |         matchedPairs,
185 |         showIcons,
186 |         timeLeft,
187 |         gameOver,
188 |         gameWon,
189 |         restartGame,
190 |         score,
191 |         startGame,
192 |         isGameStarted, // Provide game state
193 |       }}
194 |     >
195 |       {children}
196 |     </GameContext.Provider>
197 |   );
198 | };
199 | 
200 | export default GameContextProvider;
201 | 


--------------------------------------------------------------------------------