enhance beta candle responsiveness across all screen sizes

Author: Ritika Mishra

src/components/BandPowerGraph.tsx

@@ -255,7 +255,7 @@ const Graph: React.FC<GraphProps> = ({
   return (
     <div
       ref={containerRef}
-      className={`w-full h-full min-h-0 min-w-0 px-4`}
+      className={`w-full h-full min-h-0 min-w-0 py-2`}
     >
       <canvas
         ref={canvasRef}

src/components/CandleLit.tsx

@@ -6,16 +6,39 @@ type FFTData = FFTChannel[];
 interface BrightCandleViewProps {
   fftData?: FFTData;
   betaPower: number;
+  fullscreen?: boolean;
 }
 
 interface CandleLitProps {
   betaPower: number;
 }
 
-const BrightCandleView: React.FC<BrightCandleViewProps> = ({ fftData = [], betaPower }) => {
+const BrightCandleView: React.FC<BrightCandleViewProps> = ({ fftData = [], betaPower, fullscreen }) => {
   const brightness = Math.max(0, betaPower / 100); // Normalize brightness
   // Add smoothing and minimum brightness
   const [displayBrightness, setDisplayBrightness] = useState(0.1); // Start with small flame
+  const [screenSize, setScreenSize] = useState('normal'); // 'normal', 'large' (150%), 'xlarge' (175%)
+
+  useEffect(() => {
+    // Detect screen size
+    const detectScreenSize = () => {
+      const width = window.innerWidth;
+      if (width >= 1920) { // Assuming 1920px is 175% of standard size
+        setScreenSize('xlarge');
+      } else if (width >= 1680) { // Assuming 1680px is 150% of standard size
+        setScreenSize('large');
+      } else {
+        setScreenSize('normal');
+      }
+    };
+
+    // Set initial size
+    detectScreenSize();
+
+    // Update on resize
+    window.addEventListener('resize', detectScreenSize);
+    return () => window.removeEventListener('resize', detectScreenSize);
+  }, []);
 
   useEffect(() => {
     // Always show at least a small flame (0.1) and cap at 1.0
@@ -53,10 +76,10 @@ const BrightCandleView: React.FC<BrightCandleViewProps> = ({ fftData = [], betaP
   // Generate a slightly randomized organic flame path
   const generateFlamePath = () => {
     const basePoints = [
-      { x: 100, y: 50 },
-      { x: 70, y: 100 },
-      { x: 100, y: 180 },
-      { x: 130, y: 100 }
+      { x: 100, y: 30 },  // Adjusted Y positions
+      { x: 60, y: 80 },   // Increased vertical spread
+      { x: 100, y: 200 }, // Increased height
+      { x: 140, y: 80 }   // Wider horizontal spread
     ];
     const controlPoints = basePoints.map(point => ({
       x: point.x + (Math.random() - 0.5) * (10 * brightness),
@@ -69,28 +92,59 @@ const BrightCandleView: React.FC<BrightCandleViewProps> = ({ fftData = [], betaP
     `;
   };
 
-  return (
-    <div className="w-full h-full flex items-center justify-center min-h-0 min-w-0 ">
-      {/* Candle Container with reduced width */}
-      <div className="relative w-32 h-64 group">
-        {/* Candle Holder with a glassy, frosted look */}
-        <div className="absolute bottom-0 w-full h-32 
-          bg-gradient-to-b from-gray-100 to-gray-200 dark:from-stone-600 dark:to-stone-700 
-          rounded-b-xl rounded-t-md 
-          border border-gray-300 dark:border-white/20 
-          backdrop-blur-md shadow-xl 
-          transition-transform duration-300 
-          before:absolute before:inset-0 before:bg-white/10 before:opacity-40 before:rounded-b-xl before:rounded-t-md
-          "
-        >
+  // Calculate candle size based on screen size and fullscreen state
+  const getCandleWidthClass = () => {
+    if (fullscreen) {
+      return screenSize === 'xlarge' ? 'w-40' : screenSize === 'large' ? 'w-36' : 'w-32';
+    } else {
+      return screenSize === 'xlarge' ? 'w-28' : screenSize === 'large' ? 'w-24' : 'w-20';
+    }
+  };
 
-          <div className="absolute inset-0 overflow-hidden rounded-b-xl rounded-t-md bg-gradient-to-b from-cyan-300 via-blue-400 to-blue-400
-">
+  const getCandleHeightClass = () => {
+    if (fullscreen) {
+      return 'h-96';
+    } else {
+      return screenSize === 'xlarge' ? 'h-56' : screenSize === 'large' ? 'h-48' : 'h-40';
+    }
+  };
 
-            <div className="absolute top-2 left-2 right-2 h-0.5 bg-gray-300/30"></div>
+  const getCandleHolderHeightClass = () => {
+    if (fullscreen) {
+      return 'h-48';
+    } else {
+      return screenSize === 'xlarge' ? 'h-28' : screenSize === 'large' ? 'h-24' : 'h-20';
+    }
+  };
 
+  const getFlameHeightClass = () => {
+    if (fullscreen) {
+      return 'h-64';  // Increased from h-48
+    } else {
+      return screenSize === 'xlarge' ? 'h-56' :  // Increased from h-40
+        screenSize === 'large' ? 'h-48' :    // Increased from h-36
+          'h-40';                             // Increased from h-32
+    }
+  };
+  return (
+    <div className={`w-full h-full flex items-end justify-center min-h-0 min-w-0 ${fullscreen ? 'pb-4' : ''}`}>
+      {/* Candle Container with dynamic width based on screen size and fullscreen mode */}
+      <div className={`relative ${getCandleWidthClass()} ${getCandleHeightClass()} group`}>
+        {/* Candle Holder with a glassy, frosted look */}
+        <div
+          className={`
+    absolute bottom-0 w-full ${getCandleHolderHeightClass()}
+    bg-gradient-to-b from-gray-100 to-gray-200 dark:from-stone-600 dark:to-stone-700
+    rounded-t-md
+    border border-gray-900 dark:border-gray-800 border-b-0
+    backdrop-blur-md
+    transition-transform duration-300
+    before:absolute before:inset-0 before:bg-white/10 before:opacity-40 before:rounded-b-xl before:rounded-t-md
+  `}
+        >
+          <div className="absolute inset-0 overflow-hidden rounded-t-md bg-gradient-to-b from-cyan-300 via-blue-400 to-gray-900">
             <div className="absolute top-2 left-1/2 transform -translate-x-1/2 text-center">
-              <div className="text-sm font-semibold text-gray-500   px-2 py-1 rounded-md ">
+              <div className={`${fullscreen ? 'text-3xl' : screenSize === 'xlarge' ? 'text-2xl' : 'text-xl'} font-semibold text-[#030c21] px-2 py-1 rounded-md opacity-70`}>
                 {String(Math.floor(betaPower)).padStart(2, '0')}
               </div>
             </div>
@@ -100,20 +154,20 @@ const BrightCandleView: React.FC<BrightCandleViewProps> = ({ fftData = [], betaP
         {/* Yellow-Themed Animated Flame */}
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 200 300"
-          className="absolute top-0 left-1/2 transform -translate-x-1/2 w-full h-48 z-10 drop-shadow-xl"
+          viewBox={`0 0 200 ${fullscreen ? 200 : 400}`}  // Increased viewBox height
+          className={`absolute top-0 left-1/2 transform -translate-x-1/2 w-full ${getFlameHeightClass()} z-10 drop-shadow-xl`}
         >
           <defs>
             {/* Outer Flame Gradient: Rich, Realistic Candle Flame Colors */}
             <linearGradient id="outerFlameGradient" x1="0%" y1="0%" x2="0%" y2="100%">
-              <stop offset="0%" stopColor={`rgba(255,140,0, ${brightness * 0.6})`} />
-              <stop offset="100%" stopColor={`rgba(255,69,0, ${brightness * 0.3})`} />
+              <stop offset="0%" stopColor={`rgba(255,140,0, ${brightness * 1})`} />
+              <stop offset="100%" stopColor={`rgba(255,69,0, ${brightness * 0.6})`} />
             </linearGradient>
 
             {/* Inner Flame Gradient: Warm, Luminous Colors */}
             <linearGradient id="innerFlameGradient" x1="0%" y1="0%" x2="0%" y2="100%">
-              <stop offset="0%" stopColor={`rgba(255,165,0, ${brightness * 0.8})`} />
-              <stop offset="100%" stopColor={`rgba(255,99,71, ${brightness * 0.5})`} />
+              <stop offset="0%" stopColor={`rgba(255,165,0, ${brightness * 1.2})`} />
+              <stop offset="100%" stopColor={`rgba(255,99,71, ${brightness * 0.8})`} />
             </linearGradient>
 
             {/* Filters for Enhanced Realism */}
@@ -129,7 +183,6 @@ const BrightCandleView: React.FC<BrightCandleViewProps> = ({ fftData = [], betaP
             </filter>
           </defs>
 
-
           {/* Outer Flame Layer */}
           <path
             d={generateFlamePath()}
@@ -145,23 +198,10 @@ const BrightCandleView: React.FC<BrightCandleViewProps> = ({ fftData = [], betaP
             filter="url(#innerGlow)"
             className="transition-all duration-300 animate-flicker"
           />
-
-          {/* White Hot Core */}
-          <ellipse
-            cx="100"
-            cy="150"
-            rx={`${12 * brightness}`}
-            ry={`${24 * brightness}`}
-            fill={`rgba(255,255,255, ${brightness * 0.6})`}
-            filter="url(#innerGlow)"
-            className="transition-all duration-300"
-          />
         </svg>
-
-
       </div>
     </div>
   );
 };
 
-export default BrightCandleView;
+export default BrightCandleView;

src/components/FFT.tsx

@@ -53,6 +53,28 @@ const FFT = forwardRef(
     const wglPlotsref = useRef<WebglPlot[]>([]);
     const linesRef = useRef<WebglLine[]>([]);
     const sweepPositions = useRef<number[]>(new Array(6).fill(0));
+    const [screenSize, setScreenSize] = useState<'normal' | 'large' | 'xlarge'>('normal');
+
+    // Detect screen size on mount and resize
+    useEffect(() => {
+      const detectScreenSize = () => {
+        const width = window.innerWidth;
+        if (width >= 1920) { // Assuming 1920px is 175% of standard size
+          setScreenSize('xlarge');
+        } else if (width >= 1680) { // Assuming 1680px is 150% of standard size
+          setScreenSize('large');
+        } else {
+          setScreenSize('normal');
+        }
+      };
+
+      // Set initial size
+      detectScreenSize();
+      
+      // Update on resize
+      window.addEventListener('resize', detectScreenSize);
+      return () => window.removeEventListener('resize', detectScreenSize);
+    }, []);
 
     // Extend views to include 'fullcandle'
     const [activeBandPowerView, setActiveBandPowerView] = useState<
@@ -134,6 +156,18 @@ const FFT = forwardRef(
       [currentSamplingRate, fftSize]
     );
 
+    // Get the appropriate scale class based on screen size for fullcandle view
+    const getFullCandleScaleClass = () => {
+      switch (screenSize) {
+        case 'xlarge':
+          return 'scale-150';
+        case 'large':
+          return 'scale-125';
+        default:
+          return 'scale-100';
+      }
+    };
+
     const renderBandPowerView = () => {
       switch (activeBandPowerView) {
         case 'bandpower':
@@ -149,27 +183,37 @@ const FFT = forwardRef(
           );
         case 'brightcandle':
           return (
-            <BrightCandleView
-              betaPower={betaPower}
-              fftData={fftData}
-            />
+            <div className="flex items-center justify-center h-full w-full">
+              <BrightCandleView
+                betaPower={betaPower}
+                fftData={fftData}
+              />
+            </div>
           );
+        // In the renderBandPowerView function in FFT.tsx
         case 'fullcandle':
           return (
-            <div className="fixed inset-0 bg-gradient-to-b from-gray-900 to-black z-50 flex flex-col items-center justify-center p-4">
+            <div className="fixed inset-0 bg-highlight z-50 flex flex-col items-center justify-end">
               <button
                 onClick={() => setActiveBandPowerView('brightcandle')}
                 className="absolute top-4 right-4 p-2 bg-transparent text-white hover:text-gray-300 transition-all duration-300"
               >
                 <Shrink />
               </button>
-              <div className="w-full max-w-4xl h-full flex items-center justify-center">
-                <div className="transform scale-150 filter drop-shadow-2xl">
-                  <BrightCandleView betaPower={betaPower} fftData={fftData} />
+
+              {/* Candle Container with responsive sizing based on screen size */}
+              <div className="w-full max-w-4xl h-full flex justify-center pb-20">
+                <div className={`transform ${getFullCandleScaleClass()} filter drop-shadow-2xl`}>
+                  <BrightCandleView 
+                    betaPower={betaPower} 
+                    fftData={fftData} 
+                    fullscreen 
+                  />
                 </div>
               </div>
             </div>
           );
+
         default:
           return (
             <BandPowerGraph
@@ -494,13 +538,13 @@ const FFT = forwardRef(
           </div>
           <div
             className="
-    relative            /* ← make this container the positioning context */
+ relative         
     flex-1 flex flex-col 
     overflow-hidden min-h-0 min-w-0 
     ml-4 bg-highlight rounded-2xl
   "
           >
-            {/* only show when we’re on the Beta Candle view */}
+            {/* only show when we're on the Beta Candle view */}
             {activeBandPowerView === 'brightcandle' && (
               <button
                 onClick={() => setActiveBandPowerView('fullcandle')}