[ui] change framework from Tauri Leptos to Tauri Vanilla (Typescript) and React

2024-11-13 22:15:04 +01:00
parent ff0cee58d5
commit 5d45c4ce4b
53 changed files with 5812 additions and 932 deletions
@@ -0,0 +1,95 @@
+// types.ts
+interface Game {
+  id: string;
+  name: string;
+  description: string;
+  size: number;
+}
+
+interface RunGameArgs {
+  id: string;
+}
+
+// App.tsx
+import { useEffect, useState } from 'react';
+import { invoke } from '@tauri-apps/api/core';
+import { listen } from '@tauri-apps/api/event';
+import "./App.css";
+
+const App = () => {
+  const [gameItems, setGameItems] = useState<Game[]>([]);
+
+  useEffect(() => {
+    // Listen for games list updates
+    const setupEventListener = async () => {
+      try {
+        const unlisten = await listen('games-list-updated', (event) => {
+          console.log('Received games-list-updated event');
+          const games = event.payload as Game[];
+          games.forEach(game => {
+            console.log(`game: ${JSON.stringify(game)}`);
+          });
+          setGameItems(games);
+        });
+
+        // Cleanup listener on component unmount
+        return () => {
+          unlisten();
+        };
+      } catch (error) {
+        console.error('Error setting up event listener:', error);
+      }
+    };
+
+    setupEventListener();
+
+    // Uncomment if you want to request games on mount
+    // const requestGames = async () => {
+    //   try {
+    //     await invoke('request_games');
+    //   } catch (error) {
+    //     console.error('Error requesting games:', error);
+    //   }
+    // };
+    // requestGames();
+  }, []);
+
+  const runGame = async (id: string) => {
+    console.log(`id=${id}`);
+    try {
+      const result = await invoke('run_game_backend', { id });
+      console.log(`id=${result}`);
+    } catch (error) {
+      console.error('Error running game:', error);
+    }
+  };
+
+  return (
+    <main className="container">
+      <h1 className="align-center">SoftLAN Launcher</h1>
+      <div className="main-header">HEADER</div>
+      <div className="grid-container">
+        {gameItems.map((item) => (
+          <div
+            key={item.id}
+            className="item"
+            onClick={() => runGame(item.id)}
+          >
+            <img
+              src="https://via.placeholder.com/200x150"
+              alt="Item Image"
+            />
+            <div className="item-name">{item.name}</div>
+            <div className="description">
+              <span className="desc-text">{item.description}</span>
+              <span className="size-text">{item.size.toString()}</span>
+            </div>
+            <div className="play-button">Play</div>
+          </div>
+        ))}
+      </div>
+    </main>
+  );
+};
+
+export default App;