aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package-lock.json5
-rw-r--r--package.json3
-rw-r--r--src/components/ContentSection/ContentSection.js18
-rw-r--r--src/components/SmartList/SmartList.js11
-rw-r--r--src/components/Window/WindowSurface/WindowSurface.js2
-rw-r--r--src/developers.json10
-rw-r--r--src/index.js33
-rw-r--r--src/pages/Contribute/Contribute.js158
-rw-r--r--src/pages/Scoreboard/Scoreboard.js (renamed from src/components/Scoreboard/Scoreboard.js)8
-rw-r--r--src/pages/Timer/Timer.js (renamed from src/components/TimerPage/TimerPage.js)34
-rw-r--r--src/pages/Timer/TimerButton/TimerButton.js (renamed from src/components/TimerPage/Timer/Timer.js)4
11 files changed, 233 insertions, 53 deletions
diff --git a/package-lock.json b/package-lock.json
index 294ec7c..8bbb92b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13205,6 +13205,11 @@
"resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
"integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
},
+ "typeface-roboto": {
+ "version": "0.0.75",
+ "resolved": "https://registry.npmjs.org/typeface-roboto/-/typeface-roboto-0.0.75.tgz",
+ "integrity": "sha512-VrR/IiH00Z1tFP4vDGfwZ1esNqTiDMchBEXYY9kilT6wRGgFoCAlgkEUMHb1E3mB0FsfZhv756IF0+R+SFPfdg=="
+ },
"uglify-js": {
"version": "3.4.10",
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",
diff --git a/package.json b/package.json
index df38254..de129ad 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,8 @@
"react-dom": "^16.12.0",
"react-scripts": "3.3.0",
"react-virtualized-auto-sizer": "^1.0.2",
- "react-window": "^1.8.5"
+ "react-window": "^1.8.5",
+ "typeface-roboto": "0.0.75"
},
"scripts": {
"start": "react-scripts start",
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/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/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}`,
}
}));
diff --git a/src/developers.json b/src/developers.json
new file mode 100644
index 0000000..f3e5357
--- /dev/null
+++ b/src/developers.json
@@ -0,0 +1,10 @@
+[
+ {
+ "username": "eug-vs",
+ "role": "Back-end, front-end, management"
+ },
+ {
+ "username": "asketonim",
+ "role": "Front-end, management"
+ }
+] \ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 431e139..0c3d415 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,20 +1,15 @@
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
-import { Box } from "@material-ui/core";
import CssBaseline from '@material-ui/core/CssBaseline';
-import { ThemeProvider, makeStyles } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/core/styles';
+import 'typeface-roboto';
import theme from "./theme";
import Header from './components/Header/Header';
-import TimerPage from "./components/TimerPage/TimerPage";
-import Scoreboard from "./components/Scoreboard/Scoreboard";
-
-
-const useStyles = makeStyles(theme => ({
- root: {
- },
-}));
+import Timer from "./pages/Timer/Timer";
+import Scoreboard from "./pages/Scoreboard/Scoreboard";
+import Contribute from "./pages/Contribute/Contribute";
const App = () => {
@@ -22,19 +17,23 @@ const App = () => {
const [page, setPage] = useState('app');
const [recentSolutions, setRecentSolutions] = useState([]);
- const classes = useStyles();
-
- const getPageComponent = page => {
+ const Page = ({ page }) => {
switch (page) {
case 'app':
return (
- <TimerPage
+ <Timer
recentSolutions={recentSolutions}
setRecentSolutions={setRecentSolutions}
+ setPage={setPage}
/>
);
+
case 'scoreboard':
- return (<Scoreboard/>);
+ return (<Scoreboard />);
+
+ case 'contribute':
+ return (<Contribute />);
+
default:
return (
<p>
@@ -49,9 +48,7 @@ const App = () => {
<ThemeProvider theme={theme}>
<CssBaseline/>
<Header page={page} setPage={setPage}/>
- <Box className={classes.root}>
- { getPageComponent(page) }
- </Box>
+ <Page page={page} />
</ThemeProvider>
);
};
diff --git a/src/pages/Contribute/Contribute.js b/src/pages/Contribute/Contribute.js
new file mode 100644
index 0000000..6837f59
--- /dev/null
+++ b/src/pages/Contribute/Contribute.js
@@ -0,0 +1,158 @@
+import React from 'react';
+
+import {
+ Typography,
+ Button,
+ List,
+ ListItem,
+ Link,
+ Avatar,
+ Divider,
+ makeStyles,
+} from "@material-ui/core";
+
+import TrendingUpIcon from '@material-ui/icons/TrendingUp';
+import BugReportIcon from '@material-ui/icons/BugReport';
+import NewReleasesIcon from '@material-ui/icons/NewReleases';
+
+import Window from "../../components/Window/Window";
+import ContentSection from "../../components/ContentSection/ContentSection";
+
+
+const useStyles = makeStyles(theme => ({
+ mono: {
+ padding: theme.spacing(4),
+
+ '& .MuiAvatar-root': {
+ marginRight: theme.spacing(2),
+ width: theme.spacing(6),
+ height: theme.spacing(6),
+ }
+ },
+}));
+
+
+const developers = require('../../developers.json');
+
+
+const Contribute = () => {
+ const classes = useStyles();
+
+ return (
+ <Window type="mono">
+ <div className={classes.mono}>
+ <ContentSection sectionName="Thank You for using ChronoCube!">
+ <p>
+ ChronoCube is an Open-Source application, and we welcome anyone who desires to help our project!
+ </p>
+ <Button
+ variant="contained"
+ color="secondary"
+ startIcon={<TrendingUpIcon />}
+ href="https://github.com/users/Eug-VS/projects/3"
+ >
+ Track our progress
+ </Button>
+ </ContentSection>
+ <ContentSection sectionName="Technology stack">
+ <p> We only use modern and most relevant technologies to achieve the best results! </p>
+ <ul>
+ <li><Link href="https://www.django-rest-framework.org/">
+ Django REST Framework
+ </Link></li>
+ <li><Link href="https://reactjs.org/">
+ React.js
+ </Link></li>
+ <li><Link href="https://material-ui.com/">
+ Material UI components
+ </Link></li>
+ </ul>
+ <p> Special thanks to other Open-Source projects which made ChronoCube possible: </p>
+ <ul>
+ <li><Link href="https://github.com/bvaughn/react-window">
+ react-window
+ </Link></li>
+ </ul>
+ </ContentSection>
+ <ContentSection sectionName="How can I contribute to the project?">
+ <p> Thank You for considering helping our project! </p>
+ <p>
+ All the development process is being tracked on
+ the <Link href="https://github.com/users/Eug-VS/projects/3">KanBan board</Link>.
+ You can always check it to see what is the current state of the project.
+ To contribute your code, fork our repository and then open
+ a <Link href="https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/about-pull-requests">
+ Pull Request</Link>. We will carefully review and, hopefully, accept it!
+ If you are unfamiliar with this kind of workflow, we recommend
+ reading <Link href="https://github.com/features/project-management/">GitHub guidelines</Link>.
+ </p>
+ <p>
+ We always welcome newcomers! If you are unfamiliar with certain technologies or even with the
+ development in general, it is great time to start learning something new!
+ Our community will kindly assist every your step, and with us you can easily become
+ highly-evaluated developer!
+ </p>
+ <Button
+ variant="contained"
+ color="secondary"
+ startIcon={<NewReleasesIcon />}
+ href="https://github.com/Eug-VS/chrono-cube/issues/new"
+ >
+ Suggest feature
+ </Button>
+ <Button
+ variant="contained"
+ color="secondary"
+ startIcon={<BugReportIcon />}
+ href="https://github.com/Eug-VS/chrono-cube/issues/new"
+ >
+ Report a bug
+ </Button>
+ </ContentSection>
+ <ContentSection sectionName="Developers">
+ <List>
+ {
+ developers.map(developer => {
+ const githubUrl = `https://github.com/${developer.username}`;
+
+ return (
+ <div key={developer.username}>
+ <ListItem>
+ <Link href={githubUrl}>
+ <Avatar alt={developer.username} src={`${githubUrl}.png`} />
+ </Link>
+ <div>
+ <Link href={githubUrl}>
+ {developer.username}
+ </Link>
+ <Typography component="div" color="textSecondary">
+ {developer.role}
+ </Typography>
+ </div>
+ </ListItem>
+ <Divider variant="middle" />
+ </div>
+ )
+ })
+ }
+ <ListItem>
+ <Avatar />
+ You can be here!
+ </ListItem>
+ </List>
+ <Button
+ variant="contained"
+ color="secondary"
+ size="large"
+ href="https://github.com/users/Eug-VS/projects/3"
+ >
+ Join us!
+ </Button>
+ </ContentSection>
+ </div>
+ </Window>
+ );
+};
+
+
+export default Contribute;
diff --git a/src/components/Scoreboard/Scoreboard.js b/src/pages/Scoreboard/Scoreboard.js
index 5c83735..29d26c8 100644
--- a/src/components/Scoreboard/Scoreboard.js
+++ b/src/pages/Scoreboard/Scoreboard.js
@@ -4,10 +4,10 @@ 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";
+import SmartList from "../../components/SmartList/SmartList";
+import SolutionCard from "../../components/SolutionCard/SolutionCard";
+import Loading from "../../components/Loading/Loading";
+import Window from "../../components/Window/Window";
const useStyles = makeStyles(theme => ({
diff --git a/src/components/TimerPage/TimerPage.js b/src/pages/Timer/Timer.js
index 22781bc..d63c661 100644
--- a/src/components/TimerPage/TimerPage.js
+++ b/src/pages/Timer/Timer.js
@@ -2,13 +2,13 @@ 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 Window from "../../components/Window/Window";
+import ContentSection from "../../components/ContentSection/ContentSection";
+import TimerButton from "./TimerButton/TimerButton";
+import SmartList from "../../components/SmartList/SmartList";
+import SolutionCard from "../../components/SolutionCard/SolutionCard";
-import { Typography, makeStyles } from "@material-ui/core";
+import { Typography, Button, makeStyles } from "@material-ui/core";
const useStyles = makeStyles(theme => ({
@@ -20,7 +20,7 @@ const useStyles = makeStyles(theme => ({
},
}));
-const TimerPage = ({ recentSolutions, setRecentSolutions }) => {
+const Timer = ({ recentSolutions, setRecentSolutions, setPage }) => {
const classes = useStyles();
const user = {
@@ -35,6 +35,10 @@ const TimerPage = ({ recentSolutions, setRecentSolutions }) => {
});
};
+ const handleLearnMore = () => {
+ setPage('contribute');
+ };
+
const removeSolution = (id) => {
setRecentSolutions(recentSolutions.filter((solution => solution.id !== id)));
};
@@ -53,12 +57,16 @@ const TimerPage = ({ recentSolutions, setRecentSolutions }) => {
<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>
+ <p>
+ ChronoCube is a professional speedcubing timer.
+ Share your results publicly - let everyone see your progress and
+ achievements!
+ Every speedcuber will benefit
+ from using it - both amateur and professional!
+ </p>
+ <Button variant="contained" color="secondary" onClick={handleLearnMore}> Learn more </Button>
</ContentSection>
- <Timer registerResult={registerResult} />
+ <TimerButton registerResult={registerResult} />
</div>
</Window>
<Window type="secondary" name="Recent solutions">
@@ -73,4 +81,4 @@ const TimerPage = ({ recentSolutions, setRecentSolutions }) => {
};
-export default TimerPage;
+export default Timer;
diff --git a/src/components/TimerPage/Timer/Timer.js b/src/pages/Timer/TimerButton/TimerButton.js
index 92b153d..56d3084 100644
--- a/src/components/TimerPage/Timer/Timer.js
+++ b/src/pages/Timer/TimerButton/TimerButton.js
@@ -12,7 +12,7 @@ const useStyles = makeStyles(theme => ({
},
}));
-const Timer = ({ registerResult }) => {
+const TimerButton = ({ registerResult }) => {
const classes = useStyles();
const SPACE = 32;
@@ -116,4 +116,4 @@ const convertTimeToString = timeDelta => {
};
-export default Timer;
+export default TimerButton;
generated by cgit v1.2.3 (git 2.25.1) at 2025-11-04 00:18:15 +0000