From d2e508797796c2d61d16cbf1493ec0936bd81e92 Mon Sep 17 00:00:00 2001
From: Saksham chandel <94097778+yung-coder@users.noreply.github.com>
Date: Wed, 17 Aug 2022 19:03:31 +0530
Subject: [PATCH] modified

---
 src/plays/code-editor/CodeEditor.js |  12 ++
 src/plays/code-editor/Editor.jsx    |   1 +
 src/plays/code-editor/Modal.jsx     | 110 ++++++++++++++++
 src/plays/code-editor/close.png     | Bin 0 -> 957 bytes
 src/plays/code-editor/modal.css     | 194 ++++++++++++++++++++++++++++
 src/plays/code-editor/styles.css    |   7 +
 6 files changed, 324 insertions(+)
 create mode 100644 src/plays/code-editor/Modal.jsx
 create mode 100644 src/plays/code-editor/close.png
 create mode 100644 src/plays/code-editor/modal.css

diff --git a/src/plays/code-editor/CodeEditor.js b/src/plays/code-editor/CodeEditor.js
index 5a71bd2af..9c6f87b11 100644
--- a/src/plays/code-editor/CodeEditor.js
+++ b/src/plays/code-editor/CodeEditor.js
@@ -3,6 +3,7 @@ import "./styles.css";
 import React, { useState, useEffect } from "react";
 import Editor from "./Editor";
 import Button from './Button'
+import Modal from './Modal';
 // WARNING: Do not change the entry componenet name
 function CodeEditor(props) {
   // Your Code Start below.
@@ -34,12 +35,22 @@ function CodeEditor(props) {
 
     return () => clearTimeout(timeOut);
   }, [html, css, js]);
+
+  const [showModal, setShowModal] = useState(false);
+
+  const toggle = (e) => {
+
+    setShowModal(!showModal);
+  };
   return (
     <>
       <div className="play-details">
         <PlayHeader play={props} />
         <div className="play-details-body ">
           {/* Your Code Starts Here */}
+          <div className="code-eitor-modal-toogle">
+            <button onClick={toggle}>How to play ?</button>
+          </div>
           <div className="code-editor-tab-button-container">
             <Button
               backgroundColor={activeButton === "html" ? "#98AFC7" : ""}
@@ -104,6 +115,7 @@ function CodeEditor(props) {
           {/* Your Code Ends Here */}
         </div>
       </div>
+      <Modal showModal={showModal} toggle={toggle}/>
     </>
   );
 }
diff --git a/src/plays/code-editor/Editor.jsx b/src/plays/code-editor/Editor.jsx
index 2ab0a39d1..9202459ff 100644
--- a/src/plays/code-editor/Editor.jsx
+++ b/src/plays/code-editor/Editor.jsx
@@ -24,6 +24,7 @@ const Editor = ({ language, value, setEditorState }) => {
   }
   
   const themeArray = ['dracula', 'material', 'mdn-like', 'the-matrix', 'night']
