aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/ContentSection/ContentSection.js18
-rw-r--r--src/components/Scoreboard/Scoreboard.js68
-rw-r--r--src/components/SmartList/SmartList.js11
-rw-r--r--src/components/TimerPage/Timer/Timer.js119
-rw-r--r--src/components/TimerPage/TimerPage.js76
-rw-r--r--src/components/Window/WindowSurface/WindowSurface.js2
6 files changed, 16 insertions, 278 deletions
diff --git a/src/components/ContentSection/ContentSection.js b/src/components/ContentSection/ContentSection.js
index d5b9340..99e76aa 100644
--- a/src/components/ContentSection/ContentSection.js
+++ b/src/components/ContentSection/ContentSection.js
@@ -9,8 +9,18 @@ import {
const useStyles = makeStyles(theme => ({
content: {
- padding: theme.spacing(2),
- }
+ padding: theme.spacing(0, 2, 1, 2),
+ marginBottom: theme.spacing(1),
+
+ '& a': {
+ color: theme.palette.secondary.light,
+ },
+ '& .MuiButton-root': {
+ color: theme.palette.background.paper,
+ margin: theme.spacing(1, 2, 2, 0),
+ fontWeight: 'bold',
+ },
+ },
}));
const ContentSection = ({ sectionName, children }) => {
@@ -20,9 +30,9 @@ const ContentSection = ({ sectionName, children }) => {
<>
<Typography variant="h4">{sectionName}</Typography>
<Divider variant="middle"/>
- <div className={classes.content}>
+ <Typography component="div" className={classes.content}>
{children}
- </div>
+ </Typography>
</>
);
diff --git a/src/components/Scoreboard/Scoreboard.js b/src/components/Scoreboard/Scoreboard.js
deleted file mode 100644
index 5c83735..0000000
--- a/src/components/Scoreboard/Scoreboard.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-import { makeStyles } from "@material-ui/core/styles";
-
-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 => ({
- cell: {
- display: 'flex',
- justifyContent: 'center',
- padding: theme.spacing(4),
-
- '& .MuiCard-root': {
- width: '30%',
- }
- }
-}));
-
-const Scoreboard = () => {
- const classes = useStyles();
- const [solutions, setSolutions] = useState([]);
-
- const updateSolutions = () => {
- get('scoreboard/').then(response => {
- setSolutions(response.data);
- });
- };
-
- const removeSolution = id => {
- updateSolutions();
- };
-
- useEffect(() => {
- setTimeout(updateSolutions, 300);
- }, []);
-
- const renderItem = ({ index, style }) => {
- return (
- <div style={style} className={classes.cell}>
- <SolutionCard data={solutions[index]} removeThisCard={removeSolution}/>
- </div>
- )
- };
-
- return (
- <Window type="mono">
- { solutions.length === 0 &&
- <div className={classes.cell}>
- <Loading/>
- </div>
- }
- <SmartList
- itemSize={300}
- itemCount={solutions.length}
- renderItem={renderItem}
- />
- </Window>
- )
-};
-
-
-export default Scoreboard;
diff --git a/src/components/SmartList/SmartList.js b/src/components/SmartList/SmartList.js
index 975cbbd..68235a2 100644
--- a/src/components/SmartList/SmartList.js
+++ b/src/components/SmartList/SmartList.js
@@ -3,18 +3,8 @@ import React from 'react';
import { FixedSizeList } from 'react-window';
import AutoSizer from 'react-virtualized-auto-sizer';
-import { makeStyles } from '@material-ui/core';
-
-
-const useStyles = makeStyles(theme => ({
- root: {
- scrollbarColor: `${theme.palette.primary.dark} ${theme.palette.primary.light}`,
- }
-}));
-
const SmartList = ({ itemSize, itemCount, renderItem }) => {
- const classes = useStyles();
return (
<div style={{ flex: '1 1 auto'}}>
@@ -25,7 +15,6 @@ const SmartList = ({ itemSize, itemCount, renderItem }) => {
width={width}
itemSize={itemSize}
itemCount={itemCount}
- className={classes.root}
>
{renderItem}
</FixedSizeList>
diff --git a/src/components/TimerPage/Timer/Timer.js b/src/components/TimerPage/Timer/Timer.js
deleted file mode 100644
index 92b153d..0000000
--- a/src/components/TimerPage/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(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 (
- <Paper elevation={3} className={classes.root}>
- <Typography variant="h1"> {time} </Typography>
- <Typography variant="h5" color={helperColor()}>
- {composeHelperText()}
- </Typography>
- </Paper>
- );
-};
-
-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
deleted file mode 100644
index 22781bc..0000000
--- a/src/components/TimerPage/TimerPage.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from 'react';
-
-import { post } from '../../requests';
-
-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 { Typography, makeStyles } from "@material-ui/core";
-
-
-const useStyles = makeStyles(theme => ({
- primary: {
- padding: theme.spacing(4),
- },
- cell: {
- padding: theme.spacing(5),
- },
-}));
-
-const TimerPage = ({ 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 (
- <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!">
- <Typography>
- Here is some text about how cool this application is, why you should use it
- and how to make it better!
- </Typography>
- </ContentSection>
- <Timer registerResult={registerResult} />
- </div>
- </Window>
- <Window type="secondary" name="Recent solutions">
- <SmartList
- itemSize={270}
- itemCount={recentSolutions.length}
- renderItem={renderItem}
- />
- </Window>
- </>
- );
-};
-
-
-export default TimerPage;
diff --git a/src/components/Window/WindowSurface/WindowSurface.js b/src/components/Window/WindowSurface/WindowSurface.js
index d1d1510..c4e6b3d 100644
--- a/src/components/Window/WindowSurface/WindowSurface.js
+++ b/src/components/Window/WindowSurface/WindowSurface.js
@@ -9,6 +9,8 @@ const useStyles = makeStyles(theme => ({
display: 'flex',
flexDirection: 'column',
background: theme.palette.background.elevation,
+ overflowY: 'auto',
+ scrollbarColor: `${theme.palette.primary.dark} ${theme.palette.primary.light}`,
}
}));
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-23 18:51:32 +0000