WFH Bingo

by David Joseph Guzsik

HTML

<svg viewBox="0 0 200 200" class="circle">
  <circle cx="100" cy="100" r="95" stroke="red" fill="transparent"></circle>
</svg>
<h1>WFH Bingo</h1>
<div id="bingo"></div>
<button id="reset">Reset</button>

CSS

body {
  text-align: center;
  font-family: sans-serif;
  user-select: none;
}

body>.circle {
  display: none;
}

.circle circle {
  animation: circle-it .5s ease-in forwards;
}

@keyframes circle-it {
  from {
    stroke-dasharray: 0 10000;
  }

  to {
    stroke-dasharray: 1000 10000;
  }
}

#bingo,
#bingo>.square {
  border: 1px solid black;
}

#bingo {
  display: flex;
  flex-flow: row wrap;
  max-width: 700px;
  margin: 0 auto;
}

#bingo .square {
  display: block;
  flex: 1 1 20%;
  position: relative;
  box-sizing: border-box;
  cursor: pointer;
}

#bingo .square .square-inner {
  padding-top: 100%;
}

#bingo .square .circle,
#bingo .square .square-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#bingo .square .square-content {
  padding: 1rem;
}

#bingo .square .circle {
  width: 100%;
  height: 100%;
}

#reset {
  cursor: pointer;
  border: 1px solid;
  padding: .25rem .5rem;
  background-color: transparent;
  color: #ccc;
  margin-top: 1rem;
}

JavaScript

var options = [
  'sound of a crying kid',
  'sound of a laughing kid',
  'kid pops up in the screenshare',
  'barking dog',
  'bird voices',
  'pet in the screenshare',
  'apologizing for the kid',
  'apologizing for the pet',
  'construction noise in the background',
  'garbage truck noise in the background',
  'hooter sound in the background',
  'washing machine / dishwasher final beeps',
  'neighbor starts drilling',
  'door bell',
  'ringing mobile',
  'chocolate / candy / chips noises',
  'swearing / croaking without mute',
  'kid\'s whining in the background about so much homework',
  '"lunch is ready!" sounds',
  'someone\'s asking in the background',
  'corona/covid19 phrase',
  'covid19 related joke',
  'sound from another adult on WFH',
  'another adult on WFH seen in the background',
  'toilet flush sound',
];
var bingo = document.getElementById('bingo');
var reset = document.getElementById('reset');
var circle = document.querySelector('.circle');
var maxSkew = 5;
var onSquareClick = function(inner) {
  return function(e) {
    e.preventDefault();
    var innerCircle = inner.querySelector('.circle');
    if (innerCircle === null){
    	var clone = circle.cloneNode(true);
      console.log(clone.children[0].transform);
      var cicleNode = clone.children[0];
      cicleNode.setAttribute('transform', 'rotate('+(-90 + Math.round(Math.random()*360))+' 100 100) skewX('+Math.round((Math.random()*maxSkew*2)-maxSkew)+') skewY('+Math.round((Math.random()*maxSkew*2)-maxSkew)+')');
      cicleNode.setAttribute('stroke-width', 2 + Math.round((Math.random()*20))/10);
      inner.appendChild(clone);
    }
    else
      inner.removeChild(innerCircle);
  };
}
reset.addEventListener('click', function(e) {
	e.preventDefault();
  
  var circles = document.querySelectorAll('#bingo .circle');
  for (var i = 0; i < circles.length; i++) {
  	var el = circles[i];
    el.parentNode.removeChild(el);
  }
});
for (var i = 0; i < options.length; i++) {
  var square =...