Develop

client/src/App.tsx

@@ -85,3 +85,4 @@ const App: React.FC = () => {
 };
 
 export default App;
+// commmits

client/src/components/BackgroundMusicProvider.tsx

@@ -1,37 +1,33 @@
+// src/components/BackgroundMusic.tsx
 import { useEffect, useRef } from 'react';
 
 interface Props {
   src: string;
   volume?: number;
 }
 
-const BackgroundMusicProvider: React.FC<Props> = ({ src, volume = 0.03 }) => {
+let globalAudio: HTMLAudioElement | null = null;
+
+const BackgroundMusic: React.FC<Props> = ({ src, volume = 0.03 }) => {
   const audioRef = useRef<HTMLAudioElement | null>(null);
 
   useEffect(() => {
-    if (!audioRef.current) {
-      const audio = new Audio(src);
-      audio.loop = true;
-      audio.volume = volume;
-      audioRef.current = audio;
-
-      // 🔒 Play only after a click event
-      const handleUserInteraction = () => {
-        audio.play().catch((err) =>
-          console.warn('Autoplay blocked or error playing:', err)
-        );
-        document.removeEventListener('click', handleUserInteraction);
-      };
-
-      document.addEventListener('click', handleUserInteraction, { once: true });
+    if (!globalAudio) {
+      globalAudio = new Audio(src);
+      globalAudio.loop = true;
+      globalAudio.volume = volume;
+      globalAudio.play().catch((err) => {
+        console.warn('🎵 Autoplay blocked or failed:', err);
+      });
     }
+    audioRef.current = globalAudio;
 
     return () => {
-      audioRef.current?.pause();
+      // DO NOT stop or recreate the audio on unmount
     };
   }, [src, volume]);
 
   return null;
 };
 
-export default BackgroundMusicProvider;
+export default BackgroundMusic;

client/src/components/screens/GameMap.tsx

@@ -22,17 +22,7 @@ const GameMap: React.FC = () => {
 
   useEffect(() => {
     preloadSounds([
-      '/audio/Dan_correct/Dan-correct-1.wav',
-      '/audio/Dan_correct/Dan-correct-2.wav',
-      '/audio/Dan_correct/Dan-correct-3.wav',
-      '/audio/Dan_correct/Dan-correct-4.wav',
-      '/audio/Dan_incorrect/Dan-incorrect-1.wav',
-      '/audio/Dan_incorrect/Dan-incorrect-2.wav',
-      '/audio/Dan_incorrect/Dan-incorrect-3.wav',
-      '/audio/Dan_incorrect/Dan-incorrect-4.wav',
-      '/audio/Dan_incorrect/Dan-incorrect-5.wav',
-      //'/audio/5inarow.wav'
-    ]);
+      '/audio/Dan_correct/Dan-correct-1.wav']);
   }, []);
 
   const handleDanHover = () => {

client/src/components/screens/Questions.tsx

@@ -236,23 +236,27 @@ const Questions: React.FC = () => {
               ))}
 
             <div className="mb-4 text-white text-base text-left whitespace-pre-wrap">
-              <ReactMarkdown
-                components={{
-                  code({ inline, children, ...props }: any) {
-                    return inline ? (
-                      <code className="inline-code" {...props}>
-                        {children}
-                      </code>
-                    ) : (
-                      <div className="bg-gray-800 p-4 rounded-md text-sm font-mono shadow-lg overflow-x-auto">
-                        <code {...props}>{children}</code>
-                      </div>
-                    );
-                  },
-                }}
-              >
-                {question.question}
-              </ReactMarkdown>
+  <ReactMarkdown
+  components={{
+    p({ node, children, ...props }) {
+      return <div className="mb-2" {...props}>{children}</div>;
+    },
+    code({ inline, children, ...props }: { inline?: boolean; children?: React.ReactNode }) {
+      return inline ? (
+        <code className="inline-code" {...props}>
+          {children}
+        </code>
+      ) : (
+        <pre className="bg-gray-800 p-4 rounded-md text-sm font-mono shadow-lg overflow-x-auto">
+          <code {...props}>{children}</code>
+        </pre>
+      );
+    },
+  }}
+>
+  {question.question}
+</ReactMarkdown>
+
             </div>
 
             <div className="text-left flex flex-col items-start gap-2 text-white">