2025-01-16 06:42:04 +00:00
18 changed files with 4563 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -1,2 +1,8 @@
-# Assignment6
+# React + Vite

+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
--- a/eslint.config.js
+++ b/eslint.config.js
@ -0,0 +1,38 @@
+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 },
+      ],
+    },
+  },
+]
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
+<!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>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,28 @@
+{
+  "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"
+  }
+}
--- a/public/images/angular.png
+++ b/public/images/angular.png
--- a/public/images/css.png
+++ b/public/images/css.png
--- a/public/images/html.png
+++ b/public/images/html.png
--- a/public/images/js.png
+++ b/public/images/js.png
--- a/public/images/nodejs.png
+++ b/public/images/nodejs.png
--- a/public/images/react.png
+++ b/public/images/react.png
--- a/public/images/scss.png
+++ b/public/images/scss.png
--- a/public/images/vue.png
+++ b/public/images/vue.png
--- a/src/App.jsx
+++ b/src/App.jsx
@ -0,0 +1,12 @@
+import MemoryCardGame from './MemoryCardGame'
+
+function App() {
+
+  return (
+    <>
+   <MemoryCardGame/>
+    </>
+  )
+}
+
+export default App
--- a/src/MemoryCardGame.jsx
+++ b/src/MemoryCardGame.jsx
@ -0,0 +1,85 @@
+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;
--- a/src/index.css
+++ b/src/index.css
@ -0,0 +1,75 @@
+: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;
+
+}
+
--- a/src/main.jsx
+++ b/src/main.jsx
@ -0,0 +1,10 @@
+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>,
+)
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})