aboutsummaryrefslogtreecommitdiff
path: root/src/pages/Timer
diff options
context:
space:
mode:
authoreug-vs <eugene@eug-vs.xyz>2022-05-04 12:52:25 +0300
committereug-vs <eugene@eug-vs.xyz>2022-05-04 12:52:25 +0300
commitf35c1cf5480f7506442ac4c9170c5e0a1a4a8b15 (patch)
tree94fa0fa38e8a90df08933c05910bea6bed461291 /src/pages/Timer
parent8dc803f882f31430abb600fba250fdcf3334d9bf (diff)
downloadchrono-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.tsx102
-rw-r--r--src/pages/Timer/TimerButton.tsx130
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;