Center windows

This commit is contained in:
Idrees Hassan
2025-01-05 17:36:32 -05:00
parent 56c727cc70
commit 428153cb8d

25
birb.js
View File

@@ -157,10 +157,12 @@ const styles = `
.birb-window-close { .birb-window-close {
position: absolute; position: absolute;
top: 1px; top: 1px;
right: 5px; right: 0;
opacity: 0.35; opacity: 0.35;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
padding-left: 5px;
padding-right: 5px;
} }
.birb-window-close:hover { .birb-window-close:hover {
@@ -310,6 +312,7 @@ const styles = `
padding: 8px; padding: 8px;
padding-top: 4px; padding-top: 4px;
padding-bottom: 4px; padding-bottom: 4px;
margin-bottom: 6px;
font-size: 14px; font-size: 14px;
color: rgb(124, 108, 75); color: rgb(124, 108, 75);
} }
@@ -1197,6 +1200,14 @@ Promise.all([loadSpritesheetPixels(SPRITE_SHEET_URI), loadSpritesheetPixels(DECO
// insertDecoration(); // insertDecoration();
// insertFieldGuide(); // insertFieldGuide();
/**
* @param {HTMLElement} element
*/
function centerElement(element) {
element.style.left = `${window.innerWidth / 2 - element.offsetWidth / 2}px`;
element.style.top = `${window.innerHeight / 2 - element.offsetHeight / 2}px`;
}
/** /**
* @param {string} title * @param {string} title
* @param {string} message * @param {string} message
@@ -1218,8 +1229,6 @@ Promise.all([loadSpritesheetPixels(SPRITE_SHEET_URI), loadSpritesheetPixels(DECO
const modal = makeElement("birb-window"); const modal = makeElement("birb-window");
modal.style.width = "270px"; modal.style.width = "270px";
modal.innerHTML = html; modal.innerHTML = html;
modal.style.left = `${window.innerWidth / 2 - 115}px`;
modal.style.top = `${window.innerHeight / 2 - 115}px`;
document.body.appendChild(modal); document.body.appendChild(modal);
makeDraggable(modal.querySelector(".birb-window-header")); makeDraggable(modal.querySelector(".birb-window-header"));
@@ -1229,6 +1238,7 @@ Promise.all([loadSpritesheetPixels(SPRITE_SHEET_URI), loadSpritesheetPixels(DECO
modal.remove(); modal.remove();
}, closeButton); }, closeButton);
} }
centerElement(modal);
} }
function insertFieldGuide() { function insertFieldGuide() {
@@ -1246,8 +1256,6 @@ Promise.all([loadSpritesheetPixels(SPRITE_SHEET_URI), loadSpritesheetPixels(DECO
</div>` </div>`
const fieldGuide = makeElement("birb-window", undefined, FIELD_GUIDE_ID); const fieldGuide = makeElement("birb-window", undefined, FIELD_GUIDE_ID);
fieldGuide.innerHTML = html; fieldGuide.innerHTML = html;
fieldGuide.style.left = `${window.innerWidth / 2 - 115}px`;
fieldGuide.style.top = `${window.innerHeight / 2 - 115}px`;
document.body.appendChild(fieldGuide); document.body.appendChild(fieldGuide);
makeDraggable(fieldGuide.querySelector(".birb-window-header")); makeDraggable(fieldGuide.querySelector(".birb-window-header"));
@@ -1310,6 +1318,7 @@ Promise.all([loadSpritesheetPixels(SPRITE_SHEET_URI), loadSpritesheetPixels(DECO
description.innerHTML = generateDescription(currentSpecies); description.innerHTML = generateDescription(currentSpecies);
}); });
} }
centerElement(fieldGuide);
} }
/** /**
@@ -1355,8 +1364,6 @@ Promise.all([loadSpritesheetPixels(SPRITE_SHEET_URI), loadSpritesheetPixels(DECO
</div>` </div>`
const pico8 = makeElement("birb-window"); const pico8 = makeElement("birb-window");
pico8.innerHTML = html; pico8.innerHTML = html;
pico8.style.left = `${window.innerWidth / 2 - 115}px`;
pico8.style.top = `${window.innerHeight / 2 - 115}px`;
document.body.appendChild(pico8); document.body.appendChild(pico8);
makeDraggable(pico8.querySelector(".birb-window-header")); makeDraggable(pico8.querySelector(".birb-window-header"));
const close = pico8.querySelector(".birb-window-close"); const close = pico8.querySelector(".birb-window-close");
@@ -1365,6 +1372,7 @@ Promise.all([loadSpritesheetPixels(SPRITE_SHEET_URI), loadSpritesheetPixels(DECO
pico8.remove(); pico8.remove();
}, close); }, close);
} }
centerElement(pico8);
} }
function insertMusicPlayer() { function insertMusicPlayer() {
@@ -1378,8 +1386,6 @@ Promise.all([loadSpritesheetPixels(SPRITE_SHEET_URI), loadSpritesheetPixels(DECO
</div>`; </div>`;
const pico8 = makeElement("birb-window"); const pico8 = makeElement("birb-window");
pico8.innerHTML = html; pico8.innerHTML = html;
pico8.style.left = `${window.innerWidth / 2 - 115}px`;
pico8.style.top = `${window.innerHeight / 2 - 115}px`;
document.body.appendChild(pico8); document.body.appendChild(pico8);
makeDraggable(pico8.querySelector(".birb-window-header")); makeDraggable(pico8.querySelector(".birb-window-header"));
const close = pico8.querySelector(".birb-window-close"); const close = pico8.querySelector(".birb-window-close");
@@ -1388,6 +1394,7 @@ Promise.all([loadSpritesheetPixels(SPRITE_SHEET_URI), loadSpritesheetPixels(DECO
pico8.remove(); pico8.remove();
}, close); }, close);
} }
centerElement(pico8);
} }
/** /**