Merge pull request #626 from linga66/main

Added Guess the Color game
ssitvit · Jun 28, 2023 · 0873720 · 0873720
2 parents 0c31b56 + 7be1146
commit 0873720
Show file tree

Hide file tree

Showing 9 changed files with 393 additions and 81 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/Games/GuessTheColor/App.js b/src/Games/GuessTheColor/App.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import ColorGame from './src/ColorGame';
+
+function App() {
+  return (
+    <div className="App">
+      <ColorGame />
+    </div>
+  );
+}
+
+export default App;
diff --git a/src/Games/GuessTheColor/public/index.html b/src/Games/GuessTheColor/public/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/src/Games/GuessTheColor/src/ColorGame.js b/src/Games/GuessTheColor/src/ColorGame.js
@@ -0,0 +1,134 @@
+import React from 'react';
+import { useEffect } from 'react';
+import './guess.css';
+
+function ColorGame() {
+    useEffect(() => {
+        function changecolors(color) {
+            for (let i = 0; i < colors.length; i++) {
+                squares[i].style.background = color;
+            }
+        }
+
+        function pickcolor() {
+            const ran = Math.floor(Math.random() * colors.length);
+            return colors[ran];
+        }
+
+        function generatecolors(num) {
+            const arr = [];
+            for (let i = 0; i < num; i++) {
+                arr.push(randomcolor());
+            }
+            return arr;
+        }
+
+        function randomcolor() {
+            const r = Math.floor(Math.random() * 256);
+            const g = Math.floor(Math.random() * 256);
+            const b = Math.floor(Math.random() * 256);
+            return `rgb(${r}, ${g}, ${b})`;
+        }
+
+        // Get references to DOM elements
+        const squares = document.querySelectorAll('.square');
+        const colorDisplay = document.getElementById('colordisplay');
+        const msgDisplay = document.querySelector('#msg');
+        const resetBtn = document.querySelector('#reset');
+        const easyBtn = document.querySelector('#easybtn');
+        const hardBtn = document.querySelector('#hardbtn');
+        const h1 = document.querySelector('h1');
+
+        let num = 6;
+        let colors = generatecolors(num);
+        let picked = pickcolor();
+
+        colorDisplay.textContent = picked;
+
+        easyBtn.addEventListener('click', function () {
+            easyBtn.classList.add('selected');
+            hardBtn.classList.remove('selected');
+            num = 3;
+            colors = generatecolors(num);
+            picked = pickcolor();
+            colorDisplay.textContent = picked;
+            msgDisplay.textContent = '';
+            h1.style.background = 'steelblue';
+            for (let i = 0; i < 3; i++) {
+                squares[i].style.background = colors[i];
+            }
+            for (let i = 3; i < squares.length; i++) {
+                squares[i].style.background = 'none';
+            }
+        });
+
+        hardBtn.addEventListener('click', function () {
+            hardBtn.classList.add('selected');
+            easyBtn.classList.remove('selected');
+            num = 6;
+            colors = generatecolors(num);
+            picked = pickcolor();
+            colorDisplay.textContent = picked;
+            msgDisplay.textContent = '';
+            h1.style.background = 'steelblue';
+            for (let i = 0; i < squares.length; i++) {
+                squares[i].style.background = colors[i];
+                squares[i].style.display = 'block';
+            }
+        });
+
+        for (let i = 0; i < squares.length; i++) {
+            squares[i].style.background = colors[i];
+            squares[i].addEventListener('click', function () {
+                const clicked = this.style.background;
+                if (clicked === picked) {
+                    msgDisplay.textContent = 'Correct';
+                    h1.style.background = clicked;
+                    changecolors(clicked);
+                    resetBtn.textContent = 'Play Again?';
+                } else {
+                    this.style.background = '#232323';
+                    msgDisplay.textContent = 'Try Again';
+                }
+            });
+        }
+
+        resetBtn.addEventListener('click', function () {
+            colors = generatecolors(num);
+            picked = pickcolor();
+            colorDisplay.textContent = picked;
+            for (let i = 0; i < squares.length; i++) {
+                squares[i].style.background = colors[i];
+            }
+            h1.style.background = 'steelblue';
+            msgDisplay.textContent = '';
+            resetBtn.textContent = 'New Colors';
+        });
+    }, []);
+
+    return (
+        <div>
+            <h1>Guess The Color<br />
+                <span id="colordisplay">RGB</span><br />
+                Color Game
+            </h1>
+            <div id="stripe">
+                <button id="reset">New Colors</button>
+                <span id="msg"></span>
+                <button id="easybtn">Easy</button>
+                <button className="selected" id="hardbtn">Hard</button>
+            </div>
+            <div id="container">
+                <div className="square"></div>
+                <div className="square"></div>
+                <div className="square"></div>
+                <div className="square"></div>
+                <div className="square"></div>
+                <div className="square"></div>
+            </div>
+            {/* The JavaScript functionality will be added later */}
+        </div>
+    );
+}
+
+export default ColorGame;
diff --git a/src/Games/GuessTheColor/src/guess.css b/src/Games/GuessTheColor/src/guess.css
@@ -0,0 +1,69 @@
+body{
+	background-color:#232323;
+	margin:0;
+	font-family:"Montserrat","Avenir";
+}
+.square{
+	width:30%;
+	background:purple;
+	padding-bottom:30%;
+	float:left;
+	margin:1.66%;
+	border-radius:15%;	
+	transition: background 0.4s;
+}
+
+#container{
+	margin: 20px auto;
+	max-width:600px;
+}
+
+h1{
+	color:white;
+	padding:20px 0;
+	text-align:center;
+	background: steelblue;
+	margin:0;
+	font-weight:normal;
+	text-transform:uppercase;
+}
+
+#colordisplay{
+	font-size:200%;
+}
+
+#stripe{
+	background:white;
+	height:25px;
+	text-align:center;
+	color:black;
+}
+
+.selected{
+	color:white;
+	background:steelblue;
+}
+
+#msg{
+	display:inline-block;
+	width:20%;
+}
+
+
+button{
+	border:none;
+	background:none;
+	text-transform:uppercase;
+	height:100%;
+	font-weight:700;
+	color:steelblue;
+	letter-spacing:1px;
+	font-size:inherit;
+	transition: all 0.4s;
+	outline:none;
+}
+
+button:hover{
+	color:white;
+	background:steelblue;
+}
diff --git a/src/Games/GuessTheColor/src/index.js b/src/Games/GuessTheColor/src/index.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ColorGame from './ColorGame';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <ColorGame />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
diff --git a/src/Homepage/Data/data.js b/src/Homepage/Data/data.js
@@ -248,5 +248,16 @@ export const data1 = [
     step1: "1. Guess the word ",
     step2: "2. Stuck!! Look at Hint",
     step3: "3. Enjoy the game",
+  },
+  {
+    serial_number: "23",
+    main_heading: "Guess the Color",
+    about: "Solve the puzzle~",
+    link_game: "/GuessTheColor",
+    // Flip-card-back contents
+    rule_heading: "Rules to play",
+    step1: "1. Guess the Color ",
+    step2: "2. Know the RGB value",
+    step3: "3. Enjoy the game",
   }
 ];
diff --git a/src/Routes/AllRoutes.js b/src/Routes/AllRoutes.js
@@ -25,6 +25,7 @@ const DrumKit = lazy(() => import("../Games/Drum-Kit/DrumKit"));
 const ChessAI = lazy(() => import("../Games/ChessAI/appiz"));
 const Minesweeper = lazy(() => import("../Games/Minesweeper/App"));
 const TangledWords = lazy(() => import("../Games/TangledWords/src/App"));
+const GuessTheColor = lazy(() => import("../Games/GuessTheColor/App"));
 
 function AllRoutes() {
   return (
@@ -66,6 +67,7 @@ function AllRoutes() {
         <Route path="/Chess" element={<ChessAI />} />
         <Route path="/Minesweeper" element={<Minesweeper />} />
         <Route path="/TangledWords" element={<TangledWords />} />
+        <Route path="/GuessTheColor" element={<GuessTheColor />} />
       </Routes>
     </Suspense>
   );