document.querySelectorAll('.domino').forEach(domino => {
  const topValue = domino.getAttribute('data-top');
  const bottomValue = domino.getAttribute('data-bottom');

  addPips(domino.querySelector('.top'), topValue);
  addPips(domino.querySelector('.bottom'), bottomValue);
});

function addPips(half, value) {
  const pipPositions = getPipPositions(value);
  pipPositions.forEach(pos => {
    const pip = document.createElement('div');
    pip.className = 'pip';
    pip.style.left = pos[0];
    pip.style.top = pos[1];
    half.appendChild(pip);
  });
}

function getPipPositions(value) {
  const p1 = '17%';
  const p2 = '42%';
  const p3 = '67%';

  const positions = {
    0: [],
    1: [[p2, p2]],
    2: [[p1, p1], [p3, p3]],
    3: [[p1, p1], [p2, p2], [p3, p3]],
    4: [[p1, p1], [p1, p3], [p3, p1], [p3, p3]],
    5: [[p1, p1], [p1, p3], [p2, p2], [p3, p1], [p3, p3]],
    6: [[p1, p1], [p1, p3], [p2, p1], [p2, p3], [p3, p1], [p3, p3]],
  };
  return positions[value];
}