More themes and sites, added routing

package.json

@@ -16,6 +16,7 @@
 		"react-columns": "^1.2.1",
 		"react-dom": "^18.2.0",
 		"react-helmet-async": "^1.3.0",
+		"react-router-dom": "^6.20.0",
 		"react-scripts": "^5.0.1",
 		"web-vitals": "^2.1.4"
 	},

src/App.js

@@ -7,6 +7,8 @@ import styles from './App.module.css';
 import { DebugRunContext } from './DebugRunContext';
 import clone from 'just-clone';
 import Columns from 'react-columns';
+import NavBar from './NavBar';
+import { useNavigate } from 'react-router-dom';
 
 function Square({ currentMove, value, onSquareClick, selectedPiece, index, theme, squares, testid }) {
 	const isDark = ((Math.floor(index / 8) % 2) !== (index % 2));
@@ -314,13 +316,15 @@ re-render the game:
 		console.adlog(1, 'set body style to', theme.bodyStyle);
 	}, [theme]);
 
+	const navigate = useNavigate();
+
 	return (
 		<HelmetProvider>
+			<NavBar onNavigate={href => navigate(href)} />
 			<div className={styles.App} style={theme.style} data-testid="app-div">
 				<Helmet>
 					<title>Chess No. 25</title>
 				</Helmet>
-				<h1 className={styles.unselectable}>Chess No. 25</h1>
 				<Game theme={theme} data={setupData} />
 			</div>
 		</HelmetProvider>

src/Home.js

@@ -0,0 +1,43 @@
+import { useNavigate, NavLink, Outlet } from 'react-router-dom';
+import styles from './Home.module.css';
+import NavBar from './NavBar';
+import themes from './themes.json';
+
+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. <NavLink to="/themes">Try them now!</NavLink></p>
+			<p>If you found a bug or have an idea, please <a href="https://github.com/romw314/chess-no-25/issues/new/choose">report it on GitHub</a>.</p>
+		</>
+	);
+}
+
+function ThemesPage() {
+	let themelist = [];
+	for (const theme in themes.themes)
+		themelist.push(<li><NavLink to={`/play/?theme=${theme}`}>{themes.themes[theme].fullName || theme}</NavLink></li>);
+	return (
+		<>
+			<p>Please choose a theme:</p>
+			<ul>{themelist}</ul>
+		</>
+	);
+}
+
+export { HomePage, ThemesPage };
+export default Home;

src/Home.module.css

@@ -0,0 +1,2 @@
+.home {
+}

src/NavBar.js

@@ -0,0 +1,44 @@
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import { createContext, useContext } from 'react';
+
+const OnNavigateContext = createContext();
+
+
+function NavButton({ to, href, children }) {
+	const navigate = useContext(OnNavigateContext);
+	return <Button color="inherit" onClick={to ? (() => navigate(to)) : (() => window.location.href = href)}>{children}</Button>;
+}
+
+function NavBar({ onNavigate, children }) {
+	return (
+		<Box sx={{ flexGrow: 1 }}>
+			<AppBar position="sticky">
+				<Toolbar>
+					<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+						Chess No. 25
+					</Typography>
+					<OnNavigateContext.Provider value={onNavigate}>
+						{children}
+					</OnNavigateContext.Provider>
+				</Toolbar>
+			</AppBar>
+		</Box>
+	);
+}
+
+function ChessNavBar({ onNavigate }) {
+	return (
+		<NavBar onNavigate={onNavigate}>
+			<NavButton to="/">Home</NavButton>
+			<NavButton to="/themes">Themes</NavButton>
+			<NavButton to="/play">Play</NavButton>
+			<NavButton href="https://github.com/romw314/chess-no-25">GitHub</NavButton>
+		</NavBar>
+	);
+};
+
+export default ChessNavBar;

src/index.js

@@ -2,11 +2,13 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App, { setupData } from './App';
+import Home, { HomePage, ThemesPage } from './Home';
 import { Theme } from './Theme';
 import { DebugRunProvider, getLg, setLg } from './DebugRunContext';
 import ErrorHandler from './ErrorHandler';
 import './debug';
 import reportWebVitals from './reportWebVitals';
