From 142ef97911abaec96c5bc0779b322374437a56b5 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Wed, 8 Jan 2020 22:04:49 +0300 Subject: Wrap SmartList into AutoSizer This component now takes all available space, so if you want to use it, you have to put it into a container which already has non-zero width and height. This commit temporarily breaks Scoreboard page. --- src/components/SmartList/SmartList.js | 37 ++++++++++++++++++----------------- 1 file changed, 19 insertions(+), 18 deletions(-) (limited to 'src/components') diff --git a/src/components/SmartList/SmartList.js b/src/components/SmartList/SmartList.js index 6cd774b..975cbbd 100644 --- a/src/components/SmartList/SmartList.js +++ b/src/components/SmartList/SmartList.js @@ -1,8 +1,9 @@ import React from 'react'; -import { FixedSizeList } from "react-window"; +import { FixedSizeList } from 'react-window'; +import AutoSizer from 'react-virtualized-auto-sizer'; -import { makeStyles } from "@material-ui/core"; +import { makeStyles } from '@material-ui/core'; const useStyles = makeStyles(theme => ({ @@ -12,25 +13,25 @@ const useStyles = makeStyles(theme => ({ })); -const SmartList = ({ height, width, cellHeight, itemCount, renderItem }) => { +const SmartList = ({ itemSize, itemCount, renderItem }) => { const classes = useStyles(); - if (!height) { - const windowHeight = window.innerHeight; - const headerHeight = document.getElementsByClassName("MuiAppBar-root")[0].clientHeight; - height = windowHeight - headerHeight - } - return ( - - {renderItem} - +
+ + {({ width, height }) => ( + + {renderItem} + + )} + +
); }; -- cgit v1.2.3 From 90f3eaa26b31d5f966bc3b8ece016b783f00ae2b Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Thu, 9 Jan 2020 09:33:37 +0300 Subject: Implement Window component Divide Window into three types: - primary: larger left window - secondary: smaller right window - mono: both primary and secondary merged together For now, Window sizes are hard-coded values in viewport widht and height measurements. If a name prop specified, Window is displayed with a top bar. --- src/components/Window/Window.js | 55 ++++++++++++++++++++++ .../Window/WindowSurface/WindowSurface.js | 31 ++++++++++++ 2 files changed, 86 insertions(+) create mode 100644 src/components/Window/Window.js create mode 100644 src/components/Window/WindowSurface/WindowSurface.js (limited to 'src/components') diff --git a/src/components/Window/Window.js b/src/components/Window/Window.js new file mode 100644 index 0000000..63bd6ba --- /dev/null +++ b/src/components/Window/Window.js @@ -0,0 +1,55 @@ +import React from 'react'; + +import { Typography, Divider, makeStyles } from "@material-ui/core"; + +import WindowSurface from "./WindowSurface/WindowSurface"; + + +const useStyles = makeStyles(theme => ({ + header: { + padding: theme.spacing(1, 0, 1, 2), + background: theme.palette.background.elevation, + }, +})); + + +const Window = ({ type, name, children }) => { + const classes = useStyles(); + + const size = { + height: '85vh', + }; + + const position = { + bottom: '3vh', + }; + + if (type === 'primary') { + size.width = '63vw'; + position.left = '2vw'; + } else if (type === 'secondary') { + size.width = '31vw'; + position.right = '2vw'; + } else if (type === 'mono') { + position.left = '2vw'; + position.right = '2vw'; + } + + return ( + + {name && +
+ {name} + +
+ } + {children} + + ); +}; + + +export default Window; diff --git a/src/components/Window/WindowSurface/WindowSurface.js b/src/components/Window/WindowSurface/WindowSurface.js new file mode 100644 index 0000000..d1d1510 --- /dev/null +++ b/src/components/Window/WindowSurface/WindowSurface.js @@ -0,0 +1,31 @@ +import React from 'react'; + +import { Paper, makeStyles } from "@material-ui/core"; + + +const useStyles = makeStyles(theme => ({ + surface: { + position: 'absolute', + display: 'flex', + flexDirection: 'column', + background: theme.palette.background.elevation, + } +})); + + +const WindowSurface = ({ size, position, children }) => { + const classes = useStyles(); + + return ( + + {children} + + ) +}; + + +export default WindowSurface; \ No newline at end of file -- cgit v1.2.3 From a0e1ef72d0a3f927395c74f3a310d19623b77b2c Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Thu, 9 Jan 2020 09:42:20 +0300 Subject: Use Window to markup Scoreboard page --- src/components/Scoreboard/Scoreboard.js | 26 +++++++++++++++----------- 1 file changed, 15 insertions(+), 11 deletions(-) (limited to 'src/components') diff --git a/src/components/Scoreboard/Scoreboard.js b/src/components/Scoreboard/Scoreboard.js index a101a5b..2d9bb80 100644 --- a/src/components/Scoreboard/Scoreboard.js +++ b/src/components/Scoreboard/Scoreboard.js @@ -7,6 +7,7 @@ import { get } from "../../requests"; import SmartList from "../SmartList/SmartList"; import SolutionCard from "../SolutionCard/SolutionCard"; import Loading from "../Loading/Loading"; +import Window from "../Window/Window"; const useStyles = makeStyles(theme => ({ @@ -49,17 +50,20 @@ const Scoreboard = () => { ) }; - - return (solutions.length === 0) ? -
- -
- : - + return ( + + { solutions.length === 0 && +
+ +
+ } + + + ) }; -- cgit v1.2.3 From ae8b491480617e9f2fd8cc8a74f81200a9a42424 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Thu, 9 Jan 2020 10:53:26 +0300 Subject: Implement ContentSection component --- src/components/ContentSection/ContentSection.js | 32 +++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 src/components/ContentSection/ContentSection.js (limited to 'src/components') diff --git a/src/components/ContentSection/ContentSection.js b/src/components/ContentSection/ContentSection.js new file mode 100644 index 0000000..d5b9340 --- /dev/null +++ b/src/components/ContentSection/ContentSection.js @@ -0,0 +1,32 @@ +import React from 'react'; + +import { + Typography, + Divider, + makeStyles +} from "@material-ui/core"; + + +const useStyles = makeStyles(theme => ({ + content: { + padding: theme.spacing(2), + } +})); + +const ContentSection = ({ sectionName, children }) => { + const classes = useStyles(); + + return ( + <> + {sectionName} + +
+ {children} +
+ + ); + +}; + + +export default ContentSection; -- cgit v1.2.3 From ecc6b5e6a2974502ed94cc33a70f388575bfa9ec Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Thu, 9 Jan 2020 10:57:59 +0300 Subject: Refactor TimerPage to use new components --- src/components/Timer/Timer.js | 119 -------------------------------- src/components/TimerPage/Timer/Timer.js | 119 ++++++++++++++++++++++++++++++++ src/components/TimerPage/TimerPage.js | 62 +++++++++++------ 3 files changed, 159 insertions(+), 141 deletions(-) delete mode 100644 src/components/Timer/Timer.js create mode 100644 src/components/TimerPage/Timer/Timer.js (limited to 'src/components') diff --git a/src/components/Timer/Timer.js b/src/components/Timer/Timer.js deleted file mode 100644 index 99356a5..0000000 --- a/src/components/Timer/Timer.js +++ /dev/null @@ -1,119 +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.primary.main, - marginTop: theme.spacing(25), - }, -})); - -const Timer = ({ 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 Timer; diff --git a/src/components/TimerPage/Timer/Timer.js b/src/components/TimerPage/Timer/Timer.js new file mode 100644 index 0000000..92b153d --- /dev/null +++ b/src/components/TimerPage/Timer/Timer.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 Timer = ({ 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 Timer; diff --git a/src/components/TimerPage/TimerPage.js b/src/components/TimerPage/TimerPage.js index f304b46..22781bc 100644 --- a/src/components/TimerPage/TimerPage.js +++ b/src/components/TimerPage/TimerPage.js @@ -1,19 +1,22 @@ import React from 'react'; -import { Grid, Box } from "@material-ui/core"; -import { makeStyles } from "@material-ui/core/styles"; +import { post } from '../../requests'; -import Timer from "../Timer/Timer"; +import Window from "../Window/Window"; +import ContentSection from "../ContentSection/ContentSection"; +import Timer from "./Timer/Timer"; +import SmartList from "../SmartList/SmartList"; import SolutionCard from "../SolutionCard/SolutionCard"; -import { post } from '../../requests'; +import { Typography, makeStyles } from "@material-ui/core"; const useStyles = makeStyles(theme => ({ - root: { - display: 'flex', - justifyContent: 'space-between', - padding: theme.spacing(5, 4, 4, 4), + primary: { + padding: theme.spacing(4), + }, + cell: { + padding: theme.spacing(5), }, })); @@ -36,21 +39,36 @@ const TimerPage = ({ recentSolutions, setRecentSolutions }) => { setRecentSolutions(recentSolutions.filter((solution => solution.id !== id))); }; + const renderItem = ({ index, style }) => { + const solution = recentSolutions[index]; + return ( +
+ +
+ ); + }; + return ( - - - - - - - {recentSolutions.slice(0, 3).map(solution => ( - - - - ))} - - - + <> + +
+ + + Here is some text about how cool this application is, why you should use it + and how to make it better! + + + +
+ + + + + ); }; -- cgit v1.2.3