hippie/source/style/modules/_game.scss

@use 'sass:list';
@use "sass:map";

@use "../hippie-style/hippie";

$colors: hippie.$color_palette;
$steps: (0, 14.28, 28.57, 42.85, 57.14, 71.43, 100);

@function getColor($index, $colors) {
	$color_keys: map.keys($colors);
	$key_count: list.length($color_keys);
	$cycled_index: ($index % $key_count) + 1;
	$key: list.nth($color_keys, $cycled_index);
	@return map.get($colors, $key);
}

@mixin fadeColors($steps, $colors) {
	@keyframes fadeColor {
		@for $i from 1 through list.length($steps) {
			$percent: list.nth($steps, $i);
			$color: getColor($i - 1, $colors);

			#{$percent}% {
				background-color: $color;
			}
		}
	}

	animation: fadeColor 16s infinite linear;
}

.body_menu {
	@extend .h_full_view;
	background-color: hotpink;

	footer {
		@extend .pos_abs;
		@extend .pin_bottom;
		@extend .width_full;

		.brand {
			display: flex;
			flex-flow: row nowrap;
			align-items: center;
			justify-content: flex-end;
			gap: hippie.$space_half hippie.$space_basic;

			margin: hippie.$space_basic hippie.$space_double;

			& > svg {
				height: 32px;
				width: 32px;
			}
		}
	}
}

.body_fpv {
	@extend .h_full_view;

	canvas {
		@include fadeColors($steps, $colors);

		display: block;
		cursor: none;
	}

	.controls {
		position: fixed;
		top: 0;
		left: 0;
		border-radius: hippie.$radius_basic;
	}
}

.body_tfw {
	@extend .h_full_view;

	display: flex;
	flex-flow: column nowrap;

	th,
	.important {
		color: white;
		background-color: hippie.basic_color(echo);
	}

	.important {
		padding: hippie.$space_half;
		border-block: hippie.$width_border_basic solid hippie.$color_back_basic;
		font-weight: bold;
	}

	.subtle {
		@extend .txt_smaller;

		color: hippie.$color_darkest;
		text-transform: uppercase;
	}

	.success {
		color: hippie.basic_color(alpha);
	}

	& > header {
		& > button.active {
			border-color: hippie.$color_highlight_basic;
			color: hippie.$color_highlight_basic;
			background-color: hippie.$color_action_basic;
		}

		& > button:not(:first-child, :last-child, :nth-child(2)) {
			flex: 1;
		}
	}

	& > div {
		display: flex;
		flex-flow: column nowrap;
		flex: auto;
		min-height: 0;

		& > main {
			display: flex;
			flex-flow: row nowrap;
			flex: auto;
			gap: hippie.$space_double;
			min-height: 0;

			& > div:first-child {
				flex: 1;
			}

			& > div:last-child {
				flex: 2;
			}

			& > div:nth-child(2) {
				flex: 4;
				display: flex;
				flex-flow: column nowrap;
				gap: hippie.$space_basic;
				min-height: 0;

				div:first-child {
					flex: auto;
					overflow: auto;
					min-height: 0;
				}

				div:last-child {
					flex: 0 0 auto;
				}
			}

			nav {
				& > *:not(:last-child) {
					margin-bottom: hippie.$space_basic;
				}

				input:not([type="checkbox"], [type="range"]) {
					@extend .input_io;
				}
			}

			table {
				table-layout: fixed;
				width: 100%;
				margin: 0;

				th {
					text-align: center;
				}

				td {
					position: relative;
					height: 4em;
					vertical-align: top;

					span {
						z-index: map.get(hippie.$z-indexes, "content-bottom");
						position: relative;
						color: white;
					}

					canvas {
						z-index: map.get(hippie.$z-indexes, "default");
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
					}

					&:last-child {
						text-align: center;
						vertical-align: middle;
					}
				}

				.l {
					width: 30%;
				}

				.q {
					width: 50%;
				}

				.t, .s {
					width: 20%;
				}
			}
		}

		& > footer {
			justify-content: space-between;
			padding: hippie.$space_basic;

			& > button:last-child {
				//margin-left: auto;
				padding-inline: 2em;
			}
		}
	}
}