|
1 | 1 | --- |
2 | | -// LUMOS Interactive Playground |
3 | | -// Real-time code generation from .lumos schemas |
| 2 | +// Redirect to main site playground |
| 3 | +// The playground has been moved to lumos-lang.org for a better experience |
4 | 4 | --- |
5 | | - |
6 | | -<!doctype html> |
| 5 | +<!DOCTYPE html> |
7 | 6 | <html lang="en"> |
8 | | - <head> |
9 | | - <meta charset="UTF-8" /> |
10 | | - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
11 | | - <title>LUMOS Playground - Interactive Code Generator</title> |
12 | | - <meta name="description" content="Write LUMOS schemas and see generated Rust and TypeScript code in real-time" /> |
13 | | - |
14 | | - <!-- Monaco Editor CSS --> |
15 | | - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs/editor/editor.main.min.css" /> |
16 | | - |
| 7 | +<head> |
| 8 | + <meta charset="UTF-8"> |
| 9 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 10 | + <title>Redirecting to LUMOS Playground...</title> |
| 11 | + <meta http-equiv="refresh" content="0;url=https://lumos-lang.org/playground"> |
| 12 | + <link rel="canonical" href="https://lumos-lang.org/playground"> |
17 | 13 | <style> |
18 | | - * { |
19 | | - margin: 0; |
20 | | - padding: 0; |
21 | | - box-sizing: border-box; |
22 | | - } |
23 | | - |
24 | | - body { |
25 | | - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; |
26 | | - height: 100vh; |
27 | | - overflow: hidden; |
28 | | - background: #1e1e1e; |
29 | | - color: #d4d4d4; |
30 | | - } |
31 | | - |
32 | | - .header { |
33 | | - background: #2d2d30; |
34 | | - padding: 1rem 2rem; |
35 | | - border-bottom: 1px solid #3e3e42; |
36 | | - display: flex; |
37 | | - justify-content: space-between; |
38 | | - align-items: center; |
39 | | - } |
40 | | - |
41 | | - .header h1 { |
42 | | - font-size: 1.5rem; |
43 | | - font-weight: 600; |
44 | | - color: #fff; |
45 | | - } |
46 | | - |
47 | | - .header a { |
48 | | - color: #4fc3f7; |
49 | | - text-decoration: none; |
50 | | - font-size: 0.9rem; |
51 | | - } |
52 | | - |
53 | | - .header a:hover { |
54 | | - text-decoration: underline; |
55 | | - } |
56 | | - |
57 | | - .container { |
58 | | - display: grid; |
59 | | - grid-template-columns: 1fr 1fr 1fr; |
60 | | - height: calc(100vh - 60px); |
61 | | - gap: 1px; |
62 | | - background: #3e3e42; |
63 | | - } |
64 | | - |
65 | | - .panel { |
66 | | - background: #1e1e1e; |
67 | | - display: flex; |
68 | | - flex-direction: column; |
69 | | - } |
70 | | - |
71 | | - .panel-header { |
72 | | - background: #2d2d30; |
73 | | - padding: 0.75rem 1rem; |
74 | | - border-bottom: 1px solid #3e3e42; |
75 | | - font-weight: 600; |
76 | | - font-size: 0.9rem; |
77 | | - display: flex; |
78 | | - justify-content: space-between; |
79 | | - align-items: center; |
80 | | - } |
81 | | - |
82 | | - .panel-content { |
83 | | - flex: 1; |
84 | | - overflow: hidden; |
85 | | - } |
86 | | - |
87 | | - .editor { |
88 | | - height: 100%; |
89 | | - } |
90 | | - |
91 | | - .examples { |
92 | | - display: flex; |
93 | | - gap: 0.5rem; |
94 | | - } |
95 | | - |
96 | | - .example-btn { |
97 | | - background: #0e639c; |
98 | | - color: white; |
99 | | - border: none; |
100 | | - padding: 0.4rem 0.8rem; |
101 | | - border-radius: 3px; |
102 | | - cursor: pointer; |
103 | | - font-size: 0.75rem; |
104 | | - transition: background 0.2s; |
105 | | - } |
106 | | - |
107 | | - .example-btn:hover { |
108 | | - background: #1177bb; |
109 | | - } |
110 | | - |
111 | | - .error { |
112 | | - background: #5a1d1d; |
113 | | - color: #f48771; |
114 | | - padding: 1rem; |
115 | | - margin: 1rem; |
116 | | - border-left: 3px solid #f14c4c; |
117 | | - border-radius: 3px; |
118 | | - font-family: 'Courier New', monospace; |
119 | | - font-size: 0.9rem; |
120 | | - white-space: pre-wrap; |
121 | | - } |
122 | | - |
123 | | - .loading { |
124 | | - display: flex; |
125 | | - align-items: center; |
126 | | - justify-content: center; |
127 | | - height: 100%; |
128 | | - color: #888; |
129 | | - font-size: 0.9rem; |
130 | | - } |
131 | | - |
132 | | - @media (max-width: 1200px) { |
| 14 | + body { |
| 15 | + font-family: system-ui, -apple-system, sans-serif; |
| 16 | + display: flex; |
| 17 | + justify-content: center; |
| 18 | + align-items: center; |
| 19 | + min-height: 100vh; |
| 20 | + margin: 0; |
| 21 | + background: #0a0a0a; |
| 22 | + color: #fff; |
| 23 | + } |
133 | 24 | .container { |
134 | | - grid-template-columns: 1fr; |
135 | | - grid-template-rows: 1fr 1fr 1fr; |
| 25 | + text-align: center; |
| 26 | + padding: 2rem; |
| 27 | + } |
| 28 | + a { |
| 29 | + color: #6366f1; |
136 | 30 | } |
137 | | - } |
138 | 31 | </style> |
139 | | - </head> |
140 | | - <body> |
141 | | - <div class="header"> |
142 | | - <h1>🔮 LUMOS Playground</h1> |
143 | | - <div> |
144 | | - <a href="/">← Back to Docs</a> |
145 | | - </div> |
146 | | - </div> |
147 | | - |
| 32 | +</head> |
| 33 | +<body> |
148 | 34 | <div class="container"> |
149 | | - <div class="panel"> |
150 | | - <div class="panel-header"> |
151 | | - <span>.lumos Schema</span> |
152 | | - <div class="examples"> |
153 | | - <button class="example-btn" data-example="account">Account</button> |
154 | | - <button class="example-btn" data-example="enum">Enum</button> |
155 | | - <button class="example-btn" data-example="complex">Complex</button> |
156 | | - </div> |
157 | | - </div> |
158 | | - <div class="panel-content"> |
159 | | - <div id="editor-lumos" class="editor"></div> |
160 | | - </div> |
161 | | - </div> |
162 | | - |
163 | | - <div class="panel"> |
164 | | - <div class="panel-header">Generated Rust</div> |
165 | | - <div class="panel-content"> |
166 | | - <div id="editor-rust" class="editor"></div> |
167 | | - </div> |
168 | | - </div> |
169 | | - |
170 | | - <div class="panel"> |
171 | | - <div class="panel-header">Generated TypeScript</div> |
172 | | - <div class="panel-content"> |
173 | | - <div id="editor-typescript" class="editor"></div> |
174 | | - </div> |
175 | | - </div> |
| 35 | + <p>Redirecting to the new <a href="https://lumos-lang.org/playground">LUMOS Playground</a>...</p> |
| 36 | + <p>If you are not redirected, <a href="https://lumos-lang.org/playground">click here</a>.</p> |
176 | 37 | </div> |
177 | | - |
178 | | - <!-- Monaco Editor --> |
179 | | - <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs/loader.min.js"></script> |
180 | | - |
181 | | - <script type="module"> |
182 | | - // Example schemas |
183 | | - const examples = { |
184 | | - account: `#[solana] |
185 | | -#[account] |
186 | | -struct PlayerAccount { |
187 | | - wallet: PublicKey, |
188 | | - level: u16, |
189 | | - experience: u64, |
190 | | - inventory: [PublicKey], |
191 | | -}`, |
192 | | - enum: `#[solana] |
193 | | -enum GameState { |
194 | | - Active, |
195 | | - Paused { reason: String }, |
196 | | - Finished { winner: PublicKey, score: u64 }, |
197 | | -}`, |
198 | | - complex: `#[solana] |
199 | | -#[account] |
200 | | -struct Marketplace { |
201 | | - authority: PublicKey, |
202 | | - fee_percentage: u16, |
203 | | -} |
204 | | - |
205 | | -#[solana] |
206 | | -struct ListingData { |
207 | | - seller: PublicKey, |
208 | | - nft_mint: PublicKey, |
209 | | - price: u64, |
210 | | - listed_at: i64, |
211 | | - buyer: Option<PublicKey>, |
212 | | -} |
213 | | - |
214 | | -#[solana] |
215 | | -enum ListingStatus { |
216 | | - Active, |
217 | | - Sold, |
218 | | - Cancelled, |
219 | | -}` |
220 | | - }; |
221 | | - |
222 | | - let lumosEditor, rustEditor, typescriptEditor; |
223 | | - let generateCode, isWasmReady = false; |
224 | | - |
225 | | - // Initialize Monaco Editor |
226 | | - require.config({ paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs' } }); |
227 | | - |
228 | | - require(['vs/editor/editor.main'], function () { |
229 | | - // LUMOS Editor (input) |
230 | | - lumosEditor = monaco.editor.create(document.getElementById('editor-lumos'), { |
231 | | - value: examples.account, |
232 | | - language: 'rust', // Use Rust syntax highlighting for .lumos |
233 | | - theme: 'vs-dark', |
234 | | - automaticLayout: true, |
235 | | - minimap: { enabled: false }, |
236 | | - fontSize: 14, |
237 | | - lineNumbers: 'on', |
238 | | - scrollBeyondLastLine: false, |
239 | | - wordWrap: 'on', |
240 | | - }); |
241 | | - |
242 | | - // Rust Editor (output) |
243 | | - rustEditor = monaco.editor.create(document.getElementById('editor-rust'), { |
244 | | - value: '// Generating...', |
245 | | - language: 'rust', |
246 | | - theme: 'vs-dark', |
247 | | - automaticLayout: true, |
248 | | - minimap: { enabled: false }, |
249 | | - fontSize: 14, |
250 | | - readOnly: true, |
251 | | - lineNumbers: 'on', |
252 | | - scrollBeyondLastLine: false, |
253 | | - wordWrap: 'on', |
254 | | - }); |
255 | | - |
256 | | - // TypeScript Editor (output) |
257 | | - typescriptEditor = monaco.editor.create(document.getElementById('editor-typescript'), { |
258 | | - value: '// Generating...', |
259 | | - language: 'typescript', |
260 | | - theme: 'vs-dark', |
261 | | - automaticLayout: true, |
262 | | - minimap: { enabled: false }, |
263 | | - fontSize: 14, |
264 | | - readOnly: true, |
265 | | - lineNumbers: 'on', |
266 | | - scrollBeyondLastLine: false, |
267 | | - wordWrap: 'on', |
268 | | - }); |
269 | | - |
270 | | - // Load WASM module |
271 | | - loadWasm(); |
272 | | - |
273 | | - // Listen for input changes |
274 | | - lumosEditor.onDidChangeModelContent(() => { |
275 | | - if (isWasmReady) { |
276 | | - debounceGenerate(); |
277 | | - } |
278 | | - }); |
279 | | - |
280 | | - // Example buttons |
281 | | - document.querySelectorAll('[data-example]').forEach(btn => { |
282 | | - btn.addEventListener('click', () => { |
283 | | - const example = btn.dataset.example; |
284 | | - lumosEditor.setValue(examples[example]); |
285 | | - }); |
286 | | - }); |
287 | | - }); |
288 | | - |
289 | | - // Load WASM module |
290 | | - async function loadWasm() { |
291 | | - try { |
292 | | - // Import WASM module |
293 | | - const wasm = await import('/wasm/lumos_core.js'); |
294 | | - |
295 | | - // Initialize WASM (loads the .wasm file) |
296 | | - await wasm.default('/wasm/lumos_core_bg.wasm'); |
297 | | - |
298 | | - generateCode = wasm.generateCode; |
299 | | - isWasmReady = true; |
300 | | - |
301 | | - // Generate initial code |
302 | | - generate(); |
303 | | - } catch (error) { |
304 | | - console.error('Failed to load WASM:', error); |
305 | | - rustEditor.setValue(`Error loading WASM module:\n${error.message}`); |
306 | | - typescriptEditor.setValue(`Error loading WASM module:\n${error.message}`); |
307 | | - } |
308 | | - } |
309 | | - |
310 | | - // Debounced code generation |
311 | | - let debounceTimer; |
312 | | - function debounceGenerate() { |
313 | | - clearTimeout(debounceTimer); |
314 | | - debounceTimer = setTimeout(generate, 500); |
315 | | - } |
316 | | - |
317 | | - // Generate code from schema |
318 | | - function generate() { |
319 | | - const source = lumosEditor.getValue(); |
320 | | - |
321 | | - try { |
322 | | - const result = generateCode(source); |
323 | | - |
324 | | - // Update editors |
325 | | - rustEditor.setValue(result.rust); |
326 | | - typescriptEditor.setValue(result.typescript); |
327 | | - } catch (error) { |
328 | | - // Show error in both editors |
329 | | - const errorMsg = `// ❌ Generation Error:\n//\n// ${error.message.split('\n').join('\n// ')}`; |
330 | | - rustEditor.setValue(errorMsg); |
331 | | - typescriptEditor.setValue(errorMsg); |
332 | | - } |
333 | | - } |
| 38 | + <script> |
| 39 | + window.location.href = 'https://lumos-lang.org/playground'; |
334 | 40 | </script> |
335 | | - </body> |
| 41 | +</body> |
336 | 42 | </html> |
0 commit comments