61 lines
2.2 KiB
JavaScript
61 lines
2.2 KiB
JavaScript
|
|
||
|
|
function cardsEqual(a, b) {
|
||
|
|
return a.getAttribute('data-color') === b.getAttribute('data-color')
|
||
|
|
&& a.getAttribute('data-shape') === b.getAttribute('data-shape')
|
||
|
|
&& a.getAttribute('data-count') === b.getAttribute('data-count')
|
||
|
|
&& a.getAttribute('data-infill') === b.getAttribute('data-infill');
|
||
|
|
}
|
||
|
|
|
||
|
|
function replaceCard(a, b) {
|
||
|
|
a.innerHTML = b.innerHTML;
|
||
|
|
a.setAttribute('data-color', b.getAttribute('data-color'));
|
||
|
|
a.setAttribute('data-shape', b.getAttribute('data-shape'));
|
||
|
|
a.setAttribute('data-count', b.getAttribute('data-count'));
|
||
|
|
a.setAttribute('data-infill', b.getAttribute('data-infill'));
|
||
|
|
}
|
||
|
|
|
||
|
|
function markNewCard(card) {
|
||
|
|
card.classList.add('new');
|
||
|
|
setTimeout(() => {
|
||
|
|
card.classList.remove('new');
|
||
|
|
}, 3000);
|
||
|
|
}
|
||
|
|
|
||
|
|
function update() {
|
||
|
|
var req = new XMLHttpRequest();
|
||
|
|
req.addEventListener('load', (ev) => {
|
||
|
|
var parser = new DOMParser();
|
||
|
|
var doc = parser.parseFromString(req.responseText, 'text/html');
|
||
|
|
// Replace playing field cards
|
||
|
|
var field = document.getElementById('playingfield');
|
||
|
|
var aNodes = Array.from(field.children);
|
||
|
|
var bNodes = Array.from(doc.getElementById('playingfield').children);
|
||
|
|
for (var i = 0; i < Math.min(aNodes.length, bNodes.length); ++i) {
|
||
|
|
if (!cardsEqual(aNodes[i], bNodes[i])) {
|
||
|
|
replaceCard(aNodes[i], bNodes[i]);
|
||
|
|
markNewCard(aNodes[i]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (bNodes.length < aNodes.length) {
|
||
|
|
for (var i = bNodes.length; i < aNodes.length; ++i) {
|
||
|
|
aNodes[i].remove();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (bNodes.length > aNodes.length) {
|
||
|
|
for (var i = aNodes.length; i < bNodes.length; ++i) {
|
||
|
|
field.appendChild(bNodes[i]);
|
||
|
|
markNewCard(bNodes[i]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// Replace gamestats and scores
|
||
|
|
document.getElementById('gamestats').innerHTML =
|
||
|
|
doc.getElementById('gamestats').innerHTML;
|
||
|
|
document.getElementById('scorelist').innerHTML =
|
||
|
|
doc.getElementById('scorelist').innerHTML;
|
||
|
|
});
|
||
|
|
req.open('GET', window.location.href);
|
||
|
|
req.send();
|
||
|
|
}
|
||
|
|
|
||
|
|
setInterval(update, 500);
|