expedition33-planner/error-test.html at main · oda-works/expedition33-planner · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Error Fix Test</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/navigation.css">
    <style>
        .test-status {
            position: fixed;
            top: 20px;
            right: 20px;
            background: #2a2a2a;
            color: white;
            padding: 15px;
            border-radius: 8px;
            font-family: monospace;
            z-index: 9999;
            max-width: 300px;
        }
        .success { border-left: 4px solid #10B981; }
        .error { border-left: 4px solid #EF4444; }
    </style>
</head>
<body class="theme-dark">
    <div id="test-status" class="test-status">
        🧪 Testing DOM fix...
    </div>

    <!-- Loading Screen -->
    <div id="loading-screen" class="loading-screen">
        <div class="loading-spinner"></div>
        <h2>Testing Fix...</h2>
    </div>

    <!-- Main Application -->
    <div id="app" class="app-container" style="display: none;">
        <header class="app-header">
            <div class="header-content">
                <h1 class="app-title">Error Fix Test</h1>
                <div class="header-controls">
                    <button id="theme-toggle" class="btn-icon">🌙</button>
                </div>
            </div>
        </header>

        <div class="app-content-wrapper">
            <main class="main-content">
                <div id="characters-tab" class="tab-content active">
                    <h2>✅ DOM Error Fix Test</h2>
                    <p>If you can see the sidebar navigation, the fix worked!</p>
                </div>
            </main>
        </div>
    </div>

    <script type="module">
        const testStatus = document.getElementById('test-status');

        function updateStatus(message, type = 'info') {
            testStatus.innerHTML = message;
            testStatus.className = `test-status ${type}`;
            console.log(message);
        }

        // Override error handling
        window.addEventListener('error', (e) => {
            updateStatus(`❌ ERROR: ${e.message}`, 'error');
        });

        try {
            updateStatus('📦 Loading modules...');

            // Import navigation module
            const { navigation } = await import('./js/components/navigation.js');
            updateStatus('✅ Navigation module loaded');

            // Hide loading screen
            setTimeout(() => {
                document.getElementById('loading-screen').style.display = 'none';
                document.getElementById('app').style.display = 'block';
                updateStatus('👀 App shown, testing navigation...');

                // Test navigation initialization with delay (like in fixed app.js)
                setTimeout(() => {
                    try {
                        navigation.init();
                        updateStatus('✅ Navigation initialized successfully!', 'success');

                        // Check if sidebar exists
                        setTimeout(() => {
                            const sidebar = document.querySelector('.app-sidebar');
                            if (sidebar) {
                                updateStatus('🎉 FIX WORKED! Sidebar found in DOM', 'success');
                            } else {
                                updateStatus('⚠️ Navigation init succeeded but no sidebar found', 'error');
                            }
                        }, 500);

                    } catch (error) {
                        updateStatus(`❌ Navigation init failed: ${error.message}`, 'error');
                    }
                }, 200); // Same delay as in fixed app.js

            }, 1000);

        } catch (error) {
            updateStatus(`❌ Module load failed: ${error.message}`, 'error');
        }
    </script>
</body>
</html>