Merge pull request #39 from ochafik/sounds

Global F5/F6 bindings + familiar sound on F6

public/index.html

@@ -101,6 +101,10 @@
     </style>
     <style>.github-fork-ribbon:before { background-color: #333; }</style>
   
+    <audio id="complete-sound">
+      <source src="complete.wav" type="audio/wav" />
+      Your browser does not support the audio element.
+    </audio>
   </head>
   <body>
     <a target="_blank" class="github-fork-ribbon"

src/components/App.tsx

@@ -22,6 +22,22 @@ export function App({initialState, statePersister, fs}: {initialState: State, st
   const model = new Model(fs, state, setState, statePersister);
   useEffect(() => model.init());
 
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'F5') {
+        event.preventDefault();
+        model.render({isPreview: true, now: true})
+      } else if (event.key === 'F6') {
+        event.preventDefault();
+        model.render({isPreview: false, now: true})
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
   const zIndexOfPanelsDependingOnFocus = {
     editor: {
       editor: 3,

src/components/EditorPanel.tsx

@@ -50,16 +50,11 @@ export default function EditorPanel({className, style}: {className?: string, sty
     editor.addAction({
       id: "openscad-render",
       label: "Render OpenSCAD",
-      keybindings: [
-        monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter,
-        monaco.KeyCode.F6,
-      ],
       run: () => model.render({isPreview: false, now: true})
     });
     editor.addAction({
       id: "openscad-preview",
       label: "Preview OpenSCAD",
-      keybindings: [monaco.KeyCode.F5],
       run: () => model.render({isPreview: true, now: true})
     });
     setEditor(editor)

src/state/model.ts

@@ -178,6 +178,11 @@ export class Model {
             formattedElapsedMillis: formatMillis(output.elapsedMillis),
             formattedStlFileSize: formatBytes(output.stlFile.size),
           };
+
+          if (!isPreview) {
+            const audio = document.getElementById('complete-sound') as HTMLAudioElement;
+            audio?.play();
+          }
         }
       });
     }})