MutationObserver
HTML
<div class="middle-part">
<div id="textbox">
<div id="star-space">*</div>
<div id="text-section">
<div id="text-field"></div>
<div id="page-navigation"></div>
</div>
</div>
</div>
CSS
.invisible {
opacity: 0;
visibility: hidden;
}
.gone {
display: none;
}
JavaScript
const storedNodes = {
nodesToStay: {},
nodesToMove: {}
};
pageOne = document.createElement("div");
pageTwo = document.createElement("div");
const optionCountObserver = new MutationObserver(() => {
const elementsToStay = Array.from(textField.querySelectorAll(":scope > div:not(.gone)"));
idOfStayingElements = elementsToStay.map(node => node.id);
if (elementsToStay.length > 0) {
for (let i = 0; i < Math.min(6, elementsToStay.length); i++) {
storedNodes["nodesToStay"][elementsToStay[i].id] = elementsToStay[i];
}
}
if (elementsToStay.length > 6){
const elementsToMove = elementsToStay.slice(6);
idOfMovedElements = elementsToMove.map(node => node.id);
for (let i = 0; i < elementsToMove.length; i++) {
storedNodes["nodesToMove"][elementsToMove[i].id] = elementsToMove[i];
document.getElementById(idOfMovedElements[i])?.remove();
delete storedNodes["nodesToStay"][elementsToMove[i].id];
}
}
if (Object.keys(storedNodes["nodesToMove"]).length >= 1) {
if (!gameState["pageNavigationOn"]) {
pageNavigation.classList.remove("gone");
gameState["pageNavigationOn"] = true;
if (!pageNavigation.contains(pageOne)) {
createPageNavigation(pageOne, "Page 1");
}
if...