Orbital Mechanics V18.8 (Gemini)

Orbital Mechanics v18.8

const { useState, useEffect, useRef } = React;
        
        const Play = ({ size = 24 }) => (
            <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <polygon points="5 3 19 12 5 21 5 3"></polygon>
            </svg>
        );
        
        const Pause = ({ size = 24 }) => (
            <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <rect x="6" y="4" width="4" height="16"></rect>
                <rect x="14" y="4" width="4" height="16"></rect>
            </svg>
        );
        
        const RotateCcw = ({ size = 24 }) => (
            <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <polyline points="1 4 1 10 7 10"></polyline>
                <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path>
            </svg>
        );
        
        const Rocket = ({ size = 24 }) => (
            <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"></path>
                <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"></path>
                <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"></path>
                <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"></path>
            </svg>
        );
        
        const ZoomIn = ({ size = 24 }) => (
            <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="11" cy="11" r="8"></circle>
                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                <line x1="11" y1="8" x2="11" y2="14"></line>
                <line x1="8" y1="11" x2="14" y2="11"></line>
            </svg>
        );
        
        const ZoomOut = ({ size = 24 }) => (
            <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="11" cy="11" r="8"></circle>
                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                <line x1="8" y1="11" x2="14" y2="11"></line>
            </svg>
        );

