Merge branch 'develop' into frontend/fixes

Author: shawnachirillo

…ic/audio/Dan_correct/Dan-correctStar.wav …blic/audio/Dan_correct/Dan-correct-4.wavclient/public/audio/Dan_correct/Dan-correctStar.wav renamed to client/public/audio/Dan_correct/Dan-correct-4.wav client/public/audio/Dan_correct/Dan-correctStar.wav renamed to client/public/audio/Dan_correct/Dan-correct-4.wav

@@ -1,59 +1,56 @@
-import { useEffect, useState } from 'react';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '../components/ui/dialog';
-import SoundPlayer from './SoundPlayer';
+import { useEffect, useState } from "react";
+import SoundPlayer from "./SoundPlayer";
+import ReactDOM from "react-dom";
 
 interface AnswerResultModalProps {
   isOpen: boolean;
   onClose: () => void;
   isCorrect: boolean;
-  drDanQuote: string;
   audioUrl?: string;
 }
 
 const AnswerResultModal = ({
   isOpen,
   onClose,
   isCorrect,
-  drDanQuote,
   audioUrl,
 }: AnswerResultModalProps) => {
   const [playAudio, setPlayAudio] = useState(false);
 
-  // ✅ Start or stop audio based on modal open state
   useEffect(() => {
     if (isOpen) {
       setPlayAudio(true);
-    } else {
-      setPlayAudio(false);
     }
   }, [isOpen]);
 
-  return (
-    <Dialog open={isOpen} onOpenChange={(open) => { if (!open) onClose(); }}>
-      <DialogContent className="rounded-2xl shadow-xl text-center">
-        <DialogHeader>
-          <DialogTitle className={`text-2xl font-bold ${isCorrect ? 'text-green-500' : 'text-red-500'}`}>
-            {isCorrect ? "Correct!" : "Wrong!"}
-          </DialogTitle>
-          <DialogDescription className="text-lg mt-2">
-            {drDanQuote}
-          </DialogDescription>
-        </DialogHeader>
-
-        {/* ✅ Use Howler to play full clip, then close modal */}
-        {audioUrl && (
-          <SoundPlayer
-            src={audioUrl}
-            playing={playAudio}
-            onEnd={() => {
-              setPlayAudio(false);
-              onClose();
-            }}
-          />
-        )}
-      </DialogContent>
-    </Dialog>
+  if (!isOpen) return null;
+
+  const drDanImage = isCorrect
+    ? "/avatars/DrDanCorrect.png"
+    : "/avatars/DrDanWrong.png";
+
+  const modalContent = (
+    <div className="fixed top-1/2 right-4 transform -translate-y-1/2 z-[9999] w-[200px] flex flex-col items-center gap-2 animate-fadeIn pointer-events-none">
+      <img
+        src={drDanImage}
+        alt="Dr. Dan"
+        className="w-[160px] h-auto object-contain"
+      />
+      {audioUrl && (
+        <SoundPlayer
+          src={audioUrl}
+          playing={playAudio}
+          onEnd={() => {
+            setPlayAudio(false);
+            onClose();
+          }}
+        />
+      )}
+    </div>
   );
+
+  return ReactDOM.createPortal(modalContent, document.body);
 };
 
 export default AnswerResultModal;
+//commiting"

…audio/Dan_incorrect/Dan-incorrect-3..wav …/audio/Dan_incorrect/Dan-incorrect-3.wavclient/public/audio/Dan_incorrect/Dan-incorrect-3..wav renamed to client/public/audio/Dan_incorrect/Dan-incorrect-3.wav client/public/audio/Dan_incorrect/Dan-incorrect-3..wav renamed to client/public/audio/Dan_incorrect/Dan-incorrect-3.wav

@@ -18,11 +18,12 @@ const DanismEvent = () => {
       '/audio/Dan_correct/Dan-correct-2.wav',
       '/audio/Dan_correct/Dan-correct-3.wav',
       '/audio/Dan_correct/Dan-correct-4.wav',
+      '/audio/Dan_correct/Dan-5inarow.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/drdan_fallback.mp3'
+      '/audio/Dan_incorrect/Dan-incorrect-5.wav'
     ]);
   }, []);
 

…dio/Dan_incorrect/Dan-firstincorrect.wav …/audio/Dan_incorrect/Dan-incorrect-5.wavclient/public/audio/Dan_incorrect/Dan-firstincorrect.wav renamed to client/public/audio/Dan_incorrect/Dan-incorrect-5.wav client/public/audio/Dan_incorrect/Dan-firstincorrect.wav renamed to client/public/audio/Dan_incorrect/Dan-incorrect-5.wav

