adds plumbing for asset management

groundh0g · Aug 5, 2024 · 6b5bae5 · 6b5bae5
1 parent a5faa99
commit 6b5bae5
Show file tree

Hide file tree

Showing 8 changed files with 119 additions and 66 deletions.
diff --git a/docs/assets/index-C-rVAHnb.js b/docs/assets/index-C-rVAHnb.js
diff --git a/docs/assets/index-Cm7ruyeO.js b/docs/assets/index-Cm7ruyeO.js
diff --git a/docs/assets/index-Bo-yQCNE.css → docs/assets/index-Ov_sPrDW.css b/docs/assets/index-Bo-yQCNE.css → docs/assets/index-Ov_sPrDW.css
diff --git a/docs/index.html b/docs/index.html
@@ -11,8 +11,8 @@
     <title>Sheets - GameDevUtils.com</title>
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-    <script type="module" crossorigin src="/assets/index-Cm7ruyeO.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-Bo-yQCNE.css">
+    <script type="module" crossorigin src="/assets/index-C-rVAHnb.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-Ov_sPrDW.css">
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/Components/Panels/Assets/AssetItem.css b/src/Components/Panels/Assets/AssetItem.css
@@ -9,6 +9,11 @@
     font-weight: bolder;
 }
 
+.panel-asset-item.selected {
+    padding: 1px;
+    border: 1px solid #345;
+}
+
 .panel-asset-item img {
     float: left;
     height: 43px;

diff --git a/src/Components/Panels/Assets/AssetItem.tsx b/src/Components/Panels/Assets/AssetItem.tsx
diff --git a/src/Components/Panels/Assets/AssetsPanel.tsx b/src/Components/Panels/Assets/AssetsPanel.tsx
@@ -4,6 +4,9 @@ import './AssetsPanel.css';
 import {PanelVisibility} from "../_Types.ts";
 import AssetsPanelMiniToolbar from "./AssetsPanelMiniToolbar.tsx";
 import AssetsItem from "./AssetItem.tsx";
+import {useSelector} from "react-redux";
+import {ImageMap} from "../../../features/projectSlice.ts";
+import {useState} from "react";
 
 export type AssetsPanelProps = {
     panelVisibility: PanelVisibility,
@@ -36,18 +39,38 @@ export default function AssetsPanel(props: AssetsPanelProps) {
         classPanel = "panel-hidden";
     }
 
+    const assets = useSelector(state => (state as any).project.assets as ImageMap);
+
+    const [selectedAssets, setSelectedAssets] = useState([] as string[]);
+    const selectToggle = (name: string) => {
+        if(selectedAssets.includes(name)) {
+            const newArray = selectedAssets.filter(asset => !asset.includes(name));
+            setSelectedAssets(newArray);
+        } else {
+            const newArray = [] as string[];
+            selectedAssets.map(value => newArray.push(value));
+            setSelectedAssets(newArray);
+        }
+    };
+
+    const assetsItems = [];
+    for(const key in assets) {
+        assetsItems.push(
+            <AssetsItem
+                name={`${key}`}
+                selected={selectedAssets.includes(key)}
+                selectToggle={selectToggle}
+                dataUrl={assets[key]}
+            />
+        );
+    }
+
     return (
         <div className={`panel panel-assets ${classPanel}`}>
             <div className="panel-header"><AssetsPanelMiniToolbar/></div>
             <div className="panel-content">
                 <div className="panel-label instruction">Project assets are shown here.</div>
-                <AssetsItem name="hello.png"/>
-                <AssetsItem name="jump-1.png"/>
-                <AssetsItem name="jump-2.png"/>
-                <AssetsItem name="run-1.png"/>
-                <AssetsItem name="run-2.png"/>
-                <AssetsItem name="this-is-a-longer-name.png"/>
-                <AssetsItem name="this-is-an-even-longer-name.png"/>
+                { assetsItems }
             </div>
         </div>
     );

diff --git a/src/features/projectSlice.ts b/src/features/projectSlice.ts