voidcore.js/test-projectcore-revolution.html at master · moe-charm/voidcore.js · 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
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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🎮 ProjectCore Revolution Test - nyacore統合プロジェクト管理システム</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #1e1e1e, #2d2d30);
            color: white;
            min-height: 100vh;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px;
            background: rgba(74, 144, 226, 0.1);
            border-radius: 12px;
            border: 1px solid rgba(74, 144, 226, 0.3);
        }

        .revolution-info {
            background: rgba(30, 30, 30, 0.8);
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            border: 1px solid #4a90e2;
        }

        .test-section {
            background: rgba(40, 40, 40, 0.8);
            padding: 15px;
            border-radius: 6px;
            margin-bottom: 15px;
            border-left: 3px solid #4a90e2;
        }

        .status {
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 12px;
            margin-left: 10px;
        }

        .status.success { background: rgba(76, 175, 80, 0.2); border: 1px solid #4caf50; }
        .status.pending { background: rgba(255, 193, 7, 0.2); border: 1px solid #ffc107; }
        .status.info { background: rgba(33, 150, 243, 0.2); border: 1px solid #2196f3; }

        .plugin-canvas {
            background: rgba(20, 20, 20, 0.9);
            border: 2px solid #4a90e2;
            border-radius: 8px;
            width: 100%;
            height: 600px;
            position: relative;
            overflow: hidden;
            margin-top: 20px;
        }

        .instructions {
            background: rgba(255, 193, 7, 0.1);
            border: 1px solid #ffc107;
            padding: 15px;
            border-radius: 6px;
            margin-bottom: 20px;
        }

        .feature-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }

        .feature-card {
            background: rgba(30, 30, 30, 0.8);
            padding: 15px;
            border-radius: 6px;
            border: 1px solid rgba(74, 144, 226, 0.3);
        }

        button {
            background: rgba(74, 144, 226, 0.8);
            border: none;
            color: white;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
            transition: background 0.2s;
        }

        button:hover {
            background: rgba(74, 144, 226, 1);
        }

        .console-output {
            background: rgba(0, 0, 0, 0.8);
            border: 1px solid #333;
            border-radius: 4px;
            padding: 10px;
            margin-top: 10px;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            color: #00ff00;
            height: 200px;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>🎮 ProjectCore Revolution Test</h1>
        <p>nyacore継承による統合プロジェクト管理システムの革命的実装テスト</p>
        <div>
            <span class="status success">NyaCore継承完了</span>
            <span class="status success">セーブロード実装</span>
            <span class="status success">UI統合完成</span>
            <span class="status info">Phase 4 革命完成</span>
        </div>
    </div>

    <div class="revolution-info">
        <h2>🧠 設計革命の成果</h2>
        <div class="feature-list">
            <div class="feature-card">
                <h3>🎯 NyaCore完全継承</h3>
                <ul>
                    <li>unifiedPluginManager活用</li>
                    <li>unifiedIntentHandler活用</li>
                    <li>unifiedStatsManager活用</li>
                    <li>デバッグシステム統合</li>
                </ul>
            </div>
            <div class="feature-card">
                <h3>🎮 統合プロジェクト管理</h3>
                <ul>
                    <li>プラグイン・接続の一元管理</li>
                    <li>状態キャプチャ・復元</li>
                    <li>ライフサイクル制御</li>
                    <li>親コアとしての統括</li>
                </ul>
            </div>
            <div class="feature-card">
                <h3>💾 完全セーブロード</h3>
                <ul>
                    <li>プロジェクト完全エクスポート</li>
                    <li>ファイル読み書き対応</li>
                    <li>バックアップ・復元機能</li>
                    <li>エラーハンドリング</li>
                </ul>
            </div>
            <div class="feature-card">
                <h3>✨ 後方互換性100%</h3>
                <ul>
                    <li>既存コード変更不要</li>
                    <li>PluginInstanceManager互換</li>
                    <li>nyacore知識流用可能</li>
                    <li>学習コスト最小化</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="instructions">
        <h3>📋 テスト手順</h3>
        <ol>
            <li><strong>右上のプロジェクト管理パネル</strong>を確認してください</li>
            <li><strong>プラグインパレット</strong>からプラグインを追加してみてください</li>
            <li><strong>💾 Save Project</strong>でプロジェクトを保存してみてください</li>
            <li><strong>📂 Load Project</strong>で保存したプロジェクトを読み込んでみてください</li>
            <li><strong>📊 Project Stats</strong>でnyacore統合統計を確認してください</li>
            <li><strong>コンソールログ</strong>でProjectCoreの動作を監視してください</li>
        </ol>
    </div>

    <div class="test-section">
        <h3>🎮 ProjectCore機能テスト</h3>
        <button onclick="testProjectCore()">🧪 ProjectCore基本機能テスト</button>
        <button onclick="testNyaCoreIntegration()">💎 NyaCore統合テスト</button>
        <button onclick="testSaveLoad()">💾 セーブロード機能テスト</button>
        <button onclick="testCompatibility()">🔄 後方互換性テスト</button>
    </div>

    <div class="test-section">
        <h3>📊 システム状態監視</h3>
        <div id="system-status">
            <div>ProjectCore初期化: <span id="projectcore-status" class="status pending">待機中</span></div>
            <div>NyaCore統合: <span id="nyacore-status" class="status pending">待機中</span></div>
            <div>UI統合: <span id="ui-status" class="status pending">待機中</span></div>
            <div>セーブロード準備: <span id="saveload-status" class="status pending">待機中</span></div>
        </div>
    </div>

    <div class="test-section">
        <h3>📝 テストログ出力</h3>
        <div id="test-console" class="console-output">
            ProjectCore Revolution Test Console - 準備中...\n
        </div>
    </div>

    <!-- CharmFlow Canvas -->
    <div class="plugin-canvas" id="charmflow-canvas">
        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; opacity: 0.6;">
            <h2>🎮 CharmFlow Canvas</h2>
            <p>プラグインパレットからプラグインをドラッグしてください</p>
            <p>ProjectCoreが全てのプラグイン・接続を統合管理します</p>
        </div>
    </div>

    <!-- CharmFlow Scripts -->
    <script type="module">
        import { debugLogger } from './charmflow/js/debug-file-logger.js'
        import { NyaCoreUI } from './charmflow/js/nyacore-ui.js'

        // グローバル変数
        window.testConsole = document.getElementById('test-console')
        window.nyaCoreUI = null
        window.projectCore = null

        // テストコンソール出力
        function logTest(message) {
            const timestamp = new Date().toLocaleTimeString()
            window.testConsole.innerHTML += `[${timestamp}] ${message}\n`
            window.testConsole.scrollTop = window.testConsole.scrollHeight
        }

        // ステータス更新
        function updateStatus(id, status, text) {
            const element = document.getElementById(id)
            if (element) {
                element.className = `status ${status}`
                element.textContent = text
            }
        }

        // ProjectCore基本機能テスト
        window.testProjectCore = async function() {
            logTest('🧪 ProjectCore基本機能テスト開始...')

            try {
                const stats = window.projectCore.getProjectDebugInfo()
                logTest(`✅ ProjectCore動作確認: ${stats.plugins.total} plugins, ${stats.connections.total} connections`)
                logTest(`📊 ProjectCore ID: ${stats.project.id}`)
                logTest(`💎 NyaCore統合: ${stats.nyacore.id}`)

                // nyacore機能テスト
                await window.projectCore.sendMessage({
                    type: 'test.projectcore.basic',
                    data: { testTime: Date.now() }
                })
                logTest('✅ nyacore sendMessage() 動作確認')

                logTest('🎯 ProjectCore基本機能テスト完了！')

            } catch (error) {
                logTest(`❌ ProjectCore基本機能テストエラー: ${error.message}`)
            }
        }

        // NyaCore統合テスト
        window.testNyaCoreIntegration = async function() {
            logTest('💎 NyaCore統合テスト開始...')

            try {
                // Stats Manager テスト
                const stats = window.projectCore.unifiedStatsManager.getStats()
                logTest(`📊 NyaCore Stats: ${JSON.stringify(stats).substring(0, 100)}...`)

                // Intent Handler テスト
                const intentStats = window.projectCore.unifiedIntentHandler.getStats ?
                    window.projectCore.unifiedIntentHandler.getStats() : 'N/A'
                logTest(`🎯 Intent Handler統合: ${typeof intentStats}`)

                // Plugin Manager テスト
                const plugins = window.projectCore.getPlugins()
                logTest(`🧩 NyaCore Plugin Manager: ${plugins.length} plugins`)

                logTest('✅ NyaCore統合テスト完了！')

            } catch (error) {
                logTest(`❌ NyaCore統合テストエラー: ${error.message}`)
            }
        }

        // セーブロード機能テスト
        window.testSaveLoad = async function() {
            logTest('💾 セーブロード機能テスト開始...')

            try {
                // エクスポートテスト
                const saveData = await window.projectCore.exportProject()
                logTest(`💾 プロジェクトエクスポート成功: ${saveData.plugins.length} plugins`)
                logTest(`📊 データサイズ: ${JSON.stringify(saveData).length} chars`)

                // データ検証テスト
                const isValid = window.projectCore.validateProjectData(saveData)
                logTest(`🔍 データ検証: ${isValid ? '✅ 有効' : '❌ 無効'}`)

                logTest('✅ セーブロード機能テスト完了！')

            } catch (error) {
                logTest(`❌ セーブロード機能テストエラー: ${error.message}`)
            }
        }

        // 後方互換性テスト
        window.testCompatibility = function() {
            logTest('🔄 後方互換性テスト開始...')

            try {
                // PluginInstanceManager互換性テスト
                const pluginCount = window.nyaCoreUI.pluginInstanceManager.getAllPlugins().length
                logTest(`🔄 PluginInstanceManager互換: ${pluginCount} plugins`)

                // 従来メソッド動作確認
                const hasCompatibleMethods = [
                    'getPlugin', 'hasPlugin', 'getAllPlugins',
                    'getDebugInfo', 'logStats'
                ].every(method => typeof window.projectCore[method] === 'function')
                logTest(`🔧 互換メソッド: ${hasCompatibleMethods ? '✅ 完全' : '❌ 不完全'}`)

                // エイリアス確認
                const isAlias = window.nyaCoreUI.pluginInstanceManager === window.nyaCoreUI.projectCore
                logTest(`🔗 エイリアス設定: ${isAlias ? '✅ 正常' : '❌ 異常'}`)

                logTest('✅ 後方互換性テスト完了！')

            } catch (error) {
                logTest(`❌ 後方互換性テストエラー: ${error.message}`)
            }
        }

        // 初期化
        async function initializeProjectCoreTest() {
            try {
                logTest('🚀 ProjectCore Revolution Test 初期化開始...')
                updateStatus('projectcore-status', 'pending', '初期化中')

                // NyaCoreUI初期化
                window.nyaCoreUI = await NyaCoreUI.create({
                    debug: true,
                    projectName: 'ProjectCore Revolution Test'
                })
                window.projectCore = window.nyaCoreUI.projectCore

                logTest('✅ NyaCoreUI + ProjectCore 初期化完了')
                updateStatus('projectcore-status', 'success', '完了')
                updateStatus('nyacore-status', 'success', '統合完了')
                updateStatus('ui-status', 'success', 'UI準備完了')
                updateStatus('saveload-status', 'success', '機能準備完了')

                logTest('🎮 ProjectCore Revolution Test 準備完了！')
                logTest('📋 右上のプロジェクト管理パネルをお試しください')

                // 統計出力
                setTimeout(() => {
                    window.projectCore.logProjectStats()
                    logTest('📊 詳細統計情報をコンソールに出力しました')
                }, 1000)

            } catch (error) {
                logTest(`❌ 初期化エラー: ${error.message}`)
                updateStatus('projectcore-status', 'error', 'エラー')
            }
        }

        // DOMReady後に初期化
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', initializeProjectCoreTest)
        } else {
            initializeProjectCoreTest()
        }
    </script>
</body>
</html>