@@ -3,7 +3,8 @@ import { useParams, useNavigate } from 'react-router-dom';
 import AnswerResultModal from '../AnswerResultModal';
 import ReactMarkdown from 'react-markdown';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import vscDarkPlus from "react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus";
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { preloadSounds } from '../../utils/preloadSounds';
 
 interface Question {
   snippet?: string;
@@ -22,20 +23,25 @@ const Questions: React.FC = () => {
   const [userWasCorrect, setUserWasCorrect] = useState(false);
   const [audioUrl, setAudioUrl] = useState('');
 
+  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/correctStar.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/firstincorrect.wav'
+    ]);
+  }, []);
+
   const minionMap: Record<string, string> = {
-    q1: 'NullByte',
-    q2: 'Dbug',
-    q3: 'Typerrorasaurus',
-    q4: 'PieThon',
-    q5: 'Codezilla',
+    q1: 'NullByte', q2: 'Dbug', q3: 'Typerrorasaurus', q4: 'PieThon', q5: 'Codezilla',
   };
-
   const difficultyMap: Record<string, string> = {
-    NullByte: 'easy',
-    Dbug: 'medium',
-    Typerrorasaurus: 'medium-hard',
-    PieThon: 'hard',
-    Codezilla: 'boss',
+    NullByte: 'easy', Dbug: 'medium', Typerrorasaurus: 'medium-hard', PieThon: 'hard', Codezilla: 'boss',
   };
 
   useEffect(() => {
@@ -67,15 +73,11 @@ const Questions: React.FC = () => {
           value: choice.replace(/^[A-Da-d]\)\s*/, ''),
         }));
 
-        const correctFromLetter =
-          raw.answer?.length === 1
-            ? raw.choices[raw.answer.charCodeAt(0) - 65]?.replace(/^[A-Da-d]\)\s*/, '')
-            : raw.answer;
+        const correctFromLetter = raw.answer?.length === 1
+          ? raw.choices[raw.answer.charCodeAt(0) - 65]?.replace(/^[A-Da-d]\)\s*/, '')
+          : raw.answer;
 
