Saving, technically done

src/components/Emulator.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import styles from './Emulator.module.scss';
 import { GAME_SYSTEM_CORES, GameSystem, GameSystemCore } from '@/lib/game';
 import { useLanguage } from '@/providers/LanguageProvider';
+import { useAPI } from '@/providers/APIProvider';
 
 type SendEmulatorMessageInit = {
   message:'init';
@@ -18,8 +19,7 @@ type SendEmulatorMessageVolume = {
 
 type SendEmulatorMessage = (
   SendEmulatorMessageInit |
-  SendEmulatorMessageVolume |
-  { message: 'save' }
+  SendEmulatorMessageVolume
 );
 
 type ReceiveEmulatorMessage = (
@@ -41,11 +41,32 @@ export const Emulator:React.FC<EmulatorProps> = props => {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const [ hasInit, setHasInit ] = useState(false);
   const { t } = useLanguage();
+  const [ saving, setSaving ] = useState<boolean>(false);
+  const [ savingError, setSavingError ] = useState<string|null>(null);
+  const { saveUpdate } = useAPI();
 
   const send = (msg:SendEmulatorMessage) => {
     iframeRef.current?.contentWindow?.postMessage(msg, '*');
   };
 
+  const save = async (data:string) => {
+    if(saving) return;
+    if(!data) return;
+    setSaving(true);
+
+    try {
+      const res = await saveUpdate({
+        gameId: props.gameId,
+        data
+      });
+      console.log('res', res);
+    } catch(e) {
+      console.error(e);
+    } finally {
+      setSaving(false);
+    }
+  }
+
   useEffect(() => {
     if(hasInit) return;
     setHasInit(true);
@@ -70,11 +91,7 @@ export const Emulator:React.FC<EmulatorProps> = props => {
           break;
 
         case 'save':
-          // Download save data
-          const a = document.createElement('a');
-          a.href = `data:application/zip;base64,${msg.data}`;
-          a.download = `${props.gameId}.zip`;
-          a.click();
+          save(msg.data).catch(console.error);
           break;
 
         case 'start':
@@ -82,6 +99,7 @@ export const Emulator:React.FC<EmulatorProps> = props => {
         case 'load_state':
         case 'save_state':
           break;
+
         default:
           console.error('Invalid message received:', msg);
           break