JustinShetty · JustinShetty · Jul 2, 2025 · Jul 2, 2025 · Jul 2, 2025
diff --git a/eslint.config.js b/eslint.config.js
@@ -23,6 +23,13 @@ export default tseslint.config(
         'warn',
         { allowConstantExport: true },
       ],
+      'eol-last': [
+        'error', 
+        'always',
+      ],
+      'no-trailing-spaces': [
+        'error',
+      ],
     },
   },
 )
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/AnimationControl.tsx b/src/AnimationControl.tsx
@@ -71,9 +71,9 @@
 }
 
 function AnimationControl({
-    playAnimation, 
-    onPlayAnimationChange, 
-    onSkipBackward, 
+    playAnimation,
+    onPlayAnimationChange,
+    onSkipBackward,
     onSkipForward,
     onRestart,
     stepSize,
@@ -93,11 +93,11 @@
     setShowGoals,
     showGoalVectors,
     setShowGoalVectors,
-}: AnimationControlProps) { 
+}: AnimationControlProps) {
     const roundAndSetStepSize = (value: number) => {
         onStepSizeChange(Number(value.toFixed(1)));
     }
-    
+
     const handleSliderChange = (event: Event, value: number | number[]) => {
         event.preventDefault();
         if (typeof value === 'number') roundAndSetStepSize(value);
@@ -143,16 +143,16 @@
         return () => {
             window.removeEventListener('keydown', handleKeyDown);
         };
-    }, [playAnimation, onPlayAnimationChange, loopAnimation, onFitView, 
-        onLoopAnimationChange, onRestart, onShowAgentIdChange, onSkipBackward, 
-        onSkipForward, onStepSizeChange, showAgentId, stepSize, onTracePathsChange, tracePaths, 
-        takeScreenshot, showCellId, setShowCellId, showGoals, setShowGoals, showGoalVectors, 
+    }, [playAnimation, onPlayAnimationChange, loopAnimation, onFitView,
+        onLoopAnimationChange, onRestart, onShowAgentIdChange, onSkipBackward,
+        onSkipForward, onStepSizeChange, showAgentId, stepSize, onTracePathsChange, tracePaths,
+        takeScreenshot, showCellId, setShowCellId, showGoals, setShowGoals, showGoalVectors,
         setShowGoalVectors]);
 
     return (
         <Stack direction="column" spacing={1}>
             <Stack direction="row" spacing={2} justifyContent="center">
-                <Tooltip 
+                <Tooltip
                     title={
                         <div style={{ textAlign: 'center' }}>
                             Adjust animation step size
@@ -182,12 +182,12 @@
                     <Tooltip title={`Backward one step (${STEP_BACKWARD_KEY})`}>
                         <Button onClick={onSkipBackward}>
                             <SkipPreviousIcon />
-                        </Button>   
-                    </Tooltip>    
-                    <Tooltip title={(playAnimation ? "Pause" : "Play") + ` (spacebar)`}>     
+                        </Button>
+                    </Tooltip>
+                    <Tooltip title={(playAnimation ? "Pause" : "Play") + ` (spacebar)`}>
                         <Button onClick={() => onPlayAnimationChange(!playAnimation)}>
-                            {playAnimation ? 
-                            <PauseTwoToneIcon /> : 
+                            {playAnimation ?
+                            <PauseTwoToneIcon /> :
                             <PlayArrowIcon />}
                         </Button>
                     </Tooltip>
@@ -207,8 +207,8 @@
                     </Tooltip>
                     <Tooltip title={(loopAnimation ? "Disable loop" : "Enable loop") + ` (${LOOP_KEY})`}>
                         <Button onClick={() => onLoopAnimationChange(!loopAnimation)}>
-                            {loopAnimation ? 
-                            <RepeatOnIcon /> : 
+                            {loopAnimation ?
+                            <RepeatOnIcon /> :
                             <RepeatIcon />}
                         </Button>
                     </Tooltip>
@@ -266,7 +266,7 @@
                 </ButtonGroup>
             </Box>
         </Stack>
-    );   
+    );
 }
 
 export default AnimationControl;
diff --git a/src/App.tsx b/src/App.tsx
@@ -8,10 +8,10 @@ import React, { useCallback } from 'react';
 import { StrictMode, useRef } from 'react';
 
 function App() {
-  const pixiAppRef = useRef<{ 
-    skipBackward?: () => void; 
-    skipForward?: () => void; 
-    restart?: () => void; 
+  const pixiAppRef = useRef<{
+    skipBackward?: () => void;
+    skipForward?: () => void;
+    restart?: () => void;
     fit?: () => void;
     takeScreenshot?: () => void;
   }>(null);
@@ -65,8 +65,8 @@ function App() {
         <Grid size="grow">
           <Visualizer
             pixiAppRef = {pixiAppRef}
-            graph={graph} 
-            solution={solution} 
+            graph={graph}
+            solution={solution}
             playAnimation={playAnimation}
             stepSize={stepSize}
             loopAnimation={loopAnimation}

diff --git a/src/ConfigBar.tsx b/src/ConfigBar.tsx
@@ -39,7 +39,7 @@ interface ConfigBarProps {
 function ConfigBar({
   graph,
   onGraphChange,
-  onSolutionChange, 
+  onSolutionChange,
   playAnimation,
   onPlayAnimationChange,
   onSkipBackward,
@@ -208,7 +208,7 @@ function ConfigBar({
           {solutionError && <p style={{color: 'red'}}>{solutionError}</p>}
       </Stack>
       <Divider />
-      <AnimationControl 
+      <AnimationControl
         playAnimation={playAnimation}
         onPlayAnimationChange={onPlayAnimationChange}
         onSkipBackward={onSkipBackward}
@@ -240,4 +240,4 @@ function ConfigBar({
   );
 }
 
-export default ConfigBar;
+export default ConfigBar;
diff --git a/src/Graph.tsx b/src/Graph.tsx
@@ -45,4 +45,4 @@ export class Graph {
             }
         }
     }
-}
+}
diff --git a/src/PixiApp.tsx b/src/PixiApp.tsx
@@ -25,11 +25,11 @@ interface PixiAppProps {
     showGoalVectors: boolean,
 }
 
-const PixiApp = forwardRef(({ 
-    width, 
-    height, 
-    graph, 
-    solution, 
+const PixiApp = forwardRef(({
+    width,
+    height,
+    graph,
+    solution,
     playAnimation,
     stepSize,
     loopAnimation,
@@ -42,7 +42,7 @@ const PixiApp = forwardRef(({
 }: PixiAppProps, ref) => {
     // this is a mess of state and refs, but how I got everything to work...
     // maybe someday I will clean this up or maybe someone who knows React better than me can help
-    // 
+    //
     // the variables that are used inside the animation callbacks must
     // be stored in refs because the callbacks are created "once" and
     // the variables are updated outside of the callbacks
@@ -51,7 +51,7 @@ const PixiApp = forwardRef(({
     const canvasRef = useRef<HTMLCanvasElement>(null);
     const [grid, setGrid] = useState<PIXI.Container | null>(null);
     const playAnimationRef = useRef(playAnimation);
-    const timestepRef = useRef(0.0); 
+    const timestepRef = useRef(0.0);
     const stepSizeRef = useRef(1.0);
     const loopAnimationRef = useRef(loopAnimation);
     const hudRef = useRef<PIXI.Container | null>(null);
@@ -140,7 +140,7 @@ const PixiApp = forwardRef(({
             agent.x =
                 startPose.position.x +
                 (endPose.position.x - startPose.position.x) * interpolationProgress;
-            agent.y = 
+            agent.y =
                 startPose.position.y +
                 (endPose.position.y - startPose.position.y) * interpolationProgress;
             agent.x = scalePosition(agent.x);
@@ -157,7 +157,7 @@ const PixiApp = forwardRef(({
             circleContainer.rotation =
                 startRotation +
                 (endRotation - startRotation) * interpolationProgress;
-        }); 
+        });
     }, [solution]);
 
     const updatePaths = useCallback((agents: PIXI.Container[], currentTime: number) => {
@@ -166,11 +166,11 @@ const PixiApp = forwardRef(({
         const currentTimestep = Math.floor(currentTime);
         const interpolationProgress = currentTime - currentTimestep;
 
-        
+
         agents.forEach((_agent, index) => {
-            const agentLineStyle = { 
-                width: GRID_UNIT_TO_PX / 10, 
-                color: AGENT_COLORS[index % AGENT_COLORS.length], 
+            const agentLineStyle = {
+                width: GRID_UNIT_TO_PX / 10,
+                color: AGENT_COLORS[index % AGENT_COLORS.length],
                 cap: "round" as const
             };
 
@@ -231,7 +231,7 @@ const PixiApp = forwardRef(({
                     scalePosition(goal.position.y)
                 )
                 .stroke({
-                    color: AGENT_COLORS[index % AGENT_COLORS.length], 
+                    color: AGENT_COLORS[index % AGENT_COLORS.length],
                     width: Math.max(1, GRID_UNIT_TO_PX / 25),
                     cap: "round" as const
                 });
@@ -254,7 +254,7 @@ const PixiApp = forwardRef(({
         }
         if (solution === null) return;
         resetTimestep();
-    
+
         // Check if the solution is orientation-aware
         const orientationAware: boolean = solution[0][0].orientation !== Orientation.NONE;
 
@@ -316,7 +316,7 @@ const PixiApp = forwardRef(({
             idText.x = -idText.width / 2;
             idText.y = -idText.height / 2;
         });
-    
+
         const animate = () => {
             if(timestepTextRef.current) {
                 timestepTextRef.current.text = `${timestepRef.current.toFixed(1)} / ${(solution.length - 1).toFixed(1)}`;
@@ -345,10 +345,10 @@ const PixiApp = forwardRef(({
             const canvas = canvasRef.current;
             if (canvas) {
                 const pixiApp = new PIXI.Application();
-                pixiApp.init({ 
-                    width: width, 
-                    height: height, 
-                    canvas: canvas, 
+                pixiApp.init({
+                    width: width,
+                    height: height,
+                    canvas: canvas,
                     background: BACKGROUND_COLOR,
                     antialias: true,  // for smooooooth circles
                 }).then(() => {
@@ -377,7 +377,7 @@ const PixiApp = forwardRef(({
                         fontFamily: "Arial",
                         fontWeight: "bold",
                         stroke: {
-                            color: BACKGROUND_COLOR, 
+                            color: BACKGROUND_COLOR,
                             width: 4
                         },
                     });
@@ -408,7 +408,7 @@ const PixiApp = forwardRef(({
     const drawGrid = useCallback(() => {
         if (viewport === null || graph === null) return null;
         const grid = viewport.addChild(new PIXI.Container());
-    
+
         for (let x: number = 0; x < graph.width; x++) {
             for (let y: number = 0; y < graph.height; y++) {
                 const cellContainer = grid.addChild(new PIXI.Container());
@@ -435,7 +435,7 @@ const PixiApp = forwardRef(({
                 idText.y = cellY + strokeWidth;
             }
         }
-    
+
         viewport.worldHeight = grid.height * 1.2;
         viewport.worldWidth = grid.width * 1.2;
         return grid;
@@ -502,4 +502,4 @@ const PixiApp = forwardRef(({
     return <canvas ref={canvasRef} />
 });
 
-export default PixiApp;
+export default PixiApp;
diff --git a/src/Solution.tsx b/src/Solution.tsx
@@ -65,4 +65,4 @@ export function parseSolution(text: string): Solution {
         solution.push(config);
     }
     return solution;
-}
+}
diff --git a/src/Visualizer.tsx b/src/Visualizer.tsx
@@ -20,9 +20,9 @@ interface VisualizerProps {
 }
 
 function Visualizer({
-  graph, 
-  solution, 
-  playAnimation, 
+  graph,
+  solution,
+  playAnimation,
   pixiAppRef,
   stepSize,
   loopAnimation,
@@ -40,9 +40,9 @@ function Visualizer({
   useEffect(() => {
     const handleResize = () => {
       if (boxRef.current && canvasRef.current) {
-        setViewportSize({ 
-          width: boxRef.current.clientWidth, 
-          height: window.innerHeight - canvasRef.current.getBoundingClientRect().top 
+        setViewportSize({
+          width: boxRef.current.clientWidth,
+          height: window.innerHeight - canvasRef.current.getBoundingClientRect().top
         });
       }
     };
@@ -54,10 +54,10 @@ function Visualizer({
   return (
     <Box width="100%" height="100%" ref={boxRef}>
       <div ref={canvasRef}>
-      {viewportSize !== null && 
-        <PixiApp 
+      {viewportSize !== null &&
+        <PixiApp
           ref={pixiAppRef}
-          width={viewportSize.width} 
+          width={viewportSize.width}
           height={viewportSize.height}
           graph={graph}
           solution={solution}
@@ -77,4 +77,4 @@ function Visualizer({
 );
 }
 
-export default Visualizer;
+export default Visualizer;
-Original file line number
+Diff line change
@@ Expand Up / @@ -45,4 +45,4 @@ export class Graph { @@
                 }
             }
         }
-    }
+    }