main.scss

@use "sass:list";

/*
pug index.pug -w
sass main.scss:main.css -w
*/

$blocks: (
	"air",
	"stone",
	"grass",
	"dirt",
	"log",
	"wood",
	"leaves",
	"glass",
);

:root {
	color-scheme: dark;
	--cube-size: 5rem;
	--camera-distance: 50rem;

	--air-image: none;
	--pickaxe-image: url("./assets/pickaxe.png");
	--stone-image: url("./assets/stone.png");
	--grass-image: url("./assets/grass_side_carried.png");
	--grass-top-image: url("./assets/grass_carried.png");
	--dirt-image: url("./assets/dirt.png");
	--log-image: url("./assets/log_oak.png");
	--wood-image: url("./assets/oak_planks.png");
	--log-top-image: url("./assets/log_oak_top.png");
	--leaves-image: url("./assets/azalea_leaves.png");
	--glass-image: url("./assets/glass.png");
	pointer-events: none;
}

body {
	color: white;
	background-color: lightSkyBlue;
	block-size: 100vh;
	block-size: 100dvb;
	margin: 0;
	box-sizing: border-box;
	font-family: system-ui, sans-serif;
	overflow: hidden;

	display: grid;
	place-content: center center;
}

label, button {
	cursor: pointer;
}

h1, p {
	margin: 0;
}

h1, strong {
	font-weight: 600;
}

a {
	color: inherit;
}

.info {
	pointer-events: auto;
	z-index: 1;
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	padding: .75rem;
	margin-inline: auto;
	inline-size: fit-content;
	max-inline-size: min(60rem, 100vw - 10rem);
	background-color: #1117;
	--backdrop-filter: blur(.4rem);
	-webkit-backdrop-filter: var(--backdrop-filter);
	backdrop-filter: var(--backdrop-filter);
	border-radius: .6rem;
	border-start-start-radius: 0;
	border-start-end-radius: 0;
	text-align: center;
	box-shadow: 0 0 1.5rem #0006;
	display: flex;
	align-items: center;
	gap: 1rem;

	& strong {
		color: gold;
	}

	& .text {
		display: flex;
		flex-direction: column;
		gap: .3rem;
	}

	& .close {
		padding-inline: .3rem;

		&::before {
			content: "⨉";
			font-size: 1.5rem;
		}

		& > input[type=checkbox] {
			position: absolute;
			opacity: 0;
			pointer-events: none;
		}
	}

	&:has(.close > input[type=checkbox]:checked) {
		display: none;
	}

	& .not-supported {
		border: 2px solid red;
		background-color: #f004;
		border-radius: .7rem;
		padding: .6rem .4rem;
	}

	@supports selector(:has(a)) {
		& .not-supported {
			display: none;
		}
	}
}

.controls {
	pointer-events: auto;
	z-index: 2;
	position: absolute;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1.25rem;
	border-radius: .8rem;
	box-shadow: 0 0 1.5rem #0006;
	background-color: #2228;
	--backdrop-filter: blur(.3rem);
	-webkit-backdrop-filter: var(--backdrop-filter);
	backdrop-filter: var(--backdrop-filter);
	padding: .75rem;
	padding-block-start: .5rem;
	margin-block-end: .75rem;
	inset-block-end: 0;
	inset-inline: 0;
	margin-inline: auto;
	inline-size: fit-content;
	max-inline-size: calc(100vw - 4rem);

	& .block-chooser {
		display: flex;
		align-items: center;
		gap: .5rem;

		& > label {
			display: block;
			inline-size: 3rem;
			block-size: 3rem;
			border-radius: .3rem;
			box-sizing: border-box;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			image-rendering: pixelated;
			outline-offset: 1px;

			@each $block in $blocks {
				&.#{$block} {
					background-image: var(--#{$block}-image);
				}
			}

			&.air {
				background-image: var(--pickaxe-image);
			}

			&:hover {
				outline: 2px solid silver;
			}

			&:has(> input[type=radio]:checked) {
				outline: 2px solid white;
			}

			& > input[type=radio] {
				position: absolute;
				opacity: 0;
				pointer-events: none;
			}
		}
	}

	@each $block, $_ in $blocks {
		&:has(> .block-chooser > .#{$block} > input[type=radio]:checked) ~ main .cubes-container > .cube:not(.#{$block}) {
			display: none;
		}
	}

	& .block-chooser, & .move-button-pair {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(auto, 1fr));
		justify-items: center;
		// justify-content: center;
		gap: .5rem;

		& > *:not(.label) {
			grid-row: 2;
		}

		& > .label {
			grid-column: 1 / span 2;
			// display: block;
		}
	}

	& .block-chooser > .label {
		grid-column-end: span length($blocks);
	}

	& .move-buttons {
		display: flex;
		align-items: center;
		gap: 1.25rem;

		& button {
			display: grid;
			place-content: center;
			inline-size: 3rem;
			block-size: 3rem;
			border: none;
			border-radius: .3rem;
			background-color: #0003;
			font-size: 1.5rem;

			&:hover {
				background-color: #0005;
			}

			&:active {
				background-color: #0007;
			}
		}
	}

	&:has(.up:active) ~ main .down {
		animation-play-state: running;
	}
	&:has(.down:active) ~ main .up {
		animation-play-state: running;
	}
	&:has(.clockwise:active) ~ main .clockwise {
		animation-play-state: running;
	}
	&:has(.counterclockwise:active) ~ main .counterclockwise {
		animation-play-state: running;
	}
	&:has(.forwards:active) ~ main .backwards {
		animation-play-state: running;
	}
	&:has(.backwards:active) ~ main .forwards {
		animation-play-state: running;
	}
	&:has(.look-up:active) ~ main .look-up {
		animation-play-state: running;
	}
	&:has(.look-down:active) ~ main .look-down {
		animation-play-state: running;
	}
}

