1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
import { Application } from 'pixi.js';
import * as PIXI from 'pixi.js';
import { StateManager } from './state.js';
// ============================================================================
// GLOBAL STATE
// ============================================================================
// Centralized reactive state
const state = new StateManager();
// DOM references
let dom = {
container: null,
};
// Application instances
let app = null; // PixiJS Application
// ============================================================================
// APPLICATION ENTRY POINT
// ============================================================================
document.addEventListener('DOMContentLoaded', async function() {
log('Framework starting...');
log('init DOM');
await initDOM();
log('init PixiJS renderer');
await initRenderer();
log('init services');
await initServices();
log('Framework ready - start prototyping!');
});
// ============================================================================
// INITIALIZATION FUNCTIONS
// ============================================================================
async function initDOM() {
dom.container = document.getElementById('canvas-container');
if (!dom.container) {
throw new Error('Canvas container not found');
}
}
async function initRenderer() {
// Check WebGPU availability
let preference = 'webgpu';
if (!navigator.gpu) {
log('WebGPU not available, using WebGL');
preference = 'webgl';
}
try {
app = new Application();
await app.init({
preference: preference,
width: window.innerWidth,
height: window.innerHeight,
backgroundColor: 0x1a1a26,
antialias: true,
autoDensity: true,
resolution: window.devicePixelRatio || 1,
});
dom.container.appendChild(app.canvas);
// Store renderer info in state
const rendererType = app.renderer.type;
state.state.rendering.rendererType = rendererType;
log(`Using renderer: ${rendererType}`);
// Store canvas dimensions in state
state.state.uiConfig.canvasWidth = app.screen.width;
state.state.uiConfig.canvasHeight = app.screen.height;
// Handle window resize
window.addEventListener('resize', handleResize);
} catch (error) {
log(`Failed to initialize renderer: ${error}`);
throw error;
}
}
async function initServices() {
// Start animation loop
app.ticker.add(update);
log('Services initialized');
}
// ============================================================================
// EVENT HANDLERS
// ============================================================================
function handleResize() {
const width = window.innerWidth;
const height = window.innerHeight;
app.renderer.resize(width, height);
// Update state
state.state.uiConfig.canvasWidth = width;
state.state.uiConfig.canvasHeight = height;
}
// ============================================================================
// MAIN UPDATE LOOP
// ============================================================================
function update() {
// Update time using state manager
state.incrementTime(0.016); // ~60fps increment
state.updateRealElapsed();
state.state.rendering.frameCounter++;
// YOUR PROTOTYPE CODE GOES HERE
// Example:
// yourSprite.x += 1;
// yourGraphics.rotation += 0.01;
}
// ============================================================================
// UTILITIES
// ============================================================================
function log(msg) {
console.log(`[Framework] ${msg}`);
}
// ============================================================================
// EXPORTS FOR PROTOTYPING
// ============================================================================
// Export immediately available objects
window.PIXI = PIXI;
window.state = state;
window.log = log;
// Export app after initialization (using a getter)
Object.defineProperty(window, 'pixiApp', {
get() { return app; }
});
|
