popfile testing

index.pug

.waves
	.subwave(style="--offset:0;--delay:4;--spawning:10;--alive:10")
		.delay
			.candlestick
				.time 4s
		.spawning
			.tag
				span A
			.bots
				.bot.crits
					img(src="https://i.skylarkx.uk/mvm/scout", alt="")
					span 50
				.bot.giant
					img(src="https://i.skylarkx.uk/mvm/demoknight", alt="")
					span 20
		.alive
	.subwave(style="--offset:4;--delay:2;--spawning:5;--alive:20")
		.delay
			.candlestick
				.time 2s
		.spawning
			.tag
				span B
			.bots
				.bot.giant
					img(src="https://i.skylarkx.uk/mvm/soldier", alt="")
					span 5
		.alive
	.subwave(style="--offset:14;--delay:3;--spawning:4;--alive:10")
		.delay
			.candlestick
				.time 3s
		.spawning
			.tag
				span C
			.bots
				.bot.giant.crits
					img(src="https://i.skylarkx.uk/mvm/heavy", alt="")
					span
				.bot.giant
					img(src="https://i.skylarkx.uk/mvm/medic", alt="")
					span
		.alive
	.subwave(style="--offset:21;--delay:0;--spawning:3;--alive:20")
		.spawning
			.tag
				span D
			.bots
				.bot.giant.crits
					img(src="https://i.skylarkx.uk/mvm/tank", alt="")
					span
		.alive

playground.json

{
  "scripts": [],
  "styles": [
    "https://fonts.googleapis.com/css2?family=Alata&display=swap"
  ]
}

script.js

‎‎​

style.scss

body {
	font-family: 'Alata', sans-serif;
	.waves {
		display: grid;
	}
	.subwave {
		position: relative;
		left:calc(var(--offset)*2rem);
		display: flex;
		flex-direction: row;
		margin:.2rem 0;
		.delay {
			display: flex;
			flex-direction: column;
			justify-content: center;
			width:calc(var(--delay)*2rem);
			.candlestick {
				position: relative;
				height:.25rem;
				width:100%;
				background:#666;
				&:before {
					content: '';
					position: absolute;
					top:50%;
					left:0;
					width:.25rem;
					height:1.5rem;
					border-radius: 4rem;
					background:#666;
					transform:translateY(-50%);
				}
				.time {
					position: absolute;
					top:50%;
					left:50%;
					transform:translate(-50%, -50%);
					background:white;
					padding:.25rem;
					font-size: 1.15rem;
				}
			}
		}
		.spawning {
			z-index: 1;
			display: flex;
			min-height:3rem;
			width:calc(var(--spawning)*2rem);
			min-width:4rem;
			background:#666;
			border-radius: 1.5rem;
			.tag {
				display: grid;
				place-items: center;
				height:calc(100% - .5rem);
				margin:.25rem;
				min-width: 2.5rem;
				border-radius: 4rem;
				background:#ffffff;
				color:black;
				font-size:1.5rem;
				span {
					margin-top:-.15rem;
					margin-left: -.1rem;;
				}
			}
			.bots {
				display:flex;
				flex-direction: column;
				justify-content: center;
				flex-grow: 1;
				padding:.2rem;
				.bot {
					display:flex;
					flex-direction: row;
					align-content: center;
					height:2rem;
					margin:.2rem;
					img {
						width:1.5rem;
						height:1.5rem;
						background:#EBE4CA;
						padding:.25rem;
						border-radius: .25rem;
					}
					span {
						color:white;
						margin:.25rem
					}
					&.giant {
						img {
							background:#BF1603;
						}
					}
					&.crits {
						img {
							box-shadow:inset 0 0 0 .1rem #1E87B9,  0 0 0 .1rem #1E87B9;
						}
					}
				}
			}
		}
		.alive {
			width:calc(var(--alive)*2rem);
			margin-left: -2rem;
			background:linear-gradient(90deg, rgba(170, 178, 189, .75), rgba(170, 178, 189,0));
		}
	}
}