From b7043b017fea33fe2b7b46745f0614b849edac86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Untersch=C3=BCtz?= <sebastian@unterschutz.de>
Date: Wed, 22 Apr 2026 20:49:38 +0200
Subject: [PATCH] refine asset scaling and labeling: adjust scaling logic,
 introduce label display, and update CSS and animation styles

---
 cmd/client/wasm_bridge.go |  1 +
 cmd/client/web/game.js    | 41 +++++++++++++++++++++++++--------------
 cmd/client/web/style.css  |  2 --
 3 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/cmd/client/wasm_bridge.go b/cmd/client/wasm_bridge.go
index 399eb98..22f0751 100644
--- a/cmd/client/wasm_bridge.go
+++ b/cmd/client/wasm_bridge.go
@@ -7,6 +7,7 @@ import (
 	"encoding/base64"
 	"log"
 	"syscall/js"
+	"time"
 )
 
 // notifyWasmReady signalisiert JavaScript dass WASM vollständig geladen ist
diff --git a/cmd/client/web/game.js b/cmd/client/web/game.js
index 689ead0..4d3f03c 100644
--- a/cmd/client/web/game.js
+++ b/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);
 }
diff --git a/cmd/client/web/style.css b/cmd/client/web/style.css
index 247490e..bc1c7d0 100644
--- a/cmd/client/web/style.css
+++ b/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));
 }