93 lines
3.2 KiB
JavaScript
93 lines
3.2 KiB
JavaScript
import { Application, Assets, Sprite, Container, Text, Graphics, NineSliceSprite } from 'pixi.js';
|
|
import { initFooter } from './components/footer/footer.js';
|
|
import { initTopbar } from './components/topbar/topbar.js';
|
|
import { menuConfig, renderSideMenu } from './components/side-menu/side-menu.js';
|
|
import { planetConfig, renderPlanetMenu } from './components/planet-menu/planet-menu.js';
|
|
import { setupResize } from './utils/resize.js';
|
|
import { startDomSync } from './utils/domSync.js';
|
|
import { startSimulation } from './game/simulation.js';
|
|
import { buildBackground, buildLogo, buildResourceIcons, buildSideMenuGraphics, buildPlanetMenuGraphics } from './pixi/uiBuilder.js';
|
|
|
|
async function initSector() {
|
|
const app = new Application();
|
|
|
|
await app.init({
|
|
resizeTo: window,
|
|
backgroundAlpha: 0,
|
|
antialias: true,
|
|
resolution: window.devicePixelRatio || 1,
|
|
autoDensity: true
|
|
});
|
|
|
|
document.getElementById('pixi-container').appendChild(app.canvas);
|
|
|
|
let background = null;
|
|
let logoContainer = null;
|
|
let pixiIcons = {};
|
|
let pixiMenuMask = null;
|
|
let pixiMenuItems = {};
|
|
let pixiPlanetLimitContainer = null;
|
|
let pixiPlanetMask = null;
|
|
let pixiPlanetItems = {};
|
|
let pixiPlanetIcons = {};
|
|
let pixiMoonIcons = {};
|
|
let iconSheet = null;
|
|
let frameSheet = null;
|
|
|
|
// --- Asset Loading ---
|
|
try {
|
|
await document.fonts.load('16px "Logo Font"');
|
|
await document.fonts.load('16px "UI Font"');
|
|
|
|
// Wir laden nun auch explizit den Hintergrund für den Sektor
|
|
const assetsToLoad = {
|
|
bg: 'src/assets/backgrounds/Background_D.png',
|
|
icons: 'src/assets/icons.json',
|
|
frames: 'src/assets/frames.json'
|
|
};
|
|
|
|
const bgTexture = await Assets.load(assetsToLoad.bg);
|
|
iconSheet = await Assets.load(assetsToLoad.icons);
|
|
frameSheet = await Assets.load(assetsToLoad.frames);
|
|
|
|
background = buildBackground(app, bgTexture);
|
|
logoContainer = buildLogo(app, frameSheet);
|
|
pixiIcons = buildResourceIcons(app, iconSheet);
|
|
|
|
const sideMenuData = buildSideMenuGraphics(app, frameSheet, menuConfig);
|
|
pixiMenuMask = sideMenuData.pixiMenuMask;
|
|
pixiMenuItems = sideMenuData.pixiMenuItems;
|
|
|
|
const planetMenuData = buildPlanetMenuGraphics(app, frameSheet, iconSheet, planetConfig);
|
|
pixiPlanetLimitContainer = planetMenuData.pixiPlanetLimitContainer;
|
|
pixiPlanetMask = planetMenuData.pixiPlanetMask;
|
|
pixiPlanetItems = planetMenuData.pixiPlanetItems;
|
|
pixiPlanetIcons = planetMenuData.pixiPlanetIcons;
|
|
pixiMoonIcons = planetMenuData.pixiMoonIcons;
|
|
|
|
} catch (error) {
|
|
console.error("[PixiJS] Fehler beim Laden der Assets:", error);
|
|
}
|
|
|
|
renderSideMenu(pixiMenuItems);
|
|
renderPlanetMenu(pixiPlanetItems);
|
|
initFooter();
|
|
initTopbar();
|
|
|
|
startDomSync(app, {
|
|
logoContainer,
|
|
pixiMenuMask,
|
|
pixiPlanetMask,
|
|
pixiIcons,
|
|
pixiMenuItems,
|
|
pixiPlanetItems,
|
|
pixiPlanetIcons,
|
|
pixiMoonIcons,
|
|
pixiPlanetLimitContainer
|
|
});
|
|
|
|
setupResize(app, background);
|
|
startSimulation();
|
|
}
|
|
|
|
initSector(); |