From 67f934bc8f20f7fda2e45d6c0bd84ab765ce01d6 Mon Sep 17 00:00:00 2001
From: Jason Christopher <jason.christopher@u.nus.edu>
Date: Sun, 29 May 2022 19:51:31 +0800
Subject: [PATCH 1/2] Attempted to integrate components

Connected Main.js to Hangman.js via state hook.

Attempted to integrate the keyboard component to Hangman.js, but hasn't been successful as of now.

Installed react-helmet
---
 app/package-lock.json                         | 110 ++++++++
 app/package.json                              |   2 +
 app/src/components/Hangman.css                |  41 +++
 app/src/components/Hangman.js                 |  40 +--
 app/src/components/Main.js                    | 250 ++++++++++--------
 app/src/components/Words.js                   |  16 ++
 app/{ => src/components}/keyboard/index.html  |   0
 .../keyboard/register-keystrokes.js           |   0
 app/{ => src/components}/keyboard/script.js   |   0
 app/{ => src/components}/keyboard/style.css   |   0
 10 files changed, 309 insertions(+), 150 deletions(-)
 rename app/{ => src/components}/keyboard/index.html (100%)
 rename app/{ => src/components}/keyboard/register-keystrokes.js (100%)
 rename app/{ => src/components}/keyboard/script.js (100%)
 rename app/{ => src/components}/keyboard/style.css (100%)

diff --git a/app/package-lock.json b/app/package-lock.json
index 866dfb0..21376a0 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -15,6 +15,8 @@
         "react": "^18.1.0",
         "react-bootstrap": "^2.4.0",
         "react-dom": "^18.1.0",
+        "react-helmet": "^6.1.0",
+        "react-router-dom": "^6.3.0",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
       }
@@ -8237,6 +8239,14 @@
         "he": "bin/he"
       }
     },
+    "node_modules/history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -13686,6 +13696,33 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
+    "node_modules/react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
+    "node_modules/react-helmet/node_modules/react-side-effect": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz",
+      "integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==",
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -13704,6 +13741,30 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+      "dependencies": {
+        "history": "^5.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+      "dependencies": {
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -22392,6 +22453,14 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "requires": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -26192,6 +26261,30 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
+    "react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      },
+      "dependencies": {
+        "react-side-effect": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz",
+          "integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==",
+          "requires": {}
+        }
+      }
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -26207,6 +26300,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+      "requires": {
+        "history": "^5.2.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+      "requires": {
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
+      }
+    },
     "react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
diff --git a/app/package.json b/app/package.json
index 0d2ea88..da2488b 100644
--- a/app/package.json
+++ b/app/package.json
@@ -10,6 +10,8 @@
     "react": "^18.1.0",
     "react-bootstrap": "^2.4.0",
     "react-dom": "^18.1.0",
+    "react-helmet": "^6.1.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
diff --git a/app/src/components/Hangman.css b/app/src/components/Hangman.css
index 3885d63..85fb2d5 100644
--- a/app/src/components/Hangman.css
+++ b/app/src/components/Hangman.css
@@ -4,3 +4,44 @@ body {
   background-attachment: fixed;
   background-size: cover;
 }
+
+#image {
+  position: absolute;
+  left: 50px;
+  top: 100px;
+  width: 40%;
+  height: auto;
+}
+
+
+#keyboard {
+  padding-top: 16px;
+}
+
+#keyboard .line {
+  display: flex;
+  width: max-content;
+  margin: 0 auto;
+}
+
+#keyboard .key {
+  background-color: white;
+  padding: 16px;
+  margin: 6px 12px;
+  cursor: pointer;
+  border-radius: 5px;
+}
+
+#keyboard .key.locked {
+  background-color: darkgray !important;
+  cursor: default !important;
+}
+
+#keyboard .key.clicked {
+  background-color: rgb(1,87,155);
+  box-shadow: none;
+}
+
+#keyboard .key.clicked.locked {
+  background-color: rgb(92, 92, 92) !important;
+}
diff --git a/app/src/components/Hangman.js b/app/src/components/Hangman.js
index bb5a217..66de771 100644
--- a/app/src/components/Hangman.js
+++ b/app/src/components/Hangman.js
@@ -1,6 +1,8 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { randomWord } from "./Words";
 import "./Hangman.css";
