Spaces:

Sebastiankay
/

Dame-Singleplayer

Running

App Files Files

Sebastiankay commited on Feb 23, 2025

Commit

c29b222

verified ·

1 Parent(s): 43169e0

Update index.html

Browse files

Files changed (1) hide show

index.html +831 -13

index.html CHANGED Viewed

@@ -1,19 +1,837 @@
-<!doctype html>
-<html>
 	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
 	</head>
 	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
 		</div>
 	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
 	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Document</title>
 	</head>
 	<body>
+		<style>
+			@font-face {
+				font-family: "Caveat Brush";
+				font-style: normal;
+				font-weight: 400;
+				font-display: swap;
+				src: url(https://fonts.gstatic.com/s/caveatbrush/v11/EYq0maZfwr9S9-ETZc3fKXtMWw.ttf) format("truetype");
+			}
+			body {
+				background-color: rgba(var(--active-background-color), 1);
+				/* background-image: radial-gradient(circle, rgba(var(--active-background-color), 1) 0%, color-mix(in srgb, rgba(var(--active-background-color), 1) 60%, black) 100%); */
+				background-image: radial-gradient(circle, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
+				color: #222;
+				font-family: Arial, sans-serif;
+				margin: 0;
+				padding: 0;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				height: 100vh;
+				max-height: 100vh;
+				width: 100vw;
+				max-width: 100vw;
+				overflow: hidden;
+				transition: background-color 0.6s ease-out;
+			}
+			#game-container {
+				padding: 20px;
+				border-radius: 8px;
+				text-align: center;
+				position: relative;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+			}
+			.buttons {
+				position: relative;
+				z-index: 20;
+				display: flex;
+				flex-wrap: wrap;
+				justify-content: center;
+				align-items: center;
+				gap: 4px;
+				margin-top: 15px;
+				#new-game {
+					padding: 10px 20px;
+					background-color: #555;
+					border: none;
+					color: #fff;
+					font-size: 16px;
+					border-radius: 4px;
+					cursor: pointer;
+				}
+				#new-game:hover {
+					background-color: #777;
+				}
+			}
+			#status {
+				margin-bottom: 10px;
+				font-family: "Caveat Brush", serif;
+				font-size: 3rem;
+				font-weight: 600;
+				color: color-mix(in srgb, rgba(var(--active-background-color), 1) 30%, black);
+			}
+			#board {
+				display: grid;
+				grid-template-columns: repeat(8, 1fr);
+				gap: 2px;
+				margin: 0;
+				background-color: rgba(68, 68, 68, 1);
+				border: none;
+				border-radius: 0.35rem;
+				overflow: hidden;
+				padding: 8px;
+				width: 90%;
+				max-height: 90vw;
+			}
+			@media screen and (orientation: landscape) {
+				#game-container {
+					width: 100vh;
+					max-width: 100vh;
+					aspect-ratio: 4 / 3;
+				}
+				#board {
+					display: grid;
+					grid-template-columns: repeat(8, 1fr);
+					gap: 2px;
+					width: 70vh;
+					max-width: 70vh;
+				}
+			}
+			@media screen and (orientation: portrait) {
+				#game-container {
+					width: 90vw;
+					max-width: 90vw;
+					aspect-ratio: 4 / 3;
+				}
+			}
+			.cell {
+				width: 100%;
+				aspect-ratio: 1 / 1;
+				box-sizing: border-box;
+				position: relative;
+				cursor: pointer;
+			}
+			.light {
+				background-color: #666;
+			}
+			.dark {
+				background-color: rgb(68, 68, 68);
+			}
+			.cell.highlight {
+				background-image: repeating-linear-gradient(-45deg, rgba(var(--active-background-color), 0.1), rgba(var(--active-background-color), 0.1) 1rem, rgba(var(--active-background-color), 0.4) 1rem, rgba(var(--active-background-color), 0.4) 2rem);
+				background-size: 200% 200%;
+				animation: barberpole 10s linear infinite;
+			}
+			@keyframes barberpole {
+				100% {
+					background-position: 100% 100%;
+				}
+			}
+			.piece {
+				width: 80%;
+				height: 80%;
+				border-radius: 50%;
+				margin: 0;
+				position: relative;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				background-color: rgba(var(--player-color), 1);
+				/* border:0.35rem solid rgb(var(--player-color)); */
+				box-shadow: 0.2rem 0.2rem 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0 0.2rem inset rgba(0, 0, 0, 0.2);
+				/* filter: drop-shadow(0px 0px red);*/
+			}
+			.cell.selected .piece {
+				filter: brightness(0.6);
+				/* animation-name: pulse;
+	animation-duration: 1.4s;
+	animation-timing-function: linear;
+	animation-iteration-count: infinite; */
+			}
+			.piece.must-capture {
+				/* filter: brightness(0.6); */
+				animation-name: pulse;
+				animation-duration: 1.4s;
+				animation-timing-function: linear;
+				animation-iteration-count: infinite;
+			}
+			/* .piece::after {
+	position: absolute;
+	content: "";
+	width: 100%;
+	height: 100%;
+	border-radius: 50%;
+	margin: 0;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%) rotate(0deg);
+	/* border:0.35rem var(--border-style) var(--border-color); * /
+	animation-duration: 6s;
+	animation-timing-function: linear;
+	animation-iteration-count: infinite;
+}
+.piece.spin-ani::after {
+	transform: translate(-50%, -50%) rotate(0deg);
+	border: 0.35rem var(--border-style) var(--border-color);
+	animation-name: spin;
+} */
+			.piece.king {
+				background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'><path fill='rgba(68,68,68,0.5)' d='M309 106c11.4-7 19-19.7 19-34c0-22.1-17.9-40-40-40s-40 17.9-40 40c0 14.4 7.6 27 19 34L209.7 220.6c-9.1 18.2-32.7 23.4-48.6 10.7L72 160c5-6.7 8-15 8-24c0-22.1-17.9-40-40-40S0 113.9 0 136s17.9 40 40 40c.2 0 .5 0 .7 0L86.4 427.4c5.5 30.4 32 52.6 63 52.6l277.2 0c30.9 0 57.4-22.1 63-52.6L535.3 176c.2 0 .5 0 .7 0c22.1 0 40-17.9 40-40s-17.9-40-40-40s-40 17.9-40 40c0 9 3 17.3 8 24l-89.1 71.3c-15.9 12.7-39.5 7.5-48.6-10.7L309 106z'/></svg>");
+				background-size: 50%;
+				background-repeat: no-repeat;
+				background-position: center;
+			}
+			#winMessage {
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				background-color: #222;
+				padding: 20px 30px;
+				border: 8px solid rgb(68, 68, 68);
+				color: rgb(68, 68, 68);
+				border-radius: 8px;
+				font-size: 24px;
+				display: none;
+				z-index: 10;
+				cursor: pointer;
+			}
+			#setPlayerNamesWrapper {
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				width: 40%;
+				aspect-ratio: 16 / 9;
+				transform: translate(-50%, -50%);
+				border-radius: 8px;
+				padding: 20px 30px;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+				gap: 0;
+				background-image: url(http://62.68.75.171/themes/prismify-bootstrap-starter-kit/assets/images/dame_header_image.png);
+				background-repeat: no-repeat;
+				background-size: contain;
+				background-position: center;
+				#setPlayerNamesInputs {
+					position: relative;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					input,
+					label {
+						font-family: "Caveat Brush", serif;
+						font-size: 2rem;
+						font-weight: 600;
+						border-radius: 4px;
+						border-width: 8px;
+						border-style: solid;
+						border-color: transparent;
+						background-color: transparent;
+					}
+					#inputPlayerName1 {
+						padding: 10px 20px;
+						background-color: rgb(var(--player1-color));
+						border-color: rgb(var(--player1-color));
+						color: color-mix(in srgb, rgba(var(--player1-color), 1) 20%, rgb(14, 14, 64));
+						transform: rotate(0.2deg);
+						margin-left: 4px;
+						margin-right: -4px;
+					}
+					#modeSelect {
+						padding: 10px 20px;
+						background-color: rgb(var(--player2-color));
+						border-color: rgb(var(--player2-color));
+						transform: rotate(-0.2deg);
+						border-radius: 4px;
+						border-width: 8px;
+						margin-top: -8px;
+						max-width: 60%;
+						margin-left: 60px;
+						#inputPlayerName2 {
+							color: color-mix(in srgb, rgba(var(--player2-color), 1) 20%, rgb(38, 7, 7));
+							text-align: right;
+							max-width: calc(100% - 60px);
+						}
+						#cpuToggle {
+							display: none;
+						}
+						label {
+							padding: 10px 20px;
+							background-color: rgb(var(--player2-color));
+							border: 8px solid rgb(var(--player2-color));
+							color: #555;
+							font-size: 16px;
+							cursor: pointer;
+							transition: all 0.3s ease-in-out;
+							background-repeat: no-repeat;
+							background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='rgba(81,40,42,1)' d='M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z'/></svg>");
+						}
+						label:has(#cpuToggle:checked) {
+							background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'><path fill='rgba(81,40,42,1)' d='M320 0c17.7 0 32 14.3 32 32l0 64 120 0c39.8 0 72 32.2 72 72l0 272c0 39.8-32.2 72-72 72l-304 0c-39.8 0-72-32.2-72-72l0-272c0-39.8 32.2-72 72-72l120 0 0-64c0-17.7 14.3-32 32-32zM208 384c-8.8 0-16 7.2-16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-32 0zm96 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-32 0zm96 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-32 0zM264 256a40 40 0 1 0 -80 0 40 40 0 1 0 80 0zm152 40a40 40 0 1 0 0-80 40 40 0 1 0 0 80zM48 224l16 0 0 192-16 0c-26.5 0-48-21.5-48-48l0-96c0-26.5 21.5-48 48-48zm544 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-16 0 0-192 16 0z'/></svg>");
+						}
+					}
+					input:focus {
+						outline: none;
+					}
+					span#vs {
+						position: absolute;
+						top: 50%;
+						margin-top: -10px;
+						font-family: "Caveat Brush", serif;
+						font-size: 2rem;
+						font-weight: 600;
+						left: 50%;
+						transform: translate(-50%, -50%);
+						color: rgba(255, 255, 255, 1);
+						text-shadow: #444 2px 2px 0px, #444 2px -2px 0px, #444 -2px 2px 0px, #444 -2px -2px 0px, #444 2px 0px 0px, #444 0px 2px 0px, #444 -2px 0px 0px, #444 0px -2px 0px;
+					}
+				}
+				#savePlayerNames {
+					padding: 10px 20px;
+					background-color: #555;
+					border: none;
+					color: #fff;
+					font-size: 16px;
+					border-radius: 4px;
+					cursor: pointer;
+					margin-top: 12px;
+				}
+			}
+			#setPlayerNamesWrapperBackdrop {
+				position: absolute;
+				content: "";
+				width: 100vw;
+				height: 100vh;
+				top: 0px;
+				left: 0;
+				backdrop-filter: blur(10px);
+			}
+			@keyframes pulse {
+				0% {
+					filter: brightness(1);
+				}
+				50% {
+					filter: brightness(0.4);
+				}
+				100% {
+					filter: brightness(1);
+				}
+			}
+			@keyframes spin {
+				from {
+					transform: translate(-50%, -50%) rotate(0deg);
+				}
+				to {
+					transform: translate(-50%, -50%) rotate(360deg);
+				}
+			}
+		</style>
+		<div id="game-container">
+			<div id="status">Spieler 1 am Zug</div>
+			<div id="board"></div>
+			<div class="buttons">
+				<button id="new-game">Neues Spiel</button>
+			</div>
 		</div>