main {
	perspective: var(--camera-distance);
	perspective-origin: center center;

	&, & * {
		transform-style: preserve-3d;
	}
}

.content {
	rotate: x -50grad;

	--animation-duration: 10000s;
	--max-translation: 400000rem;
	--max-rotation: 3000turn;

	& .initial-camera-position {
		translate: 0 calc(var(--layers) * var(--cube-size) * .4) calc(var(--camera-distance) - var(--rows) * var(--cube-size) * .9);
	}

	&, & .look-up, & .look-down {
		transform-origin: 0 0 var(--camera-distance);
	}

	& .look-up {
		animation: var(--animation-duration) linear 1ms paused look-up;
		@keyframes look-up {
			from {
				rotate: x 0turn;
			}
			to {
				rotate: x calc(var(--max-rotation));
			}
		}
	}
	& .look-down {
		animation: var(--animation-duration) linear 1ms paused look-down;
		@keyframes look-down {
			from {
				rotate: x 0turn;
			}
			to {
				rotate: x calc(-1 * var(--max-rotation));
			}
		}
	}
	& .down {
		animation: var(--animation-duration) linear 1ms paused move-down;
		@keyframes move-down {
			from {
				translate: 0 0;
			}
			to {
				translate: 0 calc(var(--max-translation));
			}
		}
	}
	& .up {
		animation: var(--animation-duration) linear 1ms paused move-up;
		@keyframes move-up {
			from {
				translate: 0 0;
			}
			to {
				translate: 0 calc(-1 * var(--max-translation));
			}
		}
	}
	& .forwards {
		animation: var(--animation-duration) linear 1ms paused move-forwards;
		@keyframes move-forwards {
			from {
				translate: 0 0 0;
			}
			to {
				translate: 0 0 calc(-1 * var(--max-translation));
			}
		}
	}
	& .backwards {
		animation: var(--animation-duration) linear 1ms paused move-backwards;
		@keyframes move-backwards {
			from {
				translate: 0 0 0;
			}
			to {
				translate: 0 0 calc(var(--max-translation));
			}
		}
	}
	& .clockwise {
		animation: var(--animation-duration) linear 1ms paused rotate-clockwise;
		@keyframes rotate-clockwise {
			from {
				rotate: y 0turn;
			}
			to {
				rotate: y calc(-1 * var(--max-rotation));
			}
		}
	}
	& .counterclockwise {
		animation: var(--animation-duration) linear 1ms paused rotate-counterclockwise;
		@keyframes rotate-counterclockwise {
			from {
				rotate: y 0turn;
			}
			to {
				rotate: y calc(var(--max-rotation));
			}
		}
	}

	.blocks {
		position: relative;
		translate: calc(-.5 * var(--columns) * var(--cube-size)) calc(-.5 * var(--layers) * var(--cube-size)) calc(-.5 * var(--rows) * var(--cube-size));

		.cubes-container {
			pointer-events: auto;
			translate: calc(var(--column) * var(--cube-size)) calc(var(--layer) * var(--cube-size)) calc(var(--row) * var(--cube-size));

			&:has(> .cube.#{list.nth($blocks, 1)} > input[type=radio]:checked) {
				display: none;
			}

			@each $block in $blocks {
				&:has(> .cube.#{$block} > input[type=radio]:checked) {
					--background-image: var(--#{$block}-image);
				}
			}

			.cube {
				position: absolute;
				block-size: var(--cube-size);
				inline-size: var(--cube-size);

				& > input[type=radio] {
					position: absolute;
					opacity: 0;
					pointer-events: none;
				}

				& > label {
					position: absolute;
					inset: 0;
					background-image: var(--background-image);
					image-rendering: pixelated;
					background-size: 100% 100%;
					transform-origin: center center calc(-1 * var(--cube-size) / 2);
					translate: 0 0 calc(var(--cube-size) / 2);
					box-sizing: border-box;

					&.front {
						rotate: y 0grad;
						filter: brightness(92%);
					}
					&.back {
						rotate: y 200grad;
						filter: brightness(68%);
					}
					&.left {
						rotate: y 100grad;
						filter: brightness(76%);
					}
					&.right {
						rotate: y -100grad;
						filter: brightness(84%);
					}
					&.top {
						rotate: x 100grad;
						filter: brightness(100%);
					}
					&.bottom {
						rotate: x -100grad;
						filter: brightness(60%);
					}
				}
			}

			&:has(> .cube.grass > input[type=radio]:checked) > .cube > label {
				&.top {
					background-image: var(--grass-top-image);
				}
				&.bottom {
					background-image: var(--dirt-image);
				}
			}

			&:has(> .cube.log > input[type=radio]:checked) > .cube > label {
				&:is(.top, bottom) {
					background-image: var(--log-top-image);
				}
			}
		}
	}
}

.cubes-container > .cube > label:hover,
.controls:has(.air > input[type=radio]:checked) ~ main .cubes-container:hover > .cube > label {
	--outline-width: calc(var(--cube-size) / 24);
	outline: var(--outline-width) solid white;
	outline-offset: calc(-1 * var(--outline-width));
}

.controls:has(.air > input[type=radio]:checked) ~ main .cubes-container:hover > .cube > label {
	filter: brightness(70%);
}