├── prettier.config.js
├── test
    └── unit
    │   └── index.test.ts
├── index.d.ts
├── src
    ├── vite-env.d.ts
    ├── hooks
    │   ├── useDetectDevice.ts
    │   ├── useScreenShot.ts
    │   ├── useClipboard.ts
    │   ├── useCursorPosition.ts
    │   ├── useModal.ts
    │   ├── useLocalStorage.ts
    │   ├── useDropdown.ts
    │   ├── useTheme.ts
    │   ├── useWord.ts
    │   ├── useCountdown.ts
    │   ├── useKeyDown.ts
    │   └── useSystem.ts
    ├── components
    │   ├── MobileNotSupported.tsx
    │   ├── WordContainer.tsx
    │   ├── Tooltip.tsx
    │   ├── Character.tsx
    │   ├── Social.tsx
    │   ├── UserTyped.tsx
    │   ├── WordWrapper.tsx
    │   ├── ResultCard.tsx
    │   ├── Restart.tsx
    │   ├── Countdown.tsx
    │   ├── Footer.tsx
    │   ├── Modal.tsx
    │   ├── TimeCategory.tsx
    │   ├── About.tsx
    │   ├── ThemeDropdown.tsx
    │   ├── Header.tsx
    │   └── ModalContent.tsx
    ├── main.tsx
    ├── types
    │   └── index.ts
    ├── context
    │   └── ThemeContext.tsx
    ├── index.css
    ├── App.tsx
    ├── utils
    │   └── index.ts
    └── assets
    │   └── react.svg
├── postcss.config.js
├── vite.config.ts
├── tsconfig.node.json
├── .gitignore
├── index.html
├── .eslintrc.cjs
├── tailwind.config.js
├── tsconfig.json
├── public
    ├── vite.svg
    └── logo.svg
├── package.json
└── README.md


/prettier.config.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/test/unit/index.test.ts:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/index.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'use-react-screenshot';
2 | 


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite';
2 | import react from '@vitejs/plugin-react';
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 |   base: './',
8 | });
9 | 


--------------------------------------------------------------------------------
/src/hooks/useDetectDevice.ts:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react';
 2 | 
 3 | import { isMobile } from '../utils';
 4 | 
 5 | export const useDetectDevice = () => {
 6 |   const [isMobileDevice] = useState(() => isMobile());
 7 | 
 8 |   return isMobileDevice;
 9 | };
10 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "skipLibCheck": true,
 5 |     "module": "ESNext",
 6 |     "moduleResolution": "bundler",
 7 |     "allowSyntheticDefaultImports": true
 8 |   },
 9 |   "include": ["vite.config.ts"]
10 | }
11 | 


--------------------------------------------------------------------------------
/src/components/MobileNotSupported.tsx:
--------------------------------------------------------------------------------
 1 | const MobileNotSupported = () => {
 2 |   return (
 3 |     <div className='flex h-screen flex-col items-center justify-center px-3 font-mono'>
 4 |       <h1 className='text-xl font-bold'>
 5 |           Sorry, this app is not supported on mobile devices.
 6 |       </h1>
 7 |     </div>
 8 |   );
 9 | };
10 | 
11 | export default MobileNotSupported;
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | yarn.lock
10 | 
11 | node_modules
12 | dist
13 | dist-ssr
14 | *.local
15 | 
16 | # Editor directories and files
17 | .vscode/*
18 | !.vscode/extensions.json
19 | .idea
20 | .DS_Store
21 | *.suo
22 | *.ntvs*
23 | *.njsproj
24 | *.sln
25 | *.sw?
26 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/logo.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Typest</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     <script type="module" src="/src/main.tsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import App from './App.tsx';
 4 | import './index.css';
 5 | import ThemeProvider from './context/ThemeContext.tsx';
 6 | 
 7 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
 8 |   <React.StrictMode>
 9 |     <ThemeProvider>
10 |       <App />
11 |     </ThemeProvider>
12 |   </React.StrictMode>
13 | );
14 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   env: { browser: true, es2020: true },
 3 |   extends: [
 4 |     'eslint:recommended',
 5 |     'plugin:@typescript-eslint/recommended',
 6 |     'plugin:react-hooks/recommended',
 7 |   ],
 8 |   parser: '@typescript-eslint/parser',
 9 |   parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
10 |   plugins: ['react-refresh'],
11 |   rules: {
12 |     'react-refresh/only-export-components': 'warn',
13 |   },
14 | }
15 | 


--------------------------------------------------------------------------------
/src/hooks/useScreenShot.ts:
--------------------------------------------------------------------------------
 1 | // import { useRef } from 'react';
 2 | // import * as Screenshot from 'use-react-screenshot';
 3 | 
 4 | // export const useScreenShot = () => {
 5 | //   const ref = useRef(null);
 6 | //   const [image, takeScreenShot] = Screenshot.useScreenshot({
 7 | //     type: 'image/png',
 8 | //     quality: 1.0,
 9 | //   });
10 | 
11 | //   const getImage = () => {
12 | //     takeScreenShot(ref.current);
13 | //   };
14 | 
15 | //   return { ref, image, getImage };
16 | // };
17 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | export default {
 3 |   content: [
 4 |     "./index.html",
 5 |     "./src/**/*.{js,ts,jsx,tsx}",
 6 |   ],
 7 |   theme: {
 8 |     extend: {
 9 |       keyframes: {
10 |         appear: {
11 |           "0%": { opacity: 0 },
12 |           "50%": { opacity: 0 },
13 |           "75%": { opacity: 0 },
14 |           "90%": { opacity: 0 },
15 |           "100%": { opacity: 1 },
16 |         },
17 |       }
18 |     },
19 |   },
20 |   plugins: [],
21 | }
22 | 
23 | 


--------------------------------------------------------------------------------
/src/hooks/useClipboard.ts:
--------------------------------------------------------------------------------
 1 | export const useClipboard = () => {
 2 |   const copyTextToClipboard = async (text: string): Promise<boolean> => {
 3 |     if (!navigator.clipboard) {
 4 |       alert('Cannot access clipboard');
 5 |       return false;
 6 |     }
 7 |     try {
 8 |       await navigator.clipboard.writeText(text);
 9 |       return true;
10 |     } catch (error) {
11 |       alert('Sorry, cannot copy text to clipboard');
12 |       return false;
13 |     }
14 |   };
15 | 
16 |   return { copyTextToClipboard };
17 | };
18 | 


--------------------------------------------------------------------------------
/src/hooks/useCursorPosition.ts:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react';
 2 | 
 3 | export const useCursorPosition = () => {
 4 |   const [cursorPosition, setCursorPosition] = useState(0);
 5 | 
 6 |   const resetCursorPointer = () => setCursorPosition(0);
 7 | 
 8 |   const updateCursorPosition = (opt: 'increase' | 'decrease') => {
 9 |     if (opt === 'increase') setCursorPosition((cursor) => cursor + 1);
10 |     else setCursorPosition((cursor) => cursor - 1);
11 |   };
12 | 
13 |   return { cursorPosition, updateCursorPosition, resetCursorPointer };
14 | };
15 | 


--------------------------------------------------------------------------------
/src/types/index.ts:
--------------------------------------------------------------------------------
 1 | export interface Results {
 2 |   accuracy: number;
 3 |   cpm: number;
 4 |   wpm: number;
 5 |   error: number;
 6 | }
 7 | 
 8 | export interface AccuracyMetrics {
 9 |   correctChars: number;
10 |   incorrectChars: number;
11 |   accuracy: number;
12 | }
13 | 
14 | export interface HistoryType {
15 |   wordHistory: string;
16 |   typedHistory: string;
17 | }
18 | 
19 | export interface Theme {
20 |   name: string;
21 |   background: {
22 |     primary: string;
23 |     secondary: string;
24 |   };
25 |   text: {
26 |     primary: string;
27 |     secondary: string;
28 |     title: string;
29 |   };
30 | }
31 | 


--------------------------------------------------------------------------------
/src/hooks/useModal.ts:
--------------------------------------------------------------------------------
 1 | import { useState, useCallback } from 'react';
 2 | 
 3 | export const useModal = () => {
 4 |   const [modalIsOpen, setModalIsOpen] = useState(false);
 5 |   const [aboutModal, setAboutModal] = useState(false);
 6 | 
 7 |   const openModal = useCallback((type: string) => {
 8 |     if (type === 'result') setModalIsOpen(true);
 9 |     else setAboutModal(true);
10 |   }, []);
11 | 
12 |   const closeModal = useCallback((type: string) => {
13 |     if (type === 'result') setModalIsOpen(false);
14 |     else setAboutModal(false);
15 |   }, []);
16 | 
17 |   return { modalIsOpen, aboutModal, openModal, closeModal };
18 | };
19 | 


--------------------------------------------------------------------------------
/src/components/WordContainer.tsx:
--------------------------------------------------------------------------------
 1 | import { useMemo } from 'react';
 2 | import Character from './Character';
 3 | 
 4 | type WordContainerProps = {
 5 |   word: string;
 6 | };
 7 | 
 8 | const WordContainer = ({ word }: WordContainerProps) => {
 9 |   const characters = useMemo(() => {
10 |     return word.split('');
11 |   }, [word]);
12 | 
13 |   return (
14 |     <div className='relative left-0 top-0 break-all font-mono text-xl opacity-80 lg:text-2xl'>
15 |       {characters.map((character, index) => {
16 |         return <Character key={index + character} character={character} />;
17 |       })}
18 |     </div>
19 |   );
20 | };
21 | 
22 | export default WordContainer;
23 | 


--------------------------------------------------------------------------------
/src/context/ThemeContext.tsx:
--------------------------------------------------------------------------------
 1 | import { createContext } from 'react';
 2 | 
 3 | import { useTheme } from '../hooks/useTheme';
 4 | 
 5 | type ThemeContextType = ReturnType<typeof useTheme>;
 6 | 
 7 | type ThemeProviderProps = {
 8 |   children: React.ReactNode;
 9 | };
10 | 
11 | export const ThemeContext = createContext<ThemeContextType>(
12 |   {} as ThemeContextType
13 | );
14 | 
15 | export default function ThemeProvider({ children }: ThemeProviderProps) {
16 |   const { systemTheme, setTheme } = useTheme();
17 | 
18 |   return (
19 |     <ThemeContext.Provider value={{ systemTheme, setTheme }}>
20 |       {children}
21 |     </ThemeContext.Provider>
22 |   );
23 | }
24 | 


