From b2fe1b816044b8630f570c04c884c8ffcf3e3e61 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Sat, 11 Jan 2020 17:56:38 +0300 Subject: Improve names, getPageComponent() --> Remove 'Page' word from page-components, since they are all now located in the pages/ folder. --- src/pages/Timer/Timer.js | 76 ++++++++++++++++++ src/pages/Timer/TimerButton/TimerButton.js | 119 +++++++++++++++++++++++++++++ 2 files changed, 195 insertions(+) create mode 100644 src/pages/Timer/Timer.js create mode 100644 src/pages/Timer/TimerButton/TimerButton.js (limited to 'src/pages/Timer') diff --git a/src/pages/Timer/Timer.js b/src/pages/Timer/Timer.js new file mode 100644 index 0000000..4b5925f --- /dev/null +++ b/src/pages/Timer/Timer.js @@ -0,0 +1,76 @@ +import React from 'react'; + +import { post } from '../../requests'; + +import Window from "../../components/Window/Window"; +import ContentSection from "../../components/ContentSection/ContentSection"; +import TimerButton from "./TimerButton/TimerButton"; +import SmartList from "../../components/SmartList/SmartList"; +import SolutionCard from "../../components/SolutionCard/SolutionCard"; + +import { Typography, makeStyles } from "@material-ui/core"; + + +const useStyles = makeStyles(theme => ({ + primary: { + padding: theme.spacing(4), + }, + cell: { + padding: theme.spacing(5), + }, +})); + +const Timer = ({ recentSolutions, setRecentSolutions }) => { + const classes = useStyles(); + + const user = { + id: null, + username: 'anonymous', + }; + + const registerResult = result => { + const solution = { author_id: user.id, result }; + post('solutions/', solution).then(response => { + setRecentSolutions([response.data].concat(recentSolutions)); + }); + }; + + const removeSolution = (id) => { + setRecentSolutions(recentSolutions.filter((solution => solution.id !== id))); + }; + + const renderItem = ({ index, style }) => { + const solution = recentSolutions[index]; + return ( +
+ +
+ ); + }; + + return ( + <> + +
+ + + Here is some text about how cool this application is, why you should use it + and how to make it better! + + + +
+ + + + + + ); +}; + + +export default Timer; diff --git a/src/pages/Timer/TimerButton/TimerButton.js b/src/pages/Timer/TimerButton/TimerButton.js new file mode 100644 index 0000000..56d3084 --- /dev/null +++ b/src/pages/Timer/TimerButton/TimerButton.js @@ -0,0 +1,119 @@ +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.primary.main, + marginTop: theme.spacing(20), + }, +})); + +const TimerButton = ({ registerResult }) => { + const classes = useStyles(); + + const SPACE = 32; + const maxCountdown = 15000; + const [time, setTime] = useState('00:00:00'); + const [mode, setMode] = useState('idle'); + const [repeater, setRepeater] = useState(0); + + useEffect(()=> { + clearInterval(repeater); + const timestamp = Date.now(); + + if (mode === 'countdown') setRepeater(setInterval(() => { + const timeDelta = maxCountdown - (Date.now() - timestamp); + if (timeDelta <= 0) setMode('over'); + setTime(convertTimeToString(timeDelta)); + }, 10)); + + if (mode === 'running') setRepeater(setInterval(() => { + setTime(convertTimeToString(Date.now() - timestamp)); + }, 10)); + + if (mode === 'over') { + setTime('00:00:00'); + } + }, [mode]); + + const handleKeyPress = event => { + event.preventDefault(); + if (event.keyCode === SPACE && mode === 'idle' ) setMode('countdown'); + }; + + const handleKeyUp = event => { + clearInterval(repeater); + 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 () => { + window.removeEventListener('keyup', handleKeyUp); + window.removeEventListener('keypress', handleKeyPress); + }; + }); + + const composeHelperText = () => { + switch (mode) { + case 'running': return '_'; + case 'countdown': return 'Release SPACE to begin'; + case 'over': return 'You are too late!'; + default: return 'Hold SPACE to start countdown'; + } + }; + + const helperColor = () => { + switch (mode) { + case 'running': return 'primary'; + case 'over': return 'secondary'; + default: return 'textSecondary'; + } + }; + + return ( + + {time} + + {composeHelperText()} + + + ); +}; + +const convertTimeToString = timeDelta => { + let resultTime = ''; + + const minute = Math.floor(timeDelta / 60000); + if (minute < 10) resultTime += '0'; + resultTime += minute + ':'; + + let second = Math.floor(timeDelta / 1000); + if (second < 10) resultTime += '0'; + if (second > 59) second %= 60; + resultTime += second + ':'; + + const mill = Math.floor((timeDelta % 1000) / 10); + if (mill < 10) resultTime += '0'; + resultTime += mill; + + return resultTime; +}; + + +export default TimerButton; -- cgit v1.2.3 From 02ddc8f3ed6858521480a3c3928f50ff40f34501 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Sat, 11 Jan 2020 20:04:34 +0300 Subject: Edit description on Timer page, add 'Lean More' --- src/pages/Timer/Timer.js | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) (limited to 'src/pages/Timer') diff --git a/src/pages/Timer/Timer.js b/src/pages/Timer/Timer.js index 4b5925f..66e1b8f 100644 --- a/src/pages/Timer/Timer.js +++ b/src/pages/Timer/Timer.js @@ -8,7 +8,7 @@ import TimerButton from "./TimerButton/TimerButton"; import SmartList from "../../components/SmartList/SmartList"; import SolutionCard from "../../components/SolutionCard/SolutionCard"; -import { Typography, makeStyles } from "@material-ui/core"; +import { Typography, Button, makeStyles } from "@material-ui/core"; const useStyles = makeStyles(theme => ({ @@ -20,7 +20,7 @@ const useStyles = makeStyles(theme => ({ }, })); -const Timer = ({ recentSolutions, setRecentSolutions }) => { +const Timer = ({ recentSolutions, setRecentSolutions, setPage }) => { const classes = useStyles(); const user = { @@ -35,6 +35,10 @@ const Timer = ({ recentSolutions, setRecentSolutions }) => { }); }; + const handleLearnMore = () => { + setPage('contribute'); + }; + const removeSolution = (id) => { setRecentSolutions(recentSolutions.filter((solution => solution.id !== id))); }; @@ -54,8 +58,14 @@ const Timer = ({ recentSolutions, setRecentSolutions }) => {
- Here is some text about how cool this application is, why you should use it - and how to make it better! +

+ 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! +

+ -- cgit v1.2.3 From 106d489a53e9069a74ed6b90984c15cc48a8823f Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Sun, 12 Jan 2020 03:47:59 +0300 Subject: Perform cleanup, resolve warnings --- src/pages/Timer/Timer.js | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) (limited to 'src/pages/Timer') diff --git a/src/pages/Timer/Timer.js b/src/pages/Timer/Timer.js index 66e1b8f..d63c661 100644 --- a/src/pages/Timer/Timer.js +++ b/src/pages/Timer/Timer.js @@ -57,16 +57,14 @@ const Timer = ({ recentSolutions, setRecentSolutions, setPage }) => {
- -

- 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! -

- - +

+ 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! +

+
-- cgit v1.2.3