(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;