mirror of
https://github.com/NohamR/Pocket-Bird.git
synced 2026-05-25 19:59:38 +00:00
Center windows
This commit is contained in:
25
birb.js
25
birb.js
@@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
Reference in New Issue
Block a user