Musik hinzugefügt

views/launcher.ejs

@@ -35,6 +35,57 @@
         text-align: center;
         width: 400px;
       }
+
+      /* ── Music Control ── */
+      #music-control {
+        position: fixed;
+        bottom: 16px;
+        right: 16px;
+        z-index: 9999;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        background: rgba(10, 5, 0, 0.85);
+        border: 1px solid #c8960c;
+        border-radius: 8px;
+        padding: 6px 10px;
+        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
+      }
+
+      #music-mute-btn {
+        background: none;
+        border: none;
+        cursor: pointer;
+        font-size: 20px;
+        line-height: 1;
+        padding: 0;
+        color: #f0d080;
+        transition: transform 0.15s;
+      }
+
+      #music-mute-btn:hover {
+        transform: scale(1.2);
+      }
+
+      #music-volume {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 80px;
+        height: 4px;
+        background: #3a2000;
+        border-radius: 2px;
+        outline: none;
+        cursor: pointer;
+      }
+
+      #music-volume::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background: #c8960c;
+        cursor: pointer;
+      }
     </style>
   </head>
 
@@ -413,6 +464,83 @@
         <button class="notification-btn" id="notification-ok">OK</button>
       </div>
     </div>
+    <!-- Music -->
+    <div id="music-control">
+      <button id="music-mute-btn" title="Musik ein/ausschalten">🔊</button>
+      <input
+        type="range"
+        id="music-volume"
+        min="0"
+        max="1"
+        step="0.01"
+        value="0.4"
+        title="Lautstärke"
+      />
+    </div>
+    <audio id="bg-music" loop preload="auto"></audio>
+
+    <script>
+      (function () {
+        const playlist = [
+          "/music/delosound-medieval-background-351307.mp3", // ← vollständigen Namen ergänzen
+          "/music/dueg-oth-musik-adel-142724.mp3", // ← vollständigen Namen ergänzen
+          "/music/dueg-oth-musik-hintergrund-142725.mp3", // ← vollständigen Namen ergänzen
+          "/music/eemmraan-fantasy-kingdom-261257.mp3", // ← vollständigen Namen ergänzen
+          "/music/jean-paul-v-dancing-in-the-medieval-time-329033.mp3", // ← vollständigen Namen ergänzen
+          "/music/jean-paul-v-danse-des-princesses-307890.mp3", // ← vollständigen Namen ergänzen
+          "/music/kaazoom-medieval-dance-2-min-edit-medieval-music-404925.mp3", // ← vollständigen Namen ergänzen
+        ];
+
+        const audio = document.getElementById("bg-music");
+        const muteBtn = document.getElementById("music-mute-btn");
+        const vol = document.getElementById("music-volume");
+
+        let muted = localStorage.getItem("dok_muted") === "true";
+        if (localStorage.getItem("dok_vol") !== null)
+          vol.value = localStorage.getItem("dok_vol");
+
+        audio.volume = parseFloat(vol.value);
+
+        // Zufälliges Lied wählen
+        audio.src = playlist[Math.floor(Math.random() * playlist.length)];
+        audio.addEventListener("ended", () => {
+          audio.src = playlist[Math.floor(Math.random() * playlist.length)];
+          if (!muted) audio.play().catch(() => {});
+        });
+
+        function applyMute() {
+          audio.muted = muted;
+          muteBtn.textContent = muted ? "🔇" : "🔊";
+          if (!muted && audio.paused) audio.play().catch(() => {});
+          localStorage.setItem("dok_muted", muted);
+        }
+
+        muteBtn.addEventListener("click", () => {
+          muted = !muted;
+          applyMute();
+        });
+
+        vol.addEventListener("input", () => {
+          audio.volume = parseFloat(vol.value);
+          localStorage.setItem("dok_vol", vol.value);
+          if (parseFloat(vol.value) > 0 && muted) {
+            muted = false;
+            applyMute();
+          }
+          muteBtn.textContent = parseFloat(vol.value) === 0 ? "🔇" : "🔊";
+        });
+
+        applyMute();
+        document.addEventListener(
+          "click",
+          () => {
+            if (!muted) audio.play().catch(() => {});
+          },
+          { once: true },
+        );
+      })();
+    </script>
+
     <script type="module" src="/js/map-ui.js"></script>
     <script src="/socket.io/socket.io.js"></script>
     <script>