--------------------------------------------------------------------------------
/src/components/Tooltip.tsx:
--------------------------------------------------------------------------------
 1 | import { Tooltip as ReactToolTip } from 'react-tooltip';
 2 | 
 3 | type TooltipProps = {
 4 |   tooltipId: string;
 5 |   delayShow?: number;
 6 |   delayHide?: number;
 7 |   textColor?: string;
 8 |   children: React.ReactNode;
 9 | };
10 | 
11 | const Tooltip = ({
12 |   tooltipId,
13 |   children,
14 |   delayHide,
15 |   delayShow,
16 | }: TooltipProps) => {
17 |   return (
18 |     <>
19 |       {children}
20 |       <ReactToolTip
21 |         id={tooltipId}
22 |         className={`text-md font-mono font-semibold`}
23 |         delayHide={delayHide}
24 |         delayShow={delayShow}
25 |       />
26 |     </>
27 |   );
28 | };
29 | 
30 | export default Tooltip;
31 | 


--------------------------------------------------------------------------------
/src/hooks/useLocalStorage.ts:
--------------------------------------------------------------------------------
 1 | import { Theme } from '../types/index';
 2 | 
 3 | export const useLocalStorage = () => {
 4 |   const setLocalStorageValue = (key: string, value: number | Theme) => {
 5 |     try {
 6 |       window.localStorage.setItem(key, JSON.stringify(value));
 7 |     } catch (error) {
 8 |       alert('Something went wrong');
 9 |     }
10 |   };
11 | 
12 |   const getLocalStorageValue = (key: string) => {
13 |     try {
14 |       const value = window.localStorage.getItem(key);
15 |       return value ? JSON.parse(value) : null;
16 |     } catch (error) {
17 |       alert('Something went wrong');
18 |     }
19 |   };
20 | 
21 |   return { setLocalStorageValue, getLocalStorageValue };
22 | };
23 | 


--------------------------------------------------------------------------------
/src/components/Character.tsx:
--------------------------------------------------------------------------------
 1 | import { useThemeContext } from '../hooks/useTheme';
 2 | 
 3 | type CharactersProps = {
 4 |   state?: boolean;
 5 |   character: string;
 6 |   className?: string;
 7 | };
 8 | 
 9 | const Character = ({ state, character, className }: CharactersProps) => {
10 |   const { systemTheme } = useThemeContext();
11 |   return (
12 |     <span
13 |       style={{
14 |         color:
15 |           state === undefined
16 |             ? ''
17 |             : state === true
18 |             ? systemTheme.text.secondary
19 |             : '#BD0101',
20 |         backgroundColor: state === false && character === ' ' ? '#BD0101' : '',
21 |       }}
22 |       className={`${className}`}
23 |     >
24 |       {character}
25 |     </span>
26 |   );
27 | };
28 | 
29 | export default Character;
30 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2020",
 4 |     "useDefineForClassFields": true,
 5 |     "lib": [
 6 |       "ES2020",
 7 |       "DOM",
 8 |       "DOM.Iterable"
 9 |     ],
10 |     "module": "ESNext",
11 |     "skipLibCheck": true,
12 |     /* Bundler mode */
13 |     "moduleResolution": "bundler",
14 |     "allowImportingTsExtensions": true,
15 |     "resolveJsonModule": true,
16 |     "isolatedModules": true,
17 |     "noEmit": true,
18 |     "jsx": "react-jsx",
19 |     /* Linting */
20 |     "strict": true,
21 |     "noUnusedLocals": true,
22 |     "noUnusedParameters": true,
23 |     "noFallthroughCasesInSwitch": true,
24 |   },
25 |   "include": [
26 |     "src",
27 |     "index.d.ts"
28 |   ],
29 |   "references": [
30 |     {
31 |       "path": "./tsconfig.node.json"
32 |     }
33 |   ]
34 | }


--------------------------------------------------------------------------------
/src/hooks/useDropdown.ts:
--------------------------------------------------------------------------------
 1 | import { useRef, useState, useEffect, useCallback } from 'react';
 2 | 
 3 | export const useDropdown = () => {
 4 |   const [isOpen, setIsOpen] = useState(false);
 5 |   const dropdownRef = useRef<HTMLDivElement>(null);
 6 | 
 7 |   const handleClickOutside = useCallback(
 8 |     (event: MouseEvent) => {
 9 |       if (
10 |         dropdownRef.current &&
11 |         !dropdownRef.current.contains(event.target as Node)
12 |       ) {
13 |         setIsOpen(false);
14 |       }
15 |     },
16 |     [setIsOpen]
17 |   );
18 | 
19 |   const toggleDropdown = useCallback(() => {
20 |     setIsOpen(!isOpen);
21 |   }, [isOpen, setIsOpen]);
22 | 
23 |   useEffect(() => {
24 |     document.addEventListener('mousedown', handleClickOutside, true);
25 |     return () => {
26 |       document.removeEventListener('mousedown', handleClickOutside, true);
27 |     };
28 |   }, [handleClickOutside]);
29 | 
30 |   return { isOpen, toggleDropdown, dropdownRef };
31 | };
32 | 


--------------------------------------------------------------------------------
/src/hooks/useTheme.ts:
--------------------------------------------------------------------------------
 1 | import { useState, useCallback, useContext } from 'react';
 2 | 
 3 | import { useLocalStorage } from './useLocalStorage';
 4 | 
 5 | import { ThemeContext } from '../context/ThemeContext';
 6 | import { theme } from '../utils';
 7 | import type { Theme } from '../types';
 8 | 
 9 | export const useTheme = () => {
10 |   const { getLocalStorageValue, setLocalStorageValue } = useLocalStorage();
11 | 
12 |   const [systemTheme, setSystemTheme] = useState<Theme>(() => {
13 |     const localTheme = getLocalStorageValue('theme');
14 |     return localTheme ? localTheme : theme.aurora;
15 |   });
16 | 
17 |   const setTheme = useCallback(
18 |     (value: Theme) => {
19 |       setSystemTheme(value);
20 |       setLocalStorageValue('theme', value);
21 |     },
22 |     [setSystemTheme, setLocalStorageValue]
23 |   );
24 | 
25 |   return { systemTheme, setTheme };
26 | };
27 | 
28 | export const useThemeContext = () => {
29 |   return useContext(ThemeContext);
30 | };
31 | 


--------------------------------------------------------------------------------
/src/components/Social.tsx:
--------------------------------------------------------------------------------
 1 | import styled from 'styled-components';
 2 | 
 3 | import { useThemeContext } from '../hooks/useTheme';
 4 | 
 5 | type SocialProps = {
 6 |   url: string;
 7 |   tooltipContent?: string;
 8 |   tooltipId?: string;
 9 |   children: React.ReactNode;
10 | };
11 | 
12 | const StyledSocial = styled.a`
13 |   &:hover {
14 |     color: ${({ theme }) => theme.text.title};
15 |     background-color: ${({ theme }) => theme.background.secondary};
16 |   }
17 | `;
18 | 
19 | const Social = ({ url, tooltipContent, tooltipId, children }: SocialProps) => {
20 |   const { systemTheme } = useThemeContext();
21 |   return (
22 |     <StyledSocial
23 |       theme={systemTheme}
24 |       href={url}
25 |       target='_blank'
26 |       rel='noopener noreferrer'
27 |       className='rounded-full p-3'
28 |       data-tooltip-content={tooltipContent}
29 |       data-tooltip-id={tooltipId}
30 |     >
31 |       {children}
32 |     </StyledSocial>
33 |   );
34 | };
35 | 
36 | export default Social;
37 | 


--------------------------------------------------------------------------------
/src/hooks/useWord.ts:
--------------------------------------------------------------------------------
 1 | import { useState, useCallback } from 'react';
 2 | 
 3 | import { generateWord } from '../utils';
 4 | 
 5 | export const useWord = (numberOfWords: number) => {
 6 |   const [word, setWord] = useState<string>(
 7 |     () => generateWord(numberOfWords) + ' '
 8 |   );
 9 |   const [totalWord, setTotalWord] = useState<string>(word);
10 | 
11 |   const appendWord = useCallback((word: string) => {
12 |     setTotalWord((prev) => prev + word);
13 |   }, []);
14 | 
15 |   const eraseWord = useCallback((word: string) => {
16 |     setTotalWord(word);
17 |   }, []);
18 | 
19 |   const updateWord = useCallback(
20 |     (erase = false) => {
21 |       setWord(() => {
22 |         const genWord = generateWord(numberOfWords) + ' ';
23 |         if (erase) eraseWord(genWord);
24 |         else appendWord(genWord);
25 |         return genWord;
26 |       });
27 |     },
28 |     [numberOfWords, appendWord, eraseWord]
29 |   );
30 | 
31 |   return { word, totalWord, setTotalWord, updateWord, appendWord };
32 | };
33 | 


--------------------------------------------------------------------------------
/src/components/UserTyped.tsx:
--------------------------------------------------------------------------------
 1 | import { useMemo } from 'react';
 2 | import styled from 'styled-components';
 3 | 
 4 | import { useThemeContext } from '../hooks/useTheme';
 5 | import Character from './Character';
 6 | 
 7 | type UserTypedProps = {
 8 |   charTyped: string;
 9 |   check: (index: number) => boolean;
10 |   word: string;
11 | };
12 | 
13 | const StyledDiv = styled.div`
14 |   &:last-child {
15 |     &::after {
16 |       background-color: ${({ theme }) => theme.text.secondary};
17 |     }
18 |   }
19 | `;
20 | 
21 | const UserTyped = ({ check, charTyped, word }: UserTypedProps) => {
22 |   const characters = useMemo(() => {
23 |     return charTyped.split('');
24 |   }, [charTyped]);
25 | 
26 |   const { systemTheme } = useThemeContext();
27 | 
28 |   return (
29 |     <StyledDiv
30 |       className='md:character absolute left-0 top-0 z-10 break-all font-mono text-xl lg:text-2xl'
31 |       theme={systemTheme}
32 |     >
33 |       {characters.map((_, index) => {
34 |         return (
35 |           <Character character={word.charAt(index)} state={check(index)} />
36 |         );
37 |       })}
38 |     </StyledDiv>
39 |   );
40 | };
41 | 
42 | export default UserTyped;
43 | 


