werewolves/werewolves/index.scss

@use 'sass:color';

$wolves_color: rgba(255, 0, 0, 0.7);
$village_color: rgba(0, 0, 255, 0.7);
$connected_color: hsl(120, 68%, 50%);
$disconnected_color: hsl(0, 68%, 50%);
$client_shadow_color: hsl(260, 55%, 61%);
$client_shadow_color_2: hsl(240, 55%, 61%);
$client_filter: drop-shadow(5px 5px 0 $client_shadow_color) drop-shadow(5px 5px 0 $client_shadow_color_2);
$village_border: color.change($village_color, $alpha: 1.0);
$wolves_border: color.change($wolves_color, $alpha: 1.0);
$intel_color: color.adjust($village_color, $hue: -30deg);
$intel_border: color.change($intel_color, $alpha: 1.0);
$defensive_color: color.adjust($intel_color, $hue: -30deg);
$defensive_border: color.change($defensive_color, $alpha: 1.0);
$offensive_color: color.adjust($village_color, $hue: 30deg);
$offensive_border: color.change($offensive_color, $alpha: 1.0);
$starts_as_villager_color: color.adjust($offensive_color, $hue: 30deg);
$starts_as_villager_border: color.change($starts_as_villager_color, $alpha: 1.0);


@mixin flexbox() {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

@mixin flex($values) {
	-webkit-box-flex: $values;
	-moz-box-flex: $values;
	-webkit-flex: $values;
	-ms-flex: $values;
	flex: $values;
}

@mixin order($val) {
	-webkit-box-ordinal-group: $val;
	-moz-box-ordinal-group: $val;
	-ms-flex-order: $val;
	-webkit-order: $val;
	order: $val;
}

.wrapper {
	@include flexbox();
}

.item {
	@include flex(1 200px);
	@include order(2);
}

html,
body {
	margin: 0;
}

body {
	min-height: 100vh;
	font-size: 1.5rem;
	max-width: 100vw;
	min-width: 100vw;
	user-select: none;
	color: rgba(255, 255, 255, 1);
	background: black;
}

.big-screen {
	align-content: center;
	align-items: center;
	justify-content: center;
	height: 100vh;
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	margin: 0;
	font-size: 2rem;
}

$link_color: #432054;
$link_hover_color: hsl(280, 55%, 61%);
$link_bg_color: #fff6d5;
$border_color: #432054;
$shadow_color: hsl(280, 55%, 61%);
$shadow_color_2: hsl(300, 55%, 61%);
$link_filter: drop-shadow(5px 5px 0 $shadow_color) drop-shadow(5px 5px 0 $shadow_color_2);
$link_select_filter: invert(100%);

$error_color: hsla(0, 95%, 61%, 0.7);
$error_shadow_color: hsla(340, 95%, 61%, 0.7);
$error_shadow_color_2: hsla(0, 95%, 61%, 0.7);
$error_filter: drop-shadow(5px 5px 0 $error_shadow_color) drop-shadow(5px 5px 0 $error_shadow_color_2);


nav.debug-nav {


	position: sticky;
	backdrop-filter: brightness(70%);
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	padding-bottom: 10px;
	padding-top: 10px;
	padding-left: 5vw;
	padding-right: 5vw;
	gap: 10px;

}


.default-button {
	font-size: 1.3rem;
	border: 1px solid rgba(255, 255, 255, 1);
	padding: 5px;
	background-color: black;
	color: #cccccc;
	cursor: pointer;
	width: fit-content;
	text-align: center;

	&:hover {
		background-color: white;
		color: invert(#cccccc);
	}
}

.player-list {
	padding-bottom: 80px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
	justify-items: center;
	justify-content: space-evenly;
}

.player {
	flex-grow: 0;
	display: flex;
	justify-content: stretch;

	margin: 0px;
	min-width: 10rem;
	max-width: 10vw;
	height: 4rem;
	text-align: center;

	justify-content: center;
	font-family: 'Cute Font';

	&.marked {
		filter: hue-rotate(90deg);
	}

	block-size: max-content;

	&>button {
		width: 100%;
		height: 100%;
		border: 1px solid $disconnected_color;
		background-color: color.change($disconnected_color, $alpha: 0.15);
		color: $disconnected_color;

		&:hover {
			filter: brightness(150%);
			background-color: color.change($disconnected_color, $alpha: 0.15);
			color: $disconnected_color;
		}
	}

	&.connected {
		&>button {
			background-color: color.change($connected_color, $alpha: 0.15);
			border: 1px solid $connected_color;
			color: $connected_color;

			&:hover {
				filter: brightness(150%);
			}
		}
	}


	&.dead {
		filter: grayscale(100%);
	}

	.number {
		padding-top: 3px;
		margin: 0px;

		&.not-set {
			border: 2px solid rgba(255, 0, 0, 0.3);
			background-color: rgba(255, 0, 0, 0.7);
		}
	}
}

.submenu {
	background-color: black;
	border: 1px solid rgba(255, 255, 255, 0.7);
	padding: 10px;
	position: relative;
	// position: fixed;
	// left: 0%;

	// top: 1px;
	align-self: stretch;
	z-index: 5;

	& button {
		width: 100%;
	}

	&>label {
		font-size: 1rem;
		margin-bottom: 0;
	}
}

.click-backdrop {
	z-index: 4;
	background-color: rgba(0, 0, 0, 0.7);
	position: fixed;
	top: 0;
	left: 0;
	height: 200vh;
	width: 100vw;
	background-size: cover;
}

.player-container {
	width: 100%;
	margin-left: 10vw;
	margin-right: 10vw;
}

.start-game {
	align-self: center;
	margin-bottom: 30px;
	font-size: 2rem;
	// background-color: hsl(283, 100%, 80%);
	border: 1px solid rgba(0, 255, 0, 0.7);
	background-color: black;
	color: rgba(0, 255, 0, 0.7);
	cursor: pointer;

	position: relative;
	display: inline-flex;
	justify-content: center;

	&:hover {
		background-color: rgba(0, 255, 0, 0.3);
	}

	&:disabled {
		border: 1px solid rgba(255, 0, 0, 1);
		color: rgba(255, 0, 0, 1);
		filter: none;

		&:hover {
			background-color: rgba(255, 0, 0, 0.3);
			filter: none;
		}
	}
}

button {
	font-size: 1rem;
	font-family: 'Cute Font';
	padding-top: 2px;
	padding-bottom: 2px;

	border: none;

	outline: inherit;
	padding-left: 5px;
	padding-right: 5px;
	background-color: #000;

	&:disabled {
		background-color: rgba(128, 128, 128, 0.5);
		color: rgb(128, 128, 128);
		cursor: not-allowed;
	}

	&:disabled:hover::after {
		content: attr(reason);
		position: absolute;
		margin-top: 10px;
		top: 90%;
		// left: 0;
		font: 'Cute Font';
		// color: #000;
		// background-color: #fff;
		color: rgba(255, 0, 0, 1);
		background-color: rgba(255, 0, 0, 0.3);
		border: 1px solid rgba(255, 0, 0, 0.3);
		min-width: 50vw;
		width: fit-content;
		padding: 3px;
		z-index: 4;
	}
}


.settings {
	list-style: none;

	font-family: 'Cute Font';
	display: flex;
	flex-direction: column;
	margin-left: 20px;
	margin-right: 20px;

	gap: 30px;

	&>p {
		text-align: center;
		margin: 0px;
		padding: 0px;
		font-size: 0.7em;
	}
}

.wolves-intro {
	@extend .column-list;
	align-content: center;
	width: 100%;

	.wolves-list {
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-evenly;
		flex: 1 1 0;
	}

	& button {
		align-self: center;
	}
}

.character {
	text-align: center;
	border: 3px solid rgba(0, 0, 0, 0.4);

	.role {
		font-size: 2rem;
	}


}

h1,
h2,
h3,
h4 {
	text-align: center;
}

button.confirm {
	align-self: center;
	margin: 30px;
	font-size: 2rem;
}

.roles-in-setup {
	border: 1px solid rgba(255, 255, 255, 0.6);
	padding: 10px;

	&>h3 {
		margin: 0;
		text-align: center;
		color: rgba(255, 255, 255, 0.6);
	}
}

.role-list {
	list-style: none;

	font-family: 'Cute Font';
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	padding: 20px;

	gap: 10px;
}

.role-card {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	min-width: 320px;
}


.role-card button {
	min-width: 25px;
	min-height: 25px;
	background-color: rgba(255, 255, 255, 0.3);
	margin: 0px;
	margin-left: 10px;
	margin-right: 10px;
	cursor: pointer;

	&:hover {
		background-color: rgba(255, 255, 255, 0.7);
	}
}

rolecard {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	width: 100%;
	text-align: center;
	// gap: 20px;
	justify-content: space-between;
}



bool_spacer {
	min-width: 25px;
	min-height: 25px;
	margin: 0px;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
	background-color: rgba(255, 255, 255, 0.5);
}

bool_role {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	width: 100%;
	text-align: center;
	// gap: 20px;
	justify-content: space-between;
}

.wolves {
	background-color: $wolves_color;
}

.role-card.wolves bool_role input[type="checkbox"] {
	min-width: 25px;
	min-height: 25px;
	opacity: 100%;
	accent-color: $wolves_color;
	margin: 0px;
	margin-left: 10px;
	margin-right: 10px;
}


.role-card.village bool_role input[type="checkbox"] {
	min-width: 25px;
	min-height: 25px;
	opacity: 100%;
	accent-color: $village_color;
	margin: 0px;
	margin-left: 10px;
	margin-right: 10px;
}

.error-container {
	position: fixed;
	top: 10vh;
	width: 100vw;
	display: flex;
	flex-direction: row;
	align-content: center;
}

.error-container button {
	background: transparent;
	font-size: 2rem;
	position: sticky;
	display: inline-block;

	&:hover {
		filter: invert(20%);
		font-size: 3rem;
	}
}

.error-message {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 80%;
	margin: 30px;
	text-align: center;
	// gap: 20px;
	justify-content: center;
	gap: 30px;
	background-color: $error_color;
	border: 1px solid color.change($error_color, $alpha: 1.0);
	backdrop-filter: grayscale(100%);


	padding-left: 5vw;
	padding-right: 5vw;
}


.character {
	background-color: $village_color;
	width: fit-content;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin: 10px;

	&.wolves {
		background-color: $wolves_color;
	}
}


.character.selected {
	filter: hue-rotate(30deg);
}

.character:hover {
	filter: brightness(80%);
}


client {
	list-style: none;

	font-family: 'Cute Font';
	// font-size: 0.7rem;
	display: flex;
	// flex-wrap: wrap;
	flex-direction: column;
	margin-left: 20px;
	margin-right: 20px;
	padding: 30px;

	gap: 30px;
	border: 2px solid black;
}

clients {
	list-style: none;

	font-family: 'Cute Font';
	// font-size: 0.7rem;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	font-size: 2rem;
}

.role-reveal-cards {
	list-style: none;
	// max-width: 80vw;

	font-family: 'Cute Font';
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-evenly;
	color: black;
	// align-content: stretch;
	// flex: 1 1 0px;

	gap: 10px;
}

.role-reveal-card {
	min-width: 5cm;
	display: flex;
	align-items: center;
	align-content: center;
	flex-direction: column;
	gap: 10px;
	padding: 10px;
	border: 1px solid $wolves_color;
	background-color: color.change($wolves_color, $alpha: 0.1);
	min-width: 100px;
	color: white;

	& p.number {
		font-size: 2rem;
	}

	& p {
		text-align: center;
	}

	&>button {
		border: 1px solid $wolves_color;
		$bg: color.change($wolves_color, $alpha: 0.2);
		background-color: $bg;

		&:hover {
			background-color: white;
			color: color.change($wolves_color, $alpha: 1.0);
		}
	}

	&.ready {
		border: 1px solid $village_color;
		background-color: color.change($village_color, $alpha: 0.2);
	}
}

.pronouns {
	font-size: 70%;
	filter: opacity(70%);
}

.row-list {
	list-style: none;

	font-family: 'Cute Font';
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	font-size: 2rem;

	justify-content: center;
	align-content: center;
	align-items: center;

	&.margin-20 {
		margin-left: 20px;
		margin-right: 20px;
	}

	&.margin-5 {
		margin-left: 5px;
		margin-right: 5px;
	}
}

.gap {
	gap: 10px;
}



.column-list {
	list-style: none;
	justify-content: center;
	align-content: center;
	align-items: center;

	font-family: 'Cute Font';

	display: flex;
	flex-direction: column;
	font-size: 2rem;
	margin-left: 20px;
	margin-right: 20px;

	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
}

.box {
	border: solid 3px;
	border-color: #432054;
}

.content {
	margin-left: 5vw;
	margin-right: 5vw;
	margin-top: 30px;
	display: flex;
	flex-basis: content;
}

.sp-ace {
	margin: 10px;
}

.cover-of-darkness {
	background-color: #000;
	color: #fff;
	font-size: 3rem;
	position: fixed;
	bottom: 0;
	right: 0;
	height: 100vh;
	width: 100vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;

	& button {
		width: fit-content;
		text-align: center;
		align-self: center;
	}
}

.small {
	font-size: 1.2rem;
}

.client-nav {
	// position: absolute;
	// left: 0;
	// top: 0;
	width: 100%;
	padding: 10px;
	// background-color: rgba(255, 107, 255, 0.2);
	display: flex;
	flex-direction: row;
	justify-content: baseline;
	gap: 10px;
}

.ident {
	gap: 0px;
	margin: 0px;
	padding: 0px;

	.submenu {
		margin-top: 10px;
		margin-bottom: 10px;
		// display: flex;
		justify-content: center;
		// visibility: collapse;
		display: none;
		z-index: 5;

		.button-container {
			display: flex;
			align-items: stretch;
		}

		&.shown {
			// visibility: visible;
			display: flex;
			flex-direction: row;
			align-items: baseline;
			// position: absolute;
		}

		button {
			font-size: 1rem;
		}
	}

	&:active,
	&:focus,
	&:hover {
		.submenu {
			// visibility: visible;
			display: flex;
		}
	}
}

.baseline {
	align-items: baseline;
	// justify-content: space-evenly;
}

error {
	position: absolute;
	top: 0;
	left: 0;
}

.identity {
	list-style: none;

	font-family: 'Cute Font';
	display: flex;
	flex-direction: column;
	gap: 0px;
	font-size: 1rem;
	justify-content: flex-start;
	margin: 0px;
	padding: 0px;

	p {
		margin: 0px;
		padding: 0px;
	}
}

.binary {
	.button-container {
		background-color: $village_color;
		border: 3px solid darken($village_color, 20%);
		text-align: center;
		padding: 0;
		margin: 0;
		display: flex;
		flex: 1 1 0;

		button {
			font-size: 3rem;
			font-weight: bold;
			align-self: center;
			padding: 20px;
			width: 100%;
			height: 100%;
			margin: 0;
		}
	}
}

input {
	background-color: rgba(255, 255, 255, 0.1);
	color: white;
	border: 2px solid rgba(255, 255, 255, 0.2);
	margin: 10px;
}

.signin {
	@extend .row-list;
	justify-content: center;
	text-align: center;

	& label {
		font-size: 1.5rem;
	}

	& input {
		height: 2rem;
		text-align: center;

		&#number {
			font-size: 2rem;
		}
	}
}

.info-update {
	font-size: 2rem;
	align-content: stretch;
	margin: 0;

	& * {
		margin: 0;
		width: 100%;
		text-align: center;
	}
}

.game-start-role {
	@extend .column-list;
	text-align: center;
	align-items: center;

	&>button {
		font-size: 1.5rem;
		width: min(5cm, 30vw);
	}
}

.client-lobby-player-list {
	@extend .column-list;
	gap: 10px;

	&>.identity {
		align-self: flex-start;
	}

	&>button {
		width: 90vw;
		align-self: center;
		$leave_color: rgba(255, 0, 0, 0.6);
		color: $leave_color;
		border: 1px solid $leave_color;

		&:hover {
			background-color: $leave_color;
			color: black;
		}

		margin-bottom: 1cm;
	}

	&>.list-actual {
		@extend .row-list;
		align-items: stretch;
		align-content: stretch;
		margin: 0;

		gap: 10px;

		width: 100%;

		&>* {
			width: 4cm;
			border: 1px solid white;
			padding: 10px;
			text-align: center;

			&:hover {
				background-color: #fff;
				color: #000;
			}
		}
	}

}

.character-picker,
.target-picker {
	display: flex;
	flex-direction: column;
	width: 100%;
	align-items: center;
	color: white;
	$marked_bg: color.change($wolves_color, $alpha: 0.3);
	$marked_border: color.change($wolves_color, $alpha: 1.0);
	$village_bg: color.change($village_color, $alpha: 0.3);
	$village_border: color.change($village_color, $alpha: 1.0);

	.character {
		padding: 0.5cm;

		& * {
			font-size: 1.5rem;
		}

		&.marked {
			background-color: $marked_bg;
			border: 1px solid $marked_border;

			&:hover {
				color: white;
				background-color: $marked_border;
			}
		}

		&.dead {
			filter: saturate(0%);
			border: 1px solid rgba(255, 255, 255, 0.05);
		}

		&.recent-death {
			$bg: rgba(128, 128, 128, 0.5);
			background-color: $bg;
			border: 1px solid color.change($bg, $alpha: 1.0);

			&:hover {
				background-color: color.change($bg, $alpha: 1.0);
			}
		}

		background-color: $village_bg;
		border: 1px solid $village_border;

		&:hover {
			color: white;
			background-color: $village_border;
		}
	}
}

.align-start {
	align-self: flex-start;
}

.align-end {
	align-self: flex-end;
}

.increment-decrement {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	text-align: center;
	justify-content: center;
	align-items: center;
	align-content: center;

	&>p {
		height: 100%;
		width: 100%;
	}

}

.setup-slot {
	text-align: center;

	& button label {
		color: white;
		cursor: pointer;
	}

	&>.submenu {
		min-width: 5cm;

		.assign-list {
			min-width: 5cm;

			& .submenu button {
				width: inherit;
			}
		}
	}
}

.add-role {
	color: white;
}


.village {
	background-color: $village_color;
	border: 1px solid $village_border;

	&:hover {
		color: white;
		background-color: $village_border;
	}
}

.wolves {
	background-color: $wolves_color;
	border: 1px solid $wolves_border;

	&:hover {
		color: white;
		background-color: $wolves_border;
	}
}

.intel {
	background-color: $intel_color;
	border: 1px solid $intel_border;

	&:hover {
		color: white;
		background-color: $intel_border;
	}
}

.defensive {
	background-color: $defensive_color;
	border: 1px solid $defensive_border;

	&:hover {
		color: white;
		background-color: $defensive_border;
	}
}

.offensive {
	background-color: $offensive_color;
	border: 1px solid $offensive_border;

	&:hover {
		color: white;
		background-color: $offensive_border;
	}
}

.starts-as-villager {
	background-color: $starts_as_villager_color;
	border: 1px solid $starts_as_villager_border;

	&:hover {
		color: white;
		background-color: $starts_as_villager_border;
	}
}

.assignments {
	display: flex;
	flex-direction: row;
	gap: 0;
	flex-wrap: wrap;
	font-size: 0.5em;
	gap: 10px;

	.assignment {
		color: white;
		text-align: center;
		padding-left: 10px;
		padding-right: 10px;
		// border: 1px solid white;

		&>* {
			cursor: pointer;
		}
	}
}

.roles-add-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	row-gap: 10px;

	font-size: 2em;
}