+  
   return (
   <div className="code-editor-container">
       <div className='code-editor-dropdown'>
diff --git a/src/plays/code-editor/Modal.jsx b/src/plays/code-editor/Modal.jsx
new file mode 100644
index 000000000..6ff4ede35
--- /dev/null
+++ b/src/plays/code-editor/Modal.jsx
@@ -0,0 +1,110 @@
+// import { Fragment, useState, useEffect } from "react";
+
+// import "./modal.css";
+// import close from './close.png'
+
+// const Modal = ({ showModal, toggle }) => {
+//   const [currState, setCurrentState] = useState(0);
+
+  
+
+//   useEffect(() => {
+//     setCurrentState(0);
+//   }, [showModal]);
+
+//   const buttonHandler = (val) => (e) => {
+//     if ((currState === 0 && val < 0) || (currState === 3 && val > 0)) return;
+//     setCurrentState(currState + val);
+//   };
+
+//   if (!showModal) return false;
+
+//   return (
+//     <Fragment>
+    
+//       <div className='memory-game-modal'>
+//         <img  src={close} alt="close" onClick={toggle} className="close-icon" />
+//         <div className='content'>
+//           <h1 className='text'>How to Play!</h1>
+//           <p>Yo</p>
+//           <div className='button-section'>
+//             {currState > 0 ? <button onClick={buttonHandler(-1)}>Prev</button> : <p></p>}
+//             <button onClick={currState === 3 ? toggle : buttonHandler(1)}>
+//               {currState === 3 ? "Done" : "Next"}
+//             </button>
+//           </div>
+//         </div>
+//       </div>
+//       <div onClick={toggle} className='memory-game-backdrop' />
+//     </Fragment>
+//   );
+// };
+
+// export default Modal;
+
+import { Fragment, useState, useEffect } from "react";
+
+// css
+import "./modal.css";
+
+// assets
+
+import close from './close.png'
+
+const Modal = ({ showModal, toggle }) => {
+  const [currState, setCurrentState] = useState(0);
+
+  const structuringData = [
+    {
+      info: "Click any of the box to unvail the the hidden image.",
+      
+    },
+    {
+      info: "Now Click another box to unvail another image. if its not the same the both of them will be hidden again.",
+     
+    },
+    {
+      info: "If the both images are matched they will stay visible and you want to uncover other images and also find their pair",
+      
+    },
+    {
+      info: "Lastly images position will be different on every 'reset' button click any you can keep continue memorise the glimpse of the images and find their pair. ",
+      
+    },
+  ];
+
+  useEffect(() => {
+    setCurrentState(0);
+  }, [showModal]);
+
+  const buttonHandler = (val) => (e) => {
+    if ((currState === 0 && val < 0) || (currState === 3 && val > 0)) return;
+    setCurrentState(currState + val);
+  };
+  if (!showModal) return false;
+  return (
+    <Fragment>
+      <div className='memory-game-modal'>
+        <img src={close} alt="clonse" onClick={toggle} className="close-icon" />
+        <div className='content'>
+          <h1 className='text'>How to Play!</h1>
+          <p>{structuringData[currState].info}</p>
+          {/* <img
+            className='guide-image'
+            src={structuringData[currState].image}
+            alt='pic'
+          /> */}
+          <div className='button-section'>
+            {currState > 0 ? <button onClick={buttonHandler(-1)}>Prev</button> : <p></p>}
+            <button onClick={currState === 3 ? toggle : buttonHandler(1)}>
+              {currState === 3 ? "Done" : "Next"}
+            </button>
+          </div>
+        </div>
+      </div>
+      <div onClick={toggle} className='memory-game-backdrop' />
+    </Fragment>
+  );
+};
+
+export default Modal;
diff --git a/src/plays/code-editor/close.png b/src/plays/code-editor/close.png
new file mode 100644
index 0000000000000000000000000000000000000000..61330d6b1b1ce00ebfc878afa5b6c1f373d00a91
GIT binary patch
literal 957
zcmV;u148_XP)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF00004b3#c}2nYxW
zd<bNS00009a7bBm0005l0005l0s35~asU7T8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H113F1WK~#90)tfzQ6hRn(pF|Y=C=L|~iX=vD;>U4#l?1;<&=|EB
z{3rea?X0x4u@l5Xi4asQ#7-MYif9ay7&R(*(Gc`3=3baHcgfDqJF~M7OcB_b-RH@M
zJ7%*zw6h)<0fvDsz#Q-hcu6^_0mp#Nz$`EZeC&4cFfau)JB%@4XW)y~WFPRHl^%b9
zJD6W?8^?jg4ioG#1@wo%c5mvy0;{{c0yfEnjllF86Uq{y4tyh<%PpC7HRA*s?|^{_
zGOoDDH-RN!E5L1sNiyC8dtz8+#8qC#m0nsE9O(z10egL~T!A|91gPYg+t-WvsLR7{
zU>q3CIbQ=Gd4MkfqqyHX_V_?CcS7FVUdA%5kM?!IYmbGRzzpWIHx|C~P2jG*;1K3^
z@QtuPh;BO?@{_>!{}-+TpFJ0z#l#Fn4fyJLjg!ExZYR))Fh`gO!R3V%BSe!Iv?3hH
zYito+UeJi}3BL%1$qQN$4(2#_;qro3ghLMJOh#VNh%isK2+7F{F(M=@FK9(L++pqH
z<pqrh3&0U;&C<vVS`q4$P+ri8@S`<KCogD3D6PCuRD>kth1e02k{4n{NK#%19U*CX
zAykA?$P3yLN+mB;@!z~`Vz%9b$@hj@xV3hV!aCbX;|Y`#8eebi@e}h1zZ7W8+YwI0
z)5u3C`BFp(EpJCS8ObR#vE*emNGL*Vc{{?X2!5+llzb8qG~}lh)@T5y1G}z3a~n(J
zYjXoQ6V%uu#2%hTghe7m2)Ti&72&L^u|<sCTa5_6feR|e7BRQ3wIYmo8Cw*wZ?6$y
z3AmWc*rLdX7KKMh;fak_gi+TMrywsxkC2kQpcUcLS|>_TUeJngx!Va+mKTCWsNuhZ
zJ3*ZHimLekTkjHZP8O_Sww}u%FK9&g4)g(B_gpBpyr2=`Ccqny1&Wdvd?UPtwO^M@
zRbKFk@C(e}g6qW8p4H`zFc0w5aZ+mXLY@c@0j@brNaeQghHHfLVBQ%T&v0<+@<P@x
zOKtBARe*cI-!2C~0Cq&Vd>saX7j$-625tZwVCCcMA<S(t(E51>c#L_gtc)DRJU5U#
fcLKPN@dDr<cXa5`fOQ!%00000NkvXXu0mjfA4i}j

literal 0
HcmV?d00001

diff --git a/src/plays/code-editor/modal.css b/src/plays/code-editor/modal.css
new file mode 100644
index 000000000..92466e572
--- /dev/null
+++ b/src/plays/code-editor/modal.css
@@ -0,0 +1,194 @@
+.memory-game-backdrop {
+    position: fixed;
+    top: 10%;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 10;
+}
+.memory-game-modal {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #fff;
+    width: 50vw;
+    max-width: 800px;
+    z-index: 11;
+    border-radius: 10px;
+    animation: modalApear 0.3s ease-in-out;
+}
+.memory-game-modal .close-icon {
+    position: absolute;
+    right: 1.5rem;
+    top: 1.5rem;
+    width: 30px;
+    padding: 5px;
+    filter: brightness(0.1);
+    cursor: pointer;
+}
+@media screen and (max-width: 768px) {
+    .memory-game-modal .close-icon {
+        right: 1rem;
+        top: 1rem;
+        width: 30px;
+   }
+}
+.memory-game-modal .content {
+    margin: 0 2rem;
+    padding: 2rem;
+}
+.memory-game-modal .content .text {
+    text-align: center;
+    font-size: 1.6rem;
+    font-weight: bold;
+}
+.memory-game-modal .content p {
+    margin: 0.6rem 0 1rem 0;
+    text-align: center;
+}
+.memory-game-modal .content .guide-image {
+    display: block;
+    margin: 0 auto;
+    max-width: 70%;
+    height: auto;
+}
+.memory-game-modal .content .button-section {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 32px;
+}
+.memory-game-modal .content .button-section button {
+    padding: 0.5rem 2rem;
+    font-size: 1rem;
+    border-radius: 20px;
+    border: none;
+    background-color: rgba(81, 91, 212, 1);
+    outline: none;
+    color: #fff;
+    font-weight: bold;
+}
+.memory-game-modal .content .button-section button:disabled {
+    background-color: rgba(81, 91, 212, 0.5);
+    pointer-events: none;
+}
+@media screen and (max-width: 768px) {
+    .memory-game-modal .content .button-section {
+        padding: 0;
+        margin-top: 10px;
+   }
+}
+@keyframes modalApear {
+    0% {
+        opacity: 0;
+        top: 48%;
+   }
+    100% {
+        opacity: 1;
+        top: 50%;
+   }
+}
+@media screen and (max-width: 768px) {
+    .memory-game-modal {
+        width: calc(100vw - 20px);
+   }
+}
+.memory-game-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 10;
+}
+.memory-game-modal {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #fff;
+    width: 50vw;
+    max-width: 800px;
+    z-index: 11;
+    border-radius: 10px;
+    animation: modalApear 0.3s ease-in-out;
+}
+.memory-game-modal .close-icon {
+    position: absolute;
+    right: 1.5rem;
+    top: 1.5rem;
+    width: 30px;
+    padding: 5px;
+    filter: brightness(0.1);
+    cursor: pointer;
+}
+@media screen and (max-width: 768px) {
+    .memory-game-modal .close-icon {
+        right: 1rem;
+        top: 1rem;
+        width: 30px;
+   }
+}
+.memory-game-modal .content {
+    margin: 0 2rem;
+    padding: 2rem;
+}
+.memory-game-modal .content .text {
+    text-align: center;
+    font-size: 1.6rem;
+    font-weight: bold;
+}
+.memory-game-modal .content p {
+    margin: 0.6rem 0 1rem 0;
+    text-align: center;
+}
+.memory-game-modal .content .guide-image {
+    display: block;
+    margin: 0 auto;
+    max-width: 70%;
+    height: auto;
+}
+.memory-game-modal .content .button-section {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 32px;
+}
+.memory-game-modal .content .button-section button {
+    padding: 0.5rem 2rem;
+    font-size: 1rem;
+    border-radius: 20px;
+    border: none;
+    background-color: rgba(81, 91, 212, 1);
+    outline: none;
+    color: #fff;
+    font-weight: bold;
+}
+.memory-game-modal .content .button-section button:disabled {
+    background-color: rgba(81, 91, 212, 0.5);
+    pointer-events: none;
+}
+@media screen and (max-width: 768px) {
+    .memory-game-modal .content .button-section {
+        padding: 0;
+        margin-top: 10px;
+   }
+}
+@keyframes modalApear {
+    0% {
+        opacity: 0;
+        top: 48%;
+   }
+    100% {
+        opacity: 1;
+        top: 50%;
+   }
+}
+@media screen and (max-width: 768px) {
+    .memory-game-modal {
+        width: calc(100vw - 20px);
+   }
+}
\ No newline at end of file
diff --git a/src/plays/code-editor/styles.css b/src/plays/code-editor/styles.css
index f0a5155b6..6bbdc0298 100644
--- a/src/plays/code-editor/styles.css
+++ b/src/plays/code-editor/styles.css
@@ -3,6 +3,7 @@
   display: flex;
   flex-direction: row;
   margin-left: 40%;
+  margin-top: 25px;
 }
 .code-editor-container{
   padding-top: 0.5%;
@@ -65,6 +66,12 @@
   color: white;
   margin-top: 10px;
 }
+.code-eitor-modal-toogle{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: xx-large;
+}
 @media (max-width: 764px){
    .code-editor-tab-button-container{
     flex-direction: column;