36 lines
985 B
JavaScript
36 lines
985 B
JavaScript
|
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];
|
||
|
|
}
|