Merge branch 'master' into romw314-patch-2

.github/ISSUE_TEMPLATE/bug-report.md

@@ -1,5 +1,5 @@
 ---
-name: Bug report
+name: 🐞 Bug report
 about: Create a report to help us improve
 title: "[BUG]: "
 labels: bug

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,5 +1,5 @@
 ---
-name: Feature request
+name: 💡 Feature request
 about: Suggest an idea for this project
 title: ''
 labels: enhancement

.github/ISSUE_TEMPLATE/new-theme.yml

@@ -0,0 +1,46 @@
+name: New theme 🎨
+description: Submit a new theme to Chess No. 25 without coding
+title: "New theme: <theme name>"
+labels: ["new theme"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        # Theme submission
+        All colors can be one of [these color codes](https://www.w3schools.com/colors/colors_names.asp).
+  - type: input
+    attributes:
+      label: Background color
+      description: The background color of the chess (will set the colors attribute)
+  - type: input
+    attributes:
+      label: Text color
+      description: The text color of the coordinates and the "X to move" text
+  - type: input
+    attributes:
+      label: Light square color - NORMAL
+      description: The normal color of the light squares
+  - type: input
+    attributes:
+      label: Light square color - SELECTED
+      description: The color when there is a selected piece an a light square
+  - type: input
+    attributes:
+      label: Light square color - POSSIBLE MOVE
+      description: The color of a light square when the selected piece can move to that square
+  - type: input
+    attributes:
+      label: Dark square color - NORMAL
+      description: The normal color of the dark squares
+  - type: input
+    attributes:
+      label: Dark square color - SELECTED
+      description: The color when there is a selected piece an a dark square
+  - type: input
+    attributes:
+      label: Dark square color - POSSIBLE MOVE
+      description: The color of a dark square when the selected piece can move to that square
+  - type: textarea
+    attributes:
+      label: Custom images
+      description: Drag every image into this field in the PNG format and size 32x32, named `<square color>-<piece name>.png` (lowercase; square color is `light` or `dark`). ***DO NOT PROVIDE A LINK TO AN EXTERNAL FILE SOURCE LIKE ONEDRIVE!***

docs/tutorial-creating-your-custom-theme.md

@@ -2,7 +2,7 @@
 
 ## Prerequisites
 
-To create you own theme for Chess No. 25, you will need a GitHub account, a web browser and an internet connection.
+To create your own theme for Chess No. 25, you will need to have a GitHub account.
 If you don't have a GitHub account already you can [create a new one](https://github.com/signup){:target=blank}.
 
 In this guide we assume that you are using a Windows machine, but you can do the same steps on Linux or macOS (the steps may be a little different on other systems).
@@ -18,12 +18,12 @@ To start, [sign in to GitHub](https://github.com){:target=blank} and navigate to
 You should see something like this:
 ![Screenshot](img/fork.jpeg)
 
-Click the **Fork** button.
+Click the **Fork** button. This will create your own fork (copy) of Chess No. 25 where you can make changes and then they can be accepted into the main Chess No. 25.
 
 You should see something like this:
 ![Screenshot](img/finish-fork.jpeg)
 
-Click the **Create fork** button. After a short time, it should take you into the newly created fork
+Click the **Create fork** button. After a short time, it should take you into the newly created fork.
 
 ## 2. Choose what theme do you want to create
 

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));
@@ -47,14 +48,15 @@ function Square({ currentMove, value, onSquareClick, selectedPiece, index, theme
 	// eslint-disable-next-line no-eval
 	value = window.sqValue ? eval(window.sqValue) : getImage(value);
 
-	return <button className={`${styles.unselectable} ${styles.square}`} onClick={onSquareClick} style={style} data-testid={testid}>{value}</button>;
+	return <button title={`${Array.from('ABCDEFGH')[index % 8]}${Math.floor(index / 8)}`} className={`${styles.unselectable} ${styles.square}`} onClick={onSquareClick} style={style} data-testid={testid}>{value}</button>;
 }
 
 function BoardRow({ move, index, onSquareClick, squares, selectedPiece, theme }) {
 	const rowIndex = index;
 	index *= 8;
 	return (
 		<div className={styles.boardRow}>
+			<span className={styles.square} style={{ width: 48, height: 48 }}>{8-rowIndex}</span>
 			<Square value={squares[index+0]} onSquareClick={() => onSquareClick(index+0)} selectedPiece={selectedPiece} index={index+0} theme={theme} squares={squares} testid={`0/${rowIndex}`} currentMove={move} />
 			<Square value={squares[index+1]} onSquareClick={() => onSquareClick(index+1)} selectedPiece={selectedPiece} index={index+1} theme={theme} squares={squares} testid={`1/${rowIndex}`} currentMove={move} />
 			<Square value={squares[index+2]} onSquareClick={() => onSquareClick(index+2)} selectedPiece={selectedPiece} index={index+2} theme={theme} squares={squares} testid={`2/${rowIndex}`} currentMove={move} />
@@ -145,7 +147,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 +156,11 @@ 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>
+			<div className={styles.boardRow}>
+				<span className={styles.square} style={{ width: 48, height: 48 }} />
+				{Array.from('ABCDEFGH').map(ch => <span className={styles.square} style={{ width: 48, height: 48 }}>{ch}</span>)}
+			</div>
+		</Box>
 	);
 }
 
@@ -372,7 +378,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 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)
-		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": {
@@ -142,6 +142,30 @@
 					"#D2691E"
 				]
 			}
-		}				
+		},
+		"christmasDark": {
+			"fullName": "Christmas Dark",
+			"availability": {
+				"monthSeason": [
+					"December"
+				]
+			},
+			"bodyStyle": {
+				"backgroundColor": "#007AAA"
+			},
+			"images": "%-default-@.png",
+			"square": {
+				"lightColor": [
+					"#90AAAA",
+					"#688492",
+					"#87CEEB"
+				],
+				"darkColor": [
+					"#AA073C",
+					"#A52A2A",
+					"#D2691E"
+				]
+			}
+		}
 	}
 }