card game

index.pug

main
	.cards.fixed.changable
		.card-container(card=0)
			.card.front
			.card.back
		.card-container(card=1)
			.card.front
			.card.back
		.card-container(card=2)
			.card.front
			.card.back
		.card-container(card=3)
			.card.front
			.card.back
		button.start Start

aside
	.move.first
		.number 0
		.flips
			.flip.this.flipped.correct
			.flip.correct
			.flip
			.flip.flipped

playground.json

{
  "scripts": [
    "jquery"
  ],
  "styles": [
    "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
  ]
}

script.js

//https://docs.google.com/spreadsheets/d/1EP7Qe0dR3Eu3VzssT2PurSD7Vy2U3Im_FgtW8bHdENc/edit?usp=sharing
const cards = [true, true, true, true]
const flipped = [true, true, true, true]
const step = 0

$(".cards.changable .card-container").click(function(){
	$(this).toggleClass("flipped")
	cards[$(this).attr("card")] = !cards[$(this).attr("card")]
	$(`.move.first .flips`).html(cards.map((x,i) => `<div class="flip ${x ? `correct`:``} ${flipped[i] ? `flipped`:``}"></div>`))
	//$(`.move.first .flips .flip:nth-child(${$(this).attr("card")})`)
	console.log(cards)
})

const addRow = n => {
	$("body").css("--shift", 0)
	$("main").prepend(`<div class="cards">${cards.map(x =>`<div class="card-container ${x ? ``:`flipped`}"><div class="card front"></div><div class="card back"></div></div>`).join("")}</div>`)
	$("aside").prepend(`<div class="move"></div>`)
	setTimeout(()=>{
		$("main,aside").css("transition", ".25s")
		$("body").css("--shift", 1)
		setTimeout(() => {
			$("main,aside").css("transition", "0s")
		}, 250);
	})
}

$("button.start").click(function(){
	addRow()
})

style.scss

body {
	--size:20vw;
	--shift:1;
	display: flex;
	min-height: 100vh;
	font-family: "Segoe UI", Tahoma, Verdana, sans-serif;
	overflow-y:scroll;
	main {
		flex-grow:1;
		position: relative;
		top:calc(var(--shift) * (var(--size) + 6vw));
		.cards {
			display: flex;
			justify-content: space-between;
			padding:3vw;
			perspective: 100rem;
			&:not(.fixed):first-child {
				//opacity:0;
			}
			.card-container {
				position: relative;
				width:calc(.707 * var(--size));
				height:var(--size);
				transition:transform .25s;
				transform-origin: 50% 0%;
				perspective: 50rem;
				.card {
					position: absolute;
					width:100%;
					height:100%;
					backface-visibility:hidden;
					border-radius: 1rem;
					transition:.5s;
					&.front {
						background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/mattparker.png) #5D9CEC no-repeat;
						background-size: 60%;
						background-position: center;
					}
					&.back {
						background:#323133;
						transform:rotateY(180deg);
					}
				}
				&.flipped {
					.card {
						&.front {
							transform:rotateY(180deg);
						}
						&.back {
							transform:rotateY(360deg);
						}
					}
				}
			}
			&:not(.fixed) {
				.card {
					margin:25%;
					width:50%;
					height:50%;
				}
			}
			&.changable {
				.card-container {
					&:hover {
						transform:rotateY(0deg) rotateX(10deg);
					}
				}
			}
			&.fixed {
				z-index:100;
				position: fixed;
				top:0;
				left:0;
				right:15vw;
			}
			.start {
				position: absolute;
				top:100%;
				width:calc(100% - 6vw);
				left:3vw;
				right:3vw;
				text-align: center;
				background:#8CC152;
				color:white;
				padding:1.5vw;
				font-size:1.5rem;
				border-radius:.5rem;
				cursor: pointer;
				border:0;
			}
		}
	}
	aside {
		position: relative;
		top:calc(var(--shift) * (var(--size) + 6vw));
		width:15vw;
		.move {
			position: relative;
			top:calc(var(--size) * -1 - 8vw);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height:var(--size);
			padding:3vw;
			.number {
				font-size: 2rem;
			}
			.flips {
				display: flex;
				margin-top: 1vw;
				.flip {
					position: relative;
					width:1.5vw;
					height:2vw;
					background:#BF263C;
					margin:0 1vw;
					border-radius: .25vw;
					&:before {
						content: '';
						position: absolute;
						bottom:-2.5vw;
						left:50%;
						width:1vw;
						height:1vw;
						border-radius: 100%;
						background:#BF263C;
						transform:translate(-50%,-50%);
					}
					&.this {
						box-shadow: 0 0 0 .25rem rgba(0,0,0,.25);
					}
					&.flipped {
						background:#2ABA66;
					}
					&.correct:before {
						background:#2ABA66;
					}
				}
			}
		}
	}
}