select

assets/css/custom.css

@@ -30,6 +30,7 @@ canvas {
     cursor: pointer;
     border-radius: 3px;
     margin-right: 5px;
+    margin-bottom: 5px;
 }
 
 #stats-buttons button:hover {

assets/js/main.js

@@ -63,9 +63,9 @@ const segments = 128;
 const orbitMaterial = new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.5, transparent: true });
 
 function createPlanet(radius, textureFile, distance, orbitSpeed) {
-    const texture = textureLoader.load(`assets/textures/${textureFile}`);
+    const texture = textureLoader.load(`assets/textures/${textureFile}?v=${Date.now()}`);
     const geometry = new THREE.SphereGeometry(radius, 32, 32);
-    const material = new THREE.MeshBasicMaterial({ map: texture });
+    const material = new THREE.MeshBasicMaterial({ map: texture }); // Reverted
     const planet = new THREE.Mesh(geometry, material);
     
     const pivot = new THREE.Object3D();
@@ -159,6 +159,22 @@ const planetData = {
     }
 };
 
+// --- Selection Outline ---
+let outlineMesh;
+const outlineMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00, side: THREE.BackSide });
+const outlineScale = 1.15;
+
+function setOutline(object) {
+    if (outlineMesh && outlineMesh.parent) {
+        outlineMesh.parent.remove(outlineMesh);
+    }
+
+    outlineMesh = new THREE.Mesh(object.geometry, outlineMaterial);
+    outlineMesh.scale.set(outlineScale, outlineScale, outlineScale);
+    object.add(outlineMesh);
+}
+
+
 // Stats Panel
 const statsInfo = document.getElementById('stats-info');
 const statsButtons = document.getElementById('stats-buttons');
@@ -178,31 +194,42 @@ function updateStats(planetUUID) {
 statsButtons.addEventListener('click', (event) => {
     if (event.target.tagName === 'BUTTON') {
         const planetName = event.target.dataset.planet;
-        let planetUUID;
+        let planetObject, planetUUID;
 
         statsButtons.querySelectorAll('button').forEach(btn => btn.classList.remove('active'));
         event.target.classList.add('active');
 
         if (planetName === 'earth') {
+            planetObject = earthData.planet;
             planetUUID = earthData.planet.uuid;
         } else if (planetName === 'mercury') {
+            planetObject = mercuryData.planet;
             planetUUID = mercuryData.planet.uuid;
         } else if (planetName === 'venus') {
+            planetObject = venusData.planet;
             planetUUID = venusData.planet.uuid;
         } else if (planetName === 'mars') {
+            planetObject = marsData.planet;
             planetUUID = marsData.planet.uuid;
         } else if (planetName === 'jupiter') {
+            planetObject = jupiterData.planet;
             planetUUID = jupiterData.planet.uuid;
         } else if (planetName === 'saturn') {
+            planetObject = saturnData.planet;
             planetUUID = saturnData.planet.uuid;
         } else if (planetName === 'uranus') {
+            planetObject = uranusData.planet;
             planetUUID = uranusData.planet.uuid;
         } else if (planetName === 'neptune') {
+            planetObject = neptuneData.planet;
             planetUUID = neptuneData.planet.uuid;
         }
 
         if (planetUUID) {
             updateStats(planetUUID);
+            if (planetObject) {
+                setOutline(planetObject);
+            }
         }
     }
 });
@@ -210,6 +237,7 @@ statsButtons.addEventListener('click', (event) => {
 // Display Earth's stats by default and set button to active
 updateStats(earthData.planet.uuid);
 statsButtons.querySelector('button[data-planet="earth"]').classList.add('active');
+setOutline(earthData.planet); // Initial outline for Earth
 
 
 // Animation loop