.top-settings {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
}

.setup-screen {
	width: 80%;
	height: 80%;
	position: fixed;
	left: 10%;
	top: 10%;
	font-size: 1rem;

	.setup {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 5%;
		width: 100%;
		height: 80%;
	}

	.category {
		margin-bottom: 30px;
		width: 30%;
		text-align: center;
		display: flex;
		flex-direction: column;

		&.final {
			margin-top: 1cm;
		}

		& .title {
			margin-bottom: 10px;
		}

		& .count {
			left: -30px;
			position: relative;
			width: 0;
			height: 0;
		}

		.category-list {
			text-align: left;
			flex: 1, 1, 100%;
			display: flex;
			flex-wrap: nowrap;
			flex-direction: column;
			gap: 5px;

			.slot {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;

				.attributes {
					margin-left: 10px;
					align-self: flex-end;
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					gap: 10px;

					.icon {
						width: 32px;
						height: 32px;

						&:hover {
							filter: contrast(120%) brightness(120%);
						}
					}
				}

				.role {
					width: 100%;
					filter: saturate(40%);
					padding-left: 10px;
					padding-right: 10px;

					&.wakes {
						border: 2px solid yellow;
					}
				}
			}
		}
	}
}

.inactive {
	filter: grayscale(100%) brightness(30%);
}

.qrcode {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	z-index: 100;
	position: fixed;
	top: 0;
	left: 0;
	margin: 5vw;
	width: 90vw;
	height: 90vh;
	gap: 1cm;

	img {
		height: 70%;
		width: 100%;
	}

	.details {
		// height: 100%;
		// width: 100%;
		border: 1px solid $village_border;
		background-color: color.change($village_color, $alpha: 0.3);

		text-align: center;
		// width: fit-content;

		&>* {
			margin-top: 0.5cm;
			margin-bottom: 0.5cm;
			// padding: 0;
		}
	}
}

.result {
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

.result-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	justify-content: space-evenly;
	row-gap: 0.5cm;

	.identity {
		padding: 1cm;
		border: 1px solid white;
		font-size: 2em;
		text-align: center;
	}
}

.check-icon {
	width: 40vw;
	height: 40vh;
	// margin-top: 10%;
	align-self: center;
}

.insomniac {
	display: flex;
	width: 100%;
	height: 100%;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	&.prompt {
		font-size: 2em;
	}
}

.arcanist-result {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	width: 100%;
	gap: 10px;

	img {
		// flex-shrink: 1 !important;
		width: max-content !important;
		height: max-content !important;
	}
}