-        const correctFromIndex =
-          typeof raw.correctIndex === 'number'
-            ? raw.choices[raw.correctIndex]
-            : null;
+        const correctFromIndex = typeof raw.correctIndex === 'number' ? raw.choices[raw.correctIndex] : null;
 
         setQuestion({
           snippet: raw.snippet,
@@ -89,24 +91,22 @@ const Questions: React.FC = () => {
     };
 
     fetchQuestion();
-    return () => {
-      didCancel = true;
-    };
+    return () => { didCancel = true; };
   }, [id]);
 
   const getRandomAudio = (isCorrect: boolean): string => {
     const correctClips = [
       '/audio/Dan_correct/Dan-correct-1.wav',
       '/audio/Dan_correct/Dan-correct-2.wav',
       '/audio/Dan_correct/Dan-correct-3.wav',
-      '/audio/Dan_correct/correctStar.wav',
+      '/audio/Dan_correct/Dan-correct-4.wav'
     ];
     const incorrectClips = [
       '/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/firstincorrect.wav',
+      '/audio/Dan_incorrect/Dan-incorrect-5.wav'
     ];
     const pool = isCorrect ? correctClips : incorrectClips;
     return pool[Math.floor(Math.random() * pool.length)];
@@ -125,48 +125,46 @@ const Questions: React.FC = () => {
   const handleBack = () => navigate('/map');
 
   return (
-    <div className="question-screen max-h-screen overflow-y-auto p-6 max-w-xl mx-auto text-center">
-      <h1 className="text-xl font-semibold mb-2">
-        Question {id?.replace('q', '') || ''}
-      </h1>
+    <div className="relative question-screen max-h-screen overflow-y-auto p-6 max-w-xl mx-auto text-center">
+      <h1 className="text-xl font-semibold mb-2">Question {id?.replace('q', '') || ''}</h1>
 
       {!question ? (
         <p>Loading question...</p>
       ) : (
         <>
           <div className="mb-4 text-white text-base text-left whitespace-pre-wrap">
-            {question.snippet?.trim() ? (
+            {question.snippet?.trim() && (
               <SyntaxHighlighter
                 language="javascript"
                 style={vscDarkPlus}
                 showLineNumbers
                 customStyle={{
-                  border: '2px solid red',
-                  borderRadius: '0.5rem',
-                  marginBottom: '1rem',
-                  maxHeight: '220px',
-                  overflowY: 'auto',
-                  paddingRight: '1rem',
-                  fontSize: '0.75rem',
+                  border: '2px solid red', borderRadius: '0.5rem',
+                  marginBottom: '1rem', maxHeight: '220px',
+                  overflowY: 'auto', paddingRight: '1rem', fontSize: '0.75rem'
                 }}
               >
                 {question.snippet}
               </SyntaxHighlighter>
-            ) : null}
+            )}
 
             <ReactMarkdown
               components={{
-                code({ inline, children, ...props }: { inline?: boolean; children?: React.ReactNode }) {
+                code({ inline, className, children, ...props }: { inline?: boolean; className?: string; children?: React.ReactNode }) {
                   return inline ? (
-                    <code className="bg-gray-700 px-1 rounded text-sm" {...props}>
-                      {children}
-                    </code>
+                    <code className="bg-gray-700 px-1 rounded text-sm" {...props}>{children}</code>
                   ) : (
-                    <pre className="bg-gray-800 p-4 rounded-md text-sm font-mono shadow-lg mb-4">
+                    <pre className={`bg-gray-800 p-4 rounded-md text-sm font-mono shadow-lg ${className ?? ''}`}>
                       <code {...props}>{children}</code>
                     </pre>
                   );
                 },
+                p({ node, children, ...props }) {
+                  if (Array.isArray(children) && children.length === 1 && typeof children[0] === 'object' && (children[0] as any).type === 'pre') {
+                    return <>{children}</>;
+                  }
+                  return <p {...props}>{children}</p>;
+                },
               }}
             >
               {question.question}
@@ -209,9 +207,6 @@ const Questions: React.FC = () => {
         isOpen={showResult}
         onClose={() => setShowResult(false)}
         isCorrect={userWasCorrect}
-        drDanQuote={
-          userWasCorrect ? "You're getting it, junior dev!" : "Nope — that ain't it!"
-        }
         audioUrl={audioUrl}
       />
     </div>

client/public/avatars/DrDanCorrect.png

@@ -2,65 +2,61 @@
 
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-//import { X } from "lucide-react";
-
 import { cn } from "@/utils/utils";
 
+// Root dialog elements
 const Dialog = DialogPrimitive.Root;
 const DialogTrigger = DialogPrimitive.Trigger;
 
+// Portal container
 const DialogPortal = ({ ...props }: DialogPrimitive.DialogPortalProps) => (
-  < DialogPrimitive.Portal {...props} />
+  <DialogPrimitive.Portal {...props} />
 );
 
+// Optional overlay
 const DialogOverlay = React.forwardRef<
   React.ComponentRef<typeof DialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Overlay
     ref={ref}
-  className={cn(
-      "fixed inset-0 z-[60] bg-black/80 backdrop-blur-sm",
-      className
-    )}
+    className={cn("fixed inset-0 z-[60] bg-black/60 backdrop-blur-sm", className)}
     {...props}
   />
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
+// Clean DialogContent (NO red border, NO forced width, NO test box)
 const DialogContent = React.forwardRef<
   React.ComponentRef<typeof DialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 >(({ className, children, ...props }, ref) => (
   <DialogPortal>
     <DialogOverlay />
     <DialogPrimitive.Content
-  ref={ref}
-  className={cn(
-    "fixed z-[70] bottom-[15%] right-[5%] w-[300px] rounded-xl bg-white/90 dark:bg-gray-900/90 text-black dark:text-white p-4 shadow-xl ring-2 ring-blue-400/40 animate-fadeIn",
-    className
-  )}
-  {...props}
->
-
-      <div className="space-y-4">{children}</div>
+      ref={ref}
+      className={cn(
+        "fixed z-[9999] p-0 bg-transparent border-none shadow-none w-fit",
+        className
+      )}
+      {...props}
+    >
+      {children}
     </DialogPrimitive.Content>
   </DialogPortal>
 ));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
+// Optional header wrapper
 const DialogHeader = ({
   className,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
-    {...props}
-  />
+  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
 );
 DialogHeader.displayName = "DialogHeader";
 
+// Optional title
 const DialogTitle = React.forwardRef<
   React.ComponentRef<typeof DialogPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
@@ -73,18 +69,20 @@ const DialogTitle = React.forwardRef<
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
+// Optional description
 const DialogDescription = React.forwardRef<
   React.ComponentRef<typeof DialogPrimitive.Description>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
-  ref={ref}
-  className={cn("text-sm text-muted-foreground", className)}
-  {...props} 
-  /> 
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
 ));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
+// Exports
 export {
   Dialog,
   DialogTrigger,