+import { Helmet } from "react-helmet";
+// import Keyboard from "./keyboard/createKeyboard.js"
 
 // import hangman images here:
 import initial_state from "../assets/initial_state.svg";
@@ -11,36 +13,6 @@ import state4 from "../assets/state4.svg";
 import state5 from "../assets/state5.svg";
 import state6 from "../assets/state6.svg";
 
-// List of alphabets in the english language
-const alphabetList = [
-  "a",
-  "b",
-  "c",
-  "d",
-  "e",
-  "f",
-  "g",
-  "h",
-  "i",
-  "j",
-  "k",
-  "l",
-  "m",
-  "n",
-  "o",
-  "p",
-  "q",
-  "r",
-  "s",
-  "t",
-  "u",
-  "v",
-  "w",
-  "x",
-  "y",
-  "z",
-];
-
 // List of images
 const imageList = [
   initial_state,
@@ -124,7 +96,7 @@ const Hangman = () => {
         <h1> Hangman </h1>
       </div>
       <div className="hangman-image">
-        <img src={imageList[imageID]} alt="hangman" />
+        <img id="image" src={imageList[imageID]} alt="hangman" />
       </div>
       <div className="letters-container">
         {[
@@ -138,8 +110,10 @@ const Hangman = () => {
         ))}
       </div>
       <br />
-      <div className="alphabets-container">
-        {/* TODO: Add alphabets here. Task is just to map the given alphabets */}
+      <div id="keyboard">
+        <Helmet>
+          <script src="/keyboard/script.js" type="text/javascript" />
+        </Helmet>
       </div>
     </div>
   );
diff --git a/app/src/components/Main.js b/app/src/components/Main.js
index 22b3ff6..143ce9f 100644
--- a/app/src/components/Main.js
+++ b/app/src/components/Main.js
@@ -10,6 +10,9 @@ import cry from "../assets/cry.svg";
 import win from "../assets/win.svg";
 
 import { Modal, Button, CloseButton } from "react-bootstrap";
+
+import Hangman from "./Hangman"
+
 export default function Main() {
   // const [buttonPopup,setButtonPopup] = useState(true);
   //lose modal
@@ -29,123 +32,136 @@ export default function Main() {
   const instructionClose = () => setInstruction(false);
   const instructionShow = () => setInstruction(true);
 
-  return (
-    <div>
-      <main>
-        <div class="container">
-          <img src={main_man} class="manImg" />
-          <div id="hometxt">
-            <h1 class="center">HANG MAN</h1>
-            <button class="homeBtn">Start</button>
-            <button class="homeBtn" onClick={instructionShow}>
-              How To Play
-            </button>
-            {/* <button onclick={()=>setButtonPopup(true)}>
-                    open popup win</button> */}
-            <Button variant="primary" onClick={loseShow}>
-              Launch lose model
-            </Button>
-
-            <Button variant="primary" onClick={winShow}>
-              Launch win model
-            </Button>
-          </div>
-          <Modal show={showLose} onHide={loseClose}>
-            {/* <Modal.Header>
-                    <CloseButton variant="white" onClick={instructionClose} />
-                  <Modal.Title>Modal heading</Modal.Title> 
-                     </Modal.Header> */}
-            <Modal.Body>
-              <div>
-                <img src={cry} className="loseWin" />
-                <div class="gameOver">Game Over</div>
-
-                <Button onClick={loseClose} className="tryPlayAgainBtn">
-                  Try again
-                </Button>
-              </div>
-            </Modal.Body>
-            {/* <Modal.Footer>
-                    <Button variant="secondary" onClick={loseClose}>
-                      Close
-                    </Button>
-                    <Button variant="primary" onClick={loseClose}>
-                      Save Changes
-                    </Button>
-                  </Modal.Footer> */}
-          </Modal>
-
-          <Modal show={showWin} onHide={winClose}>
-            {/* <Modal.Header>
-                    <CloseButton variant="white" onClick={instructionClose} />
-                  <Modal.Title>Modal heading</Modal.Title> 
-                     </Modal.Header> */}
-            <Modal.Body>
-              <div>
-                <img src={win} className="loseWin" />
-                <div class="gameOver">You Win</div>
+  const [start, setStart] = useState(false);
 
-                <Button onClick={winClose} className="tryPlayAgainBtn">
-                  Play again
-                </Button>
-              </div>
-            </Modal.Body>
-            {/* <Modal.Footer>
-                    <Button variant="secondary" onClick={loseClose}>
-                      Close
-                    </Button>
-                    <Button variant="primary" onClick={loseClose}>
-                      Save Changes
-                    </Button>
-                  </Modal.Footer> */}
-          </Modal>
-
-          <Modal show={instruction} onHide={instructionClose}>
-            {/* <Modal.Header>
-                  <CloseButton variant="white" onClick={instructionClose}/>
-                  <Modal.Title>Modal heading</Modal.Title> 
-                  </Modal.Header> */}
-            <Modal.Body>
-              {/* <img src={cry}/> */}
-              <div class="instructionTxt">
-                1. Guess the letter of the word.
-                <br></br>
-                <br></br>
-                2. Click the letter on the keyboard shown on the screen to
-                select the letter you have guessed.
-                <br></br>
-                <br></br>
-                3. A body part will be added if wrong letter was guessed.
-                <br></br>
-                <br></br>
-                4. Letters which are correctly guessed will be shown on the
-                screen.
-                <br></br>
-                <br></br>
-                5. If all the body parts are shown, the game ends.
-              </div>
-
-              <Button onClick={instructionClose} className="tryPlayAgainBtn">
-                Close
+  if (start) {
+    return (
+      <div>
+        <Hangman />
+      </div>
+    )
+  } else {
+    return (
+      <div>
+        <main>
+          <div class="container">
+            <img src={main_man} class="manImg" />
+            <div id="hometxt">
+              <h1 class="center">HANG MAN</h1>
+              <button class="homeBtn" onClick={() => setStart(true)}>Start</button>
+              <button class="homeBtn" onClick={instructionShow}>
+                How To Play
+              </button>
+  
+  
+              {/* <button onclick={()=>setButtonPopup(true)}>
+                      open popup win</button> */}
+              <Button variant="primary" onClick={loseShow}>
+                Launch lose model
               </Button>
-            </Modal.Body>
-            {/* <Modal.Footer>
-                    <Button variant="secondary" onClick={loseClose}>
-                      Close
-                    </Button>
-                    <Button variant="primary" onClick={loseClose}>
-                      Save Changes
-                    </Button>
-                  </Modal.Footer> */}
-          </Modal>
-        </div>
-      </main>
-      {/*         
-    <Popup trigger={buttonPopup} setTrigger={setButtonPopup}>
-    <img src={cry}/>
-        <div class="gameOverWin">Game Over</div>
-        <button class="homeBtn">Try again</button>
-    </Popup> */}
-    </div>
-  );
+  
+              <Button variant="primary" onClick={winShow}>
+                Launch win model
+              </Button>
+            </div>
+            <Modal show={showLose} onHide={loseClose}>
+              {/* <Modal.Header>
+                      <CloseButton variant="white" onClick={instructionClose} />
+                    <Modal.Title>Modal heading</Modal.Title> 
+                       </Modal.Header> */}
+              <Modal.Body>
+                <div>
+                  <img src={cry} className="loseWin" />
+                  <div class="gameOver">Game Over</div>
+  
+                  <Button onClick={loseClose} className="tryPlayAgainBtn">
+                    Try again
+                  </Button>
+                </div>
+              </Modal.Body>
+              {/* <Modal.Footer>
+                      <Button variant="secondary" onClick={loseClose}>
+                        Close
+                      </Button>
+                      <Button variant="primary" onClick={loseClose}>
+                        Save Changes
+                      </Button>
+                    </Modal.Footer> */}
+            </Modal>
+  
+            <Modal show={showWin} onHide={winClose}>
+              {/* <Modal.Header>
+                      <CloseButton variant="white" onClick={instructionClose} />
+                    <Modal.Title>Modal heading</Modal.Title> 
+                       </Modal.Header> */}
+              <Modal.Body>
+                <div>
+                  <img src={win} className="loseWin" />
+                  <div class="gameOver">You Win</div>
+  
+                  <Button onClick={winClose} className="tryPlayAgainBtn">
+                    Play again
+                  </Button>
+                </div>
+              </Modal.Body>
+              {/* <Modal.Footer>
+                      <Button variant="secondary" onClick={loseClose}>
+                        Close
+                      </Button>
+                      <Button variant="primary" onClick={loseClose}>
+                        Save Changes
+                      </Button>
+                    </Modal.Footer> */}
+            </Modal>
+  
+            <Modal show={instruction} onHide={instructionClose}>
+              {/* <Modal.Header>
+                    <CloseButton variant="white" onClick={instructionClose}/>
+                    <Modal.Title>Modal heading</Modal.Title> 
+                    </Modal.Header> */}
+              <Modal.Body>
+                {/* <img src={cry}/> */}
+                <div class="instructionTxt">
+                  1. Guess the letter of the word.
+                  <br></br>
+                  <br></br>
+                  2. Click the letter on the keyboard shown on the screen to
+                  select the letter you have guessed.
+                  <br></br>
+                  <br></br>
+                  3. A body part will be added if wrong letter was guessed.
+                  <br></br>
+                  <br></br>
+                  4. Letters which are correctly guessed will be shown on the
+                  screen.
+                  <br></br>
+                  <br></br>
+                  5. If all the body parts are shown, the game ends.
+                </div>
+  
+                <Button onClick={instructionClose} className="tryPlayAgainBtn">
+                  Close
+                </Button>
+              </Modal.Body>
+              {/* <Modal.Footer>
+                      <Button variant="secondary" onClick={loseClose}>
+                        Close
+                      </Button>
+                      <Button variant="primary" onClick={loseClose}>
+                        Save Changes
+                      </Button>
+                    </Modal.Footer> */}
+            </Modal>
+          </div>
+        </main>
+        {/*         
+      <Popup trigger={buttonPopup} setTrigger={setButtonPopup}>
+      <img src={cry}/>
+          <div class="gameOverWin">Game Over</div>
+          <button class="homeBtn">Try again</button>
+      </Popup> */}
+      </div>
+    );
+  }
+  
 }
diff --git a/app/src/components/Words.js b/app/src/components/Words.js
index 178c598..76c6f40 100644
--- a/app/src/components/Words.js
+++ b/app/src/components/Words.js
@@ -863,4 +863,20 @@ function randomWord() {
   return wordList[Math.floor(Math.random() * wordList.length)];
 }
 
+const easyWordList = []
+const mediumWordList = []
+const difficultWordList = []
+
+function randomEasyWord() {
+  return easyWordList[Math.floor(Math.random() * easyWordList.length)]
+}
+
+function randomMediumWord() {
+  return mediumWordList[Math.floor(Math.random() * mediumWordList.length)]
+}
+
+function randomDifficultWord() {
+  return difficultWordList[Math.floor(Math.random() * difficultWordList.length)]
+}
+
 export { randomWord };
diff --git a/app/keyboard/index.html b/app/src/components/keyboard/index.html
similarity index 100%
rename from app/keyboard/index.html
rename to app/src/components/keyboard/index.html
diff --git a/app/keyboard/register-keystrokes.js b/app/src/components/keyboard/register-keystrokes.js
similarity index 100%
rename from app/keyboard/register-keystrokes.js
rename to app/src/components/keyboard/register-keystrokes.js
diff --git a/app/keyboard/script.js b/app/src/components/keyboard/script.js
similarity index 100%
rename from app/keyboard/script.js
rename to app/src/components/keyboard/script.js
diff --git a/app/keyboard/style.css b/app/src/components/keyboard/style.css
similarity index 100%
rename from app/keyboard/style.css
rename to app/src/components/keyboard/style.css

From d70d2ecbab8cb6e7b750cfe959cde9e68a350bba Mon Sep 17 00:00:00 2001
From: Jason Christopher <jason.christopher@u.nus.edu>
Date: Sun, 29 May 2022 21:16:42 +0800
Subject: [PATCH 2/2] Update Main.js

Update so that it can be merged to the main branch, still same as main branch.
---
 app/src/components/Main.js | 269 ++++++++++++++++++++-----------------
 1 file changed, 142 insertions(+), 127 deletions(-)

diff --git a/app/src/components/Main.js b/app/src/components/Main.js
index 143ce9f..dccc82d 100644
--- a/app/src/components/Main.js
+++ b/app/src/components/Main.js
@@ -1,20 +1,17 @@
 // import React, { useState } from "react";
-import React from "react";
-import "../index.css";
-import main_man from "../assets/main_man.svg";
+import React from "react"
+import '../index.css';
+import main_man from "../Img/main_man.svg";
 // import main_text from "../Img/main_text.png"
 
 // import Popup from "./Popup";
-import { useState } from "react";
-import cry from "../assets/cry.svg";
-import win from "../assets/win.svg";
-
-import { Modal, Button, CloseButton } from "react-bootstrap";
-
-import Hangman from "./Hangman"
+import {useState} from "react";
+import cry from "../Img/cry.svg"
+import win from "../Img/win.svg"
 
+import {Modal,Button,CloseButton,ButtonGroup} from 'react-bootstrap'  
 export default function Main() {
-  // const [buttonPopup,setButtonPopup] = useState(true);
+    // const [buttonPopup,setButtonPopup] = useState(true);
   //lose modal
   const [showLose, setLoseShow] = useState(false);
   const loseClose = () => setLoseShow(false);
@@ -32,136 +29,154 @@ export default function Main() {
   const instructionClose = () => setInstruction(false);
   const instructionShow = () => setInstruction(true);
 
-  const [start, setStart] = useState(false);
+    //start modal
+    const [showStart, setStart] = useState(false);
+
+    const startClose = () => setStart(false);
+    const startShow = () => setStart(true);
 
-  if (start) {
-    return (
-      <div>
-        <Hangman />
-      </div>
-    )
-  } else {
     return (
-      <div>
+        <div>
         <main>
-          <div class="container">
-            <img src={main_man} class="manImg" />
-            <div id="hometxt">
-              <h1 class="center">HANG MAN</h1>
-              <button class="homeBtn" onClick={() => setStart(true)}>Start</button>
-              <button class="homeBtn" onClick={instructionShow}>
-                How To Play
-              </button>
-  
-  
-              {/* <button onclick={()=>setButtonPopup(true)}>
-                      open popup win</button> */}
-              <Button variant="primary" onClick={loseShow}>
-                Launch lose model
-              </Button>
-  
-              <Button variant="primary" onClick={winShow}>
-                Launch win model
-              </Button>
-            </div>
-            <Modal show={showLose} onHide={loseClose}>
-              {/* <Modal.Header>
-                      <CloseButton variant="white" onClick={instructionClose} />
-                    <Modal.Title>Modal heading</Modal.Title> 
-                       </Modal.Header> */}
-              <Modal.Body>
-                <div>
-                  <img src={cry} className="loseWin" />
-                  <div class="gameOver">Game Over</div>
-  
-                  <Button onClick={loseClose} className="tryPlayAgainBtn">
-                    Try again
-                  </Button>
-                </div>
-              </Modal.Body>
-              {/* <Modal.Footer>
-                      <Button variant="secondary" onClick={loseClose}>
-                        Close
-                      </Button>
-                      <Button variant="primary" onClick={loseClose}>
-                        Save Changes
-                      </Button>
-                    </Modal.Footer> */}
-            </Modal>
-  
-            <Modal show={showWin} onHide={winClose}>
-              {/* <Modal.Header>
-                      <CloseButton variant="white" onClick={instructionClose} />
-                    <Modal.Title>Modal heading</Modal.Title> 
-                       </Modal.Header> */}
-              <Modal.Body>
-                <div>
-                  <img src={win} className="loseWin" />
-                  <div class="gameOver">You Win</div>
-  
-                  <Button onClick={winClose} className="tryPlayAgainBtn">
-                    Play again
-                  </Button>
-                </div>
-              </Modal.Body>
-              {/* <Modal.Footer>
-                      <Button variant="secondary" onClick={loseClose}>
-                        Close
+            <div class="container">
+                <img src={main_man} class="manImg"/>
+                <div id="hometxt">
+                <h1 class="center">HANG MAN</h1>
+                <button class="homeBtn" onClick={startShow}>Start</button>
+                <button class="homeBtn" onClick={instructionShow}>How To Play</button>
+                {
+                /* <button onclick={()=>setButtonPopup(true)}>
+                    open popup win</button> */}
+                  <Button variant="primary" onClick={loseShow}>
+                  Launch lose model
+                 </Button>
+
+                 <Button variant="primary" onClick={winShow}>
+                  Launch win model
+                 </Button>
+                 </div> 
+                 <Modal show={showLose} onHide={loseClose}>
+                    {/* <Modal.Header>
+                    <CloseButton variant="white" onClick={instructionClose} />
+                  <Modal.Title>Modal heading</Modal.Title> 
+                     </Modal.Header> */}
+                  <Modal.Body>
+                    <div>
+                    <img src={cry} className="loseWin"/>
+                    <div class="gameOver">Game Over</div>
+                
+                    <Button  onClick={loseClose} className="tryPlayAgainBtn">Try again
                       </Button>
-                      <Button variant="primary" onClick={loseClose}>
-                        Save Changes
+                    </div>
+                  </Modal.Body>
+                  {/* <Modal.Footer>
+                    <Button variant="secondary" onClick={loseClose}>
+                      Close
+                    </Button>
+                    <Button variant="primary" onClick={loseClose}>
+                      Save Changes
+                    </Button>
+                  </Modal.Footer> */}
+                </Modal>
+              
+                <Modal show={showWin} onHide={winClose}>
+                    {/* <Modal.Header>
+                    <CloseButton variant="white" onClick={instructionClose} />
+                  <Modal.Title>Modal heading</Modal.Title> 
+                     </Modal.Header> */}
+                  <Modal.Body>
+                    <div>
+                    <img src={win} className="loseWin"/>
+                    <div class="gameOver">You Win</div>
+                
+                    <Button  onClick={winClose} className="tryPlayAgainBtn">Play again
                       </Button>
-                    </Modal.Footer> */}
-            </Modal>
-  
-            <Modal show={instruction} onHide={instructionClose}>
-              {/* <Modal.Header>
-                    <CloseButton variant="white" onClick={instructionClose}/>
-                    <Modal.Title>Modal heading</Modal.Title> 
-                    </Modal.Header> */}
-              <Modal.Body>
-                {/* <img src={cry}/> */}
-                <div class="instructionTxt">
+                    </div>
+                  </Modal.Body>
+                  {/* <Modal.Footer>
+                    <Button variant="secondary" onClick={loseClose}>
+                      Close
+                    </Button>
+                    <Button variant="primary" onClick={loseClose}>
+                      Save Changes
+                    </Button>
+                  </Modal.Footer> */}
+                </Modal>
+              
+                <Modal show={instruction} onHide={instructionClose}>
+                  {/* <Modal.Header>
+                  <CloseButton variant="white" onClick={instructionClose}/>
+                  <Modal.Title>Modal heading</Modal.Title> 
+                  </Modal.Header> */}
+                  <Modal.Body>
+                  {/* <img src={cry}/> */}
+                  <div class="instructionTxt">
                   1. Guess the letter of the word.
                   <br></br>
                   <br></br>
-                  2. Click the letter on the keyboard shown on the screen to
-                  select the letter you have guessed.
+                  2. Click the letter on the keyboard shown on the screen to select the letter you have guessed.
                   <br></br>
                   <br></br>
                   3. A body part will be added if wrong letter was guessed.
                   <br></br>
                   <br></br>
-                  4. Letters which are correctly guessed will be shown on the
-                  screen.
+                  4. Letters which are correctly guessed will be shown on the screen.
                   <br></br>
                   <br></br>
                   5. If all the body parts are shown, the game ends.
-                </div>
-  
-                <Button onClick={instructionClose} className="tryPlayAgainBtn">
-                  Close
-                </Button>
-              </Modal.Body>
-              {/* <Modal.Footer>
-                      <Button variant="secondary" onClick={loseClose}>
-                        Close
-                      </Button>
-                      <Button variant="primary" onClick={loseClose}>
-                        Save Changes
-                      </Button>
-                    </Modal.Footer> */}
-            </Modal>
-          </div>
+                  </div>
+              
+                  <Button  onClick={instructionClose} className="tryPlayAgainBtn">Close
+                    </Button>
+
+                  </Modal.Body>
+                  {/* <Modal.Footer>
+                    <Button variant="secondary" onClick={loseClose}>
+                      Close
+                    </Button>
+                    <Button variant="primary" onClick={loseClose}>
+                      Save Changes
+                    </Button>
+                  </Modal.Footer> */}
+                </Modal>
+
+                <Modal show={showStart} onHide={startClose}>
+                    <Modal.Header>
+                    <CloseButton variant="white" onClick={startClose} />
+                  {/* <Modal.Title>Modal heading</Modal.Title>  */}
+                    </Modal.Header>
+                  <Modal.Body>
+                    <div>
+ 
+                  <ButtonGroup vertical size="lg" className="mb-2">
+                    <Button variant="outline-success" id="easy">Easy</Button>
+                    <Button variant="outline-warning" id="medium">Medium</Button>
+                    <Button variant="outline-danger" id="hard">Hard</Button>
+                  </ButtonGroup>
+                  <Button className="popupStartBtn">Start</Button>
+                    <br />
+                    </div>
+                  </Modal.Body>
+                  {/* <Modal.Footer>
+                    <Button variant="secondary" onClick={loseClose}>
+                      Close
+                    </Button>
+                    <Button variant="primary" onClick={loseClose}>
+                      Save Changes
+                    </Button>
+                  </Modal.Footer> */}
+                </Modal>
+            </div>
+        
+
+        
         </main>
-        {/*         
-      <Popup trigger={buttonPopup} setTrigger={setButtonPopup}>
-      <img src={cry}/>
-          <div class="gameOverWin">Game Over</div>
-          <button class="homeBtn">Try again</button>
-      </Popup> */}
-      </div>
-    );
-  }
-  
-}
+{/*         
+    <Popup trigger={buttonPopup} setTrigger={setButtonPopup}>
+    <img src={cry}/>
+        <div class="gameOverWin">Game Over</div>
+        <button class="homeBtn">Try again</button>
+    </Popup> */}
+    </div>
+      ) 
+}
\ No newline at end of file