Add download project button

components/src/stores/chip.store.ts

@@ -138,6 +138,11 @@ export interface ControlsState {
   error?: CompilationError;
 }
 
+export interface HDLFile {
+  name: string;
+  content: string;
+}
+
 function reduceChip(chip: SimChip, pending = false, invalid = false): ChipSim {
   return {
     clocked: chip.clocked,
@@ -491,6 +496,15 @@ export function makeChipStore(
       )[chipName][`${chipName}.hdl`];
       dispatch.current({ action: "setFiles", payload: { hdl: template } });
     },
+
+    async getProjectFiles() {
+      return await Promise.all(
+        CHIP_PROJECTS[project].map((chip) => ({
+          name: `${chip}.hdl`,
+          content: fs.readFile(`/projects/${project}/${chip}/${chip}.hdl`),
+        }))
+      );
+    },
   };
 
   const initialState: ChipPageState = (() => {

web/package.json

@@ -97,6 +97,7 @@
     ]
   },
   "dependencies": {
+    "jszip": "^3.10.1",
     "react-ga4": "^1.4.1"
   }
 }

web/src/pages/chip.tsx

@@ -29,6 +29,7 @@ import {
 import { CHIP_PROJECTS } from "@nand2tetris/projects/index.js";
 import { HDL } from "@nand2tetris/simulator/languages/hdl.js";
 import { Timer } from "@nand2tetris/simulator/timer.js";
+import JSZip from "jszip";
 import { TestPanel } from "src/shell/test_panel";
 import { AppContext } from "../App.context";
 import { Editor } from "../shell/editor";
@@ -129,6 +130,31 @@ export const Chip = () => {
     [actions]
   );
 
+  const downloadRef = useRef<HTMLAnchorElement>(null);
+
+  const download = (blob: Blob) => {
+    const url = URL.createObjectURL(blob);
+
+    if (!downloadRef.current) {
+      return;
+    }
+    downloadRef.current.href = url;
+    downloadRef.current.download = `Project${state.controls.project}`;
+    downloadRef.current.click();
+
+    URL.revokeObjectURL(url);
+  };
+
+  const downloadProject = async () => {
+    const files = await actions.getProjectFiles();
+    const zip = new JSZip();
+
+    for (const file of files) {
+      zip.file(file.name, file.content);
+    }
+    await zip.generateAsync({ type: "blob" }).then(download);
+  };
+
   const [useBuiltin, setUseBuiltin] = useState(false);
   const toggleUseBuiltin = () => {
     if (useBuiltin) {
@@ -174,10 +200,16 @@ export const Chip = () => {
             </option>
           ))}
         </select>
+        <a ref={downloadRef} style={{ display: "none" }} />
         {!useBuiltin && !state.controls.builtinOnly && (
-          <button className="flex-0" onClick={actions.resetFile}>
-            <Trans>Reset</Trans>
-          </button>
+          <>
+            <button className="flex-0" onClick={actions.resetFile}>
+              <Trans>Reset</Trans>
+            </button>
+            <button className="flex-0" onClick={downloadProject}>
+              <Trans>Download</Trans>
+            </button>
+          </>
         )}
       </fieldset>
     </>