add togglePresentationMode_WASM: enable F1 key handling, refine CSS styles, and adjust asset scaling logic

cmd/client/web/game.js

@@ -729,6 +729,14 @@ document.addEventListener('keydown', (e) => {
         showMenu();
         gameStarted = false;
     }
+
+    // F1 to toggle presentation mode
+    if (e.key === 'F1') {
+        e.preventDefault();
+        if (window.togglePresentationMode_WASM) {
+            window.togglePresentationMode_WASM();
+        }
+    }
 });
 
 // Show Game Over Screen (called by WASM)
@@ -986,10 +994,17 @@ async function spawnPresiAsset() {
     const img = document.createElement('img');
     img.src = `assets/${def.Filename || 'playernew.png'}`;
     
-    // Scale based on JSON and screen height
+    // Base scale from JSON
     const baseScale = def.Scale || 1.0;
-    const responsiveScale = (window.innerHeight / 720) * 3.0; // scale up for presentation
-    img.style.transform = `scale(${baseScale * responsiveScale})`;
+    
+    // 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);
     track.appendChild(el);

cmd/client/web/style.css

@@ -229,23 +229,26 @@ input[type=range]{width:100%;max-width:300px}
 #presiQuoteBox {
     max-width: 800px;
     text-align: center;
-    background: rgba(0, 0, 0, 0.4);
+    background: #2c3e50; /* Solid Mono Blue-Grey */
     padding: 30px;
     border-radius: 10px;
-    border-left: 5px solid #ff0;
+    border: 4px solid #ff0;
+    box-shadow: 10px 10px 0px rgba(0,0,0,0.5);
 }
 
 #presiQuoteText {
     font-family: sans-serif;
-    font-size: 28px;
+    font-size: 24px;
     line-height: 1.4;
     font-style: italic;
     margin-bottom: 20px;
+    color: white;
 }
 
 #presiQuoteAuthor {
     color: #ffcc00;
     font-size: 18px;
+    font-weight: bold;
 }
 
 .presi-qr-container {
@@ -253,16 +256,17 @@ input[type=range]{width:100%;max-width:300px}
     bottom: 40px;
     left: 40px;
     background: white;
-    padding: 15px;
+    padding: 10px;
     border-radius: 5px;
     text-align: center;
     z-index: 20;
     box-shadow: 0 0 20px rgba(0,0,0,0.5);
+    max-width: 150px;
 }
 
 #presiQRCode {
-    width: 150px;
-    height: 150px;
+    width: 120px;
+    height: 120px;
 }
 
 #presiQRCode img {
@@ -272,29 +276,36 @@ input[type=range]{width:100%;max-width:300px}
 
 .presi-qr-container p {
     color: black;
-    font-size: 10px;
-    margin-top: 10px;
+    font-size: 8px;
+    margin-top: 5px;
     font-weight: bold;
 }
 
 .presi-assets-track {
     position: absolute;
-    bottom: 120px;
+    bottom: 0;
     width: 100%;
-    height: 100px;
+    height: 150px;
     pointer-events: none;
     z-index: 2;
+    overflow: hidden;
 }
 
 .presi-asset {
     position: absolute;
-    bottom: 0;
+    bottom: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     transition: transform 0.1s linear;
 }
 
 .presi-asset img {
     display: block;
-    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5));
+    max-height: 80px; /* Limit height */
+    width: auto;
+    object-fit: contain;
+    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5));
 }
 
 .presi-players-layer {