Adding rest of website

Author: kiwikodes

package-lock.json

@@ -19,6 +19,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.515.0",
+    "motion": "^12.19.1",
     "next": "15.3.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

package.json

@@ -0,0 +1,181 @@
+"use client";
+
+import { motion, useDragControls } from "motion/react";
+import { useHasseContext } from "./HasseProvider";
+import { ReactNode, useEffect } from "react";
+
+export default function HasseCanvas() {
+  const {
+    transitiveReduction,
+    elements,
+
+    currentStep,
+    setCurrentStep,
+    totalSteps,
+    paused,
+    setPaused,
+
+    speedOptions,
+    speedIndex,
+  } = useHasseContext();
+
+  const controls = useDragControls();
+
+  function getGraphSteps() {
+    const steps: ReactNode[] = [];
+
+    const addedNodes: boolean[] = Array(transitiveReduction.length).fill(false);
+    const [cols, nodeLevels]: [number[], number[]] = getNodeLevels();
+
+    function getNodeLevels(): [number[], number[]] {
+      const n = transitiveReduction.length;
+      const levels = new Array(n).fill(0);
+
+      const visited = new Set<number>();
+
+      function dfs(node: number): number {
+        if (visited.has(node)) return levels[node];
+        visited.add(node);
+
+        let maxPredecessorLevel = 0;
+        for (let i = 0; i < n; i++) {
+          if (transitiveReduction[i][node] === 1) {
+            maxPredecessorLevel = Math.max(maxPredecessorLevel, dfs(i) + 1);
+          }
+        }
+
+        levels[node] = maxPredecessorLevel;
+        return levels[node];
+      }
+
+      for (let i = 0; i < n; i++) {
+        dfs(i);
+      }
+
+      const counts = Array(Math.max(...levels) + 1).fill(0);
+      const cols = Array(n).fill(0);
+
+      for (let i = 0; i < n; i++) {
+        cols[i] = counts[levels[i]];
+        counts[levels[i]]++;
+      }
+
+      return [cols, levels];
+    }
+
+    function graphNode(step: number, x: number, y: number) {
+      return (
+        <motion.g key={step} transform={`translate(${500 + x}, ${500 + y})`}>
+          <motion.circle
+            r={50}
+            fill="skyblue"
+            initial={{ scale: 0, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            transition={{ duration: 0.5 }}
+          />
+          <text
+            textAnchor="middle"
+            dominantBaseline="middle"
+            className="fill-black text-sm font-semibold"
+          >
+            {elements[step]}
+          </text>
+        </motion.g>
+      );
+    }
+
+    function graphEdge(from: number, to: number) {
+      return (
+        <motion.line
+          key={`${from}-${to}`}
+          x1={500 + 125 * cols[from]}
+          y1={500 - nodeLevels[from] * 125}
+          x2={500 + 125 * cols[to]}
+          y2={500 - nodeLevels[to] * 125}
+          stroke="black"
+          strokeWidth={2}
+          initial={{ pathLength: 0 }}
+          animate={{ pathLength: 1 }}
+          transition={{ duration: 0.6 }}
+        />
+      );
+    }
+
+    for (let i = 0; i < transitiveReduction.length; i++) {
+      for (let j = 0; j < transitiveReduction[i].length; j++) {
+        if (transitiveReduction[i][j] === 0) continue;
+
+        if (!addedNodes[i]) {
+          steps.push(graphNode(i, 125 * cols[i], -nodeLevels[i] * 125));
+          addedNodes[i] = true;
+        }
+
+        if (!addedNodes[j]) {
+          steps.push(graphNode(j, 125 * cols[j], -nodeLevels[j] * 125));
+          addedNodes[j] = true;
+        }
+
+        steps.push(graphEdge(i, j));
+      }
+    }
+
+    for (let i = 0; i < addedNodes.length; i++) {
+      if (!addedNodes[i]) {
+        steps.push(graphNode(i, 125 * cols[i], -nodeLevels[i] * 125));
+      }
+    }
+
+    return steps;
+  }
+
+  let steps: ReactNode[] = [];
+
+  // Update steps whenever transitiveReduction changes
+  if (transitiveReduction.length > 0) {
+    steps = getGraphSteps();
+  }
+
+  useEffect(() => {
+    if (paused || currentStep >= totalSteps) return;
+
+    console.log("Current step:", currentStep, "Total steps:", totalSteps);
+
+    const interval = setInterval(() => {
+      setCurrentStep(prev => {
+        if (prev >= totalSteps) {
+          clearInterval(interval);
+          setPaused(true);
+          return prev;
+        }
+        return prev + 1;
+      });
+    }, 1000 / speedOptions[speedIndex]);
+
+    return () => clearInterval(interval);
+  }, [paused, speedIndex, totalSteps]);
+
+  return (
+    <svg
+      width="100%"
+      height="100vh"
+      onPointerDown={e => {
+        controls.start(e);
+        e.currentTarget.classList.add("cursor-grabbing");
+      }}
+      onPointerUp={e => {
+        e.currentTarget.classList.remove("cursor-grabbing");
+      }}
+      className="cursor-grab"
+      id="hasse-diagram"
+    >
+      <motion.g
+        drag
+        dragControls={controls}
+        dragConstraints={{ right: -400 }}
+        style={{ cursor: "grab" }}
+      >
+        {steps.slice(0, currentStep)}
+      </motion.g>
+    </svg>
+  );
+}

src/app/tools/hasse/components/HasseCanvas.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useState,
+  Dispatch,
+  SetStateAction,
+} from "react";
+
+type HasseContextType = {
+  poset: number[][];
+  setPoset: Dispatch<SetStateAction<number[][]>>;
+  transitiveReduction: number[][];
+  setTransitiveReduction: Dispatch<SetStateAction<number[][]>>;
+  elementsType: string;
+  setElementsType: Dispatch<SetStateAction<string>>;
+  elements: number[];
+  setElements: Dispatch<SetStateAction<number[]>>;
+  rangeStart: number | "";
+  setRangeStart: Dispatch<SetStateAction<number | "">>;
+  rangeEnd: number | "";
+  setRangeEnd: Dispatch<SetStateAction<number | "">>;
+  setInput: string;
+  setSetInput: Dispatch<SetStateAction<string>>;
+  relation: string;
+  setRelation: Dispatch<SetStateAction<string>>;
+  currentStep: number;
+  setCurrentStep: Dispatch<SetStateAction<number>>;
+  totalSteps: number;
+  setTotalSteps: Dispatch<SetStateAction<number>>;
+  paused: boolean;
+  setPaused: Dispatch<SetStateAction<boolean>>;
+  speedOptions: number[];
+  speedIndex: number;
+  setSpeedIndex: Dispatch<SetStateAction<number>>;
+};
+
+const HasseContext = createContext<HasseContextType | undefined>(undefined);
+
+export default function HasseProvider({ children }: { children: ReactNode }) {
+  const [poset, setPoset] = useState<number[][]>([]);
+  const [transitiveReduction, setTransitiveReduction] = useState<number[][]>(
+    []
+  );
+
+  const [elementsType, setElementsType] = useState<string>("range");
+  const [elements, setElements] = useState<number[]>([]);
+
+  const [rangeStart, setRangeStart] = useState<number | "">("");
+  const [rangeEnd, setRangeEnd] = useState<number | "">("");
+  const [setInput, setSetInput] = useState("");
+
+  const [relation, setRelation] = useState<string>("divisibility");
+
+  const [currentStep, setCurrentStep] = useState(0);
+  const [totalSteps, setTotalSteps] = useState(0);
+  const [paused, setPaused] = useState(true);
+
+  const speedOptions = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 4, 8, 16];
+  const [speedIndex, setSpeedIndex] = useState(3);
+
+  return (
+    <HasseContext.Provider
+      value={{
+        poset,
+        setPoset,
+        transitiveReduction,
+        setTransitiveReduction,
+
+        elementsType,
+        setElementsType,
+        elements,
+        setElements,
+
+        rangeStart,
+        setRangeStart,
+        rangeEnd,
+        setRangeEnd,
+        setInput,
+        setSetInput,
+
+        relation,
+        setRelation,
+
+        currentStep,
+        setCurrentStep,
+        totalSteps,
+        setTotalSteps,
+
+        paused,
+        setPaused,
+        speedOptions,
+        speedIndex,
+        setSpeedIndex,
+      }}
+    >
+      {children}
+    </HasseContext.Provider>
+  );
+}
+
+export function useHasseContext() {
+  const context = useContext(HasseContext);
+  if (!context) {
+    throw new Error("useHasseContext must be used within a HasseProvider");
+  }
+  return context;
+}