Spaces:
Build error
Build error
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>RetroSync</title> | |
| <style> | |
| body { font-family: sans-serif; margin: 2rem; } | |
| #three-canvas { width: 100%; height: 400px; border: 1px solid #ccc; } | |
| .ui-section { margin: 2rem 0; } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>RetroSync Frontend</h1> | |
| <div class="ui-section"> | |
| <h3>FRACTRAN Interpreter</h3> | |
| <label>Program (e.g., "17/91 78/85"):</label><br> | |
| <input id="program" size="50" value="17/91 78/85 19/51 23/38 29/33 77/29 95/23 77/19 1/17 11/13 13/11 15/14 15/2 55/1"> | |
| <br> | |
| <label>Initial n:</label> | |
| <input id="initial" type="number" value="2"> | |
| <br> | |
| <label>Steps:</label> | |
| <input id="steps" type="number" value="100"> | |
| <br> | |
| <button id="run-fractran">Run</button> | |
| <p>Result: <span id="fractran-result"></span></p> | |
| </div> | |
| <div class="ui-section"> | |
| <h3>Three.js Demo</h3> | |
| <canvas id="three-canvas"></canvas> | |
| </div> | |
| <script> | |
| window.addEventListener('load', () => { | |
| if (window.tronWeb && window.tronWeb.defaultAddress) { | |
| console.log('TronLink ready:', window.tronWeb.defaultAddress.base58); | |
| window.dispatchEvent(new CustomEvent('tronlink-ready', { | |
| detail: { address: window.tronWeb.defaultAddress.base58 } | |
| })); | |
| } else { | |
| console.log('TronLink not detected'); | |
| } | |
| }); | |
| </script> | |
| <script type="importmap"> | |
| { | |
| "imports": { | |
| "three": "https://unpkg.com/three@0.128.0/build/three.module.js" | |
| } | |
| } | |
| </script> | |
| <script type="module"> | |
| import * as THREE from 'three'; | |
| window.initThree = (canvasId) => { | |
| const canvas = document.getElementById(canvasId); | |
| if (!canvas) return; | |
| const scene = new THREE.Scene(); | |
| const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000); | |
| const renderer = new THREE.WebGLRenderer({ canvas }); | |
| renderer.setSize(canvas.clientWidth, canvas.clientHeight); | |
| const geometry = new THREE.BoxGeometry(); | |
| const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); | |
| const cube = new THREE.Mesh(geometry, material); | |
| scene.add(cube); | |
| camera.position.z = 5; | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| cube.rotation.x += 0.01; | |
| cube.rotation.y += 0.01; | |
| renderer.render(scene, camera); | |
| } | |
| animate(); | |
| }; | |
| </script> | |
| <script type="module"> | |
| import init, { start_three, run_fractran, get_tron_address } from './pkg/frontend.js'; | |
| async function run() { | |
| await init(); | |
| start_three("three-canvas"); | |
| document.getElementById('run-fractran').onclick = () => { | |
| const program = document.getElementById('program').value; | |
| const initial = parseInt(document.getElementById('initial').value); | |
| const steps = parseInt(document.getElementById('steps').value); | |
| const result = run_fractran(program, initial, steps); | |
| document.getElementById('fractran-result').innerText = result; | |
| }; | |
| const addr = get_tron_address(); | |
| if (addr) console.log("Tron address:", addr); | |
| } | |
| run(); | |
| </script> | |
| </body> | |
| </html> | |