refine asset scaling and labeling: adjust scaling logic, introduce label display, and update CSS and animation styles

cmd/client/web/game.js

@@ -991,29 +991,40 @@ async function spawnPresiAsset() {
     const el = document.createElement('div');
     el.className = 'presi-asset';
     
+    // Container for the image to handle scaling better
+    const imgContainer = document.createElement('div');
+    imgContainer.style.width = '100px';
+    imgContainer.style.height = '100px';
+    imgContainer.style.display = 'flex';
+    imgContainer.style.alignItems = 'center';
+    imgContainer.style.justifyContent = 'center';
+
     const img = document.createElement('img');
     img.src = `assets/${def.Filename || 'playernew.png'}`;
     
-    // Base scale from JSON
+    // Scale based on JSON
+    // We use the Scale from JSON to determine the relative size
     const baseScale = def.Scale || 1.0;
+    img.style.maxWidth = '100%';
+    img.style.maxHeight = '100%';
+    img.style.transform = `scale(${baseScale * 5.0})`; // Individual scale adjustment
     
-    // We want the asset to have a certain base size in the track, scaled by its individual Scale factor
-    const trackHeight = 150;
-    const targetSize = trackHeight * 0.6; // target 60% of track height
-    
-    img.style.height = `${targetSize}px`;
-    img.style.width = 'auto';
-    img.style.transform = `scale(${baseScale * 4.0})`; // Individual scale adjustment
-    img.style.transformOrigin = 'bottom center';
-    
-    el.appendChild(img);
+    imgContainer.appendChild(img);
+    el.appendChild(imgContainer);
+
+    // Label
+    const label = document.createElement('div');
+    label.textContent = def.ID.toUpperCase();
+    label.style.fontSize = '8px';
+    label.style.color = '#5dade2';
+    label.style.marginTop = '10px';
+    el.appendChild(label);
+
     track.appendChild(el);
 
-    const duration = 12 + Math.random() * 8;
+    const duration = 15 + Math.random() * 10;
     el.style.animation = `assetSlide ${duration}s linear forwards`;
-    
-    // Add random vertical bobbing
-    el.style.bottom = `${Math.random() * 40}px`;
+    el.style.bottom = `${10 + Math.random() * 30}px`;
 
     setTimeout(() => el.remove(), duration * 1000);
 }

cmd/client/web/style.css

@@ -302,8 +302,6 @@ input[type=range]{width:100%;max-width:300px}
 
 .presi-asset img {
     display: block;
-    max-height: 80px; /* Limit height */
-    width: auto;
     object-fit: contain;
     filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5));
 }