chore(build): refactor codebase for production
This commit is contained in:
shafin-r
@ -1,6 +1,11 @@
|
||||
import React, { useRef, useState, useEffect } from 'react';
|
||||
import { scaleToSvg, scaleFromSvg, round, calculateDistanceSquared } from '../utils/math';
|
||||
import { CircleState, Point } from '../types';
|
||||
import React, { useRef, useState } from "react";
|
||||
import {
|
||||
scaleToSvg,
|
||||
scaleFromSvg,
|
||||
round,
|
||||
calculateDistanceSquared,
|
||||
} from "../../utils/math";
|
||||
import { type CircleState, type Point } from "../../types/lesson";
|
||||
|
||||
interface CoordinatePlaneProps {
|
||||
circle: CircleState;
|
||||
@ -8,15 +13,15 @@ interface CoordinatePlaneProps {
|
||||
onPointClick?: (p: Point) => void;
|
||||
interactive?: boolean;
|
||||
showDistance?: boolean;
|
||||
mode?: 'view' | 'place_point';
|
||||
mode?: "view" | "place_point";
|
||||
}
|
||||
|
||||
const CoordinatePlane: React.FC<CoordinatePlaneProps> = ({
|
||||
circle,
|
||||
point,
|
||||
onPointClick,
|
||||
const CoordinatePlane: React.FC<CoordinatePlaneProps> = ({
|
||||
circle,
|
||||
point,
|
||||
onPointClick,
|
||||
showDistance = false,
|
||||
mode = 'view'
|
||||
mode = "view",
|
||||
}) => {
|
||||
const svgRef = useRef<SVGSVGElement>(null);
|
||||
const [hoverPoint, setHoverPoint] = useState<Point | null>(null);
|
||||
@ -39,20 +44,20 @@ const CoordinatePlane: React.FC<CoordinatePlaneProps> = ({
|
||||
const rPx = toX(circle.r) - toX(0);
|
||||
|
||||
const handleMouseMove = (e: React.MouseEvent) => {
|
||||
if (mode !== 'place_point' || !svgRef.current) return;
|
||||
if (mode !== "place_point" || !svgRef.current) return;
|
||||
const rect = svgRef.current.getBoundingClientRect();
|
||||
const rawX = e.clientX - rect.left;
|
||||
const rawY = e.clientY - rect.top;
|
||||
|
||||
|
||||
// Snap to nearest 0.5 for cleaner UX
|
||||
const graphX = Math.round(fromX(rawX) * 2) / 2;
|
||||
const graphY = Math.round(fromY(rawY) * 2) / 2;
|
||||
|
||||
|
||||
setHoverPoint({ x: graphX, y: graphY });
|
||||
};
|
||||
|
||||
const handleClick = () => {
|
||||
if (mode === 'place_point' && hoverPoint && onPointClick) {
|
||||
if (mode === "place_point" && hoverPoint && onPointClick) {
|
||||
onPointClick(hoverPoint);
|
||||
}
|
||||
};
|
||||
@ -64,11 +69,13 @@ const CoordinatePlane: React.FC<CoordinatePlaneProps> = ({
|
||||
ticks.push(i);
|
||||
}
|
||||
|
||||
const dSquared = point ? calculateDistanceSquared(point.x, point.y, circle.h, circle.k) : 0;
|
||||
const dSquared = point
|
||||
? calculateDistanceSquared(point.x, point.y, circle.h, circle.k)
|
||||
: 0;
|
||||
const isInside = dSquared < circle.r * circle.r;
|
||||
const isOn = Math.abs(dSquared - circle.r * circle.r) < 0.01;
|
||||
const pointColor = isOn ? 'text-yellow-600' : isInside ? 'text-green-600' : 'text-red-600';
|
||||
const pointFill = isOn ? '#ca8a04' : isInside ? '#16a34a' : '#dc2626';
|
||||
|
||||
const pointFill = isOn ? "#ca8a04" : isInside ? "#16a34a" : "#dc2626";
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center">
|
||||
@ -80,73 +87,129 @@ const CoordinatePlane: React.FC<CoordinatePlaneProps> = ({
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseLeave={() => setHoverPoint(null)}
|
||||
onClick={handleClick}
|
||||
className={`${mode === 'place_point' ? 'cursor-crosshair' : 'cursor-default'}`}
|
||||
className={`${mode === "place_point" ? "cursor-crosshair" : "cursor-default"}`}
|
||||
>
|
||||
{/* Grid Background */}
|
||||
{ticks.map(t => (
|
||||
{ticks.map((t) => (
|
||||
<React.Fragment key={t}>
|
||||
<line x1={toX(t)} y1={0} x2={toX(t)} y2={height} stroke="#e2e8f0" strokeWidth="1" />
|
||||
<line x1={0} y1={toY(t)} x2={width} y2={toY(t)} stroke="#e2e8f0" strokeWidth="1" />
|
||||
<line
|
||||
x1={toX(t)}
|
||||
y1={0}
|
||||
x2={toX(t)}
|
||||
y2={height}
|
||||
stroke="#e2e8f0"
|
||||
strokeWidth="1"
|
||||
/>
|
||||
<line
|
||||
x1={0}
|
||||
y1={toY(t)}
|
||||
x2={width}
|
||||
y2={toY(t)}
|
||||
stroke="#e2e8f0"
|
||||
strokeWidth="1"
|
||||
/>
|
||||
</React.Fragment>
|
||||
))}
|
||||
|
||||
{/* Axes */}
|
||||
<line x1={toX(0)} y1={0} x2={toX(0)} y2={height} stroke="#64748b" strokeWidth="2" />
|
||||
<line x1={0} y1={toY(0)} x2={width} y2={toY(0)} stroke="#64748b" strokeWidth="2" />
|
||||
<line
|
||||
x1={toX(0)}
|
||||
y1={0}
|
||||
x2={toX(0)}
|
||||
y2={height}
|
||||
stroke="#64748b"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<line
|
||||
x1={0}
|
||||
y1={toY(0)}
|
||||
x2={width}
|
||||
y2={toY(0)}
|
||||
stroke="#64748b"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
|
||||
{/* Circle */}
|
||||
<circle
|
||||
cx={cx}
|
||||
cy={cy}
|
||||
r={Math.abs(rPx)}
|
||||
fill="rgba(99, 102, 241, 0.1)"
|
||||
stroke="#4f46e5"
|
||||
<circle
|
||||
cx={cx}
|
||||
cy={cy}
|
||||
r={Math.abs(rPx)}
|
||||
fill="rgba(99, 102, 241, 0.1)"
|
||||
stroke="#4f46e5"
|
||||
strokeWidth="3"
|
||||
className="transition-all duration-300 ease-out"
|
||||
/>
|
||||
|
||||
|
||||
{/* Center Point */}
|
||||
<circle cx={cx} cy={cy} r={4} fill="#4f46e5" />
|
||||
<text x={cx + 8} y={cy - 8} fontSize="12" fill="#4f46e5" fontWeight="bold">Center ({circle.h}, {circle.k})</text>
|
||||
<text
|
||||
x={cx + 8}
|
||||
y={cy - 8}
|
||||
fontSize="12"
|
||||
fill="#4f46e5"
|
||||
fontWeight="bold"
|
||||
>
|
||||
Center ({circle.h}, {circle.k})
|
||||
</text>
|
||||
|
||||
{/* Radius Line (only if distance line is not active to avoid clutter) */}
|
||||
{!point && (
|
||||
<line
|
||||
x1={cx}
|
||||
y1={cy}
|
||||
x2={cx + rPx}
|
||||
y2={cy}
|
||||
stroke="#4f46e5"
|
||||
strokeWidth="2"
|
||||
strokeDasharray="5,5"
|
||||
<line
|
||||
x1={cx}
|
||||
y1={cy}
|
||||
x2={cx + rPx}
|
||||
y2={cy}
|
||||
stroke="#4f46e5"
|
||||
strokeWidth="2"
|
||||
strokeDasharray="5,5"
|
||||
/>
|
||||
)}
|
||||
{!point && (
|
||||
<text x={cx + rPx/2} y={cy - 5} fontSize="12" fill="#4f46e5">r = {circle.r}</text>
|
||||
<text x={cx + rPx / 2} y={cy - 5} fontSize="12" fill="#4f46e5">
|
||||
r = {circle.r}
|
||||
</text>
|
||||
)}
|
||||
|
||||
{/* Placed Point */}
|
||||
{point && (
|
||||
<>
|
||||
<line
|
||||
x1={cx}
|
||||
y1={cy}
|
||||
x2={toX(point.x)}
|
||||
y2={toY(point.y)}
|
||||
stroke="#94a3b8"
|
||||
strokeWidth="2"
|
||||
strokeDasharray="4,4"
|
||||
<line
|
||||
x1={cx}
|
||||
y1={cy}
|
||||
x2={toX(point.x)}
|
||||
y2={toY(point.y)}
|
||||
stroke="#94a3b8"
|
||||
strokeWidth="2"
|
||||
strokeDasharray="4,4"
|
||||
/>
|
||||
<circle cx={toX(point.x)} cy={toY(point.y)} r={6} fill={pointFill} stroke="white" strokeWidth="2" />
|
||||
<text x={toX(point.x) + 8} y={toY(point.y) - 8} fontSize="12" fontWeight="bold" fill={pointFill}>
|
||||
<circle
|
||||
cx={toX(point.x)}
|
||||
cy={toY(point.y)}
|
||||
r={6}
|
||||
fill={pointFill}
|
||||
stroke="white"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<text
|
||||
x={toX(point.x) + 8}
|
||||
y={toY(point.y) - 8}
|
||||
fontSize="12"
|
||||
fontWeight="bold"
|
||||
fill={pointFill}
|
||||
>
|
||||
({point.x}, {point.y})
|
||||
</text>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Hover Ghost Point */}
|
||||
{mode === 'place_point' && hoverPoint && !point && (
|
||||
<circle cx={toX(hoverPoint.x)} cy={toY(hoverPoint.y)} r={4} fill="rgba(0,0,0,0.3)" />
|
||||
{mode === "place_point" && hoverPoint && !point && (
|
||||
<circle
|
||||
cx={toX(hoverPoint.x)}
|
||||
cy={toY(hoverPoint.y)}
|
||||
r={4}
|
||||
fill="rgba(0,0,0,0.3)"
|
||||
/>
|
||||
)}
|
||||
</svg>
|
||||
|
||||
@ -157,25 +220,42 @@ const CoordinatePlane: React.FC<CoordinatePlaneProps> = ({
|
||||
|
||||
{/* Info Panel below graph */}
|
||||
{point && showDistance && (
|
||||
<div className={`mt-4 p-4 rounded-lg border-l-4 w-full max-w-md bg-white shadow-sm transition-colors ${
|
||||
isOn ? 'border-yellow-500 bg-yellow-50' :
|
||||
isInside ? 'border-green-500 bg-green-50' :
|
||||
'border-red-500 bg-red-50'
|
||||
}`}>
|
||||
<div
|
||||
className={`mt-4 p-4 rounded-lg border-l-4 w-full max-w-md bg-white shadow-sm transition-colors ${
|
||||
isOn
|
||||
? "border-yellow-500 bg-yellow-50"
|
||||
: isInside
|
||||
? "border-green-500 bg-green-50"
|
||||
: "border-red-500 bg-red-50"
|
||||
}`}
|
||||
>
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<span className="font-bold text-slate-700">Distance Check:</span>
|
||||
<span className={`px-2 py-0.5 rounded text-sm font-bold uppercase ${
|
||||
isOn ? 'bg-yellow-200 text-yellow-800' :
|
||||
isInside ? 'bg-green-200 text-green-800' :
|
||||
'bg-red-200 text-red-800'
|
||||
}`}>
|
||||
{isOn ? 'On Circle' : isInside ? 'Inside' : 'Outside'}
|
||||
<span
|
||||
className={`px-2 py-0.5 rounded text-sm font-bold uppercase ${
|
||||
isOn
|
||||
? "bg-yellow-200 text-yellow-800"
|
||||
: isInside
|
||||
? "bg-green-200 text-green-800"
|
||||
: "bg-red-200 text-red-800"
|
||||
}`}
|
||||
>
|
||||
{isOn ? "On Circle" : isInside ? "Inside" : "Outside"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="font-mono text-sm space-y-1">
|
||||
<p>d² = (x - h)² + (y - k)²</p>
|
||||
<p>d² = ({point.x} - {circle.h})² + ({point.y} - {circle.k})²</p>
|
||||
<p>d² = {round(calculateDistanceSquared(point.x, point.y, circle.h, circle.k))} <span className="mx-2 text-slate-400">vs</span> r² = {circle.r * circle.r}</p>
|
||||
<p>
|
||||
d² = ({point.x} - {circle.h})² + ({point.y} - {circle.k})²
|
||||
</p>
|
||||
<p>
|
||||
d² ={" "}
|
||||
{round(
|
||||
calculateDistanceSquared(point.x, point.y, circle.h, circle.k),
|
||||
)}{" "}
|
||||
<span className="mx-2 text-slate-400">vs</span> r² ={" "}
|
||||
{circle.r * circle.r}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user