[backup] on the way

crates/lanspread-tauri-deno-ts/src/App.tsx

@@ -9,6 +9,15 @@ import "./App.css";
 const FILE_STORAGE = 'launcher-settings.json';
 const GAME_DIR_KEY = 'game-directory';
 
+// enum with install status
+enum InstallStatus {
+    NotInstalled = 'NotInstalled',
+    CheckingServer = 'CheckingServer',
+    Downloading = 'Downloading',
+    Unpacking = 'Unpacking',
+    Installed = 'Installed',
+}
+
 interface Game {
     id: string;
     name: string;
@@ -16,6 +25,7 @@ interface Game {
     size: number;
     thumbnail: Uint8Array;
     installed: boolean;
+    install_status: InstallStatus;
 }
 
 const App = () => {
@@ -64,7 +74,7 @@ const App = () => {
 
         const setupEventListener = async () => {
             try {
-                // Listen for events that update the game list
+                // Listen for games-list-updated events
                 const unlisten_games = await listen('games-list-updated', (event) => {
                     console.log('🗲 Received games-list-updated event');
                     const games = event.payload as Game[];
@@ -73,6 +83,24 @@ const App = () => {
                     getInitialGameDir();
                 });
 
+                // Listen for game-download-begin events
+                const unlisten_game_download_begin = await listen('game-download-begin', (event) => {
+                    const game_id = event.payload as string;
+                    console.log(`🗲 game-download-begin ${game_id} event received`);
+                    setGameItems(prev => prev.map(item => item.id === game_id
+                        ? {...item, install_status: InstallStatus.Downloading}
+                        : item));
+                });
+
+                // Listen for game-download-finished events
+                const unlisten_game_download_finished = await listen('game-download-finished', (event) => {
+                    const game_id = event.payload as string;
+                    console.log(`🗲 game-download-finished ${game_id} event received`);
+                    setGameItems(prev => prev.map(item => item.id === game_id
+                        ? {...item, install_status: InstallStatus.Unpacking}
+                        : item));
+                });
+
                 // Initial request for games
                 console.log('📤 Requesting initial games list');
                 await invoke('request_games');
@@ -81,6 +109,8 @@ const App = () => {
                 return () => {
                     console.log('🧹 Cleaning up - removing listener');
                     unlisten_games();
+                    unlisten_game_download_begin();
+                    unlisten_game_download_finished();
                 };
             } catch (error) {
                 console.error('❌ Error in setup:', error);
@@ -98,13 +128,32 @@ const App = () => {
     const runGame = async (id: string) => {
         console.log(`🎯 Running game with id=${id}`);
         try {
-            const result = await invoke('install_game', {id});
+            const result = await invoke('run_game', {id});
             console.log(`✅ Game started, result=${result}`);
         } catch (error) {
             console.error('❌ Error running game:', error);
         }
     };
 
+    const installGame = async (id: string) => {
+        console.log(`🎯 Installing game with id=${id}`);
+        try {
+            const success = await invoke('install_game', {id});
+            if (success) {
+                console.log(`✅ Game install for id=${id} started...`);
+                // update install status in gameItems for this game
+                setGameItems(prev => prev.map(item => item.id === id
+                    ? {...item, install_status: InstallStatus.CheckingServer}
+                    : item));
+            } else {
+                // game is already being installed
+                console.warn(`🚧 Game with id=${id} is already being installed`);
+            }
+        } catch (error) {
+            console.error('❌ Error installing game:', error);
+        }
+    };
+
     const dialogGameDir = async () => {
         const file = await open({
             multiple: false,
@@ -146,14 +195,23 @@ const App = () => {
                     const binaryString = uint8Array.reduce((acc, byte) => acc + String.fromCharCode(byte), '');
                     const thumbnailUrl = `data:image/jpeg;base64,${btoa(binaryString)}`;
                     return (
-                        <div key={item.id} className="item" onClick={() => runGame(item.id)}>
+                        <div key={item.id} className="item">
                             <img src={thumbnailUrl} alt={`${item.name} thumbnail`} />
                             <div className="item-name">{item.name}</div>
                             <div className="description">
                                 <span className="desc-text">{item.description.slice(0, 10)}</span>
                                 <span className="size-text">{item.size.toString()}</span>
                             </div>
-                            <div className="play-button">{item.installed ? 'Play' : 'Install'}</div>
+                            <div className="play-button"
+                                 onClick={() => item.installed
+                                                ? runGame(item.id)
+                                                : installGame(item.id)}>
+                                {item.installed ? 'Play'
+                                    : item.install_status === InstallStatus.CheckingServer ? 'Checking server...'
+                                    : item.install_status === InstallStatus.Downloading ? 'Downloading...'
+                                    : item.install_status === InstallStatus.Unpacking ? 'Unpacking...'
+                                    : 'Install'}
+                            </div>
                         </div>
                     );
                 })}