diff options
author | eug-vs <eugene@eug-vs.xyz> | 2022-05-04 12:52:25 +0300 |
---|---|---|
committer | eug-vs <eugene@eug-vs.xyz> | 2022-05-04 12:52:25 +0300 |
commit | f35c1cf5480f7506442ac4c9170c5e0a1a4a8b15 (patch) | |
tree | 94fa0fa38e8a90df08933c05910bea6bed461291 /src/pages/Timer | |
parent | 8dc803f882f31430abb600fba250fdcf3334d9bf (diff) | |
download | chrono-cube-ui-f35c1cf5480f7506442ac4c9170c5e0a1a4a8b15.tar.gz |
feat: remove material UI and useless functionality
Diffstat (limited to 'src/pages/Timer')
-rw-r--r-- | src/pages/Timer/Timer.tsx | 102 | ||||
-rw-r--r-- | src/pages/Timer/TimerButton.tsx | 130 |
2 files changed, 0 insertions, 232 deletions
diff --git a/src/pages/Timer/Timer.tsx b/src/pages/Timer/Timer.tsx deleted file mode 100644 index a890815..0000000 --- a/src/pages/Timer/Timer.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import React from 'react'; - -import { post } from '../../requests'; - -import { - Window, - ContentSection, - SmartList, -} from 'react-benzin'; -import { User, Solution, RenderPropTypes } from '../../types'; - -import TimerButton from './TimerButton'; -import SolutionCard from '../../components/SolutionCard/SolutionCard'; - -import { Button, makeStyles } from '@material-ui/core'; - - -const useStyles = makeStyles(theme => ({ - primary: { - padding: theme.spacing(4), - }, - cell: { - padding: theme.spacing(5), - }, -})); - - -interface PropTypes { - user: User; - recentSolutions: Solution[]; - setRecentSolutions: (newRecentSolutions: Solution[]) => void; - setPage: (newPage: string) => void; -} - - -const Timer: React.FC<PropTypes> = ({ user, recentSolutions, setRecentSolutions, setPage }) => { - const classes = useStyles(); - - const registerResult = (result: string): void => { - const solution = { 'author_id': user.id, result }; - post('solutions/', solution).then(response => { - setRecentSolutions([response.data].concat(recentSolutions)); - }); - }; - - const handleLearnMore = (): void => { - setPage('contribute'); - }; - - const handleLogin = (): void => { - setPage('profile'); - }; - - const removeSolution = (id: number): void => { - setRecentSolutions(recentSolutions.filter((solution => solution.id !== id))); - }; - - const renderItem: React.FC<RenderPropTypes> = ({ index, style }) => { - const solution = recentSolutions[index]; - return ( - <div style={style} className={classes.cell}> - <SolutionCard data={solution} removeThisCard={removeSolution} /> - </div> - ); - }; - - return ( - <> - <Window type="primary"> - <div className={classes.primary}> - <ContentSection sectionName="Welcome to ChronoCube!"> - <p> - ChronoCube is a professional speedcubing timer. - Share your results publicly - let everyone see your progress and - achievements! - Every speedcuber will benefit - from using it - both amateur and professional! - </p> - <Button variant="contained" color="primary" onClick={handleLearnMore}> Learn more </Button> - </ContentSection> - {user.id === null && - <ContentSection sectionName="Log into an account"> - <p> Tell us your name so we can track your progress</p> - <Button variant="contained" color="primary" onClick={handleLogin} size="large"> Login </Button> - </ContentSection> - } - <TimerButton registerResult={registerResult} /> - </div> - </Window> - <Window type="secondary" name="Recent solutions"> - <SmartList - itemSize={270} - itemCount={recentSolutions.length} - renderItem={renderItem} - /> - </Window> - </> - ); -}; - - -export default Timer; diff --git a/src/pages/Timer/TimerButton.tsx b/src/pages/Timer/TimerButton.tsx deleted file mode 100644 index 0a3bf38..0000000 --- a/src/pages/Timer/TimerButton.tsx +++ /dev/null @@ -1,130 +0,0 @@ -import React, { useState, useEffect } from 'react'; - -import { Paper, Typography } from '@material-ui/core'; -import { makeStyles } from '@material-ui/core/styles'; - -const useStyles = makeStyles(theme => ({ - root: { - textAlign: 'center', - padding: theme.spacing(5), - background: theme.palette.background.elevation3, - marginTop: theme.spacing(10), - }, -})); - - -interface PropTypes { - registerResult: (result: string) => void; -} - -type Mode = 'idle' | 'countdown' | 'running' | 'over'; - - -const TimerButton: React.FC<PropTypes> = ({ registerResult }) => { - const classes = useStyles(); - - const SPACE = 32; - const maxCountdown = 15000; - const [time, setTime] = useState<string>('00:00:00'); - const [mode, setMode] = useState<Mode>('idle'); - - useEffect(()=> { - const timestamp = Date.now(); - - if (mode === 'countdown') { - const repeater = setInterval(() => { - const timeDelta = maxCountdown - (Date.now() - timestamp); - if (timeDelta <= 0) setMode('over'); - setTime(convertTimeToString(timeDelta)); - }, 10); - return (): void => clearInterval(repeater); - } - - if (mode === 'running') { - const repeater = setInterval(() => { - setTime(convertTimeToString(Date.now() - timestamp)); - }, 10); - return (): void => clearInterval(repeater); - } - - if (mode === 'over') { - setTime('00:00:00'); - } - }, [mode]); - - const handleKeyPress = (event: KeyboardEvent): void => { - event.preventDefault(); - if (event.keyCode === SPACE && mode === 'idle' ) setMode('countdown'); - }; - - const handleKeyUp = (event: KeyboardEvent): void => { - if (event.keyCode === SPACE) { - if (mode === 'running') { - registerResult(time); - setMode('idle'); - } else if (mode === 'over') { - setMode('idle'); - } else { - setMode('running'); - } - } - }; - - useEffect(() => { - window.addEventListener('keyup', handleKeyUp); - window.addEventListener('keypress', handleKeyPress); - - return (): void => { - window.removeEventListener('keyup', handleKeyUp); - window.removeEventListener('keypress', handleKeyPress); - }; - }); - - const composeHelperText = (): string => { - switch (mode) { - case 'running': return 'Go fast!'; - case 'countdown': return 'Release SPACE to begin'; - case 'over': return 'You are too late!'; - default: return 'Hold SPACE to start countdown'; - } - }; - - const helperColor = (): 'primary' | 'secondary' | 'textSecondary' => { - switch (mode) { - case 'running': return 'primary'; - case 'over': return 'secondary'; - default: return 'textSecondary'; - } - }; - - return ( - <Paper className={classes.root}> - <Typography variant="h1"> {time} </Typography> - <Typography variant="h5" color={helperColor()}> - {composeHelperText()} - </Typography> - </Paper> - ); -}; - -const convertTimeToString = (timeDelta: number): string => { - let resultTime = ''; - - const minute = Math.floor(timeDelta / 60000); - if (minute < 10) resultTime += '0'; - resultTime += minute + ':'; - - let second = Math.floor(timeDelta / 1000); - if (second > 59) second %= 60; - if (second < 10) resultTime += '0'; - resultTime += second + ':'; - - const mill = Math.floor((timeDelta % 1000) / 10); - if (mill < 10) resultTime += '0'; - resultTime += mill; - - return resultTime; -}; - - -export default TimerButton; |