flip back both cards when both are flipped

by ShaCP

HTML

<div class="one">

</div>
<div class="two">

</div>

CSS

div {
width: 100px;
height: 100px;
background-color: blue;
margin: 1em;
transition: 1s transform linear;
}

.rotate {
  transform: rotateY(180deg);
}

JavaScript

/* https://www.youtube.com/watch?v=3NgVlAscdcA */
/* https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Advanced_techniques#playing_the_sample */

/* code related to sounds */

/* const soundEffectURL = "https://freesound.org/data/previews/51/51702_113976-lq.mp3" */

/* const soundEffect = new Audio(
  "https://freesound.org/data/previews/51/51702_113976-lq.mp3"
); */

import { AudioContext, OfflineAudioContext } from 'https://jspm.dev/standardized-audio-context';

const soundEffectURL = "https://freesound.org/data/previews/51/51702_113976-lq.mp3"

function unlockAudioContext(audioCtx) {
debugger;
  if (audioCtx.state !== 'suspended') return;
  const b = document.body;
  const events = ['touchstart','touchend', 'mousedown','keydown'];
  events.forEach(e => b.addEventListener(e, unlock, false));
  function unlock() { console.log("@unlock"); audioCtx.resume().then(clean); }
  function clean() { events.forEach(e => b.removeEventListener(e, unlock)); }
}

async function getFile(audioContext, filepath) {
  const response = await fetch(filepath);
  const arrayBuffer = await response.arrayBuffer();
  const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
  return audioBuffer;
}


async function setupSample(filePath) {
/*   const AudioContext = window.AudioContext || window.webkitAudioContext; */
  const audioContext = new AudioContext();
  unlockAudioContext(audioContext);
  const audioBuffer = await getFile(audioContext, filePath);

  return function playback(e /* audioContext, audioBuffer, time */ ) {
    const sound = audioContext.createBufferSource();
    sound.buffer = audioBuffer;
    sound.connect(audioContext.destination)
    sound.start(audioContext.currentTime);
  }
}

setupSample(soundEffectURL).then((playback) => document.body.addEventListener("transitionstart", playback));

/* function enableSoundOnIOS() {
  soundEffect.play().then(() => soundEffect.pause());
  document.body.removeEventListener("click", enableSoundOnIOS);
}
 */
/*...