Merge pull request #1 from AhmadAlBarasy/feat/add-simulation-steps-control

Added simulation steps controller + Fixed canvas animation bugs

Author: AhmadAlBarasy

src/App.tsx

@@ -4,14 +4,16 @@ import { CanvasProvider } from "./context/CanvasProvider";
 import { VisualizationProvider } from "./context/VisualizationProvider";
 
 function App() {
-  return <div className="flex w-full h-screen">
-    <VisualizationProvider>
+  return (
+    <div className="flex w-full h-screen">
       <CanvasProvider>
-        <SidePanel />
-        <Canvas />
+        <VisualizationProvider>
+          <SidePanel />
+          <Canvas />
+        </VisualizationProvider>
       </CanvasProvider>
-    </VisualizationProvider>
-  </div>
+    </div>
+  );
 }
 
 export default App;

src/classes/Node.tsx

@@ -0,0 +1,27 @@
+
+export type action = 'create' | 'delete';
+
+export type Position = {
+  x: number;
+  y: number;
+};
+
+export type SimulationStep = {
+  text: string;
+  nodeId: string;
+  action: action;
+  position: Position;
+  parentId?: string;
+};
+
+class SimulationStepNode {
+  data: SimulationStep;
+  next: SimulationStepNode | null = null;
+  prev: SimulationStepNode | null = null;
+
+  constructor(data: SimulationStep) {
+    this.data = data;
+  }
+}
+
+export default SimulationStepNode;

src/classes/SimulationStepNode.tsx

@@ -2,20 +2,21 @@
 import FactorialFormFields from "./formFields/FactorialFormFields";
 import FibonacciFormFields from "./formFields/FibonacciFormFields";
 import { useVisualizationContext } from "../hooks/useVisualizationContext";
-import { useVisualization } from "../hooks/useVisualization";
 import { useCanvasContext } from "../hooks/useCanvasContext";
 
 export default function AlgorithmForm() {
 
   const {
     ongoingVisualization,
     setOngoingVisualization,
-    selectedAlgorithm, 
-    setSelectedAlgorithm
-    } = useVisualizationContext();
+    selectedAlgorithm,
+    setSelectedAlgorithm,
+    visualizeFibonacci,
+    visualizeFactorial,
+    setAbort,
+  } = useVisualizationContext();
 
   const { setNodes, setEdges } = useCanvasContext();
-  const { visualizeFibonacci, visualizeFactorial, setAbort } = useVisualization();
 
   const clearCanvas = () => {
     setNodes([]);

src/components/AlgorithmForm.tsx

@@ -0,0 +1,46 @@
+import { ChevronLeft, ChevronRight, Pause, Play } from 'lucide-react';
+import { useVisualizationContext } from "../hooks/useVisualizationContext";
+
+export default function PlayController() {
+  const {
+    isPlaying,
+    togglePlay,
+    goNextStep,
+    goPreviousStep,
+    canGoNext,
+    canGoPrevious,
+  } = useVisualizationContext();
+
+  return (
+    <div className="mt-4 bg-gray-900/90 w-fit rounded-3xl p-2 mx-auto">
+      <div className="flex items-center justify-center gap-2">
+        <button
+          type="button"
+          aria-label="Previous step"
+          disabled={!canGoPrevious}
+          onClick={goPreviousStep}
+          className="grid place-items-center w-11 h-11 bg-gray-800 text-white rounded-2xl border border-gray-700 hover:bg-gray-700 transition disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          <ChevronLeft className="w-5 h-5" />
+        </button>
+        <button
+          type="button"
+          aria-label={isPlaying ? "Pause visualization" : "Resume visualization"}
+          onClick={togglePlay}
+          className="grid place-items-center w-12 h-12 bg-violet-600 text-white rounded-2xl border border-violet-700 hover:bg-violet-700 transition"
+        >
+          {isPlaying ? <Pause className="w-5 h-5" /> : <Play className="w-5 h-5" />}
+        </button>
+        <button
+          type="button"
+          aria-label="Next step"
+          disabled={!canGoNext}
+          onClick={goNextStep}
+          className="grid place-items-center w-11 h-11 bg-gray-800 text-white rounded-2xl border border-gray-700 hover:bg-gray-700 transition disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          <ChevronRight className="w-5 h-5" />
+        </button>
+      </div>
+    </div>
+  );
+}

src/components/PlayController.tsx

@@ -1,11 +1,12 @@
 import AlgorithmForm from "./AlgorithmForm";
+import PlayController from "./PlayController";
 import { Github, Linkedin } from 'lucide-react';
 import { useVisualizationContext } from "../hooks/useVisualizationContext";
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
 export default function SidePanel() {
-  const { selectedAlgorithm } = useVisualizationContext();
+  const { selectedAlgorithm, ongoingVisualization } = useVisualizationContext();
 
   const getAlgorithmCode = (algorithm: string) => {
     switch (algorithm) {
@@ -38,7 +39,8 @@ export default function SidePanel() {
         md:h-screen
         flex flex-col
         justify-between
-        overflow-y-auto
+        overflow-y-auto 
+        md:overflow-hidden
       "
     >
       {/* Main content */}
@@ -56,18 +58,19 @@ export default function SidePanel() {
             <div className="bg-black rounded-md p-4 overflow-x-auto">
               <SyntaxHighlighter
                 language="javascript"
-                style={oneDark}
-                customStyle={{ background: 'transparent', margin: 0 }}
+                style={atomDark}
+                customStyle={{ background: 'transparent', padding: 0, margin: 0 }}
               >
                 {getAlgorithmCode(selectedAlgorithm)}
               </SyntaxHighlighter>
             </div>
+            {ongoingVisualization && <PlayController />}
           </div>
         )}
       </div>
 
       {/* Footer */}
-      <div className="mt-6 text-center text-gray-400 text-sm">
+      <div className="mt-3 text-center text-gray-400 text-sm">
         <p>Built by: Ahmad Albarasy</p>
         <div className="flex justify-center space-x-4 mt-2">
           <a

src/components/SidePanel.tsx

@@ -18,7 +18,7 @@ export default function FibonacciFormFields() {
         max={5}
         required
         disabled={ongoingVisualization}
-        placeholder="e.g. 6"
+        placeholder="e.g. 5"
         className="
           bg-gray-800 text-white
           p-2

src/components/formFields/FibonacciFormFields.tsx

@@ -1,10 +1,19 @@
 import { createContext } from "react";
 
 export type VisualizationContextType = {
-  ongoingVisualization: boolean,
+  ongoingVisualization: boolean;
   setOngoingVisualization: React.Dispatch<React.SetStateAction<boolean>>;
-  selectedAlgorithm: string,
+  selectedAlgorithm: string;
   setSelectedAlgorithm: React.Dispatch<React.SetStateAction<string>>;
+  isPlaying: boolean;
+  togglePlay: () => void;
+  goNextStep: () => void;
+  goPreviousStep: () => void;
+  visualizeFibonacci: (n: number, id: string, y: number, minX: number, maxX: number) => void;
+  visualizeFactorial: (n: number, id: string, x: number, y: number) => void;
+  setAbort: (bool: boolean) => void;
+  canGoNext: boolean;
+  canGoPrevious: boolean;
 };
 
 export const VisualizationContext = createContext<VisualizationContextType | null>(null);