chore: started creating a workflow

Author: FireAndIceFrog

string-art-demo/src/App.tsx

@@ -3,13 +3,10 @@ import './App.css';
 import {
   type StringArtState
 } from './features/shared/redux/stringArtSlice';
-import UploadScreen from './features/1Upload/UploadScreen';
 import RenderImageScreen from './features/3RenderImage/RenderImageScreen';
-import CanvasScreen from './features/3RenderImage/CanvasScreen';
 
 function App() {
   const {
-    imageData,
     isLoading,
     error,
   } = useSelector((state: { stringArt: StringArtState }) => state.stringArt);
@@ -41,17 +38,7 @@ function App() {
         <p>Upload an image and watch it transform into beautiful string art in real-time!</p>
       </header>
 
-      <main className="app-main">
-        <div className="controls-section">
-          <UploadScreen/>
-
-          {imageData && (
-            <RenderImageScreen/>
-          )}
-        </div>
-
-        <CanvasScreen/>
-      </main>
+      <RenderImageScreen/>
     </div>
   );
 }

string-art-demo/src/features/3RenderImage/CanvasScreen.tsx

@@ -1,55 +1,72 @@
 import { useDispatch, useSelector } from "react-redux";
 import type { AppDispatch } from "../shared/redux/store";
-import { generateStringArtThunk, type StringArtState } from "../shared/redux/stringArtSlice";
+import {
+  generateStringArtThunk,
+  type StringArtState,
+} from "../shared/redux/stringArtSlice";
 import StringArtConfigSection from "./components/StringArtConfig/StringArtConfigSection";
+import UploadScreen from "../1Upload/UploadScreen";
+import { StringArtCanvas } from "./components/StringArtCanvas/StringArtCanvas";
 
 export default function RenderImageScreen() {
   const dispatch = useDispatch<AppDispatch>();
-  const {
-    imageData,
-    isGenerating,
-    progress,
-    settings,
-  } = useSelector((state: { stringArt: StringArtState }) => state.stringArt);
+  const { imageData, isGenerating, progress, settings } = useSelector(
+    (state: { stringArt: StringArtState }) => state.stringArt
+  );
 
   const handleStartGeneration = () => {
     if (!imageData) return;
-    dispatch(
-      generateStringArtThunk({ imageData, settings })
-    );
+    dispatch(generateStringArtThunk({ imageData, settings }));
   };
 
   return (
-    <div className="generation-controls">
-      <StringArtConfigSection key={"stringArt"} />
+    <main className="app-main">
+      <div className="controls-section">
+        <UploadScreen />
 
-      <button
-        onClick={handleStartGeneration}
-        disabled={isGenerating}
-        className="generate-button"
-      >
-        {isGenerating ? "Generating..." : "Generate String Art"}
-      </button>
+        {imageData && (
+          <div className="generation-controls">
+            <StringArtConfigSection key={"stringArt"} />
 
-      {progress && (
-        <div className="progress-section">
-          <div className="progress-header">
-            <span>Progress: {progress.completion_percent.toFixed(1)}%</span>
-            <span>
-              Lines: {progress.lines_completed}/{progress.total_lines}
-            </span>
-          </div>
-          <div className="progress-bar">
-            <div
-              className="progress-fill"
-              style={{ width: `${progress.completion_percent}%` }}
-            ></div>
+            <button
+              onClick={handleStartGeneration}
+              disabled={isGenerating}
+              className="generate-button"
+            >
+              {isGenerating ? "Generating..." : "Generate String Art"}
+            </button>
+
+            {progress && (
+              <div className="progress-section">
+                <div className="progress-header">
+                  <span>
+                    Progress: {progress.completion_percent.toFixed(1)}%
+                  </span>
+                  <span>
+                    Lines: {progress.lines_completed}/{progress.total_lines}
+                  </span>
+                </div>
+                <div className="progress-bar">
+                  <div
+                    className="progress-fill"
+                    style={{ width: `${progress.completion_percent}%` }}
+                  ></div>
+                </div>
+                <div className="progress-details">
+                  <span>Score: {progress.score.toFixed(1)}</span>
+                </div>
+              </div>
+            )}
           </div>
-          <div className="progress-details">
-            <span>Score: {progress.score.toFixed(1)}</span>
+        )}
+      </div>
+
+      <div className="canvas-section">
+            <StringArtCanvas
+              width={500}
+              height={500}
+            />
           </div>
-        </div>
-      )}
-    </div>
+    </main>
   );
 }

string-art-demo/src/features/3RenderImage/RenderImageScreen.tsx

@@ -1,23 +1,20 @@
 import React, { useRef, useEffect, useState } from 'react';
 import style from './style.module.css'
+import type { StringArtState } from '../../../shared/redux/stringArtSlice';
+import { useSelector } from 'react-redux';
 
 interface StringArtCanvasProps {
   width: number;
   height: number;
-  nailCoords: Array<[number, number]>;
-  currentPath: number[];
-  isAnimating: boolean;
-  imageUrl?: string;
 }
 
 export const StringArtCanvas: React.FC<StringArtCanvasProps> = ({
   width,
   height,
-  nailCoords,
-  currentPath,
-  isAnimating,
-  imageUrl
 }) => {
+  const { imageUrl, isGenerating: isAnimating, currentPath, nailCoords } = useSelector(
+    (state: { stringArt: StringArtState }) => state.stringArt
+  );
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const [showOriginal, setShowOriginal] = useState(false);