--------------------------------------------------------------------------------
/src/components/WordWrapper.tsx:
--------------------------------------------------------------------------------
 1 | import { MdCenterFocusStrong } from 'react-icons/md';
 2 | 
 3 | type WordWrapperProps = {
 4 |   children: React.ReactNode;
 5 |   focused: boolean;
 6 |   setFocused: React.Dispatch<React.SetStateAction<boolean>>;
 7 | };
 8 | 
 9 | const WordWrapper = ({ children, focused, setFocused }: WordWrapperProps) => {
10 |   return (
11 |     <>
12 |       <div
13 |         className={`${
14 |           focused ? 'opacity-0' : 'opacity-100'
15 |         } flex items-center justify-center gap-3 transition-all duration-500 `}
16 |       >
17 |         <MdCenterFocusStrong className='text-center text-2xl' />
18 |         <span className={`text-center font-mono text-lg `}>
19 |           Focus to start typing
20 |         </span>
21 |       </div>
22 |       <div
23 |         className={`relative mt-5 focus:border-0 focus:border-none focus:outline-none ${
24 |           focused ? 'blur-none' : 'cursor-pointer blur-md'
25 |         } `}
26 |         tabIndex={0}
27 |         onFocus={() => setFocused(true)}
28 |         onBlur={() => setFocused(false)}
29 |       >
30 |         {children}
31 |       </div>
32 |     </>
33 |   );
34 | };
35 | 
36 | export default WordWrapper;
37 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | * {
 6 |   margin: 0;
 7 |   padding: 0;
 8 |   box-sizing: border-box;
 9 | }
10 | 
11 | body {
12 |   min-height: 100vh;
13 |   background-color: #003950;
14 | }
15 | 
16 | .category {
17 |   @apply cursor-pointer rounded-md p-2 font-mono text-xl;
18 | }
19 | 
20 | @layer components {
21 |   .character:last-child::after {
22 |     content: '';
23 |     width: 2px;
24 |     height: 24px;
25 |     margin-bottom: -2px;
26 |     display: inline-block;
27 |     animation: cursorBlink 0.65s steps(2) infinite;
28 |   }
29 | }
30 | 
31 | .ReactModal__Overlay {
32 |   opacity: 0;
33 |   transition: opacity 500ms ease-in-out;
34 | }
35 | 
36 | .ReactModal__Overlay--after-open {
37 |   opacity: 1;
38 | }
39 | 
40 | .ReactModal__Overlay--before-close {
41 |   opacity: 0;
42 | }
43 | 
44 | @keyframes cursorBlink {
45 |   0% {
46 |     opacity: 0;
47 |   }
48 | }
49 | 
50 | body::-webkit-scrollbar {
51 |   width: 2em;
52 | }
53 |  
54 | body::-webkit-scrollbar-track {
55 |   box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.3);
56 | }
57 |  
58 | body::-webkit-scrollbar-thumb {
59 |       background-color: #003950;
60 |       outline: 1px solid #003950;
61 | }


--------------------------------------------------------------------------------
/src/hooks/useCountdown.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState, useRef, useCallback } from 'react';
 2 | 
 3 | export const useCountdown = (initialValue: number, interval = 1000) => {
 4 |   const intervalRef = useRef<number | null>(null);
 5 |   const [countdown, setCountdown] = useState(initialValue);
 6 | 
 7 |   const startCountdown = useCallback(() => {
 8 |     if (intervalRef.current !== null) return;
 9 |     intervalRef.current = window.setInterval(() => {
10 |       setCountdown((prev) => {
11 |         if (prev > 0) {
12 |           return prev - interval;
13 |         }
14 |         if (prev === 0) clearInterval(intervalRef.current!);
15 | 
16 |         return prev;
17 |       });
18 |     }, interval);
19 |   }, [initialValue, interval]);
20 | 
21 |   const resetCountdown = useCallback(() => {
22 |     if (intervalRef.current !== null) {
23 |       clearInterval(intervalRef.current);
24 |       intervalRef.current = null;
25 |       setCountdown(initialValue);
26 |     }
27 |   }, [initialValue]);
28 | 
29 |   useEffect(() => {
30 |     return () => {
31 |       if (intervalRef.current !== null) {
32 |         clearInterval(intervalRef.current);
33 |       }
34 |     };
35 |   }, []);
36 | 
37 |   return { countdown, startCountdown, resetCountdown };
38 | };
39 | 


--------------------------------------------------------------------------------
/src/components/ResultCard.tsx:
--------------------------------------------------------------------------------
 1 | import { useThemeContext } from '../hooks/useTheme';
 2 | 
 3 | import Tooltip from './Tooltip';
 4 | 
 5 | type ResultCardProps = {
 6 |   tooltipId: string;
 7 |   tooltipContent: string;
 8 |   tooltipPlace: 'bottom' | 'top' | 'left' | 'right';
 9 |   title: string;
10 |   results: string;
11 | };
12 | 
13 | const ResultCard = ({
14 |   title,
15 |   tooltipId,
16 |   tooltipContent,
17 |   tooltipPlace,
18 |   results,
19 | }: ResultCardProps) => {
20 |   const { systemTheme } = useThemeContext();
21 |   return (
22 |     <Tooltip tooltipId={tooltipId}>
23 |       <div
24 |         className='flex w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-lg p-5'
25 |         data-tooltip-content={tooltipContent}
26 |         data-tooltip-id={tooltipId}
27 |         data-tooltip-place={tooltipPlace}
28 |         style={{
29 |           backgroundColor: systemTheme.background.secondary,
30 |         }}
31 |       >
32 |         <h2 className='text-3xl'>{title}</h2>
33 |         <p
34 |           className='text-center text-3xl'
35 |           style={{
36 |             color: systemTheme.text.secondary,
37 |           }}
38 |         >
39 |           {results}
40 |         </p>
41 |       </div>
42 |     </Tooltip>
43 |   );
44 | };
45 | 
46 | export default ResultCard;
47 | 


--------------------------------------------------------------------------------
/src/components/Restart.tsx:
--------------------------------------------------------------------------------
 1 | import styled from 'styled-components';
 2 | import { MdRestartAlt } from 'react-icons/md';
 3 | 
 4 | import { useThemeContext } from '../hooks/useTheme';
 5 | 
 6 | import Tooltip from './Tooltip';
 7 | 
 8 | type RestartProps = {
 9 |   restart: () => void;
10 | };
11 | 
12 | const StyledButton = styled.button`
13 |   &:hover {
14 |     color: ${({ theme }) => theme.text.title};
15 |     background-color: ${({ theme }) => theme.background.secondary};
16 |   }
17 | `;
18 | 
19 | const Restart = ({ restart }: RestartProps) => {
20 |   const { systemTheme } = useThemeContext();
21 |   return (
22 |     <div className='mt-10'>
23 |       <Tooltip tooltipId='Restart' delayHide={200}>
24 |         <div className='flex items-center justify-center'>
25 |           <StyledButton
26 |             theme={systemTheme}
27 |             onClick={() => {
28 |               restart();
29 |             }}
30 |             className={`rotate-0 rounded-full p-3 transition delay-200 ease-out hover:rotate-180 `}
31 |             data-tooltip-id='Restart'
32 |             data-tooltip-content='Restart Test'
33 |             data-tooltip-place='bottom'
34 |           >
35 |             <MdRestartAlt className='text-2xl lg:text-3xl ' />
36 |           </StyledButton>
37 |         </div>
38 |       </Tooltip>
39 |     </div>
40 |   );
41 | };
42 | 
43 | export default Restart;
44 | 


--------------------------------------------------------------------------------
/src/components/Countdown.tsx:
--------------------------------------------------------------------------------
 1 | import { useEffect } from 'react';
 2 | 
 3 | import { useThemeContext } from '../hooks/useTheme';
 4 | 
 5 | type CountdownProps = {
 6 |   countdown: number;
 7 |   reset: () => void;
 8 | };
 9 | 
