aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/Header/Header.js44
-rw-r--r--src/components/Scoreboard/Scoreboard.js9
-rw-r--r--src/components/Scoreboard/Solution.js76
-rw-r--r--src/components/Timer/Timer.js30
-rw-r--r--src/index.js41
-rw-r--r--src/theme.js40
6 files changed, 157 insertions, 83 deletions
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 9bfe5c4..1c4e77d 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -5,38 +5,38 @@ import {
Tab,
Typography
} from "@material-ui/core";
-import styled from 'styled-components';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles(theme => ({
+ header: {
+ backgroundColor: theme.palette.primary.dark,
+ },
+ logo: {
+ color: theme.palette.orange.main,
+ margin: theme.spacing(2, 3, 2, 2)
+ },
+}));
+
const Header = ({ setPage }) => {
+ const classes = useStyles();
const handleChange = (event, newPage) => {
setPage(newPage);
};
+ const menuItems = ['app', 'profile', 'scoreboard', 'news'];
+
return (
- <AppBar position="static">
- <TabsWrapper onChange={handleChange}>
- <Typography variant="h4" id="logo"> ChronoCube </Typography>
- <Tab label="App" value="app"/>
- <Tab label="Profile" value="profile"/>
- <Tab label="Scoreboard" value="scoreboard"/>
- <Tab label="News" value="news"/>
- </TabsWrapper>
+ <AppBar position="sticky" className={classes.header}>
+ <Tabs onChange={handleChange}>
+ <Typography variant="h4" className={classes.logo}> ChronoCube </Typography>
+ { menuItems.map(menuItem => (
+ <Tab label={menuItem} value={menuItem}/>
+ ))}
+ </Tabs>
</AppBar>
);
};
-const TabsWrapper = styled(Tabs)`
- border-bottom: 1px solid black;
- & .MuiTab-wrapper {
- padding: 10px;
- }
- & .MuiTypography-root {
- font-weight: bold;
- padding: 10px;
- margin-right: 50px;
- margin-left: 30px;
- }
-`;
-
export default Header;
diff --git a/src/components/Scoreboard/Scoreboard.js b/src/components/Scoreboard/Scoreboard.js
index 1ebca90..5545d19 100644
--- a/src/components/Scoreboard/Scoreboard.js
+++ b/src/components/Scoreboard/Scoreboard.js
@@ -1,5 +1,6 @@
import React, {useEffect, useState} from 'react';
+import { Container } from "@material-ui/core";
import { get } from "../../requests";
import Solution from "./Solution";
@@ -19,10 +20,10 @@ const Scoreboard = () => {
return (
- <div>
- { solutions.map(solution => <Solution solution={solution}/>) }
- </div>
+ <Container maxWidth="sm">
+ {solutions.map(solution => (<Solution solution={solution}/>))}
+ </Container>
);
};
-export default Scoreboard; \ No newline at end of file
+export default Scoreboard;
diff --git a/src/components/Scoreboard/Solution.js b/src/components/Scoreboard/Solution.js
index 3f46eb5..6f87723 100644
--- a/src/components/Scoreboard/Solution.js
+++ b/src/components/Scoreboard/Solution.js
@@ -1,32 +1,72 @@
import React from 'react';
import {
- Card,
- CardContent,
Typography,
- Paper,
+ Card,
+ Container,
+ Box,
+ ExpansionPanelSummary,
+ ExpansionPanel,
+ ExpansionPanelDetails,
} from "@material-ui/core";
-import styled from "styled-components";
+import { makeStyles } from "@material-ui/core/styles";
+import TimerIcon from '@material-ui/icons/Timer';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+
+
+const useStyles = makeStyles(theme => ({
+ item: {
+ backgroundColor: theme.palette.secondary.dark,
+ margin: theme.spacing(3),
+ width: theme.spacing(60),
+
+ '& .MuiBox-root': {
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+
+ '& .MuiTypography-h2': {
+ color: theme.palette.orange.main,
+ margin: theme.spacing(2),
+ },
+ },
+
+}));
const Solution = ({ solution }) => {
+ const classes = useStyles();
const author = solution.author? solution.author : 'anonymous';
return (
- <PaperWrapper elevation={2} style={{backgroundColor: "#ddbea3"}}>
- <Typography variant="h4" style={{fontWeight: "bold"}}>
- { solution.result }
- </Typography>
- <Typography>
- by {author}
- </Typography>
- </PaperWrapper>
+ <Card elevation={4} className={classes.item}>
+ <Container maxWidth="xs">
+ <Box>
+ <TimerIcon/>
+ <Typography variant="h2">
+ { solution.result }
+ </Typography>
+ </Box>
+ </Container>
+
+ <ExpansionPanel>
+ <ExpansionPanelSummary expandIcon={<ExpandMoreIcon style={{color: 'white'}}/>}>
+ <Typography variant="h6">
+ By {author}
+ </Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails>
+ <Typography>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
+ </Typography>
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+ </Card>
)
};
-const PaperWrapper = styled(Card)`
- padding: 10px;
- margin: 25px;
-`;
-
-export default Solution; \ No newline at end of file
+export default Solution;
diff --git a/src/components/Timer/Timer.js b/src/components/Timer/Timer.js
index 62924f0..f840429 100644
--- a/src/components/Timer/Timer.js
+++ b/src/components/Timer/Timer.js
@@ -1,18 +1,18 @@
import React, { useState, useEffect } from 'react';
-import styled from 'styled-components';
import { post } from '../../requests';
+import { Typography } from '@material-ui/core';
+
const Timer = () => {
const SPACE = 32;
const maxCountdown = 15000;
- const [time, setTime] = useState("00:15:00");
+ const [time, setTime] = useState('00:15:00');
const [isRunning, setIsRunning] = useState(false);
const [timer, setTimer] = useState(0);
const [isCountdown, setIsCountdown] = useState(false);
let startingTime;
-
const handleKeyPress = event => {
if (event.keyCode === SPACE && !isRunning ) {
if (!isCountdown) {
@@ -51,33 +51,24 @@ const Timer = () => {
};
useEffect(() => {
- window.addEventListener("keyup", handleKeyUp);
- window.addEventListener("keypress", handleKeyPress);
+ window.addEventListener('keyup', handleKeyUp);
+ window.addEventListener('keypress', handleKeyPress);
return () => {
- window.removeEventListener("keyup", handleKeyUp);
- window.removeEventListener("keypress", handleKeyPress);
-
+ window.removeEventListener('keyup', handleKeyUp);
+ window.removeEventListener('keypress', handleKeyPress);
};
});
return (
- <Root>
- <span>{time}</ span>
- </Root>
+ <Typography variant="h2"> {time} </Typography>
);
};
-const Root = styled.div`
- background-color: skyblue;
- padding: 8px;
- display: inline-block;
- font-size: 32px;
- color: pink;
-`;
+
const convertTimeToString = timeDiff => {
- let resultTime = "";
+ let resultTime = '';
const minute = Math.floor(timeDiff / 60000);
if (minute < 10) resultTime += '0';
@@ -96,3 +87,4 @@ const convertTimeToString = timeDiff => {
};
export default Timer;
+
diff --git a/src/index.js b/src/index.js
index 725d270..a397310 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,22 +3,30 @@ import ReactDOM from 'react-dom';
import {
Typography,
- Paper,
- Container,
+ Box,
} from "@material-ui/core";
+import CssBaseline from '@material-ui/core/CssBaseline';
+import { ThemeProvider, makeStyles } from '@material-ui/core/styles';
-import styled from 'styled-components';
-import CssBaseline from '@material-ui/core/CssBaseline'
-
+import theme from "./theme";
import Header from './components/Header/Header';
import Timer from './components/Timer/Timer';
import Scoreboard from "./components/Scoreboard/Scoreboard";
+const useStyles = makeStyles(theme => ({
+ root: {
+ padding: theme.spacing(2),
+ },
+}));
+
+
const App = () => {
const [page, setPage] = useState('app');
+ const classes = useStyles();
+
const getPageComponent = page => {
switch (page) {
case 'app':
@@ -36,22 +44,15 @@ const App = () => {
};
return (
- <Root>
+ <ThemeProvider theme={theme}>
<CssBaseline/>
- <Header setPage={setPage} />
- <Container maxWidth="xl">
- <Paper elevation={4} style={{backgroundColor: "bisque"}}>
- <Typography variant="h4"> This is the {page} page! </Typography>
- { getPageComponent(page) }
- </Paper>
- </Container>
- </Root>
-);
+ <Header setPage={setPage}/>
+ <Box className={classes.root}>
+ <Typography variant="h4"> This is the {page} page! </Typography>
+ { getPageComponent(page) }
+ </Box>
+ </ThemeProvider>
+ );
};
-const Root = styled.div`
- background: cornsilk;
- padding-bottom: 25px;
-`;
-
ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/src/theme.js b/src/theme.js
new file mode 100644
index 0000000..350fc49
--- /dev/null
+++ b/src/theme.js
@@ -0,0 +1,40 @@
+import { createMuiTheme } from '@material-ui/core/styles'
+import createPalette from "@material-ui/core/styles/createPalette";
+
+const colorScheme = {
+ dark: '#232020',
+ grey: '#3a3535',
+ white: '#f4f4f4',
+ orange: '#ff7315',
+};
+
+const palette = createPalette({
+ primary: {
+ main: colorScheme.dark,
+ },
+ secondary: {
+ main: colorScheme.grey,
+ },
+ white: {
+ main: colorScheme.white,
+ },
+ orange: {
+ main: colorScheme.orange,
+ },
+});
+
+palette.background = {
+ default: palette.secondary.main,
+ paper: palette.secondary.dark,
+};
+
+palette.text = {
+ primary: palette.white.main,
+ secondary: palette.orange.main,
+};
+
+const theme = createMuiTheme({
+ palette
+});
+
+export default theme;
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-23 22:32:42 +0000