Update style.css

style.css

@@ -1,28 +1,366 @@
+@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 {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+	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;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+#game-container {
+	padding: 20px;
+	border-radius: 8px;
+	text-align: center;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
+.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;
-	margin-top: 5px;
+	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:after {
+	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;
+	position: absolute;
+	content: "";
+	width: 80%;
+	height: 80%;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	border-radius: 50%;
+	opacity: 0.4;
+}
+
+@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);*/
+
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.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);
+	}
 
-.card p:last-child {
-	margin-bottom: 0;
+	to {
+		transform: translate(-50%, -50%) rotate(360deg);
+	}
 }