Py5Script/view.html at main · villares/Py5Script · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Py5Script Viewer</title>
    <!-- Dependencies -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.5.0/lz-string.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

    <link rel="stylesheet" href="css/style.css">
    <style>
        body { background: #000; overflow: hidden; }
        #runner-container {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
        #controls {
            position: fixed;
            bottom: 10px;
            right: 10px;
            display: flex;
            gap: 10px;
            opacity: 0.2;
            transition: opacity 0.3s;
        }
        #controls:hover { opacity: 1; }
        #console-overlay {
            position: fixed;
            bottom: 50px;
            right: 10px;
            width: 400px;
            height: 200px;
            background: rgba(0,0,0,0.8);
            border: 1px solid #444;
            display: none;
            flex-direction: column;
            color: #ddd;
            font-family: monospace;
            font-size: 12px;
            overflow: hidden;
            border-radius: 4px;
        }
        #console-content {
            flex: 1;
            overflow-y: auto;
            padding: 10px;
            white-space: pre-wrap;
        }
        .log-error { color: #ff5555; }
        .log-print { color: #ddd; }
    </style>
</head>
<body>

    <div id="runner-container">
        <iframe id="runner-frame"></iframe>
    </div>

    <div id="console-overlay">
        <div style="padding: 5px; background: #333; border-bottom: 1px solid #444; display: flex; justify-content: space-between;">
            <strong>Console</strong>
            <span style="cursor: pointer;" onclick="document.getElementById('console-overlay').style.display='none'">✖</span>
        </div>
        <div id="console-content"></div>
    </div>

    <div id="controls">
        <button id="edit-btn" title="Edit in IDE">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg> Edit
        </button>
        <button id="console-btn" title="Toggle Console">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>
        </button>
    </div>

    <script src="js/project_manager.js?v=13"></script>
    <script>
        const iframe = document.getElementById('runner-frame');
        const consoleContent = document.getElementById('console-content');
        const consoleOverlay = document.getElementById('console-overlay');

        // --- CONSOLE LOGIC ---
        function logToConsole(msg, type) {
            const el = document.createElement('span');
            el.textContent = msg + '\n';
            el.className = type === 'error' ? 'log-error' : 'log-print';
            consoleContent.appendChild(el);
            consoleContent.scrollTop = consoleContent.scrollHeight;

            // Auto-show on error
            if (type === 'error') {
                consoleOverlay.style.display = 'flex';
            }
        }

        window.addEventListener('message', (event) => {
             const data = event.data;
             if (data && data.type === 'print') {
                 logToConsole(data.message, 'print');
             } else if (data && data.type === 'error') {
                 logToConsole(data.message, 'error');
             }
        });

        document.getElementById('console-btn').addEventListener('click', () => {
             consoleOverlay.style.display = consoleOverlay.style.display === 'flex' ? 'none' : 'flex';
        });

        document.getElementById('edit-btn').addEventListener('click', () => {
             const params = new URLSearchParams(window.location.search);
             let dest = 'ide.html';

             if (params.has('sketch') || params.has('zip') || params.has('code')) {
                 // External mode: strip 'id' if present (it's a temporary view-* ID)
                 params.delete('id');
                 dest += '?' + params.toString();
             } else if (projectId && !projectId.startsWith('view-')) {
                 // Existing saved project
                 dest += '?id=' + projectId;
             }

             window.open(dest, '_blank');
        });

        // --- Helper: read a project's files from IndexedDB ---
        function idbGetFiles(id) {
            return new Promise((resolve) => {
                const req = indexedDB.open('py5script_db', 1);
                req.onsuccess = (e) => {
                    const db = e.target.result;
                    if (!db.objectStoreNames.contains('files')) { resolve(null); return; }
                    const tx = db.transaction(['files'], 'readonly');
                    const gr = tx.objectStore('files').get(id);
                    gr.onsuccess = () => resolve(gr.result ? gr.result.files : null);
                    gr.onerror   = () => resolve(null);
                };
                req.onerror = () => resolve(null);
            });
        }

        // --- RUNNER ---
        function runSketch() {
             // Pass sketch code via window.name for runner backward compatibility
             let code = projectFiles['sketch.py'] || '';
             if (!code && Object.keys(projectFiles).length > 0) {
                 code = projectFiles[Object.keys(projectFiles)[0]] || '';
             }

             iframe.contentWindow.name = code;

             // Pass 'case' parameter if present
             const params = new URLSearchParams(window.location.search);
             const caseParam = params.get('case');

             let runnerUrl = 'runner.html?t=' + Date.now();
             if (caseParam) {
                 runnerUrl += '&case=' + caseParam;
             }

             // Always pass the project ID so runner.html can hydrate assets from IDB
             runnerUrl += '&id=' + projectId;

             iframe.src = runnerUrl;
        }

        async function initView() {
            const params = new URLSearchParams(window.location.search);
            const idParam = params.get('id');

            // 1. External Loading (?sketch, ?zip, ?code) — Priority 1
            if (params.has('sketch') || params.has('zip') || params.has('code')) {
                // Use a temporary ID so runner.html can also pick up assets via IDB
                projectId = 'view-' + Date.now();

                await loadProjectFromURL({
                    skipRegistry: true,  // Don't add temp projects to the project list
                    onImport: (msg) => logToConsole(msg, 'print'),
                    onError: (msg) => logToConsole(msg, 'error'),
                    onLoaded: async () => {
                        // Persist to IDB so runner.html can hydrate assets with the same project ID
                        await idbPut({ id: projectId, files: projectFiles });
                        runSketch();
                    }
                });
                return;
            }

            // 2. Existing project by ID (?id=…) — Priority 2
            if (idParam) {
                projectId = idParam;

                // Try IndexedDB first (current storage backend)
                let files = await idbGetFiles(projectId);

                // Fall back to legacy localStorage key (in case data predates the IDB migration)
                if (!files) {
                    const raw = localStorage.getItem(`project_${projectId}_files`);
                    if (raw) {
                        try { files = JSON.parse(raw); } catch(e) { /* ignore */ }
                    }
                }

                if (files) {
                    projectFiles = files;
                    runSketch();
                } else {
                    logToConsole(`Project '${idParam}' not found in storage.`, 'error');
                }
                return;
            }

            // 3. No params → informational message
            logToConsole("No project or sketch specified in URL.", "print");
        }

        initView();

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