Added really basic download chart feature, added some template code f…

…or sidebar

mtg-topster-frontend/package.json

@@ -7,6 +7,8 @@
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
     "axios": "^1.6.0",
+    "dom-to-image": "^2.6.0",
+    "html2canvas": "^1.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

mtg-topster-frontend/src/CardFetcher.js

@@ -1,12 +1,13 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import axios from 'axios';
+import domtoimage from 'dom-to-image';
 import Sidebar from './Sidebar';
 import './CardFetcher.css';
 
 function CardFetcher() {
     const [showNames, setShowNames] = useState(true); // default to show names
     const [layout] = useState([]);
-    const [gridSize, setGridSize] = useState(5);  // For a 3x3 grid
+    const [gridSize, setGridSize] = useState(5);
     const [searchResults, setSearchResults] = useState([]);
     const [gridItems, setGridItems] = useState(Array(gridSize * gridSize).fill(null));
     const [charts, setCharts] = useState(() => {
@@ -185,7 +186,22 @@ useEffect(() => {
         loadFromLocalStorage();
       }, [loadFromLocalStorage]); // Now it correctly lists the function as a dependency  
 
-
+      const handleDownload = () => {
+        const element = showNames ? document.querySelector('.main-container') : document.querySelector('.grid-container');
+
+        domtoimage.toPng(element)
+            .then(function (dataUrl) {
+                const link = document.createElement('a');
+                link.href = dataUrl;
+                link.download = 'chart.png';
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+            })
+            .catch(function (error) {
+                console.error('Failed to capture the chart:', error);
+            });
+    };
 
 
 
@@ -196,6 +212,8 @@ useEffect(() => {
                 {charts.map(chart => <option key={chart.id} value={chart.id}>{chart.title}</option>)}
             </select>
             <button onClick={createNewChart}>+</button>
+            <button onClick={handleDownload}>Download Chart</button>
+
 
             <div className="main-container">
                 <Sidebar 

mtg-topster-frontend/src/Sidebar.js

@@ -66,21 +66,16 @@ function Sidebar({ onSearch, searchResults, showNames, setShowNames, gridSize, h
                     </label>
                 </div>
                 {/* More options here */}
+                <button>Shuffle</button>
             </details>
 
             {/* More dropdowns */}
             {/* Sample dropdown for "Import" */}
             <details className="dropdown-menu">
                 <summary>Import</summary>
                 {/* Import logic here */}
+                <h3>Import from decklist coming soon</h3>
             </details>
-
-            {/* Sample dropdown for "Changelog" */}
-            <details className="dropdown-menu">
-                <summary>Changelog</summary>
-                {/* Changelog details here */}
-            </details>
-
             {/* Add more dropdowns or other sidebar content as needed */}
         </div>
     );

mtg-topster-frontend/yarn.lock

@@ -3004,6 +3004,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz"
   integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
 
+base64-arraybuffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz"
+  integrity sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==
+
 batch@0.6.1:
   version "0.6.1"
   resolved "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz"
@@ -3542,6 +3547,13 @@ css-has-pseudo@^3.0.4:
   dependencies:
     postcss-selector-parser "^6.0.9"
 
+css-line-break@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz"
+  integrity sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==
+  dependencies:
+    utrie "^1.0.2"
+
 css-loader@^6.5.1:
   version "6.8.1"
   resolved "https://registry.npmjs.org/css-loader/-/css-loader-6.8.1.tgz"
@@ -3966,6 +3978,11 @@ dom-serializer@0:
     domelementtype "^2.0.1"
     entities "^2.0.0"
 
+dom-to-image@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.npmjs.org/dom-to-image/-/dom-to-image-2.6.0.tgz"
+  integrity sha512-Dt0QdaHmLpjURjU7Tnu3AgYSF2LuOmksSGsUcE6ItvJoCWTBEmiMXcqBdNSAm9+QbbwD7JMoVsuuKX6ZVQv1qA==
+
 domelementtype@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.1.tgz"
@@ -5169,6 +5186,14 @@ html-webpack-plugin@^5.5.0:
     pretty-error "^4.0.0"
     tapable "^2.0.0"
 
+html2canvas@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz"
+  integrity sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==
+  dependencies:
+    css-line-break "^2.1.0"
+    text-segmentation "^1.0.3"
+
 htmlparser2@^6.1.0:
   version "6.1.0"
   resolved "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz"
@@ -9094,6 +9119,13 @@ test-exclude@^6.0.0:
     glob "^7.1.4"
     minimatch "^3.0.4"
 
+text-segmentation@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz"
+  integrity sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==
+  dependencies:
+    utrie "^1.0.2"
+
 text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz"
@@ -9439,6 +9471,13 @@ utils-merge@1.0.1:
   resolved "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz"
   integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
 
+utrie@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz"
+  integrity sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==
+  dependencies:
+    base64-arraybuffer "^1.0.2"
+
 uuid@^8.3.2:
   version "8.3.2"
   resolved "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz"