-
Notifications
You must be signed in to change notification settings - Fork 3
/
Home.js
55 lines (51 loc) · 2.03 KB
/
Home.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
import { useNavigate, Link, Outlet } from 'react-router-dom';
import styles from './Home.module.css';
import NavBar from './NavBar';
import themes from './themes.json';
import { checkThemeAvailability } from './Theme';
function Home() {
const navigate = useNavigate();
window.document.body.style.backgroundColor = 'transparent';
window.document.body.style.color = 'black';
return (
<>
<NavBar onNavigate={navigate}/>
<div className={styles.home}>
<Outlet />
</div>
</>
);
}
function HomePage() {
return (
<>
<p>Chess No. 25 is a simple and open source chess game for two players.</p>
<p>Chess No. 25 has multiple themes available. <Link to="/themes">Try them now!</Link></p>
<p>If you found a bug or have an idea, please report it on GitHub: <a href="https://github.com/romw314/chess-no-25/issues/new/choose">bugs</a>, <a href="https://github.com/romw314/chess-no-25/discussions/new?category=ideas">ideas</a></p>
</>
);
}
function ThemesPage() {
let themelist = [];
for (const theme in themes.themes) {
const available = checkThemeAvailability(themes.themes[theme]);
if (available === false) {
themelist.push(<li key={theme} style={{ color: 'grey' }}>{themes.themes[theme].fullName ?? theme}{themes.themes[theme].original ? '*' : ''} (not available)</li>);
continue;
}
let style = {};
if (available) // empty string '' if falsy
style.color = 'green';
themelist.push(<li className={styles.themeLink} key={theme}><Link to={`/play?theme=${theme}`} style={style}>{themes.themes[theme].fullName ?? theme}</Link>{themes.themes[theme].original ? '*' : ''}<strong>{available}</strong></li>);
}
return (
<>
<p>Please choose a theme:</p>
<ul>{themelist}</ul>
<p>The themes are created by the community. <a href="https://chess-no-25-docs.vercel.app/tutorial-creating-your-custom-theme/" rel="noopener" target="blank">Create your own theme.</a></p>
<p>*Theme from the base set by romw314</p>
</>
);
}
export { HomePage, ThemesPage };
export default Home;