.wow {
  width: 100px;
}

// -------------
// Draw a Circle

const center = {x: 10, y: 10};
const radius = 5;
const pixels = []
for (let degrees = 0; degrees <= 360; degrees++) {
  const x = center.x + radius * Math.cos(degrees);
  const y = center.y + radius * Math.sin(degrees);
  pixels.push([x, y]);
}

turnOn(pixels);

// --------------
// Library

// You don't need to read this part. This is emulating the "system" functions for our computer : )

const allPixels = [...new Array(20)].map(x => [...new Array(20)].map(_ => ({active: false})));

function renderRow(col, colIdx) {
  return `
    <span style="
      display: block;
      width: 10px;
      height: 10px;
      color: lightgray;
      ${col.active ? "color: red; font-weight: bold;" : ""}
    ">
      .
    </span>
  `;
}

function draw() {
  const html = allPixels.map((row, rowIdx) => {
    return `
      <div style="line-height: 0; display: inline-flex;">
        ${row.map(renderRow).join('')}
      </div>
    `;
  }).join('');
  
  document.body.innerHTML = `
    <div style="
      display: flex;
      flex-direction: column;
      align-items: center;
    ">
      ${html}
    </div>
  `  
}

function turnOn(pixels) {
  window.setTimeout(() => {
    pixels.forEach(([x, y]) => {
      allPixels[Math.round(x)][Math.round(y)] = {active: true}; 
    }) 
    draw();
  })
}