Hello! Mom

Author: solomonshalom

README.md

@@ -1,9 +1,7 @@
-# cybertype.app
+# Fast Type
 
 A Fast and Minimal Typing App.
 
-Checkout [cybertype.app](https://cybertype.app/)
-
 Practice typing in various modes such as common 1k, 5k, 10k English Words, most commonly misspelled words, Quotes or Programming Language keywords for various languages such as JavaScript, HTML, CSS, Rust, Python, C++ etc with Sweet Mechanical Keyboard Sounds.
 
 <br>

components/DynamicIsland.tsx

@@ -52,7 +52,13 @@ export function DynamicIsland({ state, dispatch }: Props) {
           show={state.showThemes}
           handleClose={closeThemeSwitcher}
           ratio={0.2}
-          render={close => <ThemeSwitcher handleClose={close} />}
+          render={close => (
+            <ThemeSwitcher
+              selectedKeyboardScheme={state.keyboardScheme}
+              handleClose={close}
+              dispatch={dispatch}
+            />
+          )}
         />
 
         <DynamicIslandExpander
@@ -135,4 +141,4 @@ function DynamicIslandExpander(props: {
       {props.render(handleClose)}
     </div>
   )
-}
+}

components/Keyboard.tsx

@@ -2,16 +2,15 @@ import styles from '../styles/Keyboard.module.scss'
 import { KeyStatRecord } from '../lib/types'
 import { memo, useEffect, useRef } from 'react'
 import { getSpeed } from '../lib/utils'
+import { schemes } from '../lib/schemes'
+import { State } from '../lib/types'
 
 type KeyStatsProps = {
   keyStats: KeyStatRecord
+  keyboardScheme: State['keyboardScheme']
 }
 
-const row1 = ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', '[', ']']
-const row2 = ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', ';', `'`]
-const row3 = ['z', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.', '/']
-
-export function KeyStats({ keyStats }: KeyStatsProps) {
+export function KeyStats({ keyStats, keyboardScheme }: KeyStatsProps) {
   const mapper = (keys: string[]) =>
     keys.map(key => {
       return (
@@ -24,11 +23,12 @@ export function KeyStats({ keyStats }: KeyStatsProps) {
       )
     })
 
+  let currentScheme = schemes.find(scheme => scheme.id === keyboardScheme) || schemes[0]
   return (
     <div className={styles.keyboard}>
-      <div className={styles.row}>{mapper(row1)}</div>
-      <div className={styles.row}>{mapper(row2)}</div>
-      <div className={styles.row}>{mapper(row3)}</div>
+      <div className={styles.row}>{mapper(currentScheme.row1)}</div>
+      <div className={styles.row}>{mapper(currentScheme.row2)}</div>
+      <div className={styles.row}>{mapper(currentScheme.row3)}</div>
     </div>
   )
 }
@@ -79,4 +79,4 @@ export const getSpeedLabel = (speed: number) => {
   if (speed >= 100) return styles.fast
   if (speed < 60) return styles.slow
   return styles.normal
-}
+}

components/Nav.tsx

@@ -7,7 +7,7 @@ export const Nav = memo(function Nav() {
     <nav className={styles.nav}>
       <div className={styles.appName}>CyberType</div>
       <a
-        href="https://github.com/MananTank/cybertype"
+        href="https://github.com/solomonshalom/FastType"
         target="_blank"
         rel="noreferrer"
         className={styles.github}
@@ -17,7 +17,7 @@ export const Nav = memo(function Nav() {
       </a>
 
       <a
-        href="https://twitter.com/MananTank_"
+        href="https://twitter.com/shalomlijo"
         target="_blank"
         rel="noreferrer"
         className={styles.twitter}

components/ThemeSwitcher.tsx

@@ -1,28 +1,57 @@
 import { themes, useThemeIndex } from '../hooks/useThemeIndex'
+import { Action } from '../lib/types'
 import styles from '../styles/ThemeSwitcher.module.scss'
+import { schemes } from '../lib/schemes'
 
-export function ThemeSwitcher({ handleClose }: { handleClose: () => void }) {
+export type Props = {
+  handleClose: () => void
+  selectedKeyboardScheme: string
+  dispatch: React.Dispatch<Action>
+}
+
+export function ThemeSwitcher(props: Props) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [_themeIndex, setThemeIndex] = useThemeIndex()
 
   return (
-    <div className={styles.themeSwitcher}>
-      {themes.map((theme, i) => {
-        return (
-          <div
-            data-theme={i}
-            key={i}
-            onClick={() => {
-              handleClose()
-              setThemeIndex(i)
-            }}
-            className={styles.theme}
-          >
-            <h3> {theme.name}</h3>
-            <div className={styles.palette}></div>
-          </div>
-        )
-      })}
+    <div>
+      <h3 className={styles.title}>Colors</h3>
+      <div className={styles.themeSwitcher}>
+        {themes.map((theme, i) => {
+          return (
+            <div
+              data-theme={i}
+              key={i}
+              onClick={() => {
+                props.handleClose()
+                setThemeIndex(i)
+              }}
+              className={styles.theme}
+            >
+              <h3> {theme.name}</h3>
+              <div className={styles.palette}></div>
+            </div>
+          )
+        })}
+      </div>
+      <h3 className={styles.title}>Keyboard</h3>
+      <div className={styles.options}>
+        {schemes.map(scheme => {
+          return (
+            <div
+              key={scheme.id}
+              className={styles.option}
+              data-active={props.selectedKeyboardScheme === scheme.id}
+              onClick={() => {
+                props.dispatch({ type: 'setKeyboardScheme', data: scheme.id })
+                props.handleClose()
+              }}
+            >
+              <div className={styles.name}>{scheme.name}</div>
+            </div>
+          )
+        })}
+      </div>
     </div>
   )
-}
+}

lib/localStorage.ts

@@ -1,6 +1,7 @@
 import { useEffect } from 'react'
 import { dataNameGroups } from '../components/DataSelector'
 import { soundPacks } from './sounds'
+import { schemes } from './schemes'
 import { State } from './types'
 
 export function getLocalStorage(
@@ -34,10 +35,17 @@ export function setLocalStorage(key: string, value: string) {
 
 const validSoundPackIds = new Set(soundPacks.map(pack => pack.id)) as Set<string>
 
+const validKeyboardSchemesIds = new Set(schemes.map(scheme => scheme.id)) as Set<string>
+
 export const soundPackValidator = (str: string) => {
   return validSoundPackIds.has(str)
 }
 
+export const keyboardSchemeValidator = (str: string) => {
+  console.log('valid ? ', validKeyboardSchemesIds.has(str))
+  return validKeyboardSchemesIds.has(str)
+}
+
 export const booleanValidator = (str: string) => {
   return str === 'false' || str === 'true'
 }
@@ -61,11 +69,15 @@ export function useLocalStorage(state: State) {
     setLocalStorage('dataName', state.dataName)
   }, [state.dataName])
 
+  useEffect(() => {
+    setLocalStorage('keyboardScheme', state.keyboardScheme)
+  }, [state.keyboardScheme])
+
   useEffect(() => {
     setLocalStorage('soundEnabled', String(state.soundEnabled))
   }, [state.soundEnabled])
 
   useEffect(() => {
     setLocalStorage('soundPack', state.soundPack)
   }, [state.soundPack])
-}
+}

lib/schemes.ts

@@ -0,0 +1,16 @@
+export const schemes = [
+    {
+      id: 'qwerty',
+      name: 'Qwerty',
+      row1: ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', '[', ']'],
+      row2: ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', ';', `'`],
+      row3: ['z', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.', '/']
+    }, // 0 - qwerty
+    {
+      id: 'azerty',
+      name: 'Azerty',
+      row1: ['a', 'z', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', '[', ']'],
+      row2: ['q', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', 'm'],
+      row3: ['w', 'x', 'c', 'v', 'b', 'n', ',', ';', '.', '/']
+    } // 1 - azerty
+  ]

lib/state.ts

@@ -4,7 +4,8 @@ import {
   getLocalStorage,
   dataNameValidator,
   booleanValidator,
-  soundPackValidator
+  soundPackValidator,
+  keyboardSchemeValidator
 } from './localStorage'
 import { SoundPack } from './sounds'
 import { State, Action, QuoteData } from './types'
@@ -35,6 +36,11 @@ export function stateReducer(state: State, action: Action): void {
       return
     }
 
+    case 'setKeyboardScheme': {
+      state.keyboardScheme = action.data
+      return
+    }
+
     case 'setShowDataSelector': {
       state.showDataSelector = action.data
       return
@@ -241,6 +247,12 @@ export function getInitialState(): State {
   const soundEnabled =
     getLocalStorage('soundEnabled', 'true', booleanValidator) === 'false' ? false : true
 
+  const keyboardScheme = getLocalStorage(
+    'keyboardScheme',
+    'qwerty',
+    keyboardSchemeValidator
+  ) as State['keyboardScheme']
+
   const dataName = getLocalStorage(
     'dataName',
     'English 200',
@@ -249,6 +261,7 @@ export function getInitialState(): State {
 
   return {
     soundPack,
+    keyboardScheme,
     showDataSelector: false,
     showSoundSelector: false,
     showThemes: false,
@@ -283,4 +296,4 @@ export function useAppState() {
   )
   rendered.current = true
   return [state, dispatch] as const
-}
+}

lib/types.d.ts

@@ -16,6 +16,7 @@ export type ErrorLocations = Record<number, Record<number, boolean>> // { 0: { 1
 
 export type State = {
   soundPack: SoundPack
+  keyboardScheme: string
   showSoundSelector: boolean
   showDataSelector: boolean
   showThemes: boolean
@@ -70,6 +71,10 @@ export type Action =
       type: 'setSoundPack'
       data: SoundPack
     }
+  | {
+      type: 'setKeyboardScheme'
+      data: string
+    }
 
 export type QuoteData = {
   text: string
@@ -116,4 +121,4 @@ export type Theme = {
   normal: string
   slow: string
   slowest: string
-}
+}