123 lines
4.1 KiB
JavaScript
123 lines
4.1 KiB
JavaScript
import { Application } from "pixi.js";
|
|
|
|
export const app = new Application();
|
|
|
|
let manuelResizeCallback = null;
|
|
|
|
/**
|
|
* Startet die PixiJS-Engine und hängt das Canvas in das HTML-Dokument ein.
|
|
*
|
|
* @param {string} containerId - Die HTML-ID des divs, in das PixiJS gerendert werden soll.
|
|
*/
|
|
export async function initPixi(containerId) {
|
|
await app.init({
|
|
resizeTo: window,
|
|
backgroundAlpha: 0,
|
|
antialias: true,
|
|
resolution: window.devicePixelRatio || 1,
|
|
autoDensity: true
|
|
});
|
|
document.getElementById(containerId).appendChild(app.canvas);
|
|
}
|
|
|
|
/**
|
|
* Übernimmt die gesammte responsive Skalierungslogik für unsere PixiJS-Element.
|
|
* Wir übergeben hier alle Container, die flexible auf Fenstergrößen reagieren müssen.
|
|
*
|
|
* @param {Object} refs - Ein Paket mit allen UI-Containern.
|
|
*/
|
|
export function setupResize(refs) {
|
|
const {
|
|
background, discordContainer, logoContainer, uiContainer,
|
|
panelFrame, lobbyPixiContainer, footerBackground, footerPattern,
|
|
footerBackgroundContainer
|
|
} = refs;
|
|
|
|
function resize() {
|
|
const screenWidth = window.innerWidth;
|
|
const screenHeight = window.innerHeight;
|
|
|
|
if (background && background.texture) {
|
|
const scaleX = screenWidth / background.texture.width;
|
|
const scaleY = screenHeight / background.texture.height;
|
|
const scale = Math.max(scaleX, scaleY);
|
|
background.scale.set(scale);
|
|
background.x = (screenWidth - background.width) / 2;
|
|
background.y = (screenHeight - background.height) / 2;
|
|
}
|
|
|
|
let panelScale = 1.0;
|
|
let panelOffsetY = 0;
|
|
|
|
if (screenHeight <= 500){
|
|
panelScale = 0.4;
|
|
panelOffsetY = 0;
|
|
discordContainer.position.set(-420, 350);
|
|
logoContainer.position.set(-300, 150);
|
|
logoContainer.scale.set(1.3);
|
|
} else if (screenWidth <= 600) {
|
|
panelScale = 0.7;
|
|
panelOffsetY = 0;
|
|
discordContainer.position.set(125, 520);
|
|
logoContainer.position.set(250, -120);
|
|
logoContainer.scale.set(0.7);
|
|
} else {
|
|
panelScale = 1.0;
|
|
panelOffsetY = 0;
|
|
discordContainer.position.set(640, 380);
|
|
logoContainer.position.set(250, -120);
|
|
logoContainer.scale.set(1.0);
|
|
|
|
if (screenHeight <= 1050) {
|
|
panelOffsetY = 80;
|
|
}
|
|
}
|
|
|
|
uiContainer.scale.set(panelScale);
|
|
uiContainer.x = (screenWidth - (panelFrame.width * panelScale)) / 2;
|
|
uiContainer.y = ((screenHeight - (panelFrame.height * panelScale)) / 2) + panelOffsetY;
|
|
|
|
let lobbyScale = 1.0;
|
|
if (screenWidth <= 1300) {
|
|
lobbyScale = screenWidth / 1300;
|
|
}
|
|
if (screenHeight <= 750) {
|
|
const hScale = screenHeight / 750;
|
|
if (hScale < lobbyScale) lobbyScale = hScale;
|
|
}
|
|
|
|
lobbyPixiContainer.scale.set(lobbyScale);
|
|
lobbyPixiContainer.x = (screenWidth - (1240 * lobbyScale)) / 2;
|
|
lobbyPixiContainer.y = (screenHeight - (650 * lobbyScale)) / 2;
|
|
|
|
const sectorHtmlLayer = document.getElementById('sector-browser-layer');
|
|
if (sectorHtmlLayer) {
|
|
sectorHtmlLayer.style.transform = `translate(-50%, -50%) scale(${lobbyScale})`;
|
|
}
|
|
|
|
const htmlFooter = document.getElementById('game-footer');
|
|
const footerHeight = (htmlFooter && htmlFooter.style.display !== 'none') ? htmlFooter.offsetHeight : 0;
|
|
|
|
const targetFooterHeight = Math.max(footerHeight, 40);
|
|
footerBackground.height = targetFooterHeight;
|
|
footerPattern.height = targetFooterHeight;
|
|
|
|
footerBackground.width = screenWidth;
|
|
footerPattern.width = screenWidth;
|
|
|
|
footerBackgroundContainer.y = screenHeight - footerHeight;
|
|
}
|
|
|
|
app.renderer.on('resize', resize);
|
|
manuelResizeCallback = resize;
|
|
resize();
|
|
}
|
|
|
|
/**
|
|
* Löst eine manuelle Neuberechnung des Layout aus (wichtig nach dem Wechsel zur Lobby)
|
|
*/
|
|
export function triggerResize() {
|
|
if (manuelResizeCallback) {
|
|
manuelResizeCallback();
|
|
}
|
|
} |