aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/ContentSection/ContentSection.js32
-rw-r--r--src/components/Scoreboard/Scoreboard.js58
-rw-r--r--src/components/SmartList/SmartList.js39
-rw-r--r--src/components/TimerPage/Timer/Timer.js (renamed from src/components/Timer/Timer.js)2
-rw-r--r--src/components/TimerPage/TimerPage.js62
-rw-r--r--src/components/Window/Window.js55
-rw-r--r--src/components/Window/WindowSurface/WindowSurface.js31
-rw-r--r--src/index.js2
-rw-r--r--src/theme.js1
9 files changed, 234 insertions, 48 deletions
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 (
+ <>
+ <Typography variant="h4">{sectionName}</Typography>
+ <Divider variant="middle"/>
+ <div className={classes.content}>
+ {children}
+ </div>
+ </>
+ );
+
+};
+
+
+export default ContentSection;
diff --git a/src/components/Scoreboard/Scoreboard.js b/src/components/Scoreboard/Scoreboard.js
index f231f55..5c83735 100644
--- a/src/components/Scoreboard/Scoreboard.js
+++ b/src/components/Scoreboard/Scoreboard.js
@@ -1,23 +1,25 @@
import React, { useEffect, useState } from 'react';
-import {
- Container,
- Typography,
- Grid,
-} from "@material-ui/core";
-
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 => ({
- pageHeader: {
- textAlign: 'center',
- margin: theme.spacing(2),
- },
+ cell: {
+ display: 'flex',
+ justifyContent: 'center',
+ padding: theme.spacing(4),
+
+ '& .MuiCard-root': {
+ width: '30%',
+ }
+ }
}));
const Scoreboard = () => {
@@ -38,21 +40,29 @@ const Scoreboard = () => {
setTimeout(updateSolutions, 300);
}, []);
+ const renderItem = ({ index, style }) => {
+ return (
+ <div style={style} className={classes.cell}>
+ <SolutionCard data={solutions[index]} removeThisCard={removeSolution}/>
+ </div>
+ )
+ };
+
return (
- <Container maxWidth="xs">
- <Typography variant="h3" className={classes.pageHeader}>
- Scoreboard
- </Typography>
- {(solutions.length === 0) && <Loading />}
- <Grid container justify="center" direction="column" spacing={3}>
- {solutions.slice(0, 30).map(solution => (
- <Grid item key={solution.id}>
- <SolutionCard data={solution} removeThisCard={removeSolution}/>
- </Grid>
- ))}
- </Grid>
- </Container>
- );
+ <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
new file mode 100644
index 0000000..975cbbd
--- /dev/null
+++ b/src/components/SmartList/SmartList.js
@@ -0,0 +1,39 @@
+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'}}>
+ <AutoSizer>
+ {({ width, height }) => (
+ <FixedSizeList
+ height={height}
+ width={width}
+ itemSize={itemSize}
+ itemCount={itemCount}
+ className={classes.root}
+ >
+ {renderItem}
+ </FixedSizeList>
+ )}
+ </AutoSizer>
+ </div>
+ );
+};
+
+
+export default SmartList;
diff --git a/src/components/Timer/Timer.js b/src/components/TimerPage/Timer/Timer.js
index 99356a5..92b153d 100644
--- a/src/components/Timer/Timer.js
+++ b/src/components/TimerPage/Timer/Timer.js
@@ -8,7 +8,7 @@ const useStyles = makeStyles(theme => ({
textAlign: 'center',
padding: theme.spacing(5),
background: theme.palette.primary.main,
- marginTop: theme.spacing(25),
+ marginTop: theme.spacing(20),
},
}));
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 (
+ <div style={style} className={classes.cell}>
+ <SolutionCard data={solution} removeThisCard={removeSolution} />
+ </div>
+ );
+ };
+
return (
- <Box className={classes.root}>
- <Grid container direction="row" justify="space-around" spacing={8}>
- <Grid item xs={6}>
- <Timer registerResult={registerResult} style={{ position: 'fixed' }}/>
- </Grid>
- <Grid item xs={4} container direction="column" spacing={5}>
- {recentSolutions.slice(0, 3).map(solution => (
- <Grid item key={solution.id}>
- <SolutionCard data={solution} removeThisCard={removeSolution}/>
- </Grid>
- ))}
- </Grid>
- </Grid>
- </Box>
+ <>
+ <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>
+ </>
);
};
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 (
+ <WindowSurface
+ size={size}
+ position={position}
+ >
+ {name &&
+ <div>
+ <Typography variant="h5" className={classes.header}>{name}</Typography>
+ <Divider />
+ </div>
+ }
+ {children}
+ </WindowSurface>
+ );
+};
+
+
+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 (
+ <Paper
+ elevation={3}
+ style={{...size, ...position}}
+ className={classes.surface}
+ >
+ {children}
+ </Paper>
+ )
+};
+
+
+export default WindowSurface; \ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 07c50bc..431e139 100644
--- a/src/index.js
+++ b/src/index.js
@@ -13,7 +13,6 @@ import Scoreboard from "./components/Scoreboard/Scoreboard";
const useStyles = makeStyles(theme => ({
root: {
- padding: theme.spacing(2),
},
}));
@@ -57,4 +56,5 @@ const App = () => {
);
};
+document.body.style.overflow = "hidden";
ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/src/theme.js b/src/theme.js
index 941c9cd..3c671e6 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -12,6 +12,7 @@ const theme = createMuiTheme({
background: {
default: '#232020',
paper: '#0f0e0e',
+ elevation: 'rgba(255, 255, 255, 0.04)',
},
text: {
primary: '#f4f4f4',
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-23 09:25:41 +0000