cityofgits/debug-world.html at main · NekshaDeSilva/cityofgits · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CityofGits Debug - World Loading Test</title>
    <style>
        body { margin: 0; background: #000; color: #fff; font-family: Arial; }
        #debug { position: absolute; top: 10px; left: 10px; z-index: 1000; background: rgba(0,0,0,0.8); padding: 10px; }
        canvas { display: block; }
    </style>
</head>
<body>
    <div id="debug">
        <h3>CityofGits World Loading Debug</h3>
        <div id="status">Checking scripts...</div>
        <div id="errors" style="color: red;"></div>
    </div>
    <canvas id="gameCanvas"></canvas>

    <!-- Three.js from CDN -->
    <script src="https://unpkg.com/three@0.154.0/build/three.min.js"></script>

    <script>
        const debug = document.getElementById('debug');
        const status = document.getElementById('status');
        const errors = document.getElementById('errors');

        function log(message) {
            console.log(message);
            status.innerHTML = message;
        }

        function logError(error) {
            console.error(error);
            errors.innerHTML += `<div>${error}</div>`;
        }

        // Override console.error to catch JavaScript errors
        const originalError = console.error;
        console.error = function(...args) {
            logError(args.join(' '));
            originalError.apply(console, args);
        };

        // Catch unhandled errors
        window.addEventListener('error', (event) => {
            logError(`Error: ${event.message} at ${event.filename}:${event.lineno}`);
        });

        // Check if Three.js loaded
        if (typeof THREE !== 'undefined') {
            log('✅ Three.js loaded successfully');

            // Try to load the application scripts with error catching
            async function loadAndTestScripts() {
                try {
                    log('🔄 Loading world_optimized.js...');
                    await loadScript('./app/world_optimized.js');

                    log('🔄 Loading app.js...');
                    await loadScript('./app/app.js');

                    log('🔄 Loading index.js...');
                    await loadScript('./app/index.js');

                    log('✅ All scripts loaded. Testing world creation...');

                    // Test world creation
                    setTimeout(() => {
                        try {
                            if (typeof World !== 'undefined') {
                                log('✅ World class found. Testing instantiation...');
                                const testWorld = new World();
                                log('✅ World created successfully!');

                                if (testWorld.initPromise) {
                                    log('🔄 Waiting for world initialization...');
                                    testWorld.initPromise.then(() => {
                                        log('✅ World initialized successfully!');
                                    }).catch(error => {
                                        logError('❌ World initialization failed: ' + error.message);
                                    });
                                }
                            } else {
                                logError('❌ World class not found');
                            }
                        } catch (error) {
                            logError('❌ World creation failed: ' + error.message);
                        }
                    }, 1000);

                } catch (error) {
                    logError('❌ Script loading failed: ' + error.message);
                }
            }

            loadAndTestScripts();

        } else {
            logError('❌ Three.js failed to load');
        }

        function loadScript(src) {
            return new Promise((resolve, reject) => {
                const script = document.createElement('script');
                script.src = src;
                script.onload = () => {
                    log(`✅ Loaded: ${src}`);
                    resolve();
                };
                script.onerror = () => {
                    const error = `Failed to load: ${src}`;
                    logError(`❌ ${error}`);
                    reject(new Error(error));
                };
                document.head.appendChild(script);
            });
        }

    </script>
</body>
</html>