Compare commits
No commits in common. "6d729d3c4202d51795ab9830373be0d990037054" and "3cdae496e826b91a9119125eb4571d6d54ced96c" have entirely different histories.
6d729d3c42
...
3cdae496e8
|
|
@ -1,8 +1,2 @@
|
||||||
# React + Vite
|
# Assignment6
|
||||||
|
|
||||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
|
||||||
|
|
||||||
Currently, two official plugins are available:
|
|
||||||
|
|
||||||
- [@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
|
|
||||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
|
||||||
|
|
|
||||||
|
|
@ -1,38 +0,0 @@
|
||||||
import js from '@eslint/js'
|
|
||||||
import globals from 'globals'
|
|
||||||
import react from 'eslint-plugin-react'
|
|
||||||
import reactHooks from 'eslint-plugin-react-hooks'
|
|
||||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
|
||||||
|
|
||||||
export default [
|
|
||||||
{ ignores: ['dist'] },
|
|
||||||
{
|
|
||||||
files: ['**/*.{js,jsx}'],
|
|
||||||
languageOptions: {
|
|
||||||
ecmaVersion: 2020,
|
|
||||||
globals: globals.browser,
|
|
||||||
parserOptions: {
|
|
||||||
ecmaVersion: 'latest',
|
|
||||||
ecmaFeatures: { jsx: true },
|
|
||||||
sourceType: 'module',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
settings: { react: { version: '18.3' } },
|
|
||||||
plugins: {
|
|
||||||
react,
|
|
||||||
'react-hooks': reactHooks,
|
|
||||||
'react-refresh': reactRefresh,
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
...js.configs.recommended.rules,
|
|
||||||
...react.configs.recommended.rules,
|
|
||||||
...react.configs['jsx-runtime'].rules,
|
|
||||||
...reactHooks.configs.recommended.rules,
|
|
||||||
'react/jsx-no-target-blank': 'off',
|
|
||||||
'react-refresh/only-export-components': [
|
|
||||||
'warn',
|
|
||||||
{ allowConstantExport: true },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]
|
|
||||||
13
index.html
13
index.html
|
|
@ -1,13 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Vite + React</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="root"></div>
|
|
||||||
<script type="module" src="/src/main.jsx"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
4288
package-lock.json
generated
4288
package-lock.json
generated
File diff suppressed because it is too large
Load diff
28
package.json
28
package.json
|
|
@ -1,28 +0,0 @@
|
||||||
{
|
|
||||||
"name": "assignment6",
|
|
||||||
"private": true,
|
|
||||||
"version": "0.0.0",
|
|
||||||
"type": "module",
|
|
||||||
"scripts": {
|
|
||||||
"dev": "vite",
|
|
||||||
"build": "vite build",
|
|
||||||
"lint": "eslint .",
|
|
||||||
"preview": "vite preview"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"react": "^18.3.1",
|
|
||||||
"react-dom": "^18.3.1"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@eslint/js": "^9.17.0",
|
|
||||||
"@types/react": "^18.3.18",
|
|
||||||
"@types/react-dom": "^18.3.5",
|
|
||||||
"@vitejs/plugin-react": "^4.3.4",
|
|
||||||
"eslint": "^9.17.0",
|
|
||||||
"eslint-plugin-react": "^7.37.2",
|
|
||||||
"eslint-plugin-react-hooks": "^5.0.0",
|
|
||||||
"eslint-plugin-react-refresh": "^0.4.16",
|
|
||||||
"globals": "^15.14.0",
|
|
||||||
"vite": "^6.0.5"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
12
src/App.jsx
12
src/App.jsx
|
|
@ -1,12 +0,0 @@
|
||||||
import MemoryCardGame from './MemoryCardGame'
|
|
||||||
|
|
||||||
function App() {
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<MemoryCardGame/>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default App
|
|
||||||
|
|
@ -1,85 +0,0 @@
|
||||||
import React, { useState, useEffect } from 'react';
|
|
||||||
import './index.css';
|
|
||||||
|
|
||||||
const cardImages = [
|
|
||||||
{ id: 1, img: './images/angular.png' },
|
|
||||||
{ id: 2, img: './images/css.png' },
|
|
||||||
{ id: 3, img: './images/html.png' },
|
|
||||||
{ id: 4, img: './images/js.png' },
|
|
||||||
{ id: 5, img: './images/nodejs.png' },
|
|
||||||
{ id: 6, img: './images/react.png' },
|
|
||||||
{ id: 7, img: './images/scss.png' },
|
|
||||||
{ id: 8, img: './images/vue.png' },
|
|
||||||
];
|
|
||||||
|
|
||||||
// instead of doing previous method we can also do this
|
|
||||||
const shuffledCards = [...cardImages, ...cardImages].sort(() => Math.random() - 0.5);
|
|
||||||
|
|
||||||
const MemoryCardGame = () => {
|
|
||||||
const [cards, setCards] = useState(shuffledCards.map((card, index) => ({ ...card, flipped: false, id: index })));
|
|
||||||
const [flippedCards, setFlippedCards] = useState([]);
|
|
||||||
const [score, setScore] = useState(0);
|
|
||||||
const [attempts, setAttempts] = useState(0);
|
|
||||||
const [showingImages, setShowingImages] = useState(true);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// Sirf 2 sec tk images show karega
|
|
||||||
const timer = setTimeout(() => {
|
|
||||||
setShowingImages(false);
|
|
||||||
setCards(prevCards => prevCards.map(card => ({ ...card, flipped: false })));
|
|
||||||
}, 2000);
|
|
||||||
|
|
||||||
return () => clearTimeout(timer);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (flippedCards.length === 2) {
|
|
||||||
// Increment attempts when two cards are flipped
|
|
||||||
setAttempts(prevAttempts => prevAttempts + 1);
|
|
||||||
|
|
||||||
const [firstCard, secondCard] = flippedCards;
|
|
||||||
|
|
||||||
if (firstCard.img === secondCard.img) {
|
|
||||||
// Cards matching logic
|
|
||||||
setScore(prevScore => prevScore + 1);
|
|
||||||
setCards(prevCards => prevCards.map(card =>
|
|
||||||
card.img === firstCard.img ? { ...card, flipped: true } : card
|
|
||||||
));
|
|
||||||
} else {
|
|
||||||
// Cards do not match, flip them back after a short delay
|
|
||||||
setTimeout(() => {
|
|
||||||
setCards(prevCards => prevCards.map(card =>
|
|
||||||
card.id === firstCard.id || card.id === secondCard.id ? { ...card, flipped: false } : card
|
|
||||||
));
|
|
||||||
}, 1000);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear flipped cards after processing
|
|
||||||
setFlippedCards([]);
|
|
||||||
}
|
|
||||||
}, [flippedCards]);
|
|
||||||
|
|
||||||
const handleCardClick = (card) => {
|
|
||||||
if (!card.flipped && flippedCards.length < 2 && !showingImages) {
|
|
||||||
setCards(prevCards => prevCards.map(c => (c.id === card.id ? { ...c, flipped: true } : c)));
|
|
||||||
setFlippedCards(prev => [...prev, card]);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="memory-card-game">
|
|
||||||
<h1>Memory Card Game</h1>
|
|
||||||
<p>Score: {score}</p>
|
|
||||||
<p>Attempts: {attempts}</p>
|
|
||||||
<div className="card-grid">
|
|
||||||
{cards.map(card => (
|
|
||||||
<div key={card.id} className={`card ${card.flipped ? 'flipped' : ''}`} onClick={() => handleCardClick(card)}>
|
|
||||||
{card.flipped || showingImages ? <img src={card.img} alt="Card" /> : <div className="card-back">?</div>}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default MemoryCardGame;
|
|
||||||
|
|
@ -1,75 +0,0 @@
|
||||||
:root {
|
|
||||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
||||||
line-height: 1.5;
|
|
||||||
font-weight: 400;
|
|
||||||
color-scheme: light dark;
|
|
||||||
color: rgba(255, 255, 255, 0.87);
|
|
||||||
background-color: #242424;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
|
||||||
place-items: center;
|
|
||||||
min-width: 320px;
|
|
||||||
min-height: 100vh;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.memory-card-game {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 3.2em;
|
|
||||||
line-height: 1.1;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(4, 1fr);
|
|
||||||
gap: 10px;
|
|
||||||
margin: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
background-color: #ccc;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 10px;
|
|
||||||
transition: transform 0.3s;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.card img {
|
|
||||||
width: 80%;
|
|
||||||
height: 80%;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-back {
|
|
||||||
font-size: 24px;
|
|
||||||
line-height: 100px;
|
|
||||||
color: black;
|
|
||||||
background-color: #fff;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
transition: opacity 0.3s;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
10
src/main.jsx
10
src/main.jsx
|
|
@ -1,10 +0,0 @@
|
||||||
import { StrictMode } from 'react'
|
|
||||||
import { createRoot } from 'react-dom/client'
|
|
||||||
import './index.css'
|
|
||||||
import App from './App.jsx'
|
|
||||||
|
|
||||||
createRoot(document.getElementById('root')).render(
|
|
||||||
<StrictMode>
|
|
||||||
<App />
|
|
||||||
</StrictMode>,
|
|
||||||
)
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
import { defineConfig } from 'vite'
|
|
||||||
import react from '@vitejs/plugin-react'
|
|
||||||
|
|
||||||
// https://vite.dev/config/
|
|
||||||
export default defineConfig({
|
|
||||||
plugins: [react()],
|
|
||||||
})
|
|
||||||
Loading…
Reference in a new issue