+		<div id="winMessage"></div>
+		<div id="setPlayerNamesWrapperBackdrop">
+			<div id="setPlayerNamesWrapper">
+				<div id="setPlayerNamesInputs">
+					<input type="text" id="inputPlayerName1" autocomplete="off" />
+					<div id="modeSelect">
+						<input type="text" id="inputPlayerName2" autocomplete="off" /><label> <input type="checkbox" id="cpuToggle" /></label>
+					</div>
+					<span id="vs">gegen</span>
+				</div>
+				<button id="savePlayerNames">Los</button>
+			</div>
+		</div>
+		<script>
+			const boardSize = 8
+			let board = [],
+				currentPlayer = 1,
+				selectedPiece = null,
+				validMoves = [],
+				gameRunning = false,
+				vsCPU = false
+			const playerColors = {
+				1: "168, 208, 230",
+				2: "246, 171, 182",
+			}
+			let players = {
+				1: { name: "Spieler 1", color: "168, 208, 230" },
+				2: { name: "Spieler 2", color: "246, 171, 182" },
+			}
+			const captureHighlightColors = {
+				1: "128, 168, 190",
+				2: "206, 131, 142",
+			}
+			const pieceColors = {
+				1: "77, 129, 199",
+				2: "214, 106, 139",
+			}
+			const body = document.body
+			body.style.setProperty("--player1-color", players[1].color)
+			body.style.setProperty("--player2-color", players[2].color)
+			const inputPlayerName1 = document.getElementById("inputPlayerName1")
+			inputPlayerName1.value = players[1].name
+			const inputPlayerName2 = document.getElementById("inputPlayerName2")
+			inputPlayerName2.value = players[2].name
+			const savePlayerNamesButton = document.getElementById("savePlayerNames")
+			const boardElement = document.getElementById("board")
+			const statusElement = document.getElementById("status")
+			const newGameButton = document.getElementById("new-game")
+			const winMessageElement = document.getElementById("winMessage")
+			const cpuToggle = document.getElementById("cpuToggle")
+			function inBounds(row, col) {
+				return row >= 0 && row < boardSize && col >= 0 && col < boardSize
+			}
+			function isEmpty(row, col) {
+				return board[row][col] === 0
+			}
+			function isOpponent(piece, player) {
+				return piece !== 0 && (player === 1 ? piece === 2 || piece === 4 : piece === 1 || piece === 3)
+			}
+			function isPlayerPiece(piece, player) {
+				return player === 1 ? piece === 1 || piece === 3 : player === 2 && (piece === 2 || piece === 4)
+			}
+			function isKing(piece) {
+				return piece === 3 || piece === 4
+			}
+			function initGame() {
+				board = Array.from({ length: boardSize }, () => Array(boardSize).fill(0))
+				for (let row = 0; row < 3; row++) {
+					for (let col = 0; col < boardSize; col++) {
+						if ((row + col) % 2 === 1) board[row][col] = 1
+					}
+				}
+				for (let row = boardSize - 3; row < boardSize; row++) {
+					for (let col = 0; col < boardSize; col++) {
+						if ((row + col) % 2 === 1) board[row][col] = 2
+					}
+				}
+				currentPlayer = 1
+				selectedPiece = null
+				validMoves = []
+				gameRunning = true
+				winMessageElement.style.display = "none"
+				newGameButton.style.display = "inline-block"
+				vsCPU = cpuToggle.checked
+				cpuToggle.disabled = false
+				updateStatus()
+				updateBackground()
+				renderBoard()
+				if (vsCPU && currentPlayer === 2) {
+					setTimeout(cpuMove, 500)
+				}
+			}
+			function updateStatus() {
+				statusElement.textContent = `${players[currentPlayer].name} ist am Zug`
+			}
+			function updateBackground() {
+				body.style.setProperty("--active-background-color", players[currentPlayer].color)
+			}
+			function getValidMoves(row, col) {
+				const moves = []
+				const piece = board[row][col]
+				if (!isPlayerPiece(piece, currentPlayer)) return moves
+				const directions = isKing(piece)
+					? [
+							[1, 1],
+							[1, -1],
+							[-1, 1],
+							[-1, -1],
+					  ]
+					: currentPlayer === 1
+					? [
+							[1, -1],
+							[1, 1],
+					  ]
+					: [
+							[-1, -1],
+							[-1, 1],
+					  ]
+				directions.forEach(([dr, dc]) => {
+					const newRow = row + dr,
+						newCol = col + dc
+					if (inBounds(newRow, newCol) && isEmpty(newRow, newCol)) {
+						moves.push({ row: newRow, col: newCol, capture: false })
+					}
+					const captureRow = row + 2 * dr,
+						captureCol = col + 2 * dc
+					if (inBounds(newRow, newCol) && inBounds(captureRow, captureCol) && isOpponent(board[newRow][newCol], currentPlayer) && isEmpty(captureRow, captureCol)) {
+						moves.push({
+							row: captureRow,
+							col: captureCol,
+							capture: true,
+							captured: { row: newRow, col: newCol },
+						})
+					}
+				})
+				return moves
+			}
+			function getValidMovesForPlayer(row, col, player) {
+				const moves = []
+				const piece = board[row][col]
+				if (!isPlayerPiece(piece, player)) return moves
+				const directions = isKing(piece)
+					? [
+							[1, 1],
+							[1, -1],
+							[-1, 1],
+							[-1, -1],
+					  ]
+					: player === 1
+					? [
+							[1, -1],
+							[1, 1],
+					  ]
+					: [
+							[-1, -1],
+							[-1, 1],
+					  ]
+				directions.forEach(([dr, dc]) => {
+					const newRow = row + dr,
+						newCol = col + dc
+					if (inBounds(newRow, newCol) && isEmpty(newRow, newCol)) {
+						moves.push({ row: newRow, col: newCol, capture: false })
+					}
+					const captureRow = row + 2 * dr,
+						captureCol = col + 2 * dc
+					if (inBounds(newRow, newCol) && inBounds(captureRow, captureCol) && isOpponent(board[newRow][newCol], player) && isEmpty(captureRow, captureCol)) {
+						moves.push({
+							row: captureRow,
+							col: captureCol,
+							capture: true,
+							captured: { row: newRow, col: newCol },
+						})
+					}
+				})
+				return moves
+			}
+			function hasAnyMoves(player) {
+				for (let row = 0; row < boardSize; row++) {
+					for (let col = 0; col < boardSize; col++) {
+						if (isPlayerPiece(board[row][col], player) && getValidMovesForPlayer(row, col, player).length > 0) {
+							return true
+						}
+					}
+				}
+				return false
+			}
+			function hasAnyCapture() {
+				for (let row = 0; row < boardSize; row++) {
+					for (let col = 0; col < boardSize; col++) {
+						if (isPlayerPiece(board[row][col], currentPlayer) && getValidMoves(row, col).some((move) => move.capture)) {
+							return true
+						}
+					}
+				}
+				return false
+			}
+			function makeMove(fromRow, fromCol, move) {
+				board[move.row][move.col] = board[fromRow][fromCol]
+				board[fromRow][fromCol] = 0
+				if (move.capture) {
+					const captured = move.captured
+					board[captured.row][captured.col] = 0
+				}
+				if (currentPlayer === 1 && move.row === boardSize - 1 && board[move.row][move.col] === 1) {
+					board[move.row][move.col] = 3
+				} else if (currentPlayer === 2 && move.row === 0 && board[move.row][move.col] === 2) {
+					board[move.row][move.col] = 4
+				}
+			}
+			function switchPlayer() {
+				currentPlayer = currentPlayer === 1 ? 2 : 1
+				selectedPiece = null
+				renderBoard()
+				validMoves = []
+				updateStatus()
+				updateBackground()
+				if (hasAnyMoves(currentPlayer)) {
+					if (vsCPU && currentPlayer === 2) {
+						setTimeout(cpuMove, 500)
+					}
+				} else {
+					endGame(currentPlayer === 1 ? 2 : 1)
+				}
+			}
+			function cpuMove() {
+				let possibleMoves = []
+				const mustCapture = hasAnyCapture()
+				for (let row = 0; row < boardSize; row++) {
+					for (let col = 0; col < boardSize; col++) {
+						if (isPlayerPiece(board[row][col], currentPlayer)) {
+							let moves = getValidMoves(row, col)
+							if (mustCapture) {
+								moves = moves.filter((move) => move.capture)
+							}
+							if (moves.length > 0) {
+								possibleMoves.push({ row, col, moves })
+							}
+						}
+					}
+				}
+				if (possibleMoves.length === 0) {
+					endGame(currentPlayer === 1 ? 2 : 1)
+					return
+				}
+				const { row, col, moves } = possibleMoves[Math.floor(Math.random() * possibleMoves.length)]
+				const move = moves[Math.floor(Math.random() * moves.length)]
+				setTimeout(() => {
+					makeMove(row, col, move)
+					renderBoard()
+					if (move.capture) {
+						cpuCaptureChain(move.row, move.col)
+					} else {
+						checkWin() || switchPlayer()
+					}
+				}, 500)
+			}
+			function cpuCaptureChain(row, col) {
+				let captureMoves = getValidMoves(row, col).filter((move) => move.capture)
+				if (captureMoves.length > 0) {
+					const move = captureMoves[Math.floor(Math.random() * captureMoves.length)]
+					setTimeout(() => {
+						makeMove(row, col, move)
+						renderBoard()
+						cpuCaptureChain(move.row, move.col)
+					}, 500)
+				} else {
+					checkWin() || switchPlayer()
+				}
+			}
+			function checkWin() {
+				let player1Pieces = 0,
+					player2Pieces = 0
+				for (let row = 0; row < boardSize; row++) {
+					for (let col = 0; col < boardSize; col++) {
+						if (board[row][col] === 1 || board[row][col] === 3) {
+							player1Pieces++
+						} else if (board[row][col] === 2 || board[row][col] === 4) {
+							player2Pieces++
+						}
+					}
+				}
+				if (player1Pieces === 0) {
+					endGame(2)
+					return true
+				} else if (player2Pieces === 0) {
+					endGame(1)
+					return true
+				} else if (!hasAnyMoves(currentPlayer === 1 ? 2 : 1)) {
+					endGame(currentPlayer)
+					return true
+				}
+				return false
+			}
+			function endGame(winner) {
+				gameRunning = false
+				newGameButton.style.display = "none"
+				winMessageElement.textContent = `Spieler ${winner} hat gewonnen! (Zum Neustart klicken)`
+				winMessageElement.style.display = "block"
+				winMessageElement.style.backgroundColor = `rgba(${players[winner].color}, 1.0)`
+				cpuToggle.disabled = false
+				winMessageElement.addEventListener("click", initGame, { once: true })
+			}
+			function renderBoard() {
+				boardElement.innerHTML = ""
+				for (let row = 0; row < boardSize; row++) {
+					for (let col = 0; col < boardSize; col++) {
+						const cell = document.createElement("div")
+						cell.classList.add("cell")
+						cell.classList.add((row + col) % 2 === 0 ? "light" : "dark")
+						cell.dataset.row = row
+						cell.dataset.col = col
+						if (validMoves.some((move) => move.row === row && move.col === col)) {
+							cell.classList.add("highlight")
+						}
+						if (selectedPiece && selectedPiece.row === row && selectedPiece.col === col) {
+							cell.classList.add("selected")
+						}
+						const piece = board[row][col]
+						if (piece !== 0) {
+							const pieceElement = document.createElement("div")
+							pieceElement.classList.add("piece")
+							pieceElement.style.setProperty("--player-color", players[piece % 2 === 0 ? 2 : 1].color)
+							if (isKing(piece)) {
+								pieceElement.classList.add("king")
+							}
+							if (getValidMoves(row, col).some((move) => move.capture)) {
+								pieceElement.classList.add("must-capture")
+							} else {
+								pieceElement.classList.remove("must-capture")
+							}
+							cell.appendChild(pieceElement)
+						}
+						cell.addEventListener("click", handleCellClick)
+						boardElement.appendChild(cell)
+					}
+				}
+			}
+			function handleCellClick(event) {
+				if (!gameRunning || (vsCPU && currentPlayer === 2)) return
+				const row = parseInt(event.currentTarget.dataset.row)
+				const col = parseInt(event.currentTarget.dataset.col)
+				if (selectedPiece) {
+					const move = validMoves.find((move) => move.row === row && move.col === col)
+					if (move) {
+						makeMove(selectedPiece.row, selectedPiece.col, move)
+						renderBoard()
+						if (move.capture) {
+							const captureMoves = getValidMoves(move.row, move.col).filter((move) => move.capture)
+							if (captureMoves.length > 0) {
+								selectedPiece = { row: move.row, col: move.col }
+								validMoves = captureMoves
+								return
+							}
+						}
+						selectedPiece = null
+						validMoves = []
+						checkWin() || switchPlayer()
+						return
+					}
+				}
+				if (isPlayerPiece(board[row][col], currentPlayer)) {
+					if (hasAnyCapture()) {
+						const captureMoves = getValidMoves(row, col).filter((move) => move.capture)
+						if (captureMoves.length === 0) return
+						selectedPiece = { row, col }
+						validMoves = captureMoves
+					} else {
+						selectedPiece = { row, col }
+						validMoves = getValidMoves(row, col)
+					}
+					renderBoard()
+				}
+			}
+			function openSavePlayerNamesDialog() {
+				if (!cpuToggle.checked) {
+					inputPlayerName2.value = inputPlayerName2.value === "CPU" ? "Spieler 2" : inputPlayerName2.value
+				} else {
+					inputPlayerName2.value = "CPU"
+				}
+				inputPlayerName2.disabled = cpuToggle.checked
+				document.getElementById("setPlayerNamesWrapperBackdrop").style.display = "block"
+			}
+			savePlayerNamesButton.addEventListener("click", () => {
+				players[1].name = inputPlayerName1.value.length > 0 ? inputPlayerName1.value : "Spieler 1"
+				players[2].name = inputPlayerName2.value.length > 0 ? inputPlayerName2.value : "Spieler 2"
+				document.getElementById("setPlayerNamesWrapperBackdrop").style.display = "none"
+				cpuToggle.disabled = false
+				initGame()
+			})
+			newGameButton.addEventListener("click", openSavePlayerNamesDialog)
+			cpuToggle.addEventListener("click", openSavePlayerNamesDialog)
+			initGame()
+		</script>
 	</body>
 </html>