aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/ContentSection/ContentSection.js32
-rw-r--r--src/components/Scoreboard/Scoreboard.js26
-rw-r--r--src/components/SmartList/SmartList.js37
-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
7 files changed, 193 insertions, 52 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 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) ?
- <div className={classes.cell}>
- <Loading/>
- </div>
- :
- <SmartList
- cellHeight={300}
- itemCount={solutions.length}
- renderItem={renderItem}
- />
+ return (
+ <Window type="mono">
+ { solutions.length === 0 &&
+ <div className={classes.cell}>
+ <Loading/>
+ </div>
+ }
+ <SmartList
+ itemSize={300}
+ itemCount={solutions.length}
+ renderItem={renderItem}
+ />
+ </Window>
+ )
};
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 (
- <FixedSizeList
- height={height}
- width={width}
- itemSize={cellHeight}
- itemCount={itemCount}
- className={classes.root}
- >
- {renderItem}
- </FixedSizeList>
+ <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>
);
};
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
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-23 21:29:59 +0000