Better theme resolution, more MUI and SEASONAL THEMES

src/App.js

@@ -1,14 +1,15 @@
 import { useState, useEffect, useContext } from 'react';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
-import { Button, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions } from '@mui/material';
-import { Theme, getImage } from './Theme';
+import { Button, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Box } from '@mui/material';
+import { Theme, getImage, checkThemeAvailability } from './Theme';
 import * as gameLogic from './gameLogic.js';
 import styles from './App.module.css';
 import { DebugRunContext, getLg } from './DebugRunContext';
 import clone from 'just-clone';
 import Columns from 'react-columns';
 import NavBar from './NavBar';
 import { useNavigate, useSearchParams } from 'react-router-dom';
+import themes from './themes.json';
 
 function Square({ currentMove, value, onSquareClick, selectedPiece, index, theme, squares, testid }) {
 	const isDark = ((Math.floor(index / 8) % 2) !== (index % 2));
@@ -145,7 +146,7 @@ function Board({ theme, data, onPlay, onRevert }) {
 	window.chess.advanced = data;
 
 	return (
-		<div className={styles.board} style={theme.board.style}>
+		<Box sx={{ flexGrow: 1, boxShadow: 2 }} className={styles.board} style={theme.board.style}>
 			<BoardRow index='0' onSquareClick={handleClick} squares={squares} selectedPiece={selectedPiece} theme={theme} move={data.currentMove} />
 			<BoardRow index='1' onSquareClick={handleClick} squares={squares} selectedPiece={selectedPiece} theme={theme} move={data.currentMove} />
 			<BoardRow index='2' onSquareClick={handleClick} squares={squares} selectedPiece={selectedPiece} theme={theme} move={data.currentMove} />
@@ -154,7 +155,7 @@ function Board({ theme, data, onPlay, onRevert }) {
 			<BoardRow index='5' onSquareClick={handleClick} squares={squares} selectedPiece={selectedPiece} theme={theme} move={data.currentMove} />
 			<BoardRow index='6' onSquareClick={handleClick} squares={squares} selectedPiece={selectedPiece} theme={theme} move={data.currentMove} />
 			<BoardRow index='7' onSquareClick={handleClick} squares={squares} selectedPiece={selectedPiece} theme={theme} move={data.currentMove} />
-		</div>
+		</Box>
 	);
 }
 
@@ -372,7 +373,16 @@ class setupData {
 
 function ThemedApp() {
 	const [params] = useSearchParams();
-	return <App setupData={new setupData(Theme(params.get('theme') ?? 'dark', getLg))} navigate={useNavigate()} />;
+	const theme = params.get('theme') ?? 'dark';
+	const navigate = useNavigate();
+	if (checkThemeAvailability(themes.themes[theme]) === false)
+		return (
+			<>
+				<NavBar onNavigate={navigate} />
+				<span>Sorry, this theme is not available</span>
+			</>
+		);
+	return <App setupData={new setupData(Theme(theme, getLg))} navigate={navigate} />;
 }
 
 function createHistoryObject(squares) {

src/Home.js

@@ -1,7 +1,8 @@
-import { useNavigate, NavLink, Outlet } from 'react-router-dom';
+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();
@@ -21,16 +22,25 @@ 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>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 <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>);
+	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} (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><strong>{available}</strong></li>);
+	}
 	return (
 		<>
 			<p>Please choose a theme:</p>

src/Home.module.css

@@ -1,2 +1,11 @@
 .home {
 }
+
+.themeLink a {
+	text-decoration: none;
+	color: blue;
+}
+
+.themeLink:hover a {
+	text-decoration: underline;
+}

src/NavBar.js

@@ -15,7 +15,7 @@ function NavButton({ to, href, children }) {
 
 function NavBar({ onNavigate, children }) {
 	return (
-		<Box sx={{ flexGrow: 1 }}>
+		<Box sx={{ flexGrow: 1, boxShadow: 112 }}>
 			<AppBar position="sticky">
 				<Toolbar>
 					<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>

src/Theme.js

@@ -69,5 +69,30 @@ function Theme(themeId, logrun) {
 	return result;
 }
 
-export { Theme, getImage, pieceIs };
+function checkThemeAvailability(theme) {
+	if (!theme)
+		return false;
+	const av = theme.availability ?? { always: true };
+	const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+	const now = new Date();
+	if (av.monthSeason)
+		for (const month of av.monthSeason)
+			if (months.includes(month) && new Date(`0 ${month}`).getMonth() === now.getMonth()) {
+				const joinWithCommas = av.monthSeason.slice();
+				const last = joinWithCommas.pop();
+				return ` - Special theme: available only in ${joinWithCommas.join(', ')}${joinWithCommas.length ? ' and ' : ''}${last}`;
+			}
+	if (av.daySeason)
+		for (const dateString of av.dateSeason) {
+			const dateStringParts = dateString.split(' ');
+			if (dateStringParts.length !== 2 || isNaN(Number(dateStringParts[0])) || !months.includes(dateStringParts[1]))
+				continue;
+			const date = new Date(dateString);
+			if (date.getDay() === now.getDay() && date.getMonth === now.getMonth())
+				return ` - Special theme: available only on ${dateString}`;
+		}
+	return av.always ? '' : false;
+}
+
+export { Theme, getImage, pieceIs, checkThemeAvailability };
 export default ThemeData;

src/themes.json

@@ -121,9 +121,9 @@
 		},
 		"christmas": {
 			"fullName": "Christmas",
-			"avalability": {
+			"availability": {
 				"monthSeason": [
-					12
+					"December"
 				]
 			},
 			"bodyStyle": {