Update app.py

app.py

@@ -7,6 +7,7 @@ def load_aframe_and_extras():
     return """
     <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/aframe-event-set-component.min.js"></script>
+    <script src="https://unpkg.com/[email protected]/dist/aframe-look-at-component.min.js"></script>
     <script>
     let score = 0;
     let selectedEntity = null;
@@ -66,51 +67,58 @@ def load_aframe_and_extras():
     function moveCamera(view) {
       var rig = document.querySelector('#rig');
       var gw = 8, gh = 8;
-      var centerX = 0, centerZ = 0;
+      var center = {x: 0, y: 0, z: 0};
       var height = Math.max(gw, gh) * 1.5;
-      var distance = Math.max(gw, gh) * 1.2;
-      var pos, rot;
+      var distance = Math.max(gw, gh) * 1.5; // Increased distance to fit the entire tilemap
+      var pos;
 
       switch(view) {
         case 'top':
-          pos = {x: centerX, y: height, z: centerZ};
-          rot = {x: -90, y: 0, z: 0};
+          pos = {x: center.x, y: height, z: center.z};
+          rig.setAttribute('position', pos);
+          rig.setAttribute('rotation', {x: -90, y: 0, z: 0});
           break;
         case 'left':
-          pos = {x: -distance, y: height / 2, z: centerZ};
-          rot = {x: 0, y: 90, z: 0};
+          pos = {x: -distance, y: height / 2, z: center.z};
+          rig.setAttribute('position', pos);
+          rig.setAttribute('look-at', center);
           break;
         case 'right':
-          pos = {x: distance, y: height / 2, z: centerZ};
-          rot = {x: 0, y: -90, z: 0};
+          pos = {x: distance, y: height / 2, z: center.z};
+          rig.setAttribute('position', pos);
+          rig.setAttribute('look-at', center);
           break;
         case 'front':
-          pos = {x: centerX, y: height / 2, z: -distance};
-          rot = {x: 0, y: 0, z: 0};
+          pos = {x: center.x, y: height / 2, z: -distance};
+          rig.setAttribute('position', pos);
+          rig.setAttribute('look-at', center);
           break;
         case 'back':
-          pos = {x: centerX, y: height / 2, z: distance};
-          rot = {x: 0, y: 180, z: 0};
+          pos = {x: center.x, y: height / 2, z: distance};
+          rig.setAttribute('position', pos);
+          rig.setAttribute('look-at', center);
           break;
         case 'angle1':
           pos = {x: -distance * 0.7, y: height, z: -distance * 0.7};
-          rot = {x: -45, y: 45, z: 0};
+          rig.setAttribute('position', pos);
+          rig.setAttribute('look-at', center);
           break;
         case 'angle2':
           pos = {x: distance * 0.7, y: height, z: -distance * 0.7};
-          rot = {x: -45, y: -45, z: 0};
+          rig.setAttribute('position', pos);
+          rig.setAttribute('look-at', center);
           break;
         case 'angle3':
           pos = {x: -distance * 0.7, y: height, z: distance * 0.7};
-          rot = {x: -45, y: 135, z: 0};
+          rig.setAttribute('position', pos);
+          rig.setAttribute('look-at', center);
           break;
         case 'angle4':
           pos = {x: distance * 0.7, y: height, z: distance * 0.7};
-          rot = {x: -45, y: -135, z: 0};
+          rig.setAttribute('position', pos);
+          rig.setAttribute('look-at', center);
           break;
       }
-      rig.setAttribute('position', pos);
-      rig.setAttribute('rotation', rot);
     }
 
     function fireRaycast() {