Initial Commit

components/explorers/standard-form-explorer.tsx

@@ -0,0 +1,445 @@
+"use client";
+
+import { useState, useCallback, useRef, useEffect } from "react";
+import { Card } from "@/components/ui/card";
+import { StepControls } from "./step-controls";
+
+type Mode = "toSF" | "toOrd";
+
+interface DisplayState {
+  digits: string[];
+  decimalPos: number;
+  initPos: number;
+  targetPos: number;
+  origPower: number;
+}
+
+function parseOrdinary(raw: string): { digits: string[]; decimalPos: number } {
+  const s = raw.trim().replace(/[\s,]/g, "");
+  if (s.startsWith("-")) throw new Error("Please enter a positive number.");
+  if (!/^\d*\.?\d+$/.test(s) || s === "")
+    throw new Error("Invalid number. Try something like 7438 or 0.0055");
+  if (s.length > 16) throw new Error("Number too long (max 16 digits).");
+
+  const dot = s.indexOf(".");
+  if (dot === -1) {
+    return { digits: s.split(""), decimalPos: s.length };
+  }
+  return {
+    digits: (s.slice(0, dot) + s.slice(dot + 1)).split(""),
+    decimalPos: dot,
+  };
+}
+
+function firstNonZero(digits: string[]): number {
+  return digits.findIndex((d) => d !== "0");
+}
+
+function sfTargetPos(digits: string[]): number {
+  const i = firstNonZero(digits);
+  return i === -1 ? 1 : i + 1;
+}
+
+function buildCoeff(sigDigs: string[]): string {
+  if (sigDigs.length === 0) return "0";
+  if (sigDigs.length === 1) return sigDigs[0] + ".0";
+  const rest = sigDigs.slice(1).join("").replace(/0+$/, "") || "0";
+  return sigDigs[0] + "." + rest;
+}
+
+function buildOrdinary(digits: string[], pos: number): string {
+  let s: string;
+  if (pos <= 0) {
+    s = "0." + "0".repeat(-pos) + digits.join("");
+  } else if (pos >= digits.length) {
+    s = digits.join("") + "0".repeat(pos - digits.length);
+  } else {
+    s = digits.slice(0, pos).join("") + "." + digits.slice(pos).join("");
+  }
+  s = s.replace(/^0+(?=[1-9])/, "");
+  if (s.startsWith(".")) s = "0" + s;
+  if (s.includes(".")) s = s.replace(/\.?0+$/, "");
+  return s || "0";
+}
+
+export function StandardFormExplorer() {
+  const [mode, setMode] = useState<Mode>("toSF");
+  const [ordinaryInput, setOrdinaryInput] = useState("");
+  const [coeffInput, setCoeffInput] = useState("");
+  const [powerInput, setPowerInput] = useState("");
+  const [error, setError] = useState("");
+
+  const [display, setDisplay] = useState<DisplayState | null>(null);
+  const [currentPos, setCurrentPos] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [done, setDone] = useState(false);
+
+  const numberRowRef = useRef<HTMLDivElement>(null);
+  const dotRef = useRef<HTMLDivElement>(null);
+  const [dotLeft, setDotLeft] = useState(0);
+  const [dotAnimate, setDotAnimate] = useState(false);
+  const [powerPop, setPowerPop] = useState(false);
+
+  const totalSteps = display ? Math.abs(display.targetPos - display.initPos) : 0;
+  const currentStep = display ? Math.abs(currentPos - display.initPos) : 0;
+
+  const currentPower = display
+    ? mode === "toSF"
+      ? display.initPos - currentPos
+      : display.origPower - (currentPos - display.initPos)
+    : 0;
+
+  // Position decimal dot
+  const placeDot = useCallback(
+    (animate: boolean) => {
+      if (!numberRowRef.current || !display) return;
+      const boxes = numberRowRef.current.querySelectorAll<HTMLDivElement>("[data-digit-box]");
+      if (!boxes.length) return;
+
+      let leftPx: number;
+      const dp = currentPos;
+      if (dp <= 0) {
+        leftPx = boxes[0].offsetLeft - 6;
+      } else if (dp >= boxes.length) {
+        const last = boxes[boxes.length - 1];
+        leftPx = last.offsetLeft + last.offsetWidth - 4;
+      } else {
+        const prev = boxes[dp - 1];
+        const next = boxes[dp];
+        leftPx = Math.round((prev.offsetLeft + prev.offsetWidth + next.offsetLeft) / 2);
+      }
+
+      setDotAnimate(animate);
+      setDotLeft(leftPx);
+    },
+    [currentPos, display],
+  );
+
+  useEffect(() => {
+    if (display) {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => placeDot(true));
+      });
+    }
+  }, [currentPos, display, placeDot]);
+
+  // Initial placement without animation
+  useEffect(() => {
+    if (display) {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => placeDot(false));
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [display?.digits.join("")]);
+
+  function initDisplay(digits: string[], start: number, target: number, origPower: number) {
+    setIsPlaying(false);
+    setDone(start === target);
+    setDisplay({ digits, decimalPos: start, initPos: start, targetPos: target, origPower });
+    setCurrentPos(start);
+    setError("");
+  }
+
+  function handleConvertToSF() {
+    setError("");
+    try {
+      const { digits, decimalPos } = parseOrdinary(ordinaryInput);
+      const target = sfTargetPos(digits);
+      initDisplay(digits, decimalPos, target, 0);
+    } catch (e) {
+      setError((e as Error).message);
+    }
+  }
+
+  function handleConvertToOrd() {
+    setError("");
+    try {
+      if (!coeffInput.trim()) throw new Error("Enter the coefficient A.");
+      const n = parseInt(powerInput, 10);
+      if (isNaN(n)) throw new Error("Enter the power n as a whole number.");
+      if (Math.abs(n) > 12) throw new Error("Power too large for display (max ±12).");
+      if (n === 0) throw new Error("Power is 0 — the number is already in ordinary form.");
+
+      const { digits } = parseOrdinary(coeffInput);
+      const A = parseFloat(coeffInput);
+      if (isNaN(A) || A < 1 || A >= 10)
+        throw new Error(`Coefficient must satisfy 1 ≤ A < 10 (got ${coeffInput}).`);
+
+      const decimalPos = 1;
+      const expandedDigits = [...digits];
+
+      let startPos: number;
+      let targetPos: number;
+      if (n > 0) {
+        targetPos = decimalPos + n;
+        startPos = decimalPos;
+        while (expandedDigits.length < targetPos) expandedDigits.push("0");
+      } else {
+        const absN = Math.abs(n);
+        const zeros = Array(absN).fill("0");
+        expandedDigits.unshift(...zeros);
+        startPos = decimalPos + absN;
+        targetPos = startPos + n;
+      }
+
+      initDisplay(expandedDigits, startPos, targetPos, n);
+    } catch (e) {
+      setError((e as Error).message);
+    }
+  }
+
+  const stepForward = useCallback(() => {
+    if (!display || currentPos === display.targetPos) return;
+    const dir = display.targetPos > display.initPos ? 1 : -1;
+    const nextPos = currentPos + dir;
+    setCurrentPos(nextPos);
+    setPowerPop(true);
+    setTimeout(() => setPowerPop(false), 300);
+    if (nextPos === display.targetPos) {
+      setDone(true);
+      setIsPlaying(false);
+    }
+  }, [display, currentPos]);
+
+  const stepBack = useCallback(() => {
+    if (!display || currentPos === display.initPos) return;
+    if (done) setDone(false);
+    const dir = display.targetPos > display.initPos ? -1 : 1;
+    setCurrentPos((p) => p + dir);
+    setPowerPop(true);
+    setTimeout(() => setPowerPop(false), 300);
+  }, [display, currentPos, done]);
+
+  const togglePlay = useCallback(() => {
+    setIsPlaying((p) => !p);
+  }, []);
+
+  const reset = useCallback(() => {
+    setIsPlaying(false);
+    setDisplay(null);
+    setDone(false);
+    setError("");
+  }, []);
+
+  // Direction label
+  const remaining = display ? display.targetPos - currentPos : 0;
+  const dirText =
+    !display || done || remaining === 0
+      ? null
+      : remaining < 0
+        ? `← Moving left · ${Math.abs(remaining)} step${Math.abs(remaining) !== 1 ? "s" : ""} remaining`
+        : `→ Moving right · ${remaining} step${remaining !== 1 ? "s" : ""} remaining`;
+
+  // Result
+  const fz = display ? firstNonZero(display.digits) : 0;
+
+  return (
+    <div className="space-y-4">
+      {/* Mode Tabs */}
+      <div className="flex gap-2">
+        <button
+          onClick={() => {
+            setMode("toSF");
+            reset();
+          }}
+          className={`rounded-full border-2 px-4 py-2 text-sm font-semibold transition-colors ${
+            mode === "toSF"
+              ? "border-unit-2 bg-unit-2 text-white"
+              : "border-unit-2/40 text-unit-2 hover:bg-unit-2-light"
+          }`}
+        >
+          Ordinary → Standard Form
+        </button>
+        <button
+          onClick={() => {
+            setMode("toOrd");
+            reset();
+          }}
+          className={`rounded-full border-2 px-4 py-2 text-sm font-semibold transition-colors ${
+            mode === "toOrd"
+              ? "border-unit-2 bg-unit-2 text-white"
+              : "border-unit-2/40 text-unit-2 hover:bg-unit-2-light"
+          }`}
+        >
+          Standard Form → Ordinary
+        </button>
+      </div>
+
+      {/* Input Card */}
+      <Card>
+        <p className="mb-3 text-xs font-bold uppercase tracking-wider text-unit-2">
+          {mode === "toSF" ? "Enter an ordinary number" : "Enter a number in standard form  A × 10ⁿ"}
+        </p>
+        {mode === "toSF" ? (
+          <div className="flex flex-wrap items-center gap-2.5">
+            <input
+              type="text"
+              value={ordinaryInput}
+              onChange={(e) => setOrdinaryInput(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && handleConvertToSF()}
+              placeholder="e.g. 7438 or 0.0055"
+              maxLength={18}
+              autoComplete="off"
+              className="max-w-[220px] rounded-lg border-2 border-border bg-surface px-3.5 py-2.5 text-lg font-medium outline-none transition-colors focus:border-unit-2"
+            />
+            <button
+              onClick={handleConvertToSF}
+              className="rounded-lg bg-unit-2 px-6 py-2.5 text-sm font-bold text-white transition-colors hover:bg-unit-2-dark"
+            >
+              Convert →
+            </button>
+          </div>
+        ) : (
+          <div className="flex flex-wrap items-center gap-2.5">
+            <input
+              type="text"
+              value={coeffInput}
+              onChange={(e) => setCoeffInput(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && handleConvertToOrd()}
+              placeholder="A  e.g. 3.6"
+              maxLength={12}
+              autoComplete="off"
+              className="max-w-[140px] rounded-lg border-2 border-border bg-surface px-3.5 py-2.5 text-lg font-medium outline-none transition-colors focus:border-unit-2"
+            />
+            <span className="text-lg font-semibold">
+              × 10<sup>n</sup> where n =
+            </span>
+            <input
+              type="number"
+              value={powerInput}
+              onChange={(e) => setPowerInput(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && handleConvertToOrd()}
+              placeholder="e.g. 4 or −3"
+              autoComplete="off"
+              className="max-w-[110px] rounded-lg border-2 border-border bg-surface px-3.5 py-2.5 text-lg font-medium outline-none transition-colors focus:border-unit-2"
+            />
+            <button
+              onClick={handleConvertToOrd}
+              className="rounded-lg bg-unit-2 px-6 py-2.5 text-sm font-bold text-white transition-colors hover:bg-unit-2-dark"
+            >
+              Convert →
+            </button>
+          </div>
+        )}
+        {error && <p className="mt-2 text-sm text-incorrect">{error}</p>}
+      </Card>
+
+      {/* Display Card */}
+      <Card className="flex min-h-[260px] flex-col items-center justify-center gap-3 p-6">
+        {!display ? (
+          <p className="text-muted/50">
+            Enter a number above and click <strong>Convert</strong>
+          </p>
+        ) : (
+          <>
+            {/* Step info */}
+            <p className="text-sm text-muted">
+              {totalSteps === 0
+                ? "Number is already in standard form position — power = 0"
+                : `Step ${currentStep} of ${totalSteps}`}
+            </p>
+
+            {/* Digit row */}
+            <div ref={numberRowRef} className="relative inline-flex items-end gap-2.5 px-4 pb-7 pt-2">
+              {display.digits.map((ch, i) => {
+                const isLeadingZero = i < fz && fz !== -1;
+                const isHighlight = i === display.targetPos - 1;
+                return (
+                  <div
+                    key={i}
+                    data-digit-box
+                    className={`flex h-[88px] w-[68px] shrink-0 select-none items-center justify-center rounded-xl border-2 text-[3.2rem] font-bold transition-all duration-300 max-sm:h-[70px] max-sm:w-[52px] max-sm:text-[2.4rem] ${
+                      isLeadingZero
+                        ? "border-border/60 bg-background text-muted/30"
+                        : isHighlight
+                          ? "border-unit-2 bg-unit-2-light text-foreground"
+                          : "border-border bg-surface text-foreground"
+                    }`}
+                  >
+                    {ch}
+                  </div>
+                );
+              })}
+              {/* Decimal dot */}
+              <div
+                ref={dotRef}
+                className="absolute bottom-1.5 z-10 h-[18px] w-[18px] -translate-x-1/2 rounded-full bg-incorrect shadow-[0_2px_8px_rgba(239,68,68,0.45)]"
+                style={{
+                  left: dotLeft,
+                  transition: dotAnimate ? "left 0.52s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s" : "none",
+                  opacity: done && currentPos >= display.digits.length ? 0 : 1,
+                }}
+              />
+            </div>
+
+            {/* Direction label */}
+            {dirText && (
+              <p
+                className={`text-sm font-semibold ${
+                  remaining < 0 ? "text-incorrect" : "text-hint"
+                }`}
+              >
+                {dirText}
+              </p>
+            )}
+
+            {/* Power counter */}
+            <div className="flex items-baseline gap-1.5 text-2xl text-muted">
+              <span>×</span>
+              <span className="font-bold text-foreground">10</span>
+              <sup
+                className={`inline-block min-w-[38px] text-2xl font-extrabold text-hint ${
+                  powerPop ? "animate-bounce" : ""
+                }`}
+              >
+                {currentPower}
+              </sup>
+            </div>
+          </>
+        )}
+      </Card>
+
+      {/* Controls */}
+      <Card className="p-4">
+        <StepControls
+          currentStep={currentStep}
+          totalSteps={totalSteps}
+          isPlaying={isPlaying}
+          onStepForward={stepForward}
+          onStepBack={stepBack}
+          onTogglePlay={togglePlay}
+          onReset={reset}
+          canStepForward={!!display && currentPos !== display.targetPos}
+          canStepBack={!!display && currentPos !== display.initPos}
+        />
+      </Card>
+
+      {/* Result Card */}
+      <Card className="flex min-h-[90px] flex-col items-center justify-center gap-1.5 text-center">
+        {!display || !done ? (
+          <p className="text-sm text-muted/40">Result will appear here when steps are complete</p>
+        ) : mode === "toSF" ? (
+          <>
+            <p className="text-xs uppercase tracking-wider text-muted">Standard Form</p>
+            <p className="text-3xl font-extrabold max-sm:text-2xl">
+              <span className="text-foreground">
+                {buildCoeff(display.digits.slice(fz === -1 ? 0 : fz))}
+              </span>
+              <span className="mx-2 text-muted">×</span>
+              <span className="text-foreground">10</span>
+              <sup className="text-xl text-incorrect">{display.initPos - display.targetPos}</sup>
+            </p>
+          </>
+        ) : (
+          <>
+            <p className="text-xs uppercase tracking-wider text-muted">Ordinary Form</p>
+            <p className="text-3xl font-extrabold text-foreground max-sm:text-2xl">
+              {buildOrdinary(display.digits, display.targetPos)}
+            </p>
+          </>
+        )}
+      </Card>
+    </div>
+  );
+}