Adapt for mobile

RomanSoroking · RomanSoroking · commit d2f215fc7d5e · 2025-02-28T16:01:52.000+01:00
diff --git a/midi.html b/midi.html
@@ -2,43 +2,87 @@
 <html>
 <head>
   <meta charset="utf-8">
+  <!-- Ensure mobile devices render the page correctly -->
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  
   <title>MIDI Quiz Game - Host</title>
   <style>
+    /* Basic styling and responsive container */
     body {
       font-family: Arial, sans-serif;
       padding: 20px;
+      margin: 0;
+      background: #f4f4f4;
+    }
+    h1, h2 {
+      text-align: center;
     }
     #status {
       margin-bottom: 15px;
       font-weight: bold;
+      text-align: center;
     }
-    .player {
-      margin: 5px 0;
+    #controls {
+      text-align: center;
+      margin-bottom: 15px;
     }
     button {
       margin: 5px;
-      padding: 5px 10px;
-    }
-    #controls {
-      margin-bottom: 15px;
+      padding: 10px 15px;
+      font-size: 1em;
+      border: none;
+      border-radius: 4px;
+      background-color: #4285F4;
+      color: white;
+    }
+    button:disabled {
+      background-color: #aaa;
+    }
+    #nominal, #timer {
+      text-align: center;
+      font-size: 1.2em;
+      margin: 10px 0;
     }
-    #timer {
-      font-size: 20px;
-      font-weight: bold;
-      color: red;
+    #players {
+      margin: 0 auto;
+      max-width: 600px;
+      padding: 10px;
+      background: white;
+      border-radius: 4px;
+      box-shadow: 0 0 5px rgba(0,0,0,0.1);
     }
-    #nominal {
-      font-size: 18px;
-      margin: 10px 0;
+    .player {
+      margin: 5px 0;
+      padding: 8px;
+      border-bottom: 1px solid #ddd;
     }
-    /* Scrollable log area with fixed height */
+    /* Scrollable log area */
     #messages {
       max-height: 150px;
       overflow-y: auto;
       border: 1px solid #ccc;
       padding: 5px;
       list-style: none;
-      margin: 10px 0;
+      margin: 10px auto;
+      max-width: 600px;
+      background: white;
+      border-radius: 4px;
+    }
+    /* Media query for smaller screens */
+    @media (max-width: 600px) {
+      body {
+        padding: 10px;
+        font-size: 16px;
+      }
+      button {
+        padding: 10px;
+        font-size: 1em;
+        width: 100%;
+        margin: 5px 0;
+      }
+      #players, #messages {
+        width: 100%;
+      }
     }
   </style>
 </head>
@@ -47,7 +91,6 @@ <h1>MIDI Quiz Game - Host</h1>
   <div id="status">Initializing...</div>
   
   <div id="controls">
-    <!-- Host Buttons -->
     <button id="time">Time</button>
     <button id="correct">Correct</button>
     <button id="wrong">Wrong</button>
@@ -258,11 +301,11 @@ <h2>Players</h2>
       saveGameState();
     }
     
-    // "Reset Game" button: Set all player scores to 0, set nominal back to 10, and reset timer.
+    // "Reset Game" button: Set all player scores to 0, set nominal to 10, and reset timer.
     function resetGame() {
       stopTimer();
       players.forEach(p => p.score = 0);
-      currentNominalIndex = 0; // This makes the displayed nominal 10.
+      currentNominalIndex = 0; // This resets the displayed nominal to 10.
       resetRound();
       logMessage("Reset Game: All player scores set to 0 and nominal set to 10.");
       updatePlayersUI();
@@ -333,8 +376,7 @@ <h2>Players</h2>
         p.ignored = false;
         p.answeredDuringTimer = false;
       });
-      resetActiveState()
-      activePlayer = null;
+      resetActiveState();
       updatePlayersUI();
       updateHostControls();
     }
