38 lines
1.3 KiB
JavaScript
38 lines
1.3 KiB
JavaScript
import { APP_VERSION } from '../engine/version.js';
|
|
|
|
/**
|
|
* Persistent banner asking the user to reload when a newer version is deployed.
|
|
* Progress is saved to localStorage continuously, so reloading is safe.
|
|
*/
|
|
export function createUpdateBanner() {
|
|
const element = document.createElement('div');
|
|
element.className = 'update-banner';
|
|
element.id = 'update-banner';
|
|
element.setAttribute('role', 'status');
|
|
element.setAttribute('aria-live', 'polite');
|
|
element.hidden = true;
|
|
|
|
function show(latestVersion) {
|
|
element.innerHTML = `
|
|
<div class="update-banner-text">
|
|
<strong>New version available</strong>
|
|
<span>v${APP_VERSION} → v${latestVersion}</span>
|
|
</div>
|
|
<button class="update-banner-reload" id="btn-update-reload">Reload</button>
|
|
<button class="update-banner-dismiss" id="btn-update-dismiss" aria-label="Dismiss">✕</button>
|
|
`;
|
|
element.hidden = false;
|
|
requestAnimationFrame(() => element.classList.add('visible'));
|
|
|
|
element.querySelector('#btn-update-reload').addEventListener('click', () => {
|
|
window.location.reload();
|
|
});
|
|
element.querySelector('#btn-update-dismiss').addEventListener('click', () => {
|
|
element.classList.remove('visible');
|
|
setTimeout(() => { element.hidden = true; }, 250);
|
|
});
|
|
}
|
|
|
|
return { element, show };
|
|
}
|