(feat) Improved UI of play Typing Speed Test (#1558)

I have update the UI made it more user friendly

issue #1552

Co-authored-by: BayajidAlam <[email protected]>
Co-authored-by: Priyankar Pal <[email protected]>

src/common/search/search.css

@@ -85,7 +85,7 @@
   .filter.search-input-text {
     padding: 0.6rem 1.2rem 0.6rem 2rem;
   }
-    .flex-filter-modal{
+  .flex-filter-modal {
     width: 100% !important;
   }
   .modal-filter .modal-filter-header {

src/plays/bodymassindex-calculator/Readme.md

@@ -1,6 +1,6 @@
 # BodyMassIndex Calculator
 
-The BMI Calculator play is an interactive web component that enables users to calculate their Body Mass Index (BMI) by entering their weight and height. 
+The BMI Calculator play is an interactive web component that enables users to calculate their Body Mass Index (BMI) by entering their weight and height.
 
 ## Play Demographic
 

src/plays/bodymassindex-calculator/styles.css

@@ -1,6 +1,6 @@
 /* Centered container for the BMI calculator */
 .bmi-container {
-  max-width: 500px;  /* Increased box width */
+  max-width: 500px; /* Increased box width */
   background-color: #ffffff; /* Light box background */
   border-radius: 12px;
   padding: 30px; /* Increased padding */
@@ -87,7 +87,6 @@
   border-color: white; /* Change border color on hover */
 }
 
-
 /* Dark mode styling */
 .dark-mode {
   background-color: #1e1e1e; /* Dark background for the outer area */
@@ -122,4 +121,3 @@
 .dark-mode .play-details {
   background-color: #1e1e1e; /* Dark background for outer area */
 }
-

src/plays/cheesylines/Readme.md

@@ -11,7 +11,6 @@ The Cheesy Lines Web App is designed to entertain users by providing a collectio
 
 - User: karna0005
 - Gihub Link: https://github.com/karna0005
-
 
 ## Implementation Details
 
@@ -25,35 +24,27 @@ Run the app:
 npm start
 Open your browser and go to http://localhost:3000.
 
-
 ## Resources
 
 1. React Documentation
-React Official Docs
+   React Official Docs
 2. State Management
-useState & useEffect
-useReducer Hook
+   useState & useEffect
+   useReducer Hook
 3. Component Design
-Atomic Design Principles
+   Atomic Design Principles
 4. Random Data Generation
-Lodash - Random
+   Lodash - Random
 5. CSS & Styling
-Responsive Web Design
-Styled Components
+   Responsive Web Design
+   Styled Components
 6. Testing
-React Testing Library
-Jest Documentation
+   React Testing Library
+   Jest Documentation
 7. Error Handling
-Error Boundaries
+   Error Boundaries
 8. Performance Optimization
-useCallback & useMemo
+   useCallback & useMemo
 9. Fun APIs
-JokeAPI
-These links will guide you through building and optimizing your project efficiently.
-
-
-
-
-
-
-
+   JokeAPI
+   These links will guide you through building and optimizing your project efficiently.

src/plays/random-avatar/Readme.md

@@ -12,7 +12,6 @@ A play to generate random avatars while clicking the Regenerate button.
 - User: hamzathul
 - GitHub Link: https://github.com/hamzathul
 
-
 ## Implementation Details
 
 This play demonstrates the use of state management with React’s `useState` hook to generate random avatars. Users can regenerate avatars by clicking a button, which dynamically updates the displayed avatar. The avatars represent different genders and ages, adding variety to the output.

src/plays/typing-speed-test/TypingSpeedTest.jsx

@@ -1,20 +1,18 @@
+import React from 'react';
 import PlayHeader from 'common/playlists/PlayHeader';
 import TypingTest from './components/TypingTest';
+import { TypingTestProvider } from './context/TypingTestContext';
 
 function TypingSpeedTest(props) {
-  // Your Code Start below.
-
   return (
-    <>
+    <TypingTestProvider>
       <div className="play-details">
         <PlayHeader play={props} />
         <div className="play-details-body">
-          {/* Your Code Starts Here */}
           <TypingTest />
-          {/* Your Code Ends Here */}
         </div>
       </div>
-    </>
+    </TypingTestProvider>
   );
 }
 

src/plays/typing-speed-test/components/ResultModal.jsx

@@ -1,11 +1,13 @@
+import React from 'react';
 import { Modal } from '@mui/material';
 import { IoLogoTwitter } from 'react-icons/io5';
 import '../styles.css';
 import { getEvaluationText } from '../utils';
 
-const ResultModal = ({ open, handleModalClose, stats }) => {
-  const { wpm, cpm, accuracy } = stats;
+const ResultModal = ({ open, handleModalClose, results }) => {
+  const { wpm, cpm, maxWPM, accuracy } = results;
   const evaluationText = getEvaluationText(wpm);
+
   const tweetIt = (msg) => {
     const URL = window.location.href;
     const VIA = 'reactplayIO';
@@ -18,22 +20,33 @@ const ResultModal = ({ open, handleModalClose, stats }) => {
     )}&hashtags=${tags}&via=${VIA}`;
   };
 
+  if (!open) return null;
+
   return (
     <Modal open={open} onClose={handleModalClose}>
-      <div className="typing__speed__test__result__modal ">
-        <div className="flex flex-col justify-center items-center">
-          <h1 className="text-center text-[1.05rem] tracking-wide my-4 leading-9">
-            {evaluationText} You type with the speed of{' '}
-            <span className="bg-violet-100 text-violet-500 font-bold">{wpm} WPM</span> ({cpm} CPM).
-            Your accuracy was <span className="font-bold">{isNaN(accuracy) ? 0 : accuracy}%</span>{' '}
-            Keep practicing!
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="modal-content">
+          <h1 className="text-[1.05rem] tracking-wide my-4 leading-9 text-start">
+            <span className="text-green-400 font-bold">{evaluationText}</span> You type with the
+            speed of{' '}
+            <span className="bg-violet-100 text-violet-500 font-bold">{Math.round(wpm)} WPM</span> (
+            {Math.round(cpm)} CPM). Your maximum speed was{' '}
+            <span className="bg-violet-100 text-violet-500 font-bold">
+              {Math.round(maxWPM)} WPM
+            </span>{' '}
+            and your accuracy was{' '}
+            <span className="font-bold">{isNaN(accuracy) ? 0 : Math.round(accuracy)}%</span>. Keep
+            practicing!
           </h1>
-          <div className="flex gap-4">
+          <div className="flex gap-4 justify-center">
             <a
               className="mt-4 text-center bg-violet-500 px-5 py-[0.7rem] text-sm text-white rounded-[4px] font-medium flex gap-2 items-center"
-              href={tweetIt(`Hey checkout I got typing speed of  ${wpm} WPM. Find yours with`)}
+              href={tweetIt(
+                `Hey, check out I got typing speed of ${Math.round(wpm)} WPM. Find yours with`
+              )}
+              rel="noopener noreferrer"
+              target="_blank"
             >
-              {' '}
               Share
               <IoLogoTwitter className="icon" size={18} />
             </a>

src/plays/typing-speed-test/components/Statistics.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+const Statistics = ({ wpm, cpm, accuracy, timeLeft }) => {
+  return (
+    <div className="statistics flex justify-center w-3/5 mx-auto gap-4">
+      <div
+        className="rounded-[50%] bg-white border-2   w-20 md:w-28 md:h-28 h-20 p-4  flex justify-center items-center flex-col"
+        style={{ border: '1px solid var(--color-brand-primary)', borderWidth: '3px' }}
+      >
+        <p className="text-2xl md:text-4xl font-bold">{timeLeft}</p>
+        <p className="text-sm">Seconds</p>
+      </div>
+
+      <div
+        className="rounded-[50%] bg-white border-2 w-20 md:w-28 md:h-28 h-20 p-4  flex justify-center items-center flex-col"
+        style={{ border: '1px solid var(--color-brand-primary)', borderWidth: '3px' }}
+      >
+        <p className="text-2xl md:text-4xl font-bold">{Math.round(wpm)}</p>
+        <p className="text-sm">WPM</p>
+      </div>
+
+      <div
+        className="rounded-[50%] bg-white border-2   w-20 md:w-28 md:h-28 h-20 p-4  flex justify-center items-center flex-col"
+        style={{ border: '1px solid var(--color-brand-primary)', borderWidth: '3px' }}
+      >
+        <p className="text-2xl md:text-4xl font-bold">{Math.round(cpm)}</p>
+        <p className="text-sm">CPM</p>
+      </div>
+
+      <div
+        className="rounded-[50%] bg-white border-2  w-20 md:w-28 md:h-28 h-20 p-4  flex justify-center items-center flex-col"
+        style={{ border: '1px solid var(--color-brand-primary)', borderWidth: '3px' }}
+      >
+        <p className="text-2xl md:text-4xl font-bold">{Math.round(accuracy)}</p>
+        <p className="text-sm"> accuracy</p>
+      </div>
+    </div>
+  );
+};
+
+export default Statistics;