ZB-Server/EscapeFromTeacher
Private
Public Access
1
0
Fork 0
Code Activity

refine asset scaling and labeling: adjust scaling logic, introduce label display, and update CSS and animation styles
All checks were successful
Dynamic Branch Deploy / build-and-deploy (push) Successful in 2m0s

Browse Source
This commit is contained in:
Sebastian Unterschütz
2026-04-22 20:49:38 +02:00
parent be76d025da
commit b7043b017f
3 changed files with 27 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
cmd/client/wasm_bridge.go
View File

@@ -7,6 +7,7 @@ import (
"encoding/base64" "encoding/base64"
"log" "log"
"syscall/js" "syscall/js"
"time"
) )
// notifyWasmReady signalisiert JavaScript dass WASM vollständig geladen ist // notifyWasmReady signalisiert JavaScript dass WASM vollständig geladen ist

41
cmd/client/web/game.js
View File

@@ -991,29 +991,40 @@ async function spawnPresiAsset() {
const el = document.createElement('div'); const el = document.createElement('div');
el.className = 'presi-asset'; 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'); const img = document.createElement('img');
img.src = `assets/${def.Filename || 'playernew.png'}`; 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; 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 imgContainer.appendChild(img);
const trackHeight = 150; el.appendChild(imgContainer);
const targetSize = trackHeight * 0.6; // target 60% of track height
// Label
img.style.height = `${targetSize}px`; const label = document.createElement('div');
img.style.width = 'auto'; label.textContent = def.ID.toUpperCase();
img.style.transform = `scale(${baseScale * 4.0})`; // Individual scale adjustment label.style.fontSize = '8px';
img.style.transformOrigin = 'bottom center'; label.style.color = '#5dade2';
label.style.marginTop = '10px';
el.appendChild(img); el.appendChild(label);
track.appendChild(el); track.appendChild(el);
const duration = 12 + Math.random() * 8; const duration = 15 + Math.random() * 10;
el.style.animation = `assetSlide ${duration}s linear forwards`; el.style.animation = `assetSlide ${duration}s linear forwards`;
el.style.bottom = `${10 + Math.random() * 30}px`;
// Add random vertical bobbing
el.style.bottom = `${Math.random() * 40}px`;
setTimeout(() => el.remove(), duration * 1000); setTimeout(() => el.remove(), duration * 1000);
} }

2
cmd/client/web/style.css
View File

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