Update app.py

app.py

@@ -9,56 +9,99 @@ def load_aframe_and_extras():
     <script src="https://unpkg.com/[email protected]/dist/aframe-event-set-component.min.js"></script>
     <script>
     let score = 0;
-    /* … all your original draggable, bouncing, moving-light, moveCamera, fireRaycast … */
-    // —— Key remap: W→down, S→reset, X→up —— 
-    document.addEventListener('keydown', function(event){
-      switch(event.key.toLowerCase()) {
-        case 'w': moveCamera('down');    break;
-        case 's': moveCamera('reset');   break;
-        case 'x': moveCamera('up');      break;
-        case 'q': moveCamera('rotateLeft');  break;
-        case 'e': moveCamera('rotateRight'); break;
-        case 'z': moveCamera('reset');      break;
-        case 'c': moveCamera('ground');     break;
-        case ' ': fireRaycast();            break;
+
+    /* Draggable, bouncing, moving-light components unchanged */
+    AFRAME.registerComponent('draggable', {/* … */});
+    AFRAME.registerComponent('bouncing', {/* … */});
+    AFRAME.registerComponent('moving-light', {/* … */});
+
+    function moveCamera(direction) {
+      var rig = document.querySelector('#rig');
+      var pos = rig.getAttribute('position');
+      var rot = rig.getAttribute('rotation');
+      var speed = 0.5, rSpeed = 5;
+      switch(direction) {
+        case 'forward':  pos.z -= speed; break;
+        case 'backward': pos.z += speed; break;
+        case 'left':     pos.x -= speed; break;
+        case 'right':    pos.x += speed; break;
+        case 'up':       pos.y += speed; break;
+        case 'down':     pos.y -= speed; break;
+        case 'reset':    pos = {x:0,y:1.6,z:0}; rot = {x:0,y:0,z:0}; break;
+        case 'rotateY+': rot.y += rSpeed; break;
+        case 'rotateY-': rot.y -= rSpeed; break;
+        case 'rotateZ+': rot.z += rSpeed; break;
+        case 'rotateZ-': rot.z -= rSpeed; break;
+      }
+      rig.setAttribute('position', pos);
+      rig.setAttribute('rotation', rot);
+    }
+
+    function fireRaycast() {
+      var cam = document.querySelector('[camera]');
+      var dir = new THREE.Vector3(); cam.object3D.getWorldDirection(dir);
+      var rc = new THREE.Raycaster(cam.object3D.position, dir);
+      var hits = rc.intersectObjects(
+        Array.from(document.querySelectorAll('.raycastable')).map(e=>e.object3D), true
+      );
+      if (hits.length>0) {
+        var el = hits[0].object.el;
+        if (el.components.bouncing) {
+          el.components.bouncing.boost();
+          score += 10;
+          document.getElementById('score').setAttribute('value','Score: '+score);
+        }
+      }
+    }
+
+    document.addEventListener('keydown', e => {
+      switch(e.key.toLowerCase()){
+        case 'w': moveCamera('forward');  break;
+        case 'x': moveCamera('backward'); break;
+        case 'a': moveCamera('left');     break;
+        case 'd': moveCamera('right');    break;
+        case 's': moveCamera('reset');    break;
+        case 'q': moveCamera('rotateY+'); break;
+        case 'e': moveCamera('rotateY-'); break;
+        case 'z': moveCamera('rotateZ+'); break;
+        case 'c': moveCamera('rotateZ-'); break;
+        case ' ': fireRaycast();          break;
       }
     });
     </script>
     """
 
 @st.cache_data
-def encode_file(file_path):
-    with open(file_path, "rb") as f:
-        return base64.b64encode(f.read()).decode()
-
-def create_aframe_entity(stem, file_type, position):
-    anim = 'animation="property: rotation; to: 0 360 0; loop: true; dur: 20000; easing: linear"'
-    if file_type == 'obj':
-        return (f'<a-entity obj-model="obj: #{stem}" '
-                f'position="{position}" rotation="0 0 0" scale="1 1 1" '
-                f'class="raycastable" draggable {anim}></a-entity>')
-    if file_type in ('glb','gltf'):
+def encode_file(path):
+    with open(path,'rb') as f: return base64.b64encode(f.read()).decode()
+
+def create_aframe_entity(stem, ext, pos):
+    # static random Y rotation, scale fills 1×1 tile
+    ry = random.uniform(0,360)
+    if ext == 'obj':
+        return (f'<a-entity obj-model="obj:#{stem}" '
+                f'position="{pos}" rotation="0 {ry} 0" scale="1 1 1" '
+                'class="raycastable" draggable></a-entity>')
+    if ext in ('glb','gltf'):
         return (f'<a-entity gltf-model="#{stem}" '
-                f'position="{position}" rotation="0 0 0" scale="1 1 1" '
-                f'class="raycastable" draggable {anim}></a-entity>')
-    return ""
+                f'position="{pos}" rotation="0 {ry} 0" scale="1 1 1" '
+                'class="raycastable" draggable></a-entity>')
+    return ''
 
 @st.cache_data
-def generate_tilemap(files, directory, gw, gh):
+def generate_tilemap(files, dirpath, gw=8, gh=8):
     img_exts   = ['webp','png']
     model_exts = ['obj','glb','gltf']
     vid_exts   = ['mp4']
 
-    img_files   = [f for f in files if f.split('.')[-1] in img_exts]
-    model_files = [f for f in files if f.split('.')[-1] in model_exts]
-    vid_files   = [f for f in files if f.split('.')[-1] in vid_exts]
+    imgs   = [f for f in files if f.split('.')[-1] in img_exts]
+    models = [f for f in files if f.split('.')[-1] in model_exts]
+    vids   = [f for f in files if f.split('.')[-1] in vid_exts]
 
-    # --- Build assets ---
     assets = "<a-assets>"
     for f in files:
-        stem = Path(f).stem
-        ext  = f.split('.')[-1]
-        data = encode_file(os.path.join(directory, f))
+        stem = Path(f).stem; ext=f.split('.')[-1]
+        data=encode_file(os.path.join(dirpath,f))
         if ext in model_exts:
             assets += (f'<a-asset-item id="{stem}" '
                        f'src="data:application/octet-stream;base64,{data}"></a-asset-item>')
@@ -67,102 +110,105 @@ def generate_tilemap(files, directory, gw, gh):
         elif ext in vid_exts:
             assets += (f'<video id="{stem}" '
                        f'src="data:video/mp4;base64,{data}" '
-                       'loop="true" autoplay="true" muted="true"></video>')
+                       'loop autoplay muted></video>')
     assets += "</a-assets>"
 
-    # --- Spawn per-cell, now fully random ---
     entities = ""
-    sx = -gw/2
-    sz = -gh/2
-
+    sx=-gw/2; sz=-gh/2
     for i in range(gw):
       for j in range(gh):
-        x = sx + i
-        z = sz + j
-
-        # 1) ground image plane
-        if img_files:
-          img = random.choice(img_files)
-          stem = Path(img).stem
-          entities += (f'<a-plane src="#{stem}" width="1" height="1" '
+        x,y,z = sx+i,0,sz+j
+        # ground image
+        if imgs:
+          img=random.choice(imgs); s=Path(img).stem
+          entities += (f'<a-plane src="#{s}" width="1" height="1" '
                        f'rotation="-90 0 0" position="{x} 0.01 {z}"></a-plane>')
-
-        # 2) random spinning 3D model
-        if model_files:
-          mdl = random.choice(model_files)
-          ext = mdl.split('.')[-1]
-          stem = Path(mdl).stem
-          entities += create_aframe_entity(stem, ext, f"{x} 0.5 {z}")
-
-        # 3) random video layer
-        if vid_files:
-          vid = random.choice(vid_files)
-          stem = Path(vid).stem
-          entities += (f'<a-video src="#{stem}" width="1" height="1" '
+        # model
+        if models:
+          m=random.choice(models); ext=m.split('.')[-1]; s=Path(m).stem
+          entities += create_aframe_entity(s,ext,f"{x} 0.5 {z}")
+        # video
+        if vids:
+          v=random.choice(vids); s=Path(v).stem
+          entities += (f'<a-video src="#{s}" width="1" height="1" '
                        f'rotation="-90 0 0" position="{x} 0.2 {z}" '
                        'class="raycastable" draggable></a-video>')
-
     return assets, entities
 
 def main():
     st.set_page_config(layout="wide")
     with st.sidebar:
-        # … your unchanged sidebar UI (uploads, camera buttons, grid sliders, directory) …
-        st.markdown("### 🗺️ Grid Size")
-        grid_width  = st.slider("Grid Width", 1, 8, 8)
-        grid_height = st.slider("Grid Height", 1, 5, 5)
+        st.markdown("### ⬆️ Upload 3D / media files")
+        ups = st.file_uploader("Add files:", accept_multiple_files=True)
+        st.markdown("### 🎮 Camera Buttons")
+        # 3×3 grid of buttons for qwe/asd/zxc
+        rows = [
+          [('Q','rotateY+'), ('W','forward'),  ('E','rotateY-')],
+          [('A','left'),    ('S','reset'),    ('D','right')],
+          [('Z','rotateZ+'),('X','backward'),('C','rotateZ-')]
+        ]
+        for row in rows:
+          cols = st.columns(3)
+          for (btn,cmd),col in zip(row, cols):
+            col.button(btn, on_click=lambda c=cmd: st.session_state.update({'camera_move':c}))
+        st.markdown("### 🗺️ Grid is fixed at 8×8")
         st.markdown("### 📁 Directory")
-        directory = st.text_input("Enter path:", ".", key="directory_input")
+        directory = st.text_input("Path:", ".", key="dir")
 
     if not os.path.isdir(directory):
-        st.sidebar.error("Invalid directory path")
+        st.sidebar.error("Invalid directory")
         return
 
-    file_types = ['obj','glb','gltf','webp','png','mp4']
-    files = [f for f in os.listdir(directory) if f.split('.')[-1] in file_types]
+    types = ['obj','glb','gltf','webp','png','mp4']
+    if ups:
+      for up in ups:
+        ext=Path(up.name).suffix.lower()[1:]
+        if ext in types:
+          with open(os.path.join(directory,up.name),'wb') as f:
+            shutil.copyfileobj(up,f)
+          st.sidebar.success(f"Uploaded {up.name}")
+        else:
+          st.sidebar.warning(f"Skipped {up.name}")
 
-    # — Compute spotlight height —
-    spot_height = max(grid_width, grid_height) * 1.5
+    files = [f for f in os.listdir(directory) if f.split('.')[-1] in types]
 
-    # — Build A-Frame scene shell with new spotlight —
-    aframe_scene = f"""
+    # spotlight height
+    spot_h = max(8,8)*1.5
+
+    # build scene
+    scene = f"""
     <a-scene embedded style="height:600px; width:100%;">
-      <a-entity id="rig" position="0 {max(grid_width,grid_height)} 0" rotation="-90 0 0">
-        <a-camera fov="60" look-controls cursor="rayOrigin: mouse" raycaster="objects:.raycastable"></a-camera>
+      <a-entity id="rig" position="0 1.6 0" rotation="0 0 0">
+        <a-camera fov="60" look-controls wasd-controls="enabled:true"
+                  cursor="rayOrigin:mouse" raycaster="objects:.raycastable">
+        </a-camera>
       </a-entity>
       <a-sky color="#87CEEB"></a-sky>
-
       <!-- moving lights -->
       <a-entity moving-light="color:#FFD700; speed:0.07 0.05 0.06; bounds:4 3 4" position="2 2 -2"></a-entity>
       <a-entity moving-light="color:#FF6347; speed:0.06 0.08 0.05; bounds:4 3 4" position="-2 1 2"></a-entity>
       <a-entity moving-light="color:#00CED1; speed:0.05 0.06 0.07; bounds:4 3 4" position="0 3 0"></a-entity>
-
-      <!-- ▪︎ New top-down spotlight ▪︎ -->
-      <a-entity light="type: spot; color:#FFF; intensity:1; angle:45; penumbra:0.2"
-                position="0 {spot_height} 0" rotation="-90 0 0">
-      </a-entity>
-
-      <a-text id="score" value="Score: 0" position="-1.5 1 -2" scale="0.5 0.5 0.5" color="white"></a-text>
+      <!-- top-down spotlight -->
+      <a-entity light="type:spot; color:#FFF; intensity:1; angle:45; penumbra:0.2"
+                position="0 {spot_h} 0" rotation="-90 0 0"></a-entity>
+      <a-text id="score" value="Score:0" position="-1.5 2 -3" scale="0.5 0.5 0.5" color="white"></a-text>
     """
 
-    assets, entities = generate_tilemap(files, directory, grid_width, grid_height)
-    aframe_scene += assets + entities + "</a-scene>"
+    assets, ents = generate_tilemap(files, directory, 8, 8)
+    scene += assets + ents + "</a-scene>"
 
-    # apply camera_move if any
-    cam = st.session_state.get('camera_move')
-    if cam:
-        if cam == 'fire':
-            aframe_scene += "<script>fireRaycast();</script>"
-        else:
-            aframe_scene += f"<script>moveCamera('{cam}');</script>"
-        st.session_state.pop('camera_move')
+    # apply button or key moves
+    cmd = st.session_state.get('camera_move')
+    if cmd:
+      scene += f"<script>moveCamera('{cmd}');</script>"
+      st.session_state.pop('camera_move')
 
     # loader for OBJ/glTF
     loader = '<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aframe-extras.loaders.min.js"></script>'
 
     st.components.v1.html(
-      load_aframe_and_extras() + loader + aframe_scene,
-      height=630
+      load_aframe_and_extras() + loader + scene,
+      height=650
     )
 
 if __name__ == "__main__":