modal added

rh-abir · Aug 18, 2022 · 3b06711 · 3b06711
1 parent d2e5087
commit 3b06711
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 87 deletions.
diff --git a/src/plays/code-editor/CodeEditor.js b/src/plays/code-editor/CodeEditor.js
@@ -48,7 +48,7 @@ function CodeEditor(props) {
  <PlayHeader play={props} />
  <div className="play-details-body ">
  {/* Your Code Starts Here */}
- <div className="code-eitor-modal-toogle">
+ <div className="code-editor-modal-toogle">
  <button onClick={toggle}>How to play ?</button>
  </div>
  <div className="code-editor-tab-button-container">

diff --git a/src/plays/code-editor/Modal.jsx b/src/plays/code-editor/Modal.jsx
@@ -1,74 +1,27 @@
-// 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: "Its a code editor for html css and js made using codemirror your can write your code seprately from html css and js ",
 
  },
  {
- info: "Now Click another box to unvail another image. if its not the same the both of them will be hidden again.",
+ info: "Javascript will work normally and can be used to manipulate things but their will not be shown any output for it like for console loging ",
 
  },
  {
- info: "If the both images are matched they will stay visible and you want to uncover other images and also find their pair",
+ info: "Css output will be shown when try to make style changes using it ",
 
  },
  {
- 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. ",
+ info: "Lastly all your output will be displayed in output section as you type ",
 
  },
  ];
@@ -84,16 +37,11 @@ const Modal = ({ showModal, toggle }) => {
  if (!showModal) return false;
  return (
  <Fragment>
- <div className='memory-game-modal'>
+ <div className='code-editor-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)}>
@@ -102,9 +50,9 @@ const Modal = ({ showModal, toggle }) => {
  </div>
  </div>
  </div>
- <div onClick={toggle} className='memory-game-backdrop' />
+ <div onClick={toggle} className='code-editor-backdrop' />
  </Fragment>
  );
 };
 
-export default Modal;
+export default Modal;
diff --git a/src/plays/code-editor/modal.css b/src/plays/code-editor/modal.css
@@ -1,4 +1,4 @@
-.memory-game-backdrop {
+.code-editor-backdrop {
  position: fixed;
  top: 10%;
  left: 0;
@@ -7,7 +7,7 @@
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
 }
-.memory-game-modal {
+.code-editor-modal {
  position: absolute;
  top: 50%;
  left: 50%;
@@ -19,7 +19,7 @@
  border-radius: 10px;
  animation: modalApear 0.3s ease-in-out;
 }
-.memory-game-modal .close-icon {
+.code-editor-modal .close-icon {
  position: absolute;
  right: 1.5rem;
  top: 1.5rem;
@@ -29,38 +29,38 @@
  cursor: pointer;
 }
 @media screen and (max-width: 768px) {
- .memory-game-modal .close-icon {
+ .code-editor-modal .close-icon {
  right: 1rem;
  top: 1rem;
  width: 30px;
  }
 }
-.memory-game-modal .content {
+.code-editor-modal .content {
  margin: 0 2rem;
  padding: 2rem;
 }
-.memory-game-modal .content .text {
+.code-editor-modal .content .text {
  text-align: center;
  font-size: 1.6rem;
  font-weight: bold;
 }
-.memory-game-modal .content p {
+.code-editor-modal .content p {
  margin: 0.6rem 0 1rem 0;
  text-align: center;
 }
-.memory-game-modal .content .guide-image {
+.code-editor-modal .content .guide-image {
  display: block;
  margin: 0 auto;
  max-width: 70%;
  height: auto;
 }
-.memory-game-modal .content .button-section {
+.code-editor-modal .content .button-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 32px;
 }
-.memory-game-modal .content .button-section button {
+.code-editor-modal .content .button-section button {
  padding: 0.5rem 2rem;
  font-size: 1rem;
  border-radius: 20px;
@@ -70,12 +70,12 @@
  color: #fff;
  font-weight: bold;
 }
-.memory-game-modal .content .button-section button:disabled {
+.code-editor-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 {
+ .code-editor-modal .content .button-section {
  padding: 0;
  margin-top: 10px;
  }
@@ -91,11 +91,11 @@
  }
 }
 @media screen and (max-width: 768px) {
- .memory-game-modal {
+ .code-editor-modal {
  width: calc(100vw - 20px);
  }
 }
-.memory-game-backdrop {
+.code-editor-backdrop  {
  position: fixed;
  top: 0;
  left: 0;
@@ -104,7 +104,7 @@
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
 }
-.memory-game-modal {
+.code-editor-modal {
  position: absolute;
  top: 50%;
  left: 50%;
@@ -116,7 +116,7 @@
  border-radius: 10px;
  animation: modalApear 0.3s ease-in-out;
 }
-.memory-game-modal .close-icon {
+.code-editor-modal .close-icon {
  position: absolute;
  right: 1.5rem;
  top: 1.5rem;
@@ -126,38 +126,38 @@
  cursor: pointer;
 }
 @media screen and (max-width: 768px) {
- .memory-game-modal .close-icon {
+ .code-editor-modal .close-icon {
  right: 1rem;
  top: 1rem;
  width: 30px;
  }
 }
-.memory-game-modal .content {
+.code-editor-modal .content {
  margin: 0 2rem;
  padding: 2rem;
 }
-.memory-game-modal .content .text {
+.code-editor-modal .content .text {
  text-align: center;
  font-size: 1.6rem;
  font-weight: bold;
 }
-.memory-game-modal .content p {
+.code-editor-modal .content p {
  margin: 0.6rem 0 1rem 0;
  text-align: center;
 }
-.memory-game-modal .content .guide-image {
+.code-editor-modal .content .guide-image {
  display: block;
  margin: 0 auto;
  max-width: 70%;
  height: auto;
 }
-.memory-game-modal .content .button-section {
+.code-editor-modal .content .button-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 32px;
 }
-.memory-game-modal .content .button-section button {
+.code-editor-modal .content .button-section button {
  padding: 0.5rem 2rem;
  font-size: 1rem;
  border-radius: 20px;
@@ -167,12 +167,12 @@
  color: #fff;
  font-weight: bold;
 }
-.memory-game-modal .content .button-section button:disabled {
+.code-editor-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 {
+ .code-editor-modal .content .button-section {
  padding: 0;
  margin-top: 10px;
  }
@@ -188,7 +188,7 @@
  }
 }
 @media screen and (max-width: 768px) {
- .memory-game-modal {
+ .code-editor-modal {
  width: calc(100vw - 20px);
  }
 }
diff --git a/src/plays/code-editor/styles.css b/src/plays/code-editor/styles.css
@@ -66,7 +66,7 @@
  color: white;
  margin-top: 10px;
 }
-.code-eitor-modal-toogle{
+.code-editor-modal-toogle{
  display: flex;
  justify-content: center;
  align-items: center;
@@ -86,4 +86,8 @@
  .code-editor-dropdown select{
  width: 100px;
  }
+ .code-editor-modal-toogle{
+ font-size: larger;
+ margin-left: 45px;
+ }
 }