if (phase === 1) {
              const t = progress;
              const r = oR1 * t;
              const spiralAngle = t * Math.PI * 0.5;
              return { x: posM2.x + r * Math.cos(spiralAngle), y: posM2.y + r * Math.sin(spiralAngle) };
            } else if (phase === 2 || phase === 3 || phase === 7) {
              const center = posM2;
              const targetR = phase === 2 ? oR1 : phase === 3 ? oR2 : oR3;
              let initialR = targetR, startAngle = 0;
              if (startPos) {
                startAngle = Math.atan2(startPos.y – center.y, startPos.x – center.x);
                initialR = Math.sqrt(Math.pow(startPos.x – center.x, 2) + Math.pow(startPos.y – center.y, 2));
              }
              const transDuration = Math.abs(initialR – targetR) > 0.01 ? 0.2 : 0;
              let r, a;
              if (progress < transDuration) {
                const t = progress / transDuration;
                r = initialR + (targetR - initialR) * t;
                a = startAngle;
              } else {
                const t = (progress - transDuration) / (1 - transDuration);
                r = targetR;
                a = startAngle + t * Math.PI * 2;
              }
              return { x: center.x + r * Math.cos(a), y: center.y + r * Math.sin(a) };
            } else if (phase === 5 || phase === 9) {
              const center = phase === 5 ? lPoints_m1m4.l4 : lPoints_m1m4.l5;
              const targetR = sR;
              let initialR = targetR, startAngle = 0;
              if (startPos) {
                startAngle = Math.atan2(startPos.y - center.y, startPos.x - center.x);
                initialR = Math.sqrt(Math.pow(startPos.x - center.x, 2) + Math.pow(startPos.y - center.y, 2));
              }
              const transDuration = Math.abs(initialR - targetR) > 0.01 ? 0.2 : 0;
              let r, a;
              if (progress < transDuration) {
                const t = progress / transDuration;
                r = initialR + (targetR - initialR) * t;
                a = startAngle + t * Math.PI * 2;
              } else {
                const t = (progress - transDuration) / (1 - transDuration);
                r = targetR;
                a = startAngle + transDuration * 2 * Math.PI + t * Math.PI * 2;
              }
              return { x: center.x + r * Math.cos(a), y: center.y + r * Math.sin(a) };
            } else if (phase === 4 || phase === 8) {
              if (!m4) return posM2;
              const st = startPos || posM2;
              const c = phase === 4 ? lPoints_m1m4.l4 : lPoints_m1m4.l5;
              const dx = c.x - st.x, dy = c.y - st.y;
              const dist = Math.sqrt(dx * dx + dy * dy);
              if (dist < 1e-6) return st;
              const en = { x: c.x - (dx / dist) * sR, y: c.y - (dy / dist) * sR };
              const t = progress;
              const eT = t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
              return { x: st.x + (en.x - st.x) * eT, y: st.y + (en.y - st.y) * eT };
            } else if (phase === 6) {
              if (!m4) return posM2;
              const st = startPos || lPoints_m1m4.l4;
              const dx = posM2.x - st.x, dy = posM2.y - st.y;
              const dist = Math.sqrt(dx * dx + dy * dy);
              if (dist < 1e-6) return st;
              const en = { x: posM2.x - (dx / dist) * oR3, y: posM2.y - (dy / dist) * oR3 };
              const t = progress;
              const eT = t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
              return { x: st.x + (en.x - st.x) * eT, y: st.y + (en.y - st.y) * eT };
            }
            return posM2;
          };
          
          const launchSpacecraft = () => {
            setSpacecraftActive(true);
            setSpacecraftProgress(0);
          };
          
          const resetSpacecraft = () => {
            setSpacecraftActive(false);
            setSpacecraftProgress(0);
          };
          
          const launchLucy = () => {
            setLucyActive(true);
            setLucyPhase(1);
            setLucyProgress(0);
            setLucyTrail([]);
            setStartConfigs({});
            setLucyPrevPosition({ x: 0, y: 0 });
            setLastLucyAngle(0);
            setFullMissionMode(false);
          };
          
          const launchFullLucy = () => {
            setLucyActive(true);
            setLucyPhase(1);
            setLucyProgress(0);
            setLucyTrail([]);
            setStartConfigs({});
            setLucyPrevPosition({ x: 0, y: 0 });
            setLastLucyAngle(0);
            setFullMissionMode(true);
          };
          
          const resetLucy = () => {
            setLucyActive(false);
            setLucyPhase(1);
            setLucyProgress(0);
            setLucyTrail([]);
            setStartConfigs({});
            setLucyPrevPosition({ x: 0, y: 0 });
            setLastLucyAngle(0);
            setFullMissionMode(false);
          };
          
          const continueToNextPhase = () => {
            const nextPhase = lucyPhase + 1;
            if (nextPhase <= 9) {
              const currentPos = computeLucyTrajectory(lucyPhase, 1);
              setStartConfigs(prev => ({ …prev, [nextPhase]: { startPos: { …currentPos } } }));
              setLucyPhase(nextPhase);
              setLucyProgress(0);
            }
          };
          
          useEffect(() => {
            if (spacecraftActive && spacecraftProgress < 1) {
              const interval = setInterval(() => {
                setSpacecraftProgress(p => {
                  const newProgress = p + 0.005;
                  if (newProgress >= 1) {
                    return 1;
                  }
                  return newProgress;
                });
              }, 50);
              return () => clearInterval(interval);
            }
          }, [spacecraftActive, spacecraftProgress]);
          
          useEffect(() => {
            if (lucyActive && lucyProgress < 1) {
              const interval = setInterval(() => {
                setLucyProgress(p => {
                  const baseSpeed = 0.009;
                  const speedMultiplier = lucySpeed;
                  const newProgress = p + baseSpeed * speedMultiplier;
                  if (newProgress >= 1) {
                    return 1;
                  }
                  return newProgress;
                });
              }, 50);
              return () => clearInterval(interval);
            }
          }, [lucyActive, lucyProgress, lucySpeed]);
          
          useEffect(() => {
            if (spacecraftActive) {
              setSpacecraftPosition(computeTrajectory(spacecraftProgress));
            }
          }, [spacecraftActive, spacecraftProgress, trajectoryType, destination, posM2, posM3, lPoints_m1m2]);
          
          useEffect(() => {
            if (lucyActive) {
              const pos = computeLucyTrajectory(lucyPhase, lucyProgress);
              setLucyPrevPosition(lucyPosition);
              setLucyPosition(pos);
              if (lucyProgress % 0.05 < 0.01) {
                setLucyTrail(prev => […prev, { …pos, phase: lucyPhase }]);
              }
            }
          }, [lucyActive, lucyPhase, lucyProgress]);
          
          useEffect(() => {
            if (lucyActive && lucyProgress >= 1 && fullMissionMode && lucyPhase < 9) {
              continueToNextPhase();
            }
          }, [lucyProgress, lucyPhase, lucyActive, fullMissionMode]);
          
          useEffect(() => {
            if (!isPlaying) return;
            const interval = setInterval(() => {
              setM2angle(a => a + 1 * revolutionSpeed);
              if (m3 > 0) setM3angle(a => a + 1.5 * revolutionSpeed);
              if (m4 > 0) setM4angle(a => a + 0.15 * revolutionSpeed);
            }, 50);
            return () => clearInterval(interval);
          }, [isPlaying, m3, m4, revolutionSpeed]);
          
          useEffect(() => {
            const canvas = canvasRef.current;
            if (!canvas) return;
            
            const ctx = canvas.getContext(‘2d’);
            const width = canvas.width;
            const height = canvas.height;
            const centerX = width / 2;
            const centerY = height / 2;
            
            ctx.fillStyle = ‘#ffffff’;
            ctx.fillRect(0, 0, width, height);
            
            const extentX = Math.max(Math.abs(lPoints_m1m2.l3.x), lPoints_m1m2.l2.x, posM2.x, Math.abs(posM3.x), Math.abs(posM4.x)) * 2.2;
            const extentY = Math.max(Math.abs(lPoints_m1m2.l4.y), Math.abs(lPoints_m1m2.l5.y), Math.abs(posM3.y), Math.abs(posM4.y)) * 2.2;
            
            const baseScale = Math.min(width / extentX, height / extentY);
            const scale = baseScale * zoom;
            
            ctx.save();
            ctx.translate(centerX + pan.x * scale, centerY + pan.y * scale);
            ctx.scale(scale, -scale);
            
            const gridStep = 100;
            const minX = -extentX / zoom;
            const maxX = extentX / zoom;
            const minY = -extentY / zoom;
            const maxY = extentY / zoom;
            const gridMinX = Math.floor(minX / gridStep) * gridStep;
            const gridMaxX = Math.ceil(maxX / gridStep) * gridStep;
            const gridMinY = Math.floor(minY / gridStep) * gridStep;
            const gridMaxY = Math.ceil(maxY / gridStep) * gridStep;
            
            ctx.strokeStyle = ‘#d3d3d3’;
            ctx.lineWidth = 1 / scale;
            for (let x = gridMinX; x <= gridMaxX; x += gridStep) {
              ctx.beginPath();
              ctx.moveTo(x, gridMinY);
              ctx.lineTo(x, gridMaxY);
              ctx.stroke();
            }
            for (let y = gridMinY; y <= gridMaxY; y += gridStep) {
              ctx.beginPath();
              ctx.moveTo(gridMinX, y);
              ctx.lineTo(gridMaxX, y);
              ctx.stroke();
            }
            
            ctx.strokeStyle = '#000000';
            ctx.lineWidth = 2 / scale;
            ctx.beginPath();
            ctx.moveTo(gridMinX, 0);
            ctx.lineTo(gridMaxX, 0);
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(0, gridMinY);
            ctx.lineTo(0, gridMaxY);
            ctx.stroke();
            
            ctx.save();
            ctx.scale(1, -1);
            ctx.font = (12 / scale) + 'px Gadugi, Arial';
            ctx.fillStyle = '#666666';
            ctx.textAlign = 'right';
            ctx.textBaseline = 'middle';
            for (let x = gridMinX; x <= gridMaxX; x += gridStep) {
              if (Math.abs(x) > 0.001) {
                ctx.fillText(x.toFixed(0), x – 5 / scale, 10 / scale);
              }
            }
            ctx.textAlign = ‘center’;
            ctx.textBaseline = ‘top’;
            for (let y = gridMinY; y <= gridMaxY; y += gridStep) {
              if (Math.abs(y) > 0.001) {
                ctx.fillText(y.toFixed(0), 10 / scale, (y * -1) + 5 / scale);
              }
            }
            ctx.restore();
            
            ctx.setLineDash([5, 5]);
            ctx.strokeStyle = ‘#808080’;
            ctx.lineWidth = 1 / scale;
            ctx.beginPath();
            ctx.arc(0, 0, d12_barycentric, 0, 2 * Math.PI);
            ctx.stroke();
            
            if (m3 > 0) {
              ctx.strokeStyle = ‘#228b22’;
              ctx.beginPath();
              ctx.arc(posM2.x, posM2.y, d23, 0, 2 * Math.PI);
              ctx.stroke();
            }
            
            if (m4 > 0) {
              ctx.strokeStyle = ‘#8b008b’;
              ctx.beginPath();
              ctx.arc(0, 0, d14, 0, 2 * Math.PI);
              ctx.stroke();
            }
            ctx.setLineDash([]);
            
            if (spacecraftActive) {
              ctx.strokeStyle = ‘#ffa500’;
              ctx.lineWidth = 2 / scale;
              ctx.setLineDash([3, 3]);
              ctx.beginPath();
              const steps = 50;
              for (let i = 0; i <= steps; i++) {
                const t = i / steps;
                const pos = computeTrajectory(t);
                if (i === 0) {
                  ctx.moveTo(pos.x, pos.y);
                } else {
                  ctx.lineTo(pos.x, pos.y);
                }
              }
              ctx.stroke();
              ctx.setLineDash([]);
            }
            
            if (lucyActive) {
              ctx.strokeStyle = '#9333ea';
              ctx.lineWidth = 2 / scale;
              ctx.setLineDash([3, 3]);
              ctx.beginPath();
              for (let i = 0; i <= 30; i++) {
                const pos = computeLucyTrajectory(lucyPhase, i / 30);
                i === 0 ? ctx.moveTo(pos.x, pos.y) : ctx.lineTo(pos.x, pos.y);
              }
              ctx.stroke();
              ctx.setLineDash([]);

if (lucyTrail.length > 0) {
                ctx.strokeStyle = ‘#9333ea’;
                ctx.lineWidth = 1 / scale;
                ctx.globalAlpha = 0.3;
                ctx.beginPath();
                ctx.moveTo(lucyTrail[0].x, lucyTrail[0].y);
                for (let i = 1; i < lucyTrail.length; i++) {
                  ctx.lineTo(lucyTrail[i].x, lucyTrail[i].y);
                }
                ctx.stroke();
                ctx.globalAlpha = 1;
              }
            }
            
            ctx.strokeStyle = '#000000';
            ctx.lineWidth = 1 / scale;
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(barycenterM2M3.x, barycenterM2M3.y);
            ctx.stroke();
            
            if (m3 > 0) {
              ctx.beginPath();
              ctx.moveTo(posM2.x, posM2.y);
              ctx.lineTo(posM3.x, posM3.y);
              ctx.stroke();
            }
            
            if (m4 > 0) {
              ctx.beginPath();
              ctx.moveTo(0, 0);
              ctx.lineTo(posM4.x, posM4.y);
              ctx.stroke();
            }
            
            ctx.strokeStyle = ‘#ff0000’;
            ctx.lineWidth = 3 / scale;
            const lagKeys = [‘l2’, ‘l3’, ‘l4’, ‘l5’];
            for (let i = 0; i < lagKeys.length; i++) {
              ctx.beginPath();
              ctx.moveTo(0, 0);
              ctx.lineTo(lPoints_m1m2[lagKeys[i]].x, lPoints_m1m2[lagKeys[i]].y);
              ctx.stroke();
            }
            const lagKeys2 = ['l4', 'l5'];
            for (let i = 0; i < lagKeys2.length; i++) {
              ctx.beginPath();
              ctx.moveTo(barycenterM2M3.x, barycenterM2M3.y);
              ctx.lineTo(lPoints_m1m2[lagKeys2[i]].x, lPoints_m1m2[lagKeys2[i]].y);
              ctx.stroke();
            }
            
            if (m3 > 0) {
              ctx.strokeStyle = ‘#ffa500’;
              ctx.lineWidth = 2 / scale;
              const allLagKeys = [‘l1’, ‘l2’, ‘l3’, ‘l4’, ‘l5’];
              for (let i = 0; i < allLagKeys.length; i++) {
                ctx.beginPath();
                ctx.moveTo(posM2.x, posM2.y);
                ctx.lineTo(lPoints_m2m3[allLagKeys[i]].x, lPoints_m2m3[allLagKeys[i]].y);
                ctx.stroke();
                ctx.beginPath();
                ctx.moveTo(posM3.x, posM3.y);
                ctx.lineTo(lPoints_m2m3[allLagKeys[i]].x, lPoints_m2m3[allLagKeys[i]].y);
                ctx.stroke();
              }
            }
            
            if (m4 > 0) {
              ctx.strokeStyle = ‘#8b008b’;
              ctx.lineWidth = 3 / scale;
              for (let i = 0; i < lagKeys.length; i++) {
                ctx.beginPath();
                ctx.moveTo(0, 0);
                ctx.lineTo(lPoints_m1m4[lagKeys[i]].x, lPoints_m1m4[lagKeys[i]].y);
                ctx.stroke();
              }
              for (let i = 0; i < lagKeys2.length; i++) {
                ctx.beginPath();
                ctx.moveTo(posM4.x, posM4.y);
                ctx.lineTo(lPoints_m1m4[lagKeys2[i]].x, lPoints_m1m4[lagKeys2[i]].y);
                ctx.stroke();
              }
            }
            
            const sizeM1 = 10 * Math.pow(m1, 1/3);
            const sizeM2 = 10 * Math.pow(m2, 1/3);
            const sizeM3 = 10 * Math.pow(m3, 1/3);
            const sizeM4 = 10 * Math.pow(m4, 1/3);
            
            ctx.fillStyle = '#ffff00';
            ctx.beginPath();
            ctx.arc(0, 0, sizeM1, 0, 2 * Math.PI);
            ctx.fill();
            
            ctx.fillStyle = '#0000ff';
            ctx.beginPath();
            ctx.arc(posM2.x, posM2.y, sizeM2, 0, 2 * Math.PI);
            ctx.fill();
            
            if (m3 > 0) {
              ctx.fillStyle = ‘#228b22’;
              ctx.beginPath();
              ctx.arc(posM3.x, posM3.y, sizeM3, 0, 2 * Math.PI);
              ctx.fill();
            }
            
            ctx.fillStyle = ‘#ff0000’;
            ctx.beginPath();
            ctx.arc(barycenterM2M3.x, barycenterM2M3.y, 3, 0, 2 * Math.PI);
            ctx.fill();
            
            if (m4 > 0) {
              ctx.fillStyle = ‘#8b008b’;
              ctx.beginPath();
              ctx.arc(posM4.x, posM4.y, sizeM4, 0, 2 * Math.PI);
              ctx.fill();
            }
            
            if (spacecraftActive) {
              const destPoint = getDestinationPoint();
              const angle = Math.atan2(destPoint.y – spacecraftPosition.y, destPoint.x – spacecraftPosition.x);
              const coneSize = 15;
              
              ctx.save();
              ctx.translate(spacecraftPosition.x, spacecraftPosition.y);
              ctx.rotate(angle);
              ctx.scale(1, -1);
              
              ctx.fillStyle = ‘#ffa500’;
              ctx.beginPath();
              ctx.moveTo(coneSize, 0);
              ctx.lineTo(-coneSize * 0.5, -coneSize * 0.5);
              ctx.lineTo(-coneSize * 0.5, coneSize * 0.5);
              ctx.closePath();
              ctx.fill();
              
              ctx.strokeStyle = ‘#ff8c00’;
              ctx.lineWidth = 2 / scale;
              ctx.stroke();
              
              ctx.restore();
            }
            
            if (lucyActive) {
              const dx = lucyPosition.x – lucyPrevPosition.x;
              const dy = lucyPosition.y – lucyPrevPosition.y;
              let angle = lastLucyAngle;
              const dist = Math.sqrt(dx * dx + dy * dy);
              if (dist > 1e-6) {
                angle = Math.atan2(dy, dx);
                setLastLucyAngle(angle);
              } else {
                const posAhead = computeLucyTrajectory(lucyPhase, Math.min(1, lucyProgress + 0.01));
                const dxA = posAhead.x – lucyPosition.x;
                const dyA = posAhead.y – lucyPosition.y;
                const distA = Math.sqrt(dxA * dxA + dyA * dyA);
                if (distA > 1e-6) {
                  angle = Math.atan2(dyA, dxA);
                  setLastLucyAngle(angle);
                }
              }
              const coneSize = 15;
              ctx.save();
              ctx.translate(lucyPosition.x, lucyPosition.y);
              ctx.rotate(angle);
              ctx.scale(1, -1);
              ctx.fillStyle = ‘#9333ea’;
              ctx.beginPath();
              ctx.moveTo(coneSize, 0);
              ctx.lineTo(-coneSize * 0.5, -coneSize * 0.5);
              ctx.lineTo(-coneSize * 0.5, coneSize * 0.5);
              ctx.closePath();
              ctx.fill();
              ctx.strokeStyle = ‘#7c3aed’;
              ctx.lineWidth = 2 / scale;
              ctx.stroke();
              ctx.restore();
            }
            
            const dotSize = 5;
            ctx.fillStyle = ‘#ff0000’;
            const allKeys = [‘l1’, ‘l2’, ‘l3’, ‘l4’, ‘l5’];
            for (let i = 0; i < allKeys.length; i++) {
              ctx.beginPath();
              ctx.arc(lPoints_m1m2[allKeys[i]].x, lPoints_m1m2[allKeys[i]].y, dotSize / scale, 0, 2 * Math.PI);
              ctx.fill();
            }
            
            if (m3 > 0) {
              ctx.fillStyle = ‘#ffa500’;
              for (let i = 0; i < allKeys.length; i++) {
                ctx.beginPath();
                ctx.arc(lPoints_m2m3[allKeys[i]].x, lPoints_m2m3[allKeys[i]].y, dotSize / scale, 0, 2 * Math.PI);
                ctx.fill();
              }
            }
            
            if (m4 > 0) {
              ctx.fillStyle = ‘#8b008b’;
              for (let i = 0; i < allKeys.length; i++) {
                ctx.beginPath();
                ctx.arc(lPoints_m1m4[allKeys[i]].x, lPoints_m1m4[allKeys[i]].y, dotSize / scale, 0, 2 * Math.PI);
                ctx.fill();
              }
            }
            
            ctx.save();
            ctx.scale(1, -1);
            ctx.font = (14 / scale) + 'px Gadugi, Arial';
            ctx.fillStyle = '#000000';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            
            ctx.fillText('M1', 0, (sizeM1 + 12 / scale));
            ctx.fillText('M2', posM2.x, (posM2.y * -1) + sizeM2 + 12 / scale);
            if (m3 > 0) {
              ctx.fillText(‘M3’, posM3.x, (posM3.y * -1) + sizeM3 + 12 / scale);
            }
            if (m4 > 0) {
              ctx.fillText(‘M4’, posM4.x, (posM4.y * -1) + sizeM4 + 12 / scale);
            }
            
            ctx.font = (12 / scale) + ‘px Gadugi, Arial’;
            for (let i = 0; i < allKeys.length; i++) {
              const offset = (i === 3) ? 15 / scale : (i === 4) ? -15 / scale : 15 / scale;
              ctx.fillText('L' + (i + 1), lPoints_m1m2[allKeys[i]].x, (lPoints_m1m2[allKeys[i]].y * -1) + offset);
            }
            
            if (m3 > 0) {
              ctx.fillStyle = ‘#ffa500’;
              for (let i = 0; i < allKeys.length; i++) {
                const offset = (i === 3) ? 12 / scale : (i === 4) ? -12 / scale : 12 / scale;
                ctx.fillText("L" + (i + 1) + "'", lPoints_m2m3[allKeys[i]].x, (lPoints_m2m3[allKeys[i]].y * -1) + offset);
              }
            }
            
            if (m4 > 0) {
              ctx.fillStyle = ‘#8b008b’;
              for (let i = 0; i < allKeys.length; i++) {
                const offset = (i === 3) ? 15 / scale : (i === 4) ? -15 / scale : 15 / scale;
                ctx.fillText("L" + (i + 1) + "\"", lPoints_m1m4[allKeys[i]].x, (lPoints_m1m4[allKeys[i]].y * -1) + offset);
              }
            }
            
            if (spacecraftActive) {
              ctx.fillStyle = '#ffa500';
              ctx.font = (12 / scale) + 'px Gadugi, Arial';
              ctx.fillText('JWST', spacecraftPosition.x, (spacecraftPosition.y * -1) - 20 / scale);
            }
            
            if (lucyActive) {
              ctx.fillStyle = '#9333ea';
              ctx.fillText('Lucy', lucyPosition.x, (lucyPosition.y * -1) - 20 / scale);
            }
            
            ctx.restore();
            ctx.restore();
          }, [m1, m2, m3, m3angle, m4, m4angle, m2angle, zoom, pan, barycenterM2M3, d12_barycentric, angle12_barycentric, lPoints_m1m2, lPoints_m2m3, lPoints_m1m4, posM2, posM3, posM4, d23, d14, spacecraftActive, spacecraftPosition, trajectoryType, destination, d3jwst, lucyActive, lucyPhase, lucyProgress, lucyPosition, lucyTrail, lucyPrevPosition, lastLucyAngle]);
          
          useEffect(() => {
            const container = canvasContainerRef.current;
            if (!container) return;
            
            const wheelHandler = (e) => {
              e.preventDefault();
              e.stopPropagation();
            };
            
            container.addEventListener(‘wheel’, wheelHandler, { passive: false });
            
            return () => {
              container.removeEventListener(‘wheel’, wheelHandler);
            };
          }, []);
          
          const handleMouseDown = (e) => {
            setIsDragging(true);
            setLastMousePos({ x: e.nativeEvent.offsetX, y: e.nativeEvent.offsetY });
          };
          
          const handleMouseMove = (e) => {
            if (!isDragging) return;
            const currentPos = { x: e.nativeEvent.offsetX, y: e.nativeEvent.offsetY };
            setPan(prev => ({
              x: prev.x + (currentPos.x – lastMousePos.x) / zoom,
              y: prev.y + (currentPos.y – lastMousePos.y) / zoom
            }));
            setLastMousePos(currentPos);
          };
          
          const handleWheel = (e) => {
            if (canvasContainerRef.current && canvasContainerRef.current.contains(e.target)) {
              e.preventDefault();
              e.stopPropagation();
              setZoom(z => Math.max(0.5, Math.min(3, z * (e.deltaY < 0 ? 1.1 : 0.9))));
            }
          };
          
          const phaseNames = ['', 'Ariane Rocket Launch', 'Earth Orbit 1', 'Earth Orbit 2', 'Transfer to L4"', 'L4" Survey', 'Return to Earth', 'Earth Orbit 3', 'Transfer to L5"', 'L5" Survey'];
          
          return (
            <div className="flex min-h-screen bg-gray-100" style={{fontFamily: 'Gadugi, system-ui, -apple-system, sans-serif'}}>
              <div className="w-80 bg-white shadow-lg flex flex-col">
                <div className="p-4 border-b bg-gradient-to-r from-blue-600 to-blue-700" style={{fontFamily: 'Gadugi, system-ui, -apple-system, sans-serif'}}>
                  <h1 className="text-xl font-bold text-white" style={{fontFamily: 'Gadugi, system-ui, -apple-system, sans-serif'}}>Orbital Mechanics v18.8</h1>
                  <p className="text-xs text-blue-100" style={{fontFamily: 'Gadugi, system-ui, -apple-system, sans-serif'}}>Restricted 3-Body Problem Simulator<br/>(Lagrange Points)</p>
                </div>
                
                <div className="flex border-b">
                  <button 
                    onClick={() => setActiveTab(‘system’)}
                    className={`flex-1 py-2 text-xs ${activeTab === ‘system’ ? ‘bg-blue-50 text-blue-700 border-b-2 border-blue-700 font-bold’ : ‘text-gray-600 hover:bg-gray-50 font-medium’}`}
                  >
                    System Parameters
                  </button>
                  <button 
                    onClick={() => setActiveTab(‘mission’)}
                    className={`flex-1 py-2 text-xs ${activeTab === ‘mission’ ? ‘bg-orange-50 text-orange-700 border-b-2 border-orange-700 font-bold’ : ‘text-gray-600 hover:bg-gray-50 font-medium’}`}
                  >
                    Mission Control
                  </button>
                </div>
                
                <div className="flex-1 overflow-y-auto p-3">
                  {activeTab === ‘system’ && (
                    <div className="space-y-2">
                      <div>
                        <label className="block text-xs font-semibold mb-1 text-gray-700">M1 (Sun): {m1.toFixed(0)}</label>
                        <input type="range" min="100" max="1000" step="10" value={m1} onChange={(e) => setM1(parseFloat(e.target.value))} className=”w-full” />
                        <div className="flex justify-between text-xs text-gray-500">
                          <span>100</span>
                          <span>1000</span>
                        </div>
                      </div>
                      
                      <div>
                        <label className="block text-xs font-semibold mb-1 text-gray-700">M2 (Earth): {m2.toFixed(1)}</label>
                        <input type="range" min="1" max="10" step="0.1" value={m2} onChange={(e) => setM2(parseFloat(e.target.value))} className=”w-full” />
                        <div className="flex justify-between text-xs text-gray-500">
                          <span>1</span>
                          <span>10</span>
                        </div>
                      </div>
                      
                      <div>
                        <label className="block text-xs font-semibold mb-1 text-gray-700">M3 (Moon): {m3.toFixed(2)}</label>
                        <input type="range" min="0" max="1" step="0.01" value={m3} onChange={(e) => setM3(parseFloat(e.target.value))} className=”w-full” />
                        <div className="flex justify-between text-xs text-gray-500">
                          <span>0</span>
                          <span>1</span>
                        </div>
                      </div>
                      
                      {m3 > 0 && (
                        <div>
                          <label className="block text-xs font-semibold mb-1 text-gray-700">M3 Angle: {m3angle.toFixed(0)} degrees</label>
                          <input type="range" min="0" max="360" step="1" value={m3angle} onChange={(e) => setM3angle(parseFloat(e.target.value))} className=”w-full” />
                          <div className="flex justify-between text-xs text-gray-500">
                            <span>0 degrees</span>
                            <span>360 degrees</span>
                          </div>
                        </div>
                      )}
                      
                      <div>
                        <label className="block text-xs font-semibold mb-1 text-gray-700">M4 (Jupiter): {m4.toFixed(0)}</label>
                        <input type="range" min="0" max="100" step="1" value={m4} onChange={(e) => setM4(parseFloat(e.target.value))} className=”w-full” />
                        <div className="flex justify-between text-xs text-gray-500">
                          <span>0</span>
                          <span>100</span>
                        </div>
                      </div>
                      
                      {m4 > 0 && (
                        <div>
                          <label className="block text-xs font-semibold mb-1 text-gray-700">M4 Angle: {m4angle.toFixed(0)} degrees</label>
                          <input type="range" min="0" max="360" step="1" value={m4angle} onChange={(e) => setM4angle(parseFloat(e.target.value))} className=”w-full” />
                          <div className="flex justify-between text-xs text-gray-500">
                            <span>0 degrees</span>
                            <span>360 degrees</span>
                          </div>
                        </div>
                      )}
                    </div>
                  )}
                  
                  {activeTab === ‘mission’ && (
                    <div className="space-y-2">
                      <div className="flex border-b mb-2">
                        <button 
                          onClick={() => setMissionSubTab(‘jwst’)}
                          className={`flex-1 py-1.5 text-xs ${missionSubTab === ‘jwst’ ? ‘bg-orange-100 text-orange-700 border-b-2 border-orange-700 font-bold’ : ‘text-gray-600 hover:bg-gray-50 font-medium’}`}
                        >
                          JWST Launch
                        </button>
                        {m4 > 0 && (
                          <button 
                            onClick={() => setMissionSubTab(‘lucy’)}
                            className={`flex-1 py-1.5 text-xs ${missionSubTab === ‘lucy’ ? ‘bg-purple-100 text-purple-700 border-b-2 border-purple-700 font-bold’ : ‘text-gray-600 hover:bg-gray-50 font-medium’}`}
                          >
                            Lucy Launch
                          </button>
                        )}
                      </div>
                      
                      {missionSubTab === ‘jwst’ && (
                        <div className="space-y-2">
                          <div>
                            <label className="block text-xs font-bold mb-1 text-gray-700">Trajectory Type</label>
                            <div className="space-y-1">
                              <label className="flex items-center text-xs">
                                <input type="radio" name="trajectory" value="direct" checked={trajectoryType === 'direct'} onChange={(e) => setTrajectoryType(e.target.value)} className=”mr-2″ />
                                Direct Transfer (JWST)
                              </label>
                              <label className="flex items-center text-xs">
                                <input type="radio" name="trajectory" value="hohmann" checked={trajectoryType === 'hohmann'} onChange={(e) => setTrajectoryType(e.target.value)} className=”mr-2″ />
                                Hohmann (Elliptical)
                              </label>
                              <label className="flex items-center text-xs">
                                <input type="radio" name="trajectory" value="spiral" checked={trajectoryType === 'spiral'} onChange={(e) => setTrajectoryType(e.target.value)} className=”mr-2″ />
                                Spiral (Low-thrust)
                              </label>
                              <label className={`flex items-center text-xs ${m3 > 0 ? ” : ‘text-gray-400’}`}>
                                <input type="radio" name="trajectory" value="gravity" checked={trajectoryType === 'gravity'} onChange={(e) => setTrajectoryType(e.target.value)} disabled={m3 === 0} className=”mr-2″ />
                                Gravity Assist (Moon)
                              </label>
                            </div>
                          </div>
                          
                          <div>
                            <label className="block text-xs font-bold mb-1 text-gray-700">Destination</label>
                            <div className="space-y-1">
                              {[‘L1’, ‘L2’, ‘L3’, ‘L4’, ‘L5’].map(lp => (
                                <label key={lp} className="flex items-center text-xs">
                                  <input type="radio" name="destination" value={lp} checked={destination === lp} onChange={(e) => setDestination(e.target.value)} className=”mr-2″ />
                                  {lp} (M1-M2 System)
                                </label>
                              ))}
                            </div>
                          </div>
                          
                          <div className="pt-2 border-t">
                            <div className="flex gap-2 mb-2">
                              <button onClick={launchSpacecraft} disabled={spacecraftActive} className="flex-1 bg-orange-600 text-white px-3 py-2 rounded text-xs flex items-center justify-center gap-2 disabled:bg-gray-400">
                                <Rocket size={12} />
                                Launch
                              </button>
                              <button onClick={resetSpacecraft} disabled={!spacecraftActive} className="bg-gray-600 text-white px-3 py-2 rounded text-xs disabled:bg-gray-400">
                                Reset
                              </button>
                            </div>
                            
                            {spacecraftActive && (
                              <div>
                                <div className="flex justify-between text-xs mb-1">
                                  <span className="font-medium">Progress:</span>
                                  <span className="font-mono">{(spacecraftProgress * 100).toFixed(0)}%</span>
                                </div>
                                <div className="w-full bg-gray-200 rounded-full h-2">
                                  <div className="bg-orange-600 h-2 rounded-full transition-all" style={{width: `${spacecraftProgress * 100}%`}}></div>
                                </div>
                              </div>
                            )}
                          </div>
                        </div>
                      )}
                      
                      {missionSubTab === ‘lucy’ && m4 > 0 && (
                        <div className="space-y-2">
                          <div className="bg-purple-50 border border-purple-200 rounded p-2">
                            <label className="block text-xs font-bold mb-1 text-purple-800">Lucy Speed: {(lucySpeed * 100).toFixed(0)}%</label>
                            <input 
                              type="range" 
                              min="0.25" 
                              max="1" 
                              step="0.05" 
                              value={lucySpeed} 
                              onChange={(e) => setLucySpeed(parseFloat(e.target.value))} 
                              className=”w-full”
                            />
                            <div className="flex justify-between text-xs text-purple-600 mt-1">
                              <span>25%</span>
                              <span>100%</span>
                            </div>
                          </div>

{lucyActive && (
                            <div className="bg-purple-50 border border-purple-200 rounded p-2 mb-2">
                              <div className="text-xs font-bold text-purple-800">Current Phase: {lucyPhase}/9</div>
                              <div className="text-xs text-purple-700">{phaseNames[lucyPhase]}</div>
                              <div className="w-full bg-purple-200 rounded-full h-2 mt-2">
                                <div className="bg-purple-600 h-2 rounded-full transition-all" style={{width: `${lucyProgress * 100}%`}}></div>
                              </div>
                              <div className="text-xs text-right text-purple-600 mt-1">{(lucyProgress * 100).toFixed(0)}%</div>
                            </div>
                          )}

<div className="bg-purple-50 border border-purple-200 rounded p-3">
                            <h4 className="text-xs font-bold text-purple-800 mb-2">Lucy Mission Phases</h4>
                            <div className="space-y-1 text-xs text-gray-700">
                              {phaseNames.slice(1, 10).map((name, idx) => (
                                <div key={idx} className={`flex items-start gap-2 ${lucyActive && lucyPhase === idx + 1 ? 'font-bold text-purple-700' : ''}`}>
                                  <span className="text-purple-600 font-bold">{idx + 1}.</span>
                                  <span>{name}</span>
                                </div>
                              ))}
                            </div>
                          </div>
                          
                          <div className="pt-2 border-t">
                            <div className="flex gap-2 mb-2">
                              <button onClick={launchLucy} disabled={lucyActive} className="flex-1 bg-purple-600 text-white px-3 py-2 rounded text-xs flex items-center justify-center gap-2 disabled:bg-gray-400">
                                <Rocket size={12} />
                                Launch Step by Step
                              </button>
                              <button onClick={launchFullLucy} disabled={lucyActive} className="flex-1 bg-indigo-600 text-white px-3 py-2 rounded text-xs flex items-center justify-center gap-2 disabled:bg-gray-400">
                                <Rocket size={12} />
                                Run Full Mission
                              </button>
                            </div>
                            <button onClick={resetLucy} disabled={!lucyActive} className="w-full bg-gray-600 text-white px-3 py-2 rounded text-xs disabled:bg-gray-400">
                              Reset
                            </button>
                            {lucyActive && lucyProgress >= 1 && lucyPhase < 9 && !fullMissionMode && (
                              <button onClick={continueToNextPhase} className="w-full bg-green-600 text-white px-3 py-2 rounded text-xs hover:bg-green-700 mt-2">
                                Continue to Next Phase
                              </button>
                            )}
                            {lucyActive && lucyPhase === 9 && lucyProgress >= 1 && (
                              <div className="text-xs text-center text-green-600 font-bold mt-2">
                                Mission Complete!
                              </div>
                            )}
                          </div>
                        </div>
                      )}
                      
                      {!m4 && missionSubTab === ‘lucy’ && (
                        <div className="bg-yellow-50 border border-yellow-200 rounded p-3 text-xs text-yellow-800">
                          Enable Jupiter (M4 greater than 0) to access Lucy mission
                        </div>
                      )}
                    </div>
                  )}
                </div>
              </div>
              
              <div className="flex-1 flex flex-col p-4">
                <div className="bg-white rounded-lg shadow-lg mb-4">
                  <div className="p-3 border-b flex items-center justify-between">
                    <h2 className="font-bold text-gray-800" style={{fontFamily: 'Gadugi, system-ui, -apple-system, sans-serif'}}>Visualization</h2>
                    <img decoding="async" src="https://numorpho.org/wp-content/uploads/2025/10/NUMO_V1_Horizontal_Full-Color_Drk-Bkrd.png" alt="Numorpho" className="h-8" />
                  </div>
                  <div className="p-2" ref={canvasContainerRef}>
                    <canvas ref={canvasRef} width={1200} height={700} className="w-full border cursor-move" onMouseDown={handleMouseDown} onMouseMove={handleMouseMove} onMouseUp={() => setIsDragging(false)} onMouseLeave={() => setIsDragging(false)} onWheel={handleWheel} />
                  </div>
                </div>
                
                <div className="bg-white rounded-lg shadow-lg p-4">
                  <div className="flex items-center justify-center gap-3">
                    <div className="flex items-center gap-2">
                      <span className="text-xs font-medium text-gray-700">Speed:</span>
                      <input 
                        type="range" 
                        min="0.1" 
                        max="1.0" 
                        step="0.05" 
                        value={revolutionSpeed} 
                        onChange={(e) => setRevolutionSpeed(parseFloat(e.target.value))}
                        className=”w-24″
                        title={`Revolution Speed: ${(revolutionSpeed * 100).toFixed(0)}%`}
                      />
                      <span className="text-xs font-mono text-gray-600 w-10">{(revolutionSpeed * 100).toFixed(0)}%</span>
                    </div>
                    <div className="h-6 w-px bg-gray-300"></div>
                    <button onClick={() => setIsPlaying(!isPlaying)} className=”bg-blue-600 text-white p-2 rounded hover:bg-blue-700″>
                      {isPlaying ? <Pause size={18} /> : <Play size={18} />}
                    </button>
                    <button onClick={() => { setM2angle(0); setM3angle(0); setM4angle(180); }} className=”bg-gray-600 text-white p-2 rounded hover:bg-gray-700″>
                      <RotateCcw size={18} />
                    </button>
                    <div className="h-6 w-px bg-gray-300"></div>
                    <button onClick={() => setZoom(z => Math.min(3, z * 1.2))} className=”bg-gray-600 text-white p-2 rounded hover:bg-gray-700″>
                      <ZoomIn size={18} />
                    </button>
                    <button onClick={() => setZoom(z => Math.max(0.5, z * 0.8))} className=”bg-gray-600 text-white p-2 rounded hover:bg-gray-700″>
                      <ZoomOut size={18} />
                    </button>
                    <button onClick={() => { setZoom(1); setPan({ x: 0, y: 0 }); }} className=”bg-gray-600 text-white px-4 py-2 rounded text-sm hover:bg-gray-700″>
                      Reset View
                    </button>
                    <div className="ml-4 text-sm text-gray-600">
                      Zoom: <span className="font-mono font-bold">{zoom.toFixed(1)}x</span>
                    </div>
                  </div>
                </div>
              </div>
              
              {showOutputPanel && (
                <div className="w-64 bg-white shadow-lg flex flex-col">
                  <div className="p-2 border-b bg-gray-50 flex items-center justify-between">
                    <h2 className="font-bold text-gray-800 text-xs" style={{fontFamily: 'Gadugi, system-ui, -apple-system, sans-serif'}}>Output Data</h2>
                    <button onClick={() => setShowOutputPanel(false)} className=”text-gray-600 hover:text-gray-800 text-xs px-2 py-1″>✕</button>
                  </div>
                  
                  <div className="flex-1 overflow-y-auto p-2">
                    <div className="space-y-2">
                      <div>
                        <h3 className="text-xs font-bold mb-1 text-blue-700" style={{fontFamily: 'Gadugi, system-ui, -apple-system, sans-serif'}}>Mass Positions</h3>
                        <div className="space-y-1 text-xs font-mono">
                          <div className="bg-yellow-50 p-1 rounded text-xs">
                            <div>M1: ({posM1.x.toFixed(1)}, {posM1.y.toFixed(1)})</div>
                          </div>
                          <div className="bg-blue-50 p-1 rounded text-xs">
                            <div>M2: ({posM2.x.toFixed(1)}, {posM2.y.toFixed(1)})</div>
                            <div className="text-gray-600">d12: {d12.toFixed(2)}</div>
                          </div>
                          {m3 > 0 && (
                            <div className="bg-green-50 p-1 rounded text-xs">
                              <div>M3: ({posM3.x.toFixed(1)}, {posM3.y.toFixed(1)})</div>
                              <div className="text-gray-600">d23: {d23.toFixed(2)}</div>
                              <div className="text-gray-600">d13: {d13.toFixed(2)}</div>
                            </div>
                          )}
                          {m4 > 0 && (
                            <div className="bg-purple-50 p-1 rounded text-xs">
                              <div>M4: ({posM4.x.toFixed(1)}, {posM4.y.toFixed(1)})</div>
                              <div className="text-gray-600">d14: {d14.toFixed(2)}</div>
                            </div>
                          )}
                        </div>
                      </div>
                      
                      <div>
                        <h3 className="text-xs font-bold mb-1 text-orange-700" style={{fontFamily: 'Gadugi, system-ui, -apple-system, sans-serif'}}>Spacecraft Locations</h3>
                        {(spacecraftActive || lucyActive) ? (
                          <div className="space-y-1 text-xs font-mono">
                            {spacecraftActive && (
                              <div className="bg-orange-50 p-1 rounded text-xs">
                                <div className="text-orange-600 font-bold">
                                  JWST: ({spacecraftPosition.x.toFixed(1)}, {spacecraftPosition.y.toFixed(1)})
                                </div>
                                {m3 > 0 && (
                                  <div className="text-gray-600">d3jwst: {d3jwst.toFixed(2)}</div>
                                )}
                              </div>
                            )}
                            {lucyActive && (
                              <div className="bg-purple-50 p-1 rounded text-xs">
                                <div className="text-purple-600 font-bold">
                                  Lucy: ({lucyPosition.x.toFixed(1)}, {lucyPosition.y.toFixed(1)})
                                </div>
                                <div className="text-gray-600">d2lucy: {d2lucy.toFixed(2)}</div>
                                {m4 > 0 && (
                                  <div className="text-gray-600">d4lucy: {d4lucy.toFixed(2)}</div>
                                )}
                                <div className="text-purple-600 text-xs mt-1">Phase {lucyPhase}/9</div>
                              </div>
                            )}
                          </div>
                        ) : (
                          <div className="text-xs text-gray-500 italic">No active spacecraft</div>
                        )}
                      </div>
                      
                      <div>
                        <h3 className="text-xs font-bold mb-1 text-red-700" style={{fontFamily: 'Gadugi, system-ui, -apple-system, sans-serif'}}>Lagrange Point Locations</h3>
                        <div className="space-y-1 text-xs font-mono">
                          <div className="font-semibold text-xs mb-1">L1-L5 (M1-M2M3)</div>
                          {[‘l1’, ‘l2’, ‘l3’, ‘l4’, ‘l5’].map((key, i) => (
                            <div key={key} className="bg-red-50 p-1 rounded text-xs">
                              L{i + 1}: ({lPoints_m1m2[key].x.toFixed(1)}, {lPoints_m1m2[key].y.toFixed(1)})
                            </div>
                          ))}
                        </div>
                      </div>
                      
                      {m3 > 0 && (
                        <div>
                          <div className="space-y-1 text-xs font-mono">
                            <div className="font-semibold text-xs mb-1">L1-L5′ (M2-M3)</div>
                            {[‘l1’, ‘l2’, ‘l3’, ‘l4’, ‘l5’].map((key, i) => (
                              <div key={key} className="bg-orange-50 p-1 rounded text-xs">
                                L{i + 1}’ (M2-M3): ({lPoints_m2m3[key].x.toFixed(1)}, {lPoints_m2m3[key].y.toFixed(1)})
                              </div>
                            ))}
                          </div>
                        </div>
                      )}
                      
                      {m4 > 0 && (
                        <div>
                          <div className="space-y-1 text-xs font-mono">
                            <div className="font-semibold text-xs mb-1">L1-L5″ (M1-M4)</div>
                            {[‘l1’, ‘l2’, ‘l3’, ‘l4’, ‘l5’].map((key, i) => (
                              <div key={key} className="bg-purple-50 p-1 rounded text-xs">
                                L{i + 1}” (M1-M4): ({lPoints_m1m4[key].x.toFixed(1)}, {lPoints_m1m4[key].y.toFixed(1)})
                              </div>
                            ))}
                          </div>
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              )}
              
              {!showOutputPanel && (
                <button 
                  onClick={() => setShowOutputPanel(true)} 
                  className=”fixed right-0 top-1/2 bg-white shadow-lg p-2 rounded-l text-gray-600 hover:text-gray-800 text-xs font-bold”
                  style={{fontFamily: ‘Gadugi, system-ui, -apple-system, sans-serif’}}
                >
                  ◀ Data
                </button>
              )}
            </div>
          );
        };
        // The ReactDOM.render call remains inside the template for Babel to process it
        ReactDOM.render(<OrbitalMechanics />, document.getElementById(‘root’));

EVERYTHING CONNECTED – Numorpho's Book of Business

Orbital Mechanics V18.8 (Gemini)

Like this:

Leave a ReplyCancel reply

Orbital Mechanics V18.8 (Gemini)

Share this:

Like this:

Leave a ReplyCancel reply

Discover more from EVERYTHING CONNECTED - Numorpho's Book of Business