10 | const Countdown = ({ countdown, reset }: CountdownProps) => {
11 |   useEffect(() => {
12 |     reset();
13 |   }, [reset]);
14 | 
15 |   const formatedCountdown = {
16 |     minutes: new Date(countdown).getUTCMinutes(),
17 |     seconds: new Date(countdown).getUTCSeconds(),
18 |   };
19 | 
20 |   const { systemTheme } = useThemeContext();
21 | 
22 |   return (
23 |     <div className='flex justify-end'>
24 |       <div
25 |         className=' rounded-lg p-3'
26 |         style={{
27 |           backgroundColor: systemTheme.background.secondary,
28 |         }}
29 |       >
30 |         <span
31 |           className='text-right font-mono text-lg lg:text-xl'
32 |           style={{
33 |             color: systemTheme.text.secondary,
34 |           }}
35 |         >
36 |           {formatedCountdown.minutes < 10
37 |             ? `0${formatedCountdown.minutes}`
38 |             : formatedCountdown.minutes}
39 |           :
40 |           {formatedCountdown.seconds < 10
41 |             ? `0${formatedCountdown.seconds}`
42 |             : formatedCountdown.seconds}
43 |         </span>
44 |       </div>
45 |     </div>
46 |   );
47 | };
48 | 
49 | export default Countdown;
50 | 


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "typing-game",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "homepage": "https://typest-abdullahassi.vercel.app/",
 6 |   "type": "module",
 7 |   "scripts": {
 8 |     "predeploy": "yarn build",
 9 |     "deploy": "gh-pages -d dist",
10 |     "dev": "vite",
11 |     "build": "tsc && vite build",
12 |     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
13 |     "preview": "vite preview"
14 |   },
15 |   "dependencies": {
16 |     "html2canvas": "^1.4.1",
17 |     "or": "^0.2.0",
18 |     "react": "^18.2.0",
19 |     "react-dom": "^18.2.0",
20 |     "react-icons": "^4.10.1",
21 |     "react-modal": "^3.16.1",
22 |     "react-tooltip": "^5.16.1",
23 |     "styled-components": "^6.0.2"
24 |   },
25 |   "devDependencies": {
26 |     "@faker-js/faker": "^8.0.2",
27 |     "@types/jest": "^29.5.2",
28 |     "@types/node": "^20.3.3",
29 |     "@types/react": "^18.2.14",
30 |     "@types/react-dom": "^18.2.6",
31 |     "@types/react-modal": "^3.16.0",
32 |     "@typescript-eslint/eslint-plugin": "^5.59.0",
33 |     "@typescript-eslint/parser": "^5.59.0",
34 |     "@vitejs/plugin-react": "^4.0.0",
35 |     "autoprefixer": "^10.4.14",
36 |     "eslint": "^8.38.0",
37 |     "eslint-plugin-react-hooks": "^4.6.0",
38 |     "eslint-plugin-react-refresh": "^0.3.4",
39 |     "gh-pages": "^5.0.0",
40 |     "postcss": "^8.4.24",
41 |     "prettier": "^2.8.8",
42 |     "prettier-plugin-tailwindcss": "^0.3.0",
43 |     "tailwindcss": "^3.3.2",
44 |     "typescript": "^5.1.6",
45 |     "vite": "^4.3.9"
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # Typest 🖮
 3 | 
 4 | Typest is a minimalistic typing speed testing app built with React and TailwindCSS that highly inspired by [MonkeyType](https://www.monkeytype.com). The app allows users to test and improve their typing speed and accuracy. The app provides a user-friendly interface and intuitive feedback on typing performance.
 5 | 
 6 | ## Live Demo
 7 | 
 8 | Check out the live demo [here](https://typest-abdullahassi.vercel.app/).
 9 | 
10 | ## Current Features
11 | 
12 | - **Typing Test**: Users can take a typing test to measure their typing speed and accuracy. The test includes random sentences/paragraphs, and the user's typing speed is calculated in words per minute (WPM).
13 | - **Time Category**: Users can adjust typing duration to 15s, 30s, or 60s according to their preference.
14 | - **Statistics**: The app displays statistics such as WPM/CPM, accuracy percentage, error percentage and total number of characters typed.
15 | - **Watch Typing History**: Users can watch their previous typing history and access their performance.
16 | - **Change Theme**: Users can change the theme of the app based on their preference from available theme palette.
17 | - **Responsive Design**: The user interface is designed to be responsive and adapt to different screen sizes, making it accessible on various laptops or PCs.
18 | 
19 | ## Screenshots with different themes
20 | ![118shots_so](https://github.com/AbdullahAssi/Typest/assets/113567773/2c96ce1e-028a-4d56-b9f3-ad37308a85cf)
21 | 
22 | ![382shots_so](https://github.com/AbdullahAssi/Typest/assets/113567773/ee86ac46-0a62-4240-a1a4-fb9bbb9df69a)
23 | 
24 | ![516shots_so](https://github.com/AbdullahAssi/Typest/assets/113567773/163d7b7b-981e-4eff-a78a-62f55f9f8ef9)
25 | 
26 | <br>
27 | 
28 | ## Acknowledgement
29 | 
30 | - [MonkeyType](https://www.monkeytype.com) - for the inspiration and design ideas.
31 | 


--------------------------------------------------------------------------------
/src/components/Footer.tsx:
--------------------------------------------------------------------------------
 1 | // import styled from "styled-components";
 2 | import {
 3 |   BsGithub,
 4 |   BsInstagram,
 5 |   BsLinkedin,
 6 | } from "react-icons/bs";
 7 | 
 8 | // import { useThemeContext } from "../hooks/useTheme";
 9 | 
10 | import Tooltip from "./Tooltip";
11 | import Social from "./Social";
12 | 
13 | // const StyledLink = styled.a`
14 | //   &:hover {
15 | //     color: ${({ theme }) => theme.text.title};
16 | //   }
17 | // `;
18 | 
19 | const Footer = () => {
20 |   // const { systemTheme } = useThemeContext();
21 |   return (
22 |     <footer className="mb-3 mt-auto">
23 |       <div className=" flex items-center justify-between ">
24 |         <div className="flex items-center justify-center ">
25 |           <Tooltip tooltipId="Github">
26 |             <Social
27 |               url="http://github.com/AbdullahAssi"
28 |               tooltipContent="Github"
29 |               tooltipId="Github"
30 |             >
31 |               <BsGithub className="text-2xl" />
32 |             </Social>
33 |           </Tooltip>
34 |           <Tooltip tooltipId="Linkedin">
35 |             <Social
36 |               url="https://www.linkedin.com/in/muhammad-abdullah-796597246/"
37 |               tooltipContent="Linkedin"
38 |               tooltipId="Linkedin"
39 |             >
40 |               <BsLinkedin className="text-2xl" />
41 |             </Social>
42 |           </Tooltip>
43 | 
44 |           <Tooltip tooltipId="Instagram">
45 |             <Social
46 |               url="https://www.instagram.com/abdullahassi225/"
47 |               tooltipContent="Instagram"
48 |               tooltipId="Instagram"
49 |             >
50 |               <BsInstagram className="text-2xl " />
51 |             </Social>
52 |           </Tooltip>
53 |         </div>
54 | 
55 |         <div>Copyright Ⓒ 2023 Typest. All Rights Reserved</div>
56 |       </div>
57 |     </footer>
58 |   );
59 | };
60 | 
61 | export default Footer;
62 | 


--------------------------------------------------------------------------------
/src/components/Modal.tsx:
--------------------------------------------------------------------------------
 1 | import Modal from 'react-modal';
 2 | import { IoIosCloseCircle } from 'react-icons/io';
 3 | 
 4 | import { useThemeContext } from '../hooks/useTheme';
 5 | 
 6 | type ModalProps = {
 7 |   type: string;
 8 |   isOpen: boolean;
 9 |   onRequestClose: (str: string) => void;
10 |   children: React.ReactNode;
11 | };
12 | 
13 | const customStyles = {
14 |   content: {
15 |     top: '50%',
16 |     left: '50%',
17 |     right: 'auto',
18 |     bottom: 'auto',
19 |     width: '80%',
20 |     maxWidth: '1024px',
21 |     maxHeight: '90%',
22 |     marginRight: '-50%',
23 |     padding: 5,
24 |     transform: 'translate(-50%, -50%)',
25 |     border: 'none',
26 |   },
27 |   overlay: {
28 |     backgroundColor: 'rgba(0,0,0,0.5)',
29 |   },
30 | };
31 | 
32 | Modal.setAppElement('#root');
33 | 
34 | const ModalComponent = ({
35 |   type,
36 |   isOpen,
37 |   onRequestClose,
38 |   children,
39 | }: ModalProps) => {
40 |   const { systemTheme } = useThemeContext();
41 | 
42 |   const styles = {
43 |     content: {
44 |       ...customStyles.content,
45 |       backgroundColor: systemTheme.background.primary,
46 |       color: systemTheme.text.title,
47 |     },
48 |     overlay: {
49 |       ...customStyles.overlay,
50 |     },
51 |   };
52 |   return (
53 |     <Modal
54 |       isOpen={isOpen}
55 |       style={styles}
56 |       shouldCloseOnEsc={true}
57 |       shouldCloseOnOverlayClick={true}
58 |       onRequestClose={() => onRequestClose(type)}
59 |       closeTimeoutMS={300}
60 |     >
61 |       <div className='relative flex w-full justify-end'>
62 |         <button
63 |           onClick={() => onRequestClose(type)}
64 |           className='absolute right-1 top-1'
65 |         >
66 |           <IoIosCloseCircle
67 |             className='text-4xl'
68 |             style={{
69 |               color: systemTheme.text.secondary,
70 |             }}
71 |           />
72 |         </button>
73 |       </div>
74 |       <div style={{ color: systemTheme.text.title }}>{children}</div>
75 |     </Modal>
76 |   );
77 | };
78 | 
79 | export default ModalComponent;
80 | 


--------------------------------------------------------------------------------
/src/hooks/useKeyDown.ts:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect, useCallback } from 'react';
 2 | 
 3 | import { useCursorPosition } from './useCursorPosition';
 4 | import { isAllowedCode } from '../utils';
 5 | 
 6 | type TypingState = 'idle' | 'start' | 'typing';
 7 | 
 8 | export const useKeyDown = (active: boolean) => {
 9 |   const [typingState, setTypingState] = useState<TypingState>('idle');
10 |   const [charTyped, setCharTyped] = useState<string>('');
11 |   const [totalCharacterTyped, setTotalCharacterTyped] = useState<string>('');
12 | 
13 |   const { cursorPosition, updateCursorPosition, resetCursorPointer } =
14 |     useCursorPosition();
15 | 
16 |   const handleKeyDown = useCallback(
17 |     ({ key, code }: KeyboardEvent) => {
18 |       if (!active || !isAllowedCode(code)) return;
19 | 
20 |       if (key === 'Backspace') {
21 |         if (charTyped.length > 0 && cursorPosition > 0) {
22 |           setCharTyped((prev) => prev.slice(0, charTyped.length - 1));
23 |           setTotalCharacterTyped((prev) =>
24 |             prev.slice(0, totalCharacterTyped.length - 1)
25 |           );
26 |           updateCursorPosition('decrease');
27 |         }
28 |         return;
29 |       }
30 | 
31 |       if (typingState === 'idle') {
32 |         setTypingState('start');
33 |       }
34 | 
35 |       setCharTyped((prev) => prev + key);
36 |       setTotalCharacterTyped((prev) => prev + key);
37 |       updateCursorPosition('increase');
38 |     },
39 |     [
40 |       active,
41 |       charTyped.length,
42 |       cursorPosition,
43 |       updateCursorPosition,
44 |       typingState,
45 |       totalCharacterTyped,
46 |     ]
47 |   );
48 | 
49 |   const resetCharTyped = useCallback(() => {
50 |     setCharTyped('');
51 |   }, [setCharTyped]);
52 | 
53 |   useEffect(() => {
54 |     window.addEventListener('keydown', handleKeyDown);
55 |     return () => window.removeEventListener('keydown', handleKeyDown);
56 |   });
57 | 
58 |   return {
59 |     charTyped,
60 |     totalCharacterTyped,
61 |     setTotalCharacterTyped,
62 |     cursorPosition,
63 |     resetCharTyped,
64 |     resetCursorPointer,
65 |     typingState,
66 |     setTypingState,
67 |   };
68 | };
69 | 


--------------------------------------------------------------------------------
/src/components/TimeCategory.tsx:
--------------------------------------------------------------------------------
 1 | import { useContext } from 'react';
 2 | 
 3 | import { BiTimer } from 'react-icons/bi';
 4 | 
 5 | import { ThemeContext } from '../context/ThemeContext';
 6 | import { Theme } from '../types';
 7 | 
 8 | type TimeCategoryProps = {
 9 |   time: number;
10 |   setTime: (value: number) => void;
11 |   setLocalStorage: (key: string, value: number | Theme) => void;
12 |   restart: () => void;
13 | };
14 | 
15 | const TimeCategory = ({
16 |   time,
17 |   setTime,
18 |   restart,
19 |   setLocalStorage,
20 | }: TimeCategoryProps) => {
21 |   const { systemTheme } = useContext(ThemeContext);
22 | 
23 |   return (
24 |     <div className='flex items-center justify-center gap-3'>
25 |       <BiTimer className='text-3xl' />
26 |       <div
27 |         className='flex gap-4 rounded-lg'
28 |         style={{
29 |           backgroundColor: systemTheme.background.secondary,
30 |         }}
31 |       >
32 |         <span
33 |           className={`category ${
34 |             time === 15000 ? 'font-bold underline' : ''
35 |           } hover:underline`}
36 |           onClick={() => {
37 |             setTime(15000);
38 |             setLocalStorage('time', 15000);
39 |             restart();
40 |           }}
41 |           style={{
42 |             color: time === 15000 ? systemTheme.text.secondary : '',
43 |           }}
44 |         >
45 |           15s
46 |         </span>
47 |         <span
48 |           className={`category ${
49 |             time === 30000 ? 'font-bold underline' : ''
50 |           } hover:underline`}
51 |           onClick={() => {
52 |             setTime(30000);
53 |             setLocalStorage('time', 30000);
54 |             restart();
55 |           }}
56 |           style={{
57 |             color: time === 30000 ? systemTheme.text.secondary : '',
58 |           }}
59 |         >
60 |           30s
61 |         </span>
62 |         <span
63 |           className={`category ${
64 |             time === 60000 ? 'font-bold underline' : ''
65 |           } hover:underline`}
66 |           onClick={() => {
67 |             setTime(60000);
68 |             setLocalStorage('time', 60000);
69 |             restart();
70 |           }}
71 |           style={{
72 |             color: time === 60000 ? systemTheme.text.secondary : '',
73 |           }}
74 |         >
75 |           60s
76 |         </span>
77 |       </div>
78 |     </div>
79 |   );
80 | };
81 | 
82 | export default TimeCategory;
83 | 


--------------------------------------------------------------------------------
/public/logo.svg:
--------------------------------------------------------------------------------
1 | <svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="" viewBox="-680 -1030 300 180" color="#6DEAFF"><g><path d="M -430 -910 L -430 -910 C -424.481 -910 -420 -905.519 -420 -900 L -420 -900 C -420 -894.481 -424.481 -890 -430 -890 L -430 -890 C -435.519 -890 -440 -894.481 -440 -900 L -440 -900 C -440 -905.519 -435.519 -910 -430 -910 Z" fill="currentColor"></path><path d=" M -570 -910 L -510 -910 C -504.481 -910 -500 -905.519 -500 -900 L -500 -900 C -500 -894.481 -504.481 -890 -510 -890 L -570 -890 C -575.519 -890 -580 -894.481 -580 -900 L -580 -900 C -580 -905.519 -575.519 -910 -570 -910 Z " fill="currentColor"></path><path d="M -590 -970 L -590 -970 C -584.481 -970 -580 -965.519 -580 -960 L -580 -940 C -580 -934.481 -584.481 -930 -590 -930 L -590 -930 C -595.519 -930 -600 -934.481 -600 -940 L -600 -960 C -600 -965.519 -595.519 -970 -590 -970 Z" fill="currentColor"></path><path d=" M -639.991 -960.515 C -639.72 -976.836 -626.385 -990 -610 -990 L -610 -990 C -602.32 -990 -595.31 -987.108 -590 -982.355 C -584.69 -987.108 -577.68 -990 -570 -990 L -570 -990 C -553.615 -990 -540.28 -976.836 -540.009 -960.515 C -540.001 -960.345 -540 -960.172 -540 -960 L -540 -960 L -540 -940 C -540 -934.481 -544.481 -930 -550 -930 L -550 -930 C -555.519 -930 -560 -934.481 -560 -940 L -560 -960 L -560 -960 C -560 -965.519 -564.481 -970 -570 -970 C -575.519 -970 -580 -965.519 -580 -960 L -580 -960 L -580 -960 L -580 -940 C -580 -934.481 -584.481 -930 -590 -930 L -590 -930 C -595.519 -930 -600 -934.481 -600 -940 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 C -600 -965.519 -604.481 -970 -610 -970 C -615.519 -970 -620 -965.519 -620 -960 L -620 -960 L -620 -940 C -620 -934.481 -624.481 -930 -630 -930 L -630 -930 C -635.519 -930 -640 -934.481 -640 -940 L -640 -960 L -640 -960 C -640 -960.172 -639.996 -960.344 -639.991 -960.515 Z " fill="currentColor"></path><path d=" M -460 -930 L -460 -900 C -460 -894.481 -464.481 -890 -470 -890 L -470 -890 C -475.519 -890 -480 -894.481 -480 -900 L -480 -930 L -508.82 -930 C -514.99 -930 -520 -934.481 -520 -940 L -520 -940 C -520 -945.519 -514.99 -950 -508.82 -950 L -431.18 -950 C -425.01 -950 -420 -945.519 -420 -940 L -420 -940 C -420 -934.481 -425.01 -930 -431.18 -930 L -460 -930 Z " fill="currentColor"></path><path d="M -470 -990 L -430 -990 C -424.481 -990 -420 -985.519 -420 -980 L -420 -980 C -420 -974.481 -424.481 -970 -430 -970 L -470 -970 C -475.519 -970 -480 -974.481 -480 -980 L -480 -980 C -480 -985.519 -475.519 -990 -470 -990 Z" fill="currentColor"></path><path d=" M -630 -910 L -610 -910 C -604.481 -910 -600 -905.519 -600 -900 L -600 -900 C -600 -894.481 -604.481 -890 -610 -890 L -630 -890 C -635.519 -890 -640 -894.481 -640 -900 L -640 -900 C -640 -905.519 -635.519 -910 -630 -910 Z " fill="currentColor"></path><path d=" M -515 -990 L -510 -990 C -504.481 -990 -500 -985.519 -500 -980 L -500 -980 C -500 -974.481 -504.481 -970 -510 -970 L -515 -970 C -520.519 -970 -525 -974.481 -525 -980 L -525 -980 C -525 -985.519 -520.519 -990 -515 -990 Z " fill="currentColor"></path><path d=" M -660 -910 L -680 -910 L -680 -980 C -680 -1007.596 -657.596 -1030 -630 -1030 L -430 -1030 C -402.404 -1030 -380 -1007.596 -380 -980 L -380 -900 C -380 -872.404 -402.404 -850 -430 -850 L -630 -850 C -657.596 -850 -680 -872.404 -680 -900 L -680 -920 L -660 -920 L -660 -900 C -660 -883.443 -646.557 -870 -630 -870 L -430 -870 C -413.443 -870 -400 -883.443 -400 -900 L -400 -980 C -400 -996.557 -413.443 -1010 -430 -1010 L -630 -1010 C -646.557 -1010 -660 -996.557 -660 -980 L -660 -910 Z " fill="currentColor"></path></g></svg>


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
  1 | import { useDetectDevice } from './hooks/useDetectDevice';
  2 | import { useSystem } from './hooks/useSystem';
  3 | import { useThemeContext } from './hooks/useTheme';
  4 | 
  5 | import AboutPage from './components/About';
  6 | import Countdown from './components/Countdown';
  7 | import Footer from './components/Footer';
  8 | import Header from './components/Header';
  9 | import ModalComponent from './components/Modal';
 10 | import ModalContent from './components/ModalContent';
 11 | import Restart from './components/Restart';
 12 | import TimeCategory from './components/TimeCategory';
 13 | import UserTyped from './components/UserTyped';
 14 | import WordContainer from './components/WordContainer';
 15 | import WordWrapper from './components/WordWrapper';
 16 | import MobileNotSupported from './components/MobileNotSupported';
 17 | 
 18 | function App() {
 19 |   const { systemTheme } = useThemeContext();
 20 |   const {
 21 |     charTyped,
 22 |     countdown,
 23 |     word,
 24 |     wordContainerFocused,
 25 |     modalIsOpen,
 26 |     aboutModal,
 27 |     history,
 28 |     time,
 29 |     results,
 30 |     resetCountdown,
 31 |     setLocalStorageValue,
 32 |     setWordContainerFocused,
 33 |     restartTest,
 34 |     checkCharacter,
 35 |     closeModal,
 36 |     openModal,
 37 |     setTime,
 38 |   } = useSystem();
 39 | 
 40 |   const isMobile = useDetectDevice();
 41 | 
 42 |   return (
 43 |     <div
 44 |       className='h-screen w-full overflow-y-auto'
 45 |       style={{
 46 |         backgroundColor: systemTheme.background.primary,
 47 |         color: systemTheme.text.primary,
 48 |       }}
 49 |     >
 50 |       <main
 51 |         className=' mx-auto flex h-full max-w-5xl flex-col gap-4 px-4 xl:px-0'
 52 |         style={{}}
 53 |       >
 54 |         {isMobile ? (
 55 |           <MobileNotSupported />
 56 |         ) : (
 57 |           <>
 58 |             <Header
 59 |               restart={restartTest}
 60 |               openAboutModal={openModal}
 61 |               closeAboutModal={closeModal}
 62 |             />
 63 |             <TimeCategory
 64 |               time={time}
 65 |               setLocalStorage={setLocalStorageValue}
 66 |               setTime={setTime}
 67 |               restart={restartTest}
 68 |             />
 69 |             <Countdown countdown={countdown} reset={resetCountdown} />
 70 |             <WordWrapper
 71 |               focused={wordContainerFocused}
 72 |               setFocused={setWordContainerFocused}
 73 |             >
 74 |               <WordContainer word={word} />
 75 |               <UserTyped
 76 |                 word={word}
 77 |                 check={checkCharacter}
 78 |                 charTyped={charTyped}
 79 |               />
 80 |             </WordWrapper>
 81 |             <Restart restart={restartTest} />
 82 |             <Footer />
 83 |             <ModalComponent
 84 |               type='result'
 85 |               isOpen={modalIsOpen}
 86 |               onRequestClose={closeModal}
 87 |             >
 88 |               <ModalContent
 89 |                 totalTime={time}
 90 |                 results={results}
 91 |                 history={history}
 92 |               />
 93 |             </ModalComponent>
 94 | 
 95 |             <ModalComponent
 96 |               type='about'
 97 |               isOpen={aboutModal}
 98 |               onRequestClose={closeModal}
 99 |             >
100 |               <AboutPage />
101 |             </ModalComponent>
102 |           </>
103 |         )}
104 |       </main>
105 |     </div>
106 |   );
107 | }
108 | 
109 | export default App;
110 | 


--------------------------------------------------------------------------------
/src/hooks/useSystem.ts:
--------------------------------------------------------------------------------
  1 | import { useCallback, useState } from 'react';
  2 | 
  3 | import { useCountdown } from './useCountdown';
  4 | import { useKeyDown } from './useKeyDown';
  5 | import { useLocalStorage } from './useLocalStorage';
  6 | import { useModal } from './useModal';
  7 | import { useWord } from './useWord';
  8 | 
  9 | import {
 10 |   calculateAccuracy,
 11 |   calculateErrorPercentage,
 12 |   calculateWPM,
 13 | } from '../utils';
 14 | 
 15 | import type { Results } from '../types';
 16 | import type { HistoryType } from '../types';
 17 | 
 18 | export const useSystem = () => {
 19 |   const [results, setResults] = useState<Results>({
 20 |     accuracy: 0,
 21 |     wpm: 0,
 22 |     cpm: 0,
 23 |     error: 0,
 24 |   });
 25 | 
 26 |   const [history, setHistory] = useState<HistoryType>({
 27 |     wordHistory: '',
 28 |     typedHistory: '',
 29 |   });
 30 | 
 31 |   const { setLocalStorageValue, getLocalStorageValue } = useLocalStorage();
 32 |   const [wordContainerFocused, setWordContainerFocused] = useState(false);
 33 |   const [time, setTime] = useState(() => getLocalStorageValue('time') || 15000);
 34 |   const { countdown, resetCountdown, startCountdown } = useCountdown(time);
 35 |   const { word, updateWord, totalWord } = useWord(30);
 36 |   const {
 37 |     charTyped,
 38 |     typingState,
 39 |     cursorPosition,
 40 |     totalCharacterTyped,
 41 |     resetCharTyped,
 42 |     resetCursorPointer,
 43 |     setTotalCharacterTyped,
 44 |     setTypingState,
 45 |   } = useKeyDown(wordContainerFocused);
 46 |   const { modalIsOpen, aboutModal, openModal, closeModal } = useModal();
 47 | 
 48 |   const restartTest = useCallback(() => {
 49 |     resetCountdown();
 50 |     updateWord(true);
 51 |     resetCursorPointer();
 52 |     resetCharTyped();
 53 |     setTypingState('idle');
 54 |     setTotalCharacterTyped('');
 55 |   }, [
 56 |     resetCountdown,
 57 |     updateWord,
 58 |     resetCursorPointer,
 59 |     resetCharTyped,
 60 |     setTypingState,
 61 |     setTotalCharacterTyped,
 62 |   ]);
 63 | 
 64 |   const checkCharacter = useCallback(
 65 |     (index: number) => {
 66 |       if (charTyped[index] === word[index]) {
 67 |         return true;
 68 |       } else {
 69 |         return false;
 70 |       }
 71 |     },
 72 |     [charTyped, word]
 73 |   );
 74 | 
 75 |   if (word.length === charTyped.length) {
 76 |     updateWord();
 77 |     resetCharTyped();
 78 |     resetCursorPointer();
 79 |   }
 80 | 
 81 |   if (typingState === 'start') {
 82 |     startCountdown();
 83 |     setTypingState('typing');
 84 |   }
 85 | 
 86 |   if (countdown === 0) {
 87 |     const { accuracy } = calculateAccuracy(totalWord, totalCharacterTyped);
 88 |     const { wpm, cpm } = calculateWPM(totalCharacterTyped, accuracy, time);
 89 |     const error = calculateErrorPercentage(accuracy);
 90 | 
 91 |     setResults({
 92 |       accuracy,
 93 |       wpm,
 94 |       cpm,
 95 |       error,
 96 |     });
 97 | 
 98 |     setHistory({
 99 |       wordHistory: totalWord,
100 |       typedHistory: totalCharacterTyped,
101 |     });
102 | 
103 |     openModal('result');
104 |     restartTest();
105 |   }
106 | 
107 |   return {
108 |     charTyped,
109 |     countdown,
110 |     cursorPosition,
111 |     modalIsOpen,
112 |     aboutModal,
113 |     results,
114 |     time,
115 |     history,
116 |     word,
117 |     wordContainerFocused,
118 |     setWordContainerFocused,
119 |     setTime,
120 |     resetCountdown,
121 |     setLocalStorageValue,
122 |     updateWord,
123 |     restartTest,
124 |     checkCharacter,
125 |     closeModal,
126 |     openModal,
127 |   };
128 | };
129 | 


--------------------------------------------------------------------------------
/src/utils/index.ts:
--------------------------------------------------------------------------------
  1 | import { faker } from '@faker-js/faker';
  2 | 
  3 | import { AccuracyMetrics } from '../types';
  4 | 
  5 | export const isAllowedCode = (code: string): boolean => {
  6 |   return (
  7 |     code.startsWith('Key') ||
  8 |     code === 'Backspace' ||
  9 |     code === 'Space' ||
 10 |     code === 'Minus'
 11 |   );
 12 | };
 13 | 
 14 | export const isMobile = () => {
 15 |   const userAgent = navigator.userAgent;
 16 | 
 17 |   const mobileUserAgents = [
 18 |     'Android',
 19 |     'iPhone',
 20 |     'iPad',
 21 |     'iPod',
 22 |     'BlackBerry',
 23 |     'Windows Phone',
 24 |   ];
 25 | 
 26 |   for (let i = 0; i < mobileUserAgents.length; i++) {
 27 |     if (userAgent.indexOf(mobileUserAgents[i]) !== -1) {
 28 |       return true;
 29 |     }
 30 |   }
 31 |   return false;
 32 | };
 33 | 
 34 | export const generateWord = (n: number): string => {
 35 |   return faker.word.words(n);
 36 | };
 37 | 
 38 | export const calculateAccuracy = (expectedWord: string, typedWord: string) => {
 39 |   let correctChars = 0;
 40 |   for (let i = 0; i < typedWord.length; i++) {
 41 |     if (typedWord[i] === expectedWord[i]) {
 42 |       correctChars++;
 43 |     }
 44 |   }
 45 | 
 46 |   const accuracyMetrics: AccuracyMetrics = {
 47 |     correctChars,
 48 |     incorrectChars: typedWord.length - correctChars,
 49 |     accuracy: (correctChars / typedWord.length) * 100,
 50 |   };
 51 |   return accuracyMetrics;
 52 | };
 53 | 
 54 | export const calculateWPM = (
 55 |   typedWord: string,
 56 |   accuracy: number,
 57 |   time: number
 58 | ) => {
 59 |   const minutes = time / 60000;
 60 |   const wordsTyped = typedWord.length / 5;
 61 |   const grossWPM = wordsTyped / minutes;
 62 |   const netWPM = Math.round(grossWPM * (accuracy / 100));
 63 | 
 64 |   const results = {
 65 |     wpm: netWPM,
 66 |     cpm: typedWord.length / minutes,
 67 |   };
 68 |   return results;
 69 | };
 70 | 
 71 | export const calculateErrorPercentage = (accuracy: number) => {
 72 |   return 100 - accuracy;
 73 | };
 74 | 
 75 | export const theme = {
 76 |   blueDolphin: {
 77 |     name: 'Blue Dolphin',
 78 |     background: {
 79 |       primary: '#003950',
 80 |       secondary: '#014961',
 81 |     },
 82 |     text: {
 83 |       primary: '#6DEAFF',
 84 |       secondary: '#FFCEFB',
 85 |       title: '#6DEAFF',
 86 |     },
 87 |   },
 88 |   aurora: {
 89 |     name: 'Aurora',
 90 |     background: {
 91 |       primary: '#011926',
 92 |       secondary: '#000C13',
 93 |     },
 94 |     text: {
 95 |       primary: '#235A68',
 96 |       secondary: '#00E980',
 97 |       title: '#00E980',
 98 |     },
 99 |   },
100 |   paper: {
101 |     name: 'Paper',
102 |     background: {
103 |       primary: '#EEEEEE',
104 |       secondary: '#DDDDDD',
105 |     },
106 |     text: {
107 |       primary: '#B4B4B4',
108 |       secondary: '#444444',
109 |       title: '#444444',
110 |     },
111 |   },
112 |   cyberspace: {
113 |     name: 'Cyberspace',
114 |     background: {
115 |       primary: '#181C18',
116 |       secondary: '#131613',
117 |     },
118 |     text: {
119 |       primary: '#9578D3',
120 |       secondary: '#04AF6A',
121 |       title: '#9578D3',
122 |     },
123 |   },
124 |   cheesecake: {
125 |     name: 'Cheesecake',
126 |     background: {
127 |       primary: '#FDF0D5',
128 |       secondary: '#F3E2BF',
129 |     },
130 |     text: {
131 |       primary: '#E14C94',
132 |       secondary: '#3A3335',
133 |       title: '#E14C94',
134 |     },
135 |   },
136 |   bouquet: {
137 |     name: 'Bouquet',
138 |     background: {
139 |       primary: '#173F35',
140 |       secondary: '#1F4E43',
141 |     },
142 |     text: {
143 |       primary: '#408E7B',
144 |       secondary: '#DBE0D2',
145 |       title: '#DBE0D2',
146 |     },
147 |   },
148 | };
149 | 


--------------------------------------------------------------------------------
/src/components/About.tsx:
--------------------------------------------------------------------------------
 1 | import { BiLogoTelegram } from "react-icons/bi";
 2 | import { BsGithub } from "react-icons/bs";
 3 | 
 4 | const AboutPage = () => {
 5 |   return (
 6 |     <div className="m-auto flex h-[90%] w-[90%] flex-col gap-7 py-10 font-mono text-lg">
 7 |       <div className="flex flex-col gap-3">
 8 |         <h1 className="text-3xl font-bold">About Typest</h1>
 9 |         <p className="">
10 |           Typest is a minimalistic typing speed testing app built with React and
11 |           TailwindCSS that highly inspired by{" "}
12 |           <a
13 |             href="http://www.monkeytype.com"
14 |             target="_blank"
15 |             className="hover:underline"
16 |           >
17 |             MonkeyType
18 |           </a>
19 |           . The app allows users to test and improve their typing speed and
20 |           accuracy. The app provides a user-friendly interface and intuitive
21 |           feedback on typing performance.
22 |         </p>
23 |       </div>
24 |       <div className="mb-5 flex flex-col gap-3">
25 |         <h2 className="text-2xl font-bold">Current Features</h2>
26 |         <ul className="list-inside list-none space-y-2">
27 |           <li>
28 |             <strong className="italic">Typing Test</strong>: Users can take a
29 |             typing test to measure their typing speed and accuracy. The test
30 |             includes random sentences/paragraphs, and the user's typing speed is
31 |             calculated in words per minute (WPM).
32 |           </li>
33 |           <li>
34 |             <strong className="italic">Time Category</strong>: Users can adjust
35 |             typing duration to 15s, 30s, or 60s according to their preference.
36 |           </li>
37 |           <li>
38 |             <strong className="italic">Statistics</strong>: The app displays
39 |             statistics such as WPM/CPM, accuracy percentage, error percentage
40 |             and total number of characters typed.
41 |           </li>
42 |           <li>
43 |             <strong className="italic">Watch Typing History</strong>: Users can
44 |             watch their previous typing history and access their performance.
45 |           </li>
46 |           <li>
47 |             <strong className="italic">Responsive Design</strong>: The user
48 |             interface is designed to be responsive and adapt to different screen
49 |             sizes, making it accessible on various laptops or PCs.
50 |           </li>
51 |         </ul>
52 |       </div>
53 | 
54 |       <div className=" mt-auto flex flex-col gap-1">
55 |         <div className="flex items-center gap-3">
56 |           <BiLogoTelegram className="text-xl font-bold" />
57 |           <h2 className="text-xl font-bold">Contact:</h2>
58 |           <a
59 |             href="https://www.linkedin.com/in/muhammad-abdullah-796597246/"
60 |             target="_blank"
61 |             className="hover:underline"
62 |             rel="noopener noreferrer"
63 |           >
64 |             Linkedin
65 |           </a>
66 |           ,
67 |           <a
68 |             href="https://www.instagram.com/abdullahassi225/"
69 |             target="_blank"
70 |             className="hover:underline"
71 |             rel="noopener noreferrer"
72 |           >
73 |             Instagram
74 |           </a>
75 |         </div>
76 |         <div className="flex items-center gap-3">
77 |           <BsGithub className="text-xl font-bold" />
78 |           <h2 className="text-xl font-bold">Source code:</h2>
79 |           <a
80 |             href=""
81 |             target="_blank"
82 |             className="hover:underline"
83 |             rel="noopener noreferrer"
84 |           >
85 |             Github Repo
86 |           </a>
87 |         </div>
88 |       </div>
89 |     </div>
90 |   );
91 | };
92 | 
93 | export default AboutPage;
94 | 


--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>


--------------------------------------------------------------------------------
/src/components/ThemeDropdown.tsx:
--------------------------------------------------------------------------------
  1 | import { useDropdown } from '../hooks/useDropdown';
  2 | import { useThemeContext } from '../hooks/useTheme';
  3 | 
  4 | import { theme } from '../utils';
  5 | 
  6 | const ThemeDropdown = () => {
  7 |   const { dropdownRef, isOpen, toggleDropdown } = useDropdown();
  8 |   const { systemTheme, setTheme } = useThemeContext();
  9 | 
 10 |   return (
 11 |     <>
 12 |       <div className='flex rounded-md font-mono'>
 13 |         <div className='relative' ref={dropdownRef}>
 14 |           <button
 15 |             type='button'
 16 |             className={`inline-flex h-full items-center justify-center rounded-md border-0 px-2 outline-0`}
 17 |             style={{
 18 |               backgroundColor: systemTheme.background.secondary,
 19 |               border: `1px solid ${systemTheme.text.secondary}`,
 20 |             }}
 21 |             onClick={() => toggleDropdown()}
 22 |           >
 23 |             <div className='flex items-center gap-2'>
 24 |               <div
 25 |                 style={{ backgroundColor: systemTheme.background.primary }}
 26 |                 className={`aspect-square w-3 rounded-full`}
 27 |               ></div>
 28 |               <div
 29 |                 style={{ backgroundColor: systemTheme.text.primary }}
 30 |                 className={`aspect-square w-3 rounded-full`}
 31 |               ></div>
 32 |               <div
 33 |                 style={{ backgroundColor: systemTheme.text.secondary }}
 34 |                 className={`aspect-square w-3 rounded-full`}
 35 |               ></div>
 36 |             </div>
 37 |             <svg
 38 |               xmlns='http://www.w3.org/2000/svg'
 39 |               className='ml-3 h-4 w-4'
 40 |               fill='none'
 41 |               viewBox='0 0 24 24'
 42 |               stroke='currentColor'
 43 |               strokeWidth={2}
 44 |             >
 45 |               <path
 46 |                 strokeLinecap='round'
 47 |                 strokeLinejoin='round'
 48 |                 d='M19 9l-7 7-7-7'
 49 |               />
 50 |             </svg>
 51 |           </button>
 52 | 
 53 |           <div
 54 |             className='absolute right-0 z-10 mt-1 w-56 origin-top-right rounded-md shadow-lg'
 55 |             style={{
 56 |               backgroundColor: systemTheme.background.secondary,
 57 |               border: `1px solid ${systemTheme.text.secondary}`,
 58 |               display: isOpen ? 'block' : 'none',
 59 |             }}
 60 |           >
 61 |             <ul
 62 |               className={`divide-y divide-slate-400`}
 63 |               style={{ color: systemTheme.text.title }}
 64 |             >
 65 |               {Object.keys(theme).map((key) => (
 66 |                 <li
 67 |                   key={key}
 68 |                   className='flex cursor-pointer items-center justify-between p-3 text-sm'
 69 |                   onClick={() => {
 70 |                     setTheme(theme[key as keyof typeof theme]);
 71 |                   }}
 72 |                 >
 73 |                   <span>{theme[key as keyof typeof theme].name}</span>
 74 |                   <div className='flex items-center gap-2'>
 75 |                     <div
 76 |                       style={{
 77 |                         backgroundColor:
 78 |                           theme[key as keyof typeof theme].background.primary,
 79 |                       }}
 80 |                       className={`aspect-square w-3 rounded-full`}
 81 |                     ></div>
 82 |                     <div
 83 |                       style={{
 84 |                         backgroundColor:
 85 |                           theme[key as keyof typeof theme].text.primary,
 86 |                       }}
 87 |                       className={`aspect-square w-3 rounded-full`}
 88 |                     ></div>
 89 |                     <div
 90 |                       style={{
 91 |                         backgroundColor:
 92 |                           theme[key as keyof typeof theme].text.secondary,
 93 |                       }}
 94 |                       className={`aspect-square w-3 rounded-full`}
 95 |                     ></div>
 96 |                   </div>
 97 |                 </li>
 98 |               ))}
 99 |             </ul>
100 |           </div>
101 |         </div>
102 |       </div>
103 |     </>
104 |   );
105 | };
106 | 
107 | export default ThemeDropdown;
108 | 


--------------------------------------------------------------------------------
/src/components/Header.tsx:
--------------------------------------------------------------------------------
  1 | import styled from "styled-components";
  2 | 
  3 | import { useThemeContext } from "../hooks/useTheme";
  4 | 
  5 | import { BsQuestionCircle } from "react-icons/bs";
  6 | import { BsKeyboardFill } from "react-icons/bs";
  7 | 
  8 | import Tooltip from "./Tooltip";
  9 | import ThemeDropdown from "./ThemeDropdown";
 10 | 
 11 | type HeaderProps = {
 12 |   restart: () => void;
 13 |   openAboutModal: (str: string) => void;
 14 |   closeAboutModal: (str: string) => void;
 15 | };
 16 | 
 17 | const StyledSvg = styled.svg`
 18 |   width: 50px;
 19 |   height: 50px;
 20 |   color: ${({ theme }) => theme.text.title};
 21 | `;
 22 | 
 23 | const Header = ({ restart, openAboutModal }: HeaderProps) => {
 24 |   const { systemTheme } = useThemeContext();
 25 | 
 26 |   return (
 27 |     <header className="flex items-center justify-between py-8">
 28 |       <div
 29 |         className="flex cursor-pointer items-center gap-3"
 30 |         style={{
 31 |           color: systemTheme.text.title,
 32 |         }}
 33 |       >
 34 |         <StyledSvg
 35 |           xmlns="http://www.w3.org/2000/svg"
 36 |           xmlnsXlink="http://www.w3.org/1999/xlink"
 37 |           viewBox="-680 -1030 300 180"
 38 |           theme={systemTheme}
 39 |         >
 40 |           <g>
 41 |             <path
 42 |               d="M -430 -910 L -430 -910 C -424.481 -910 -420 -905.519 -420 -900 L -420 -900 C -420 -894.481 -424.481 -890 -430 -890 L -430 -890 C -435.519 -890 -440 -894.481 -440 -900 L -440 -900 C -440 -905.519 -435.519 -910 -430 -910 Z"
 43 |               fill="currentColor"
 44 |             ></path>
 45 |             <path
 46 |               d=" M -570 -910 L -510 -910 C -504.481 -910 -500 -905.519 -500 -900 L -500 -900 C -500 -894.481 -504.481 -890 -510 -890 L -570 -890 C -575.519 -890 -580 -894.481 -580 -900 L -580 -900 C -580 -905.519 -575.519 -910 -570 -910 Z "
 47 |               fill="currentColor"
 48 |             ></path>
 49 |             <path
 50 |               d="M -590 -970 L -590 -970 C -584.481 -970 -580 -965.519 -580 -960 L -580 -940 C -580 -934.481 -584.481 -930 -590 -930 L -590 -930 C -595.519 -930 -600 -934.481 -600 -940 L -600 -960 C -600 -965.519 -595.519 -970 -590 -970 Z"
 51 |               fill="currentColor"
 52 |             ></path>
 53 |             <path
 54 |               d=" M -639.991 -960.515 C -639.72 -976.836 -626.385 -990 -610 -990 L -610 -990 C -602.32 -990 -595.31 -987.108 -590 -982.355 C -584.69 -987.108 -577.68 -990 -570 -990 L -570 -990 C -553.615 -990 -540.28 -976.836 -540.009 -960.515 C -540.001 -960.345 -540 -960.172 -540 -960 L -540 -960 L -540 -940 C -540 -934.481 -544.481 -930 -550 -930 L -550 -930 C -555.519 -930 -560 -934.481 -560 -940 L -560 -960 L -560 -960 C -560 -965.519 -564.481 -970 -570 -970 C -575.519 -970 -580 -965.519 -580 -960 L -580 -960 L -580 -960 L -580 -940 C -580 -934.481 -584.481 -930 -590 -930 L -590 -930 C -595.519 -930 -600 -934.481 -600 -940 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 C -600 -965.519 -604.481 -970 -610 -970 C -615.519 -970 -620 -965.519 -620 -960 L -620 -960 L -620 -940 C -620 -934.481 -624.481 -930 -630 -930 L -630 -930 C -635.519 -930 -640 -934.481 -640 -940 L -640 -960 L -640 -960 C -640 -960.172 -639.996 -960.344 -639.991 -960.515 Z "
 55 |               fill="currentColor"
 56 |             ></path>
 57 |             <path
 58 |               d=" M -460 -930 L -460 -900 C -460 -894.481 -464.481 -890 -470 -890 L -470 -890 C -475.519 -890 -480 -894.481 -480 -900 L -480 -930 L -508.82 -930 C -514.99 -930 -520 -934.481 -520 -940 L -520 -940 C -520 -945.519 -514.99 -950 -508.82 -950 L -431.18 -950 C -425.01 -950 -420 -945.519 -420 -940 L -420 -940 C -420 -934.481 -425.01 -930 -431.18 -930 L -460 -930 Z "
 59 |               fill="currentColor"
 60 |             ></path>
 61 |             <path
 62 |               d="M -470 -990 L -430 -990 C -424.481 -990 -420 -985.519 -420 -980 L -420 -980 C -420 -974.481 -424.481 -970 -430 -970 L -470 -970 C -475.519 -970 -480 -974.481 -480 -980 L -480 -980 C -480 -985.519 -475.519 -990 -470 -990 Z"
 63 |               fill="currentColor"
 64 |             ></path>
 65 |             <path
 66 |               d=" M -630 -910 L -610 -910 C -604.481 -910 -600 -905.519 -600 -900 L -600 -900 C -600 -894.481 -604.481 -890 -610 -890 L -630 -890 C -635.519 -890 -640 -894.481 -640 -900 L -640 -900 C -640 -905.519 -635.519 -910 -630 -910 Z "
 67 |               fill="currentColor"
 68 |             ></path>
 69 |             <path
 70 |               d=" M -515 -990 L -510 -990 C -504.481 -990 -500 -985.519 -500 -980 L -500 -980 C -500 -974.481 -504.481 -970 -510 -970 L -515 -970 C -520.519 -970 -525 -974.481 -525 -980 L -525 -980 C -525 -985.519 -520.519 -990 -515 -990 Z "
 71 |               fill="currentColor"
 72 |             ></path>
 73 |             <path
 74 |               d=" M -660 -910 L -680 -910 L -680 -980 C -680 -1007.596 -657.596 -1030 -630 -1030 L -430 -1030 C -402.404 -1030 -380 -1007.596 -380 -980 L -380 -900 C -380 -872.404 -402.404 -850 -430 -850 L -630 -850 C -657.596 -850 -680 -872.404 -680 -900 L -680 -920 L -660 -920 L -660 -900 C -660 -883.443 -646.557 -870 -630 -870 L -430 -870 C -413.443 -870 -400 -883.443 -400 -900 L -400 -980 C -400 -996.557 -413.443 -1010 -430 -1010 L -630 -1010 C -646.557 -1010 -660 -996.557 -660 -980 L -660 -910 Z "
 75 |               fill="currentColor"
 76 |             ></path>
 77 |           </g>
 78 |         </StyledSvg>
 79 |         <h1
 80 |           className={`font-mono text-2xl font-bold hover:underline lg:text-3xl`}
 81 |         >
 82 |           Typest.
 83 |         </h1>
 84 |         <Tooltip tooltipId="keyboard">
 85 |           <div
 86 |             className="ml-4"
 87 |             onClick={() => {
 88 |               restart();
 89 |             }}
 90 |             data-tooltip-id="keyboard"
 91 |             data-tooltip-content="Restart"
 92 |           >
 93 |             <BsKeyboardFill className="text-2xl lg:text-3xl " />
 94 |           </div>
 95 |         </Tooltip>
 96 |       </div>
 97 |       <div className="flex gap-4">
 98 |         <ThemeDropdown />
 99 |         <Tooltip tooltipId="about">
100 |           <div
101 |             data-tooltip-id="about"
102 |             data-tooltip-content="About"
103 |             className="cursor-pointer"
104 |             onClick={() => openAboutModal("about")}
105 |           >
106 |             <BsQuestionCircle className="text-3xl" />
107 |           </div>
108 |         </Tooltip>
109 |       </div>
110 |     </header>
111 |   );
112 | };
113 | 
114 | export default Header;
115 | 


--------------------------------------------------------------------------------
/src/components/ModalContent.tsx:
--------------------------------------------------------------------------------
  1 | import { useState } from 'react';
  2 | import styled from 'styled-components';
  3 | 
  4 | import { useClipboard } from '../hooks/useClipboard';
  5 | // import { useScreenShot } from '../hooks/useScreenShot';
  6 | import { useThemeContext } from '../hooks/useTheme';
  7 | 
  8 | import { IoCopy } from 'react-icons/io5';
  9 | import { FaCameraRetro } from 'react-icons/fa';
 10 | 
 11 | import Character from './Character';
 12 | import ResultCard from './ResultCard';
 13 | 
 14 | import type { Results } from '../types';
 15 | import type { HistoryType } from '../types';
 16 | 
 17 | type ModalContentProps = {
 18 |   totalTime: number;
 19 |   history: HistoryType;
 20 |   results: Results;
 21 | };
 22 | 
 23 | const StyledCopyButton = styled.button`
 24 |   &:hover {
 25 |     color: ${({ theme }) => theme.text.secondary};
 26 |   }
 27 | `;
 28 | 
 29 | const ModalContent = ({ totalTime, history, results }: ModalContentProps) => {
 30 |   const [copied, setCopied] = useState(false);
 31 |   // const [imageCopied, setImageCopied] = useState(false);
 32 | 
 33 |   const { copyTextToClipboard } = useClipboard();
 34 |   // const { ref, image, getImage } = useScreenShot();
 35 |   const { systemTheme } = useThemeContext();
 36 | 
 37 |   return (
 38 |     <div
 39 |       className='mx-auto flex h-full w-[95%] flex-col gap-10 pb-10 pt-8 font-mono'
 40 |       style={{
 41 |         color: systemTheme.text.primary,
 42 |       }}
 43 |     >
 44 |       <div
 45 |         // ref={ref}
 46 |         className='flex-[3] px-5 py-7'
 47 |         style={{
 48 |           backgroundColor: systemTheme.background.primary,
 49 |         }}
 50 |       >
 51 |         <div className=' grid grid-flow-col grid-rows-6 justify-center gap-4 sm:grid-rows-4 sm:justify-normal lg:grid-rows-2 lg:justify-normal lg:gap-10 '>
 52 |           <ResultCard
 53 |             title='wpm/cpm'
 54 |             tooltipId='wpm'
 55 |             tooltipContent='words per minute / characters per minute'
 56 |             tooltipPlace='top'
 57 |             results={`${results.wpm} / ${results.cpm}`}
 58 |           />
 59 |           <ResultCard
 60 |             title='acc.'
 61 |             tooltipId='accuracy'
 62 |             tooltipContent='accuracy percentage'
 63 |             tooltipPlace='bottom'
 64 |             results={`${Math.round(results.accuracy)}%`}
 65 |           />
 66 |           <ResultCard
 67 |             title='character'
 68 |             tooltipId='character'
 69 |             tooltipContent='correct/incorrect'
 70 |             tooltipPlace='top'
 71 |             results={`${Math.round(
 72 |               history.typedHistory.length * (results.accuracy / 100)
 73 |             )} / ${Math.round(
 74 |               history.typedHistory.length * (results.error / 100)
 75 |             )}`}
 76 |           />
 77 |           <ResultCard
 78 |             title='err.'
 79 |             tooltipId='error'
 80 |             tooltipContent='error percentage'
 81 |             tooltipPlace='bottom'
 82 |             results={`${Math.round(results.error)}%`}
 83 |           />
 84 |           <ResultCard
 85 |             title='time'
 86 |             tooltipId='time'
 87 |             tooltipContent='time taken to complete the test'
 88 |             tooltipPlace='top'
 89 |             results={`${totalTime / 1000}s`}
 90 |           />
 91 |           <ResultCard
 92 |             title='total'
 93 |             tooltipId='total'
 94 |             tooltipContent='total character typed'
 95 |             tooltipPlace='bottom'
 96 |             results={`${history.typedHistory.length}`}
 97 |           />
 98 |         </div>
 99 |       </div>
100 | 
101 |       <div className='flex-[3] px-5'>
102 |         <div className='flex items-center gap-2'>
103 |           <h2 className='text-xl lg:text-2xl'>Watch history</h2>
104 |           <StyledCopyButton
105 |             onClick={async () => {
106 |               const isCopied = await copyTextToClipboard(history.typedHistory);
107 |               if (isCopied) {
108 |                 setCopied(true);
109 |                 setTimeout(() => {
110 |                   setCopied(false);
111 |                 }, 2000);
112 |               }
113 |             }}
114 |             theme={systemTheme}
115 |           >
116 |             <IoCopy className='cursor-pointer text-xl' />
117 |           </StyledCopyButton>
118 |           <div
119 |             className='rounded-md'
120 |             style={{
121 |               backgroundColor: systemTheme.background.secondary,
122 |             }}
123 |           >
124 |             {copied === true ? (
125 |               <span
126 |                 className='p-5 '
127 |                 style={{ color: systemTheme.text.secondary }}
128 |               >
129 |                 Copied ✅
130 |               </span>
131 |             ) : null}
132 |           </div>
133 |         </div>
134 |         <div className='mt-3 text-lg lg:text-xl'>
135 |           {history.typedHistory.split('').map((char, index) => {
136 |             return (
137 |               <Character
138 |                 key={index + char}
139 |                 character={history.wordHistory[index]}
140 |                 state={history.wordHistory[index] === char}
141 |               />
142 |             );
143 |           })}
144 |         </div>
145 |       </div>
146 | 
147 |       <div className='flex flex-[1] flex-col px-5'>
148 |         <div
149 |           // className='group mt-auto flex cursor-pointer items-center gap-2 '
150 |           // onClick={async () => {
151 |           //   try {
152 |           //     getImage();
153 |           //     const res = await fetch(image);
154 |           //     const data = await res.blob();
155 |           //     await navigator.clipboard.write([
156 |           //       new ClipboardItem({ [data.type]: data }),
157 |           //     ]);
158 | 
159 |           //     setImageCopied(true);
160 |           //     setTimeout(() => {
161 |           //       setImageCopied(false);
162 |           //     }, 2000);
163 |           //   } catch (error) {
164 |           //     console.log(error);
165 |           //   }
166 |           // }}
167 |         >
168 |           <FaCameraRetro className=' text-xl' />
169 |           <span className='text-lg hover:underline'>
170 |             Screenshot your results and share to your friends
171 |           </span>
172 |           {/* <div
173 |             className='rounded-md'
174 |             style={{
175 |               backgroundColor: systemTheme.background.secondary,
176 |             }}
177 |           >
178 |             {imageCopied === true ? (
179 |               <span
180 |                 className='p-5 text-center'
181 |                 style={{ color: systemTheme.text.secondary }}
182 |               >
183 |                 Image copied to clipboard 
184 |               </span>
185 |             ) : null}
186 |           </div> */}
187 |         </div>
188 |       </div>
189 |     </div>
190 |   );
191 | };
192 | 
193 | export default ModalContent;
194 | 


--------------------------------------------------------------------------------