<div class='memory' id='memory'>
	<div class='rectangle on' data-shape='rectangle'></div>
	<div class='triangle on' data-shape='triangle'></div>
	<div class='square on' data-shape='square'></div>
	<div class='drop on' data-shape='drop'></div>
	<div class='drop on' data-shape='drop'></div>
	<div class='rectangle on' data-shape='rectangle'></div>
	<div class='square on' data-shape='square'></div>
	<div class='round on' data-shape='round'></div>
	<div class='triangle on' data-shape='triangle'></div>
	<div class='round on' data-shape='round'></div>
</div>

body{
	display: flex;
	height: 100vh;
	align-items: center;
	justify-content: center;
}

.memory{
	display: flex;
	width: 700px;
	margin: 10x;
	flex-wrap: wrap;
	&.off{
		pointer-events: none;
	}
	> div{
		display: flex;
		width: calc(20% - 30px);
		padding: 20px 0;
		align-items: center;
		justify-content: center;
		margin: 15px;
		background:
		linear-gradient(135deg, #f7f2ea 25%, transparent 25%) -50px 0,
		linear-gradient(225deg, #f7f2ea 25%, transparent 25%) -50px 0,
		linear-gradient(315deg, #f7f2ea 25%, transparent 25%),
		linear-gradient(45deg, #f7f2ea 25%, transparent 25%);
		background-size: 40px 40px;
		background-color: #4b797661;
		cursor: pointer;
		box-shadow: 0 29px 35px rgb(64, 64, 64, 0.2);
		transition: 0.3s ease-in-out;
		&:before{
			content: '';
			display: block;
			opacity: 0;
		}
		&.on, &.first, &.done{
			background: #fff;
			box-shadow: none;
			transform: translate3d(0,-10px,0);
			&:before{
				opacity: 1;
			}
		}
	}
}

.rectangle{
	&:before{
		width: 30px;
		height: 50px;
		border: 10px solid #EC8D28;
	}
}

.triangle{
	&:before{
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 37.5px 0 37.5px 65px;
		border-color: transparent transparent transparent #DF622D;
	}
}

.square{
	&:before{
		width: 65px;
		height: 65px;
		background: #F8BA41;
	}
}

.drop{
	&:before{
		width: 65px;
		height: 65px;
		background: #65A3DA;
		border-radius: 50%;
	}
}

.round{
	&:before{
		width: 45px;
		height: 45px;
		border: 10px solid #4D917E;
		border-radius: 50%;
	}
}

const memory = document.getElementById('memory');
const cards = memory.querySelectorAll('div');
let active;

cards.forEach(function(elt, i){
	setTimeout(() => { elt.classList.remove('on'); }, 500+i*50);
	
	elt.addEventListener('click', () => {
		if( memory.classList.contains('off') ) return;
		
		active = memory.querySelector('.on');
		if( active ){
			
			active.classList.add('first');
			active.classList.remove('on');
			elt.classList.add('on');
			
			if( elt.getAttribute('data-shape') == active.getAttribute('data-shape') ){
				elt.classList.add('done');
				elt.classList.remove('on');
				active.classList.add('done');
				active.classList.remove('first');
			}else{
				memory.classList.add('off');
				setTimeout(() => {
					elt.classList.remove('on');
					active.classList.remove('first');
					memory.classList.remove('off');
				}, 500);
			}
			
		}else{
			elt.classList.add('on');
		}		
		
	});	
});