modified

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}/>
  </>
  );
 }

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'>

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;

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);
+ }
+}

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;