+import { BrowserRouter, Routes, Route, useSearchParams } from 'react-router-dom';
 
 if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
 	console.log(`Welcome to Chess No. 25 debugger console!
@@ -20,17 +22,29 @@ setLg(f => f());
 global.error = null;
 global.catch = (error) => global.error = error;
 
-const theme = new URLSearchParams(window.location.search).get('theme');
-console.adlog(1, 'theme:', theme);
-const data = new setupData(Theme(theme || 'dark', getLg));
+function ThemedApp() {
+	const [params] = useSearchParams();
+	return <App setupData={new setupData(Theme(params.get('theme') || 'dark', getLg))} />;
+}
+
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
 	<React.StrictMode>
-		<ErrorHandler error={global.error}>
-			<DebugRunProvider>
-				<App setupData={data} />
-			</DebugRunProvider>
-		</ErrorHandler>
+		<BrowserRouter>
+			<Routes>
+				<Route path="/" element={<Home />}>
+					<Route index element={<HomePage />} />
+					<Route path="themes" element={<ThemesPage />} />
+				</Route>
+				<Route path="/play/" element={
+					<ErrorHandler error={global.error}>
+						<DebugRunProvider>
+							<ThemedApp />
+						</DebugRunProvider>
+					</ErrorHandler>
+				} />
+			</Routes>
+		</BrowserRouter>
 	</React.StrictMode>
 );
 

src/themes.json

@@ -1,10 +1,12 @@
 {
 	"themes": {
-		"default": {},
 		"dark": {
+			"fullName": "Dark (default)",
 			"bodyStyle": {
 				"backgroundColor": "black",
-				"color": "white",
+				"color": "white"
+			},
+			"style": {
 				"opacity": "0.8"
 			},
 			"images": "%-default-@.png",
@@ -21,7 +23,11 @@
 				]
 			}
 		},
+		"default": {
+			"fullName": "Standard"
+		},
 		"bw": {
+			"fullName": "Black & White",
 			"bodyStyle": {
 				"backgroundColor": "white",
 				"color": "black"
@@ -38,6 +44,80 @@
 					"white"
 				]
 			}
+		},
+		"lava": {
+			"fullName": "Lava",
+			"bodyStyle": {
+				"backgroundColor": "red",
+				"color": "white"
+			},
+			"images": "%-default-@.png",
+			"square": {
+				"lightColor": [
+					"orange",
+					"red",
+					"yellow"
+				],
+				"darkColor": [
+					"darkred",
+					"red",
+					"#690000"
+				]
+			}
+		},
+		"secret": {
+			"fullName": "Secret",
+			"images": "%-default-@.png",
+			"square": {
+				"lightColor": [
+					"black",
+					"black",
+					"black"
+				],
+				"darkColor": [
+					"black",
+					"black",
+					"black"
+				]
+			}
+		},
+		"green": {
+			"fullName": "Green",
+			"bodyStyle": {
+				"backgroundColor": "#DDFFDD"
+			},
+			"images": "%-default-@.png",
+			"square": {
+				"lightColor": [
+					"lightgreen",
+					"green",
+					"#CCFFCC"
+				],
+				"darkColor": [
+					"darkgreen",
+					"green",
+					"#003400"
+				]
+			}
+		},
+		"lv": {
+			"fullName": "Lavender & Vanilla",
+			"bodyStyle": {
+				"backgroundColor": "#F3E5AB"
+			},
+			"images": "%-default-@.png",
+			"square": {
+				"lightColor": [
+					"lavender",
+					"violet",
+					"orange"
+				],
+				"darkColor": [
+					"darkviolet",
+					"violet",
+					"darkgreen"
+				]
+			}
 		}
 	}
 }

yarn.lock

@@ -1895,6 +1895,11 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
+"@remix-run/router@1.13.0":
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.13.0.tgz#7e29c4ee85176d9c08cb0f4456bff74d092c5065"
+  integrity sha512-5dMOnVnefRsl4uRnAdoWjtVTdh8e6aZqgM4puy9nmEADH72ck+uXwzpJLEKE9Q6F8ZljNewLgmTfkxUrBdv4WA==
+
 "@rollup/plugin-babel@^5.2.0":
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
@@ -8098,6 +8103,21 @@ react-refresh@^0.11.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
   integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
 
+react-router-dom@^6.20.0:
+  version "6.20.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.20.0.tgz#7b9527a1e29c7fb90736a5f89d54ca01f40e264b"
+  integrity sha512-CbcKjEyiSVpA6UtCHOIYLUYn/UJfwzp55va4yEfpk7JBN3GPqWfHrdLkAvNCcpXr8QoihcDMuk0dzWZxtlB/mQ==
+  dependencies:
+    "@remix-run/router" "1.13.0"
+    react-router "6.20.0"
+
+react-router@6.20.0:
+  version "6.20.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.20.0.tgz#4275a3567ecc55f7703073158048db10096bb539"
+  integrity sha512-pVvzsSsgUxxtuNfTHC4IxjATs10UaAtvLGVSA1tbUE4GDaOSU1Esu2xF5nWLz7KPiMuW8BJWuPFdlGYJ7/rW0w==
+  dependencies:
+    "@remix-run/router" "1.13.0"
+
 react-scripts@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.1.tgz#6285dbd65a8ba6e49ca8d651ce30645a6d980003"