7 |
9 | {(_, i) =>
11 |
12 | )
13 | }
14 |
--------------------------------------------------------------------------------
/src/components/map.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react'
2 |
3 | export function For(props: {
4 | each: Data | undefined | null
5 | children: (instance: Data[number], idx: number) => ReactNode
6 | whenEmpty?: ReactNode
7 | }) {
8 | if (!props.each || props.each.length == 0) return props?.whenEmpty || null
9 | const content = props.each.map((instance, i) => props.children(instance, i))
10 | return <>{content}
11 | }
12 |
--------------------------------------------------------------------------------
/src/components/compound-ui/reset-button.tsx:
--------------------------------------------------------------------------------
1 | import { ResetIcon } from '@radix-ui/react-icons'
2 | import { Button } from '../ui/button'
3 | import { ComponentProps } from 'react'
4 |
5 | type ResetButtonProps = ComponentProps
13 |
16 |
7 |
19 | )
20 | }
21 |
--------------------------------------------------------------------------------
/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import * as LabelPrimitive from '@radix-ui/react-label'
3 | import { cva, type VariantProps } from 'class-variance-authority'
4 |
5 | import { cn } from '@/utils/class-names.utils'
6 |
7 | const labelVariants = cva(
8 | 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
9 | )
10 |
11 | const Label = React.forwardRef<
12 | React.ElementRef
9 |
10 | {(_, i) => (
11 |
17 |
18 |
22 | {title && {title} }
23 | {description && (
24 | {description}
25 | )}
26 |
27 | {action}
28 |
21 |
33 | )
34 | }
35 |
--------------------------------------------------------------------------------
/src/components/settings/soundpack-tab/sound-pack-tab.tsx:
--------------------------------------------------------------------------------
1 | import { AppStore } from '@/state/app-store'
2 | import { Setting } from '../setting'
3 | import { SoundPackItem } from './sound-pack-item'
4 | import { DEFAULT_SOUNDPACK, SOUND_PACKS } from '@/config/keyboard.config'
5 | import { For } from '@/components/map'
6 |
7 | export const SoundPackTab = () => {
8 | return (
9 |
22 |
23 | {title}
24 | {resetAction &&
26 | {subtitle &&
31 | {children}
32 |
23 | {title}
24 | {resetAction &&
26 | {subtitle && {subtitle}
} 27 | {description && ( 28 |{description}
29 | )} 30 |
20 |
21 | {(sound) => (
22 |
30 |
31 |
26 |
27 | {(css, index) => (
28 |
38 | )}
39 |
40 |
41 | )
42 | }
43 |
--------------------------------------------------------------------------------
/src/components/test-time-selector.tsx:
--------------------------------------------------------------------------------
1 | import { AppStore } from '@/state/app-store'
2 | import { Timer } from 'lucide-react'
3 | import { Tabs, TabsList, TabsTrigger } from './ui/tabs'
4 |
5 | const tabClassNames =
6 | 'rounded-full text-xs data-[state=active]:bg-muted-foreground data-[state=active]:text-background'
7 |
8 | export const TimeSelector = () => {
9 | const { setTime, time } = AppStore.useStore('time', 'setTime')
10 |
11 | return (
12 |
13 | setTime(Number(newTime))}
17 | >
18 |
19 |
20 | 15s
21 |
22 |
23 | 30s
24 |
25 |
26 | 60s
27 |
28 |
29 |
30 |
31 | )
32 | }
33 |
--------------------------------------------------------------------------------
/src/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import * as TooltipPrimitive from '@radix-ui/react-tooltip'
3 |
4 | import { cn } from '@/utils/class-names.utils'
5 |
6 | const TooltipProvider = TooltipPrimitive.Provider
7 |
8 | const Tooltip = TooltipPrimitive.Root
9 |
10 | const TooltipTrigger = TooltipPrimitive.Trigger
11 |
12 | const TooltipContent = React.forwardRef<
13 | React.ElementRef
17 |
35 |
39 | )
40 | }
41 |
--------------------------------------------------------------------------------
/src/components/ui/hover-card.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
3 |
4 | import { cn } from '@/utils/class-names.utils'
5 |
6 | const HoverCard = HoverCardPrimitive.Root
7 |
8 | const HoverCardTrigger = HoverCardPrimitive.Trigger
9 |
10 | const HoverCardContent = React.forwardRef<
11 | React.ElementRef36 | {radius}px 37 |
38 |
15 |
16 | {startIcon}
17 |
18 |
19 | {endIcon}
20 |
21 |
32 |
33 | )
34 | },
35 | )
36 | Input.displayName = 'Input'
37 |
38 | export { Input }
39 |
--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/settings/appearance-tab/appearance-tab.tsx:
--------------------------------------------------------------------------------
1 | import { ThemeSwitcher } from './theme-switcher'
2 | import { BorderRadiusVisualizer } from '../soundpack-tab/border-radius-visualizer'
3 | import {
4 | BORDER_RADII,
5 | DEFAULT_BORDER_RADIUS,
6 | DEFAULT_THEME,
7 | } from '@/config/appearance.config'
8 | import { Setting } from '../setting'
9 | import { AppStore } from '@/state/app-store'
10 | import { For } from '@/components/map'
11 |
12 | export const AppearanceTab = () => {
13 | const { borderRadius } = AppStore.useStore('borderRadius')
14 | return (
15 |
16 |
20 | AppStore.set({ borderRadius: DEFAULT_BORDER_RADIUS })
21 | }
22 | >
23 |
36 | AppStore.set({ theme: DEFAULT_THEME })}
39 | >
40 |
42 |
43 | )
44 | }
45 |
--------------------------------------------------------------------------------
/src/providers/app-settings.provider.tsx:
--------------------------------------------------------------------------------
1 | import { AppStore } from '@/state/app-store'
2 | import { TimerStore } from '@/state/timer.store'
3 | import { debounce } from '@/utils/helpers'
4 |
5 | import { useEffect } from 'react'
6 |
7 | const debouncedUpdateVolume = debounce(
8 | (vol: number) => window.spotifyClient?.player.setPlaybackVolume(vol),
9 | 200,
10 | )
11 |
12 | const root = document.documentElement
13 |
14 | export function AppSettingsProvider() {
15 | const { setTotalTime } = TimerStore.useStore('setTotalTime')
16 | const {
17 | currentFont,
18 | previewedTheme,
19 | time,
20 | theme,
21 | musicVolume,
22 | borderRadius,
23 | } = AppStore.useStore(
24 | 'currentFont',
25 | 'time',
26 | 'previewedTheme',
27 | 'theme',
28 | 'musicVolume',
29 | 'borderRadius',
30 | )
31 |
32 | useEffect(() => {
33 | root.attributeStyleMap.set('--radius', `${borderRadius}px`)
34 | }, [borderRadius])
35 |
36 | useEffect(() => {
37 | root.style.setProperty('--font-primary', currentFont)
38 | }, [currentFont])
39 |
40 | useEffect(() => {
41 | debouncedUpdateVolume(musicVolume)
42 | }, [musicVolume])
43 |
44 | useEffect(() => {
45 | setTotalTime(time)
46 | }, [time])
47 |
48 | return (
49 | <>
50 |
51 |
55 |
56 | )
57 | }
58 |
--------------------------------------------------------------------------------
/src/components/results.tsx:
--------------------------------------------------------------------------------
1 | import { metricsStore } from '@/state/metrics.store'
2 | import CountUp from 'react-countup'
3 |
4 | export const Results = () => {
5 | const { errorPercentage, wpm, rawWpm } = metricsStore()
6 |
7 | return (
8 |
24 |
25 | {(radius) => (
26 | AppStore.set({ borderRadius: radius })}
31 | />
32 | )}
33 |
34 |
35 |
9 |
37 | )
38 | }
39 |
--------------------------------------------------------------------------------
/src/components/spotify-user-info.tsx:
--------------------------------------------------------------------------------
1 | import { LogOut, Music2 } from 'lucide-react'
2 | import {
3 | DropdownMenu,
4 | DropdownMenuContent,
5 | DropdownMenuItem,
6 | DropdownMenuTrigger,
7 | } from './ui/dropdown-menu'
8 | import { Button } from './ui/button'
9 | import { useUserQuery } from '@/react-query/queries/spotify.query'
10 |
11 | export function UserInfo() {
12 | const { data: user } = useUserQuery()
13 | if (!user) return null
14 |
15 | function logout() {
16 | window.spotifyClient.logOut()
17 | window.location.reload()
18 | }
19 |
20 | return (
21 | Results
10 |
11 |
36 |
12 |
19 |
13 |
18 | raw wpm
14 |
15 |
20 |
27 |
21 |
26 | wpm
22 |
23 |
28 |
35 |
29 |
34 | acc
30 |
31 |
11 | 
12 | No Premium
13 |
14 |
17 |
18 |
41 |
19 |
40 |
20 |
22 | Premium not found
21 |23 | Music player requires a premium account to play music. 24 |
25 | 39 |
60 | Includes Numpad:
61 | {soundPack.includes_numpad ? (
62 |
18 |
19 | {({ mainColor, bgColor, textColor, name: themeName }) => {
20 | const displayColors = [mainColor, bgColor, textColor]
21 | const isActive = themeName === theme
22 |
23 | return (
24 | {
32 | AppStore.set({ theme: themeName })
33 | }}
34 | >
35 |
36 | {formatThemeName(themeName)}
37 |
51 |
58 | )
59 | }}
60 |
61 |
62 | )
63 | }
64 |
--------------------------------------------------------------------------------
/src/components/ui/slider.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import * as SliderPrimitive from '@radix-ui/react-slider'
3 |
4 | import { cn } from '@/utils/class-names.utils'
5 |
6 | const Slider = React.forwardRef<
7 | React.ElementRef
38 |
39 | {(col, i) => (
40 |
47 | )}
48 |
49 |
50 | e.stopPropagation()}
51 | className='group relative flex w-fit flex-col items-start rounded-md pr-2'
52 | >
53 | {!!label && (
54 |
84 | )
85 | }
86 |
--------------------------------------------------------------------------------
/src/components/settings/caret-tab/caret-tab.tsx:
--------------------------------------------------------------------------------
1 | import { AppStore } from '@/state/app-store'
2 | import { Setting } from '../setting'
3 | import { RadioCard, RadioCardContent } from '@/components/ui/radio-card'
4 | import {
5 | DEFAULT_CARET_SMOOTHNESS,
6 | DEFAULT_CARET_STYLE,
7 | CaretSmoothness,
8 | CaretStyle,
9 | } from '@/config/caret.config'
10 | import { For } from '@/components/map'
11 |
12 | export const CaretTab = () => {
13 | const { caretStyle, caretSmoothness } = AppStore.useStore(
14 | 'caretStyle',
15 | 'caretSmoothness',
16 | )
17 | return (
18 | 55 | {label} 56 |
57 | )} 58 |
59 |
68 |
69 | > 0}
71 | onWheelCapture={updateVolumeOnWheelEvent}
72 | className='w-24 cursor-pointer py-4'
73 | trackClassName='bg-background h-1 transition-all'
74 | thumbClassName='scale-0 transition-all h-4 w-4 group-hover:scale-100 origin-left'
75 | onValueChange={handleChange}
76 | onValueCommit={(newVol) => onChangeCommit?.(newVol[0])}
77 | max={1}
78 | value={[volume]}
79 | defaultValue={[0]}
80 | step={0.01}
81 | />
82 |
83 |
19 | AppStore.set({ caretStyle: DEFAULT_CARET_STYLE })}
22 | >
23 |
43 |
46 | AppStore.set({ caretSmoothness: DEFAULT_CARET_SMOOTHNESS })
47 | }
48 | >
49 |
65 |
66 | )
67 | }
68 |
69 | const caretStyleVariants = {
70 | [CaretStyle.Line]: 'w-0.5 h-4 bg-caret',
71 | [CaretStyle.Underline]: 'w-3 h-0.5 bg-caret',
72 | [CaretStyle.Block]: 'w-3 h-4 bg-caret',
73 | [CaretStyle.Box]: 'w-3 h-4 border border-caret',
74 | }
75 |
76 | const CaretStyleVisualizer = (props: { variant: CaretStyle }) => (
77 |
78 | )
79 |
--------------------------------------------------------------------------------
/src/react-query/queries/spotify.query.ts:
--------------------------------------------------------------------------------
1 | import {
2 | useInfiniteQuery,
3 | useQuery,
4 | UseQueryOptions,
5 | } from '@tanstack/react-query'
6 | import { QK } from '@/config/react-query.config'
7 | import { PlaylistedTrack, Track, User } from '@spotify/web-api-ts-sdk'
8 |
9 | // PLAYLIST ////////////////////////////////////////////////////
10 | export const usePlaylist = (playlistId: string) => {
11 | return useQuery({
12 | queryKey: [QK.SPOTIFY.ROOT, QK.SPOTIFY.PLAYLIST, playlistId],
13 | queryFn: () => window.spotifyClient.playlists.getPlaylist(playlistId),
14 | staleTime: 60 * 60 * 1000,
15 | refetchOnWindowFocus: true,
16 | retry: true,
17 | })
18 | }
19 |
20 | // MY PLAYLISTS ////////////////////////////////////////////////////
21 | export const useMyPlaylists = () => {
22 | return useQuery({
23 | queryKey: [
24 | QK.SPOTIFY.ROOT,
25 | QK.SPOTIFY.CURRENT_USER.ROOT,
26 | QK.SPOTIFY.CURRENT_USER.PLAYLIST,
27 | ],
28 | queryFn: () => window.spotifyClient.currentUser.playlists.playlists(50),
29 | refetchOnWindowFocus: false,
30 | refetchInterval: false,
31 | staleTime: 60 * 60 * 1000,
32 | retry: true,
33 | })
34 | }
35 |
36 | // SPOTIFY USER ////////////////////////////////////////////////////
37 | type UserQueryProps = UseQueryOptions
24 |
25 | {(style) => {
26 | return (
27 | AppStore.set({ caretStyle: style })}
31 | className='flex aspect-square h-9 w-7 items-center justify-center'
32 | tooltipContent={style}
33 | >
34 |
35 |
37 |
38 | )
39 | }}
40 |
41 |
42 |
50 |
51 | {(key) => {
52 | return (
53 | AppStore.set({ caretSmoothness: key })}
57 | >
58 | {key}
59 |
60 | )
61 | }}
62 |
63 |
64 |