Merge pull request #8 from archishadatta/phoebesindexes

drawing changes
archishadatta · Dec 2, 2023 · 1aefe6e · 1aefe6e
2 parents 9cc4b82 + ec2aa77
commit 1aefe6e
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 32 deletions.
diff --git a/src/App.css b/src/App.css
@@ -118,8 +118,8 @@
 }
 
 .drawing-whiteboard {
-  background-color: #F2F3FF;
-  border-radius: 1vw 0 0 1vw;
+  /* background-color: #F2F3FF;
+  border-radius: 1vw 0 0 1vw; */
   align-self: center;
   display: block;
   width: 100%;

diff --git a/src/ConstellationPage.js b/src/ConstellationPage.js
@@ -103,6 +103,29 @@ function ConstellationPage(props) {
   // Canvas setup
   const canvasRef = useRef(null);
   useEffect(() => {  
+    // update indices to be 0-200
+
+    // change current indices
+    const newItem = {
+      indices: props.indicesGlobal
+    };
+
+    fetch('http://localhost:7000/change-indices', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ newItem }),
+    })
+      .then((response) => response.text())
+      .then((data) => {
+        console.log(data); // Output: Item added successfully
+      })
+      .catch((error) => {
+        console.error('Error adding item:', error);
+      });
+
+
   const canvas = canvasRef.current;
   const ctx = canvas.getContext('2d'); 
 
@@ -489,9 +512,9 @@ function ConstellationPage(props) {
             <Button className="modal-btn secondary" onClick={handleClose}>
             Close
           </Button>
-          <Link to="/gallery" className="modal-btn primary" onClick={handleSubmit}>
+          <Button className="modal-btn primary" onClick={handleSubmit}>
             Submit
-          </Link>
+          </Button>
         </div>
 
         </div>

diff --git a/src/DrawingPage.js b/src/DrawingPage.js
@@ -97,15 +97,15 @@ function DrawingPage(props) {
     ctx.clearRect(0,0, canvas.width, canvas.height);
 
     //drawing the path
-    plotPath(ctx, drawingPts, "rgba(2, 5, 37, 0.5)");
+    plotPath(ctx, drawingPts, "#E1E4FF");
 
     //drawing points
     for(let i = 0; i < points.length; i++){
       if(highlighted.indexOf(points[i]) !== -1){
-        plotPoint(ctx, points[i].x, points[i].y, "rgb(121,181,241)", 3.5);
+        plotPoint(ctx, points[i].x, points[i].y, "rgb(121,181,241)", 10);
       }
       else {
-        plotPoint(ctx, points[i].x, points[i].y, "#020525", points[i].size);
+        plotPoint(ctx, points[i].x, points[i].y, "#E1E4FF", points[i].size * 1.5);
       }
     }
   }
@@ -229,28 +229,6 @@ function DrawingPage(props) {
   };
 
   useEffect(() => {
-    const container = document.getElementsByClassName('star-bg')[0];
-
-    // Generate stars and append them to the container
-    for (let i = 0; i < 200; i++) {
-        const star = document.createElement('div');
-        star.classList.add('star');
-
-        // Random size between 0.5px and 2px
-        const size = 1 + Math.random() * 2;
-        star.style.width = `${size}px`;
-        star.style.height = `${size}px`;
-
-        // Random opacity between 0.4 and 1.0
-        const opacity = 0.4 + Math.random() * 0.6;
-        star.style.opacity = opacity;
-        star.style.animationDelay = `${Math.random() * 10}s`;
-
-        // Random positions within the container
-        star.style.left = `${Math.random() * 96 + 2}%`;
-        star.style.top = `${Math.random() * 96 + 2}%`;
-        container.appendChild(star);
-    }
 
     //canvas
     const canv = canvRef.current;

diff --git a/src/GalleryPage.js b/src/GalleryPage.js
@@ -7,6 +7,11 @@ import * as d3 from 'd3';
 
 
 function GalleryItem(props) {
+
+  const handleSubmit = () => {
+    props.setIndicesGlobal(props.indices)
+  };
+
   const date = new Date(props.date)
   const formattedDate = date.toLocaleDateString('en-US', {
     year: 'numeric',
@@ -76,7 +81,7 @@ console.log('Normalized', normalizedCoords)
     <div className='gallery-item gallery-txt'>      
       <div className='gallery-item-title'>{props.title}</div>
       <div className='gallery-item-content'>
-      <Link to='/constellation' className='canvas-container'>
+      <Link to='/constellation' className='canvas-container' onClick={handleSubmit}>
         <svg height={svgHeight + 2*svgShift} width={svgWidth + 2*svgShift} className='canvas'>
           <path
             d={`M${points.map(point => `${point.x * svgWidth / 100 + svgShift},${point.y * svgHeight / 100 + svgShift}`).join(' L')} Z`}
@@ -106,8 +111,9 @@ console.log('Normalized', normalizedCoords)
   );
 }
 
-function GalleryPage() {
+function GalleryPage(props) {
   const [stars, setJsonData] = useState([]);
+
   useEffect(() => {
     const container = document.getElementsByClassName('star-bg')[0];
 
@@ -155,7 +161,7 @@ function GalleryPage() {
       <div id='title2'>Constellation Gallery</div>
       <div className='gallery'>
         {stars.map((item) => {
-          return <GalleryItem key={item.title} title={item.title} author={item.author} date={item.date} indices={item.indices}></GalleryItem>
+          return <GalleryItem key={item.title} title={item.title} author={item.author} date={item.date} indices={item.indices} setIndicesGlobal={props.setIndicesGlobal}></GalleryItem>
         })}
         {/* {stars.map((item) => (
           <li key={item.id}>{item.title}, {item.date}, {item.author}, {item.indices[0].x}</li>