From 57b6c0e234de3c7b11209e6801a89d751ff977c3 Mon Sep 17 00:00:00 2001
From: "tom.hempel" <tom.hempel@stud.uni-bamberg.de>
Date: Thu, 2 Oct 2025 13:59:44 +0200
Subject: [PATCH] redesigned player-display to match style

---
 experiment-scripts/player-display.html | 180 ++++++++++++++-----------
 1 file changed, 101 insertions(+), 79 deletions(-)

diff --git a/experiment-scripts/player-display.html b/experiment-scripts/player-display.html
index ad9181c..85e31d4 100644
--- a/experiment-scripts/player-display.html
+++ b/experiment-scripts/player-display.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Charades Player Display</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
     <style>
         * {
             margin: 0;
@@ -12,150 +13,170 @@
         }
 
         body {
-            font-family: 'Arial', sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
+            font-family: 'Inter', sans-serif;
+            background: #f5f5f5;
+            color: #2c3e50;
             height: 100vh;
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: center;
-            overflow: hidden;
+            padding: 2rem;
         }
 
         .container {
-            text-align: center;
-            width: 90%;
-            max-width: 1200px;
+            width: 100%;
+            max-width: 1000px;
         }
 
         .status-bar {
+            background: white;
+            border: 2px solid #2c3e50;
+            border-radius: 4px;
+            padding: 1rem 2rem;
+            margin-bottom: 2rem;
+            text-align: center;
+        }
+
+        .status-text {
+            font-size: 1rem;
+            color: #7f8c8d;
+            font-weight: 500;
+        }
+
+        .connection-status {
             position: fixed;
-            top: 20px;
-            left: 50%;
-            transform: translateX(-50%);
-            background: rgba(0, 0, 0, 0.3);
-            padding: 10px 30px;
-            border-radius: 25px;
-            font-size: 1.2rem;
-            backdrop-filter: blur(10px);
+            top: 1.5rem;
+            right: 1.5rem;
+            padding: 0.5rem 1rem;
+            border-radius: 3px;
+            font-size: 0.875rem;
+            font-weight: 500;
+        }
+
+        .connected {
+            background: #27ae60;
+            color: white;
+        }
+
+        .disconnected {
+            background: #e74c3c;
+            color: white;
         }
 
         .word-display {
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 20px;
-            padding: 60px 40px;
-            margin: 40px 0;
-            backdrop-filter: blur(15px);
-            border: 2px solid rgba(255, 255, 255, 0.2);
-            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+            background: white;
+            border: 3px solid #2c3e50;
+            border-radius: 4px;
+            padding: 4rem 2rem;
+            text-align: center;
+            min-height: 400px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
         }
 
         .current-word {
-            font-size: 4rem;
-            font-weight: bold;
-            margin-bottom: 20px;
-            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+            font-size: 5rem;
+            font-weight: 600;
+            color: #2c3e50;
             line-height: 1.2;
             word-wrap: break-word;
+            margin-bottom: 2rem;
         }
 
         .timer {
-            font-size: 3rem;
-            color: #ffd700;
-            font-weight: bold;
-            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-            margin-top: 20px;
+            font-family: 'Roboto Mono', monospace;
+            font-size: 4rem;
+            color: #34495e;
+            font-weight: 500;
+            margin-top: 1rem;
         }
 
         .timer.warning {
-            color: #ff6b6b;
-            animation: pulse 1s infinite;
+            color: #e67e22;
         }
 
-        @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.7; }
+        .timer.danger {
+            color: #e74c3c;
         }
 
         .waiting-message {
-            font-size: 2rem;
-            opacity: 0.8;
-            font-style: italic;
+            font-size: 1.5rem;
+            color: #95a5a6;
+            font-weight: 400;
         }
 
         .last-word-status {
             position: fixed;
-            bottom: 30px;
+            bottom: 2rem;
             left: 50%;
             transform: translateX(-50%);
-            padding: 15px 30px;
-            border-radius: 15px;
-            font-size: 1.5rem;
-            font-weight: bold;
+            padding: 1rem 2rem;
+            border-radius: 4px;
+            font-size: 1.25rem;
+            font-weight: 500;
         }
 
         .status-correct {
-            background: rgba(76, 175, 80, 0.9);
+            background: #27ae60;
             color: white;
+            border: 2px solid #229954;
         }
 
         .status-incorrect {
-            background: rgba(244, 67, 54, 0.9);
+            background: #e74c3c;
             color: white;
+            border: 2px solid #c0392b;
         }
 
         .status-hidden {
             display: none;
         }
 
-        .connection-status {
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            padding: 10px 20px;
-            border-radius: 15px;
-            font-size: 1rem;
-            font-weight: bold;
-        }
-
-        .connected {
-            background: rgba(76, 175, 80, 0.9);
-        }
-
-        .disconnected {
-            background: rgba(244, 67, 54, 0.9);
-        }
-
         @media (max-width: 768px) {
+            body {
+                padding: 1rem;
+            }
+
             .current-word {
-                font-size: 2.5rem;
+                font-size: 3rem;
             }
             
             .timer {
-                font-size: 2rem;
+                font-size: 2.5rem;
             }
             
             .waiting-message {
-                font-size: 1.5rem;
+                font-size: 1.25rem;
             }
             
             .word-display {
-                padding: 40px 20px;
+                padding: 3rem 1.5rem;
+                min-height: 300px;
+            }
+
+            .status-bar {
+                padding: 0.75rem 1rem;
+            }
+
+            .status-text {
+                font-size: 0.9rem;
             }
         }
     </style>
 </head>
 <body>
-    <div class="status-bar">
-        <span id="player-info">Waiting for game to start...</span>
-    </div>
-
     <div class="connection-status connected" id="connection-status">
         Connected
     </div>
 
     <div class="container">
+        <div class="status-bar">
+            <div id="player-info" class="status-text">Waiting for game to start...</div>
+        </div>
+
         <div class="word-display">
             <div id="current-word" class="current-word" style="display: none;"></div>
             <div id="waiting-message" class="waiting-message">
@@ -240,23 +261,24 @@
             const seconds = Math.max(0, timeRemaining);
             timerEl.textContent = seconds.toFixed(1) + 's';
             
-            // Add warning class when time is low
-            if (seconds <= 10) {
+            // Update timer color based on remaining time
+            timerEl.className = 'timer';
+            if (seconds <= 5) {
+                timerEl.classList.add('danger');
+            } else if (seconds <= 10) {
                 timerEl.classList.add('warning');
-            } else {
-                timerEl.classList.remove('warning');
             }
         }
 
         function showLastWordStatus(status) {
             if (status === 1) {
-                lastWordStatusEl.textContent = '✅ Previous word: CORRECT!';
+                lastWordStatusEl.textContent = 'Previous word: CORRECT';
                 lastWordStatusEl.className = 'last-word-status status-correct';
                 setTimeout(() => {
                     lastWordStatusEl.className = 'last-word-status status-hidden';
                 }, 3000);
             } else if (status === 0) {
-                lastWordStatusEl.textContent = '❌ Previous word: Time up!';
+                lastWordStatusEl.textContent = 'Previous word: Time Up';
                 lastWordStatusEl.className = 'last-word-status status-incorrect';
                 setTimeout(() => {
                     lastWordStatusEl.className = 'last-word-status status-hidden';
@@ -299,4 +321,4 @@
         });
     </script>
 </body>
-</html>
\ No newline at end of file
+</html>