Add basic games layout

src/main/index.ts

@@ -3,6 +3,8 @@ import { join } from 'path'
 import { electronApp, optimizer, is } from '@electron-toolkit/utils'
 import icon from '../../resources/icon.png?asset'
 
+import { spawn } from 'child_process';
+
 import {
   Game,
   addGame,
@@ -19,8 +21,8 @@ let tray: Tray;
 function createWindow(): void {
   // Create the browser window.
   mainWindow = new BrowserWindow({
-    width: 900,
-    height: 670,
+    width: 1500,
+    height: 870,
     show: false,
     autoHideMenuBar: true,
     ...(process.platform === 'linux' ? { icon } : {}),
@@ -141,6 +143,37 @@ app.whenReady().then(() => {
   ipcMain.handle('game:getAll', async () => {
     return getAllGames();
   });
+
+  ipcMain.on('launch-app', (event, { id, appPath }) => {
+    try {
+      const appProcess = spawn(appPath, [], { detached: true, stdio: 'ignore' });
+  
+      appProcess.on('data', (data) => {
+        console.log(`stdout: ${data}`);
+      });
+
+      // Surveiller la fermeture de l'application
+      appProcess.on('close', (code) => {
+        console.log(`child process close all stdio with code ${code}`);
+        event.reply('app-status', { id, status: 'closed' });
+      });
+
+      /*appProcess.on('exit', (code) => {
+        console.log(`child process exited with code ${code}`);
+        // event.reply('app-status', { id, status: 'Application fermée.' });
+      });*/
+  
+      appProcess.on('error', (err) => {
+        console.error(`Erreur avec l'application ${id} : ${err.message}`);
+        event.reply('app-status', { id, status: `${err.message}` });
+      });
+  
+      event.reply('app-status', { id, status: 'started' });
+    } catch (err: any) {
+      console.error(`Erreur lors du lancement de l'application ${id} : ${err.message}`);
+      event.reply('app-status', { id, status: `${err.message}` });
+    }
+  });
 })
 
 // Quit when all windows are closed, except on macOS. There, it's common

src/preload/index.ts

@@ -1,4 +1,4 @@
-import { contextBridge } from 'electron'
+import { contextBridge, ipcRenderer } from 'electron'
 import { electronAPI } from '@electron-toolkit/preload'
 
 // Custom APIs for renderer
@@ -9,7 +9,11 @@ const api = {}
 // just add to the DOM global.
 if (process.contextIsolated) {
   try {
-    contextBridge.exposeInMainWorld('electron', electronAPI)
+    contextBridge.exposeInMainWorld('electron', {
+      ...electronAPI,
+      launchApp: (id, appPath) => ipcRenderer.send('launch-app', { id, appPath}),
+      onAppStatus: (callback) => ipcRenderer.on('app-status', (event, status) => callback(status))
+    })
     contextBridge.exposeInMainWorld('api', api)
   } catch (error) {
     console.error(error)

src/renderer/src/App.tsx

@@ -1,31 +1,34 @@
+import './styles/index.css'
+
 import Versions from './components/Versions'
-import electronLogo from './assets/electron.svg'
+import { useEffect, useState } from 'react';
+import GameArea, { Game } from './components/GameArea';
 
 function App(): JSX.Element {
-  const ipcHandle = (): void => window.electron.ipcRenderer.send('ping')
+  const [games, setGames] = useState<Game[]>([]);
+
+  async function getAllGames() {
+    const data = await window.electron.ipcRenderer.invoke('game:getAll');
+  
+    console.log(data)
+    if (data) {
+      setGames(data);
+    }
+  }
+
+  useEffect(() => {
+    getAllGames();
+  }, []);
 
   return (
     <>
-      <img alt="logo" className="logo" src={electronLogo} />
-      <div className="creator">Powered by electron-vite</div>
-      <div className="text">
-        Build an Electron app with <span className="react">React</span>
-        &nbsp;and <span className="ts">TypeScript</span>
-      </div>
-      <p className="tip">
-        Please try pressing <code>F12</code> to open the devTool
-      </p>
-      <div className="actions">
-        <div className="action">
-          <a href="https://electron-vite.org/" target="_blank" rel="noreferrer">
-            Documentation
-          </a>
-        </div>
-        <div className="action">
-          <a target="_blank" rel="noreferrer" onClick={ipcHandle}>
-            Send IPC
-          </a>
+      <div className='appWrapper'>
+        <div className="sidebar">
+          <div style={{ height: '600px' }}></div>
         </div>
+        <GameArea
+          games={games}
+        />
       </div>
       <Versions></Versions>
     </>

src/renderer/src/assets/main.css

@@ -1,9 +1,9 @@
 @import './base.css';
 
 body {
-  display: flex;
+  /*display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: center;*/
   overflow: hidden;
   background-image: url('./wavy-lines.svg');
   background-size: cover;
@@ -27,11 +27,12 @@ code {
 }
 
 #root {
-  display: flex;
+  /*display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  margin-bottom: 80px;
+  margin-bottom: 80px;*/
+  min-height: 100vh;
 }
 
 .logo {
@@ -126,7 +127,7 @@ code {
 
 .versions {
   position: absolute;
-  bottom: 30px;
+  bottom: 15px;
   margin: 0 auto;
   padding: 15px 0;
   font-family: 'Menlo', 'Lucida Console', monospace;
@@ -136,6 +137,8 @@ code {
   border-radius: 22px;
   background-color: #202127;
   backdrop-filter: blur(24px);
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 .versions li {

src/renderer/src/components/GameArea/index.tsx

@@ -0,0 +1,38 @@
+import GameCard from "../GameCard";
+
+export type Game = {
+  id?: number;
+  game_id: number;
+  title: string;
+  formatted_title: string;
+  path: string;
+  img_cover: string;
+  img_background: string;
+  is_running: number;
+};
+
+export default function GameArea({
+  games,
+}: {
+  games: Game[];
+}) {
+  return (
+    <div className='gameArea'>
+      {games.map((game) => (
+        <GameCard
+          title={game.title}
+          path={game.path}
+          //is_running={game.is_running}
+          is_running={game.is_running === 1 ? true : false}
+          id={game.id}
+          key={game.id}
+
+          game_id={game.game_id}
+          formatted_title={game.formatted_title}
+          img_cover={game.img_cover}
+          img_background={game.img_background}
+        />
+      ))}
+    </div>
+  );
+}

src/renderer/src/components/GameCard/index.css

@@ -0,0 +1,26 @@
+.gameCard {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  transition: transform .3s ease-out, outline .3s;
+  outline: 3px solid transparent;
+  outline-offset: 5px;
+  border-radius: 4px;
+}
+.gameCard:hover, .gameCard:has(.hoverLink:focus:focus-visible) {
+  transform: scale(1.02);
+}
+.gameCard:has(.hoverLink:focus:focus-visible) {
+  outline-color: #2121ec;
+}
+.gameCard .hoverLink {
+  outline: none;
+}
+
+.gameCard img {
+  max-width: 100%;
+  aspect-ratio: 2/3;
+  object-fit: cover;
+  overflow: hidden;
+  border-radius: 4px;
+}

src/renderer/src/components/GameCard/index.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+import './index.css';
+
+import { Game } from "@renderer/types";
+
+const GameCard = ({ title, path, is_running, img_cover, id, }: Game) => {
+  const [status, setStatus] = useState<string>("");
+
+  function startGame(id) {
+    window.electron.launchApp(id, path);
+  }
+
+  useEffect(() => {
+    window.electron.onAppStatus((status) => {
+      if (status.id === id) {
+        let newStatus = status.status === "started" ? "Lancé" : status.status === "closed" ? "" : status.status;
+        setStatus(newStatus);
+      }
+    });
+  }, []);
+
+
+  return (
+    <div className='gameCard' key={id} id={`${id}`}>
+      <img src={"src/assets/" + img_cover} alt={title}/>
+      <a href="#" className='hoverLink' onClick={() => startGame(id)}>
+        <span className='sr-only'>{title}</span>
+      </a>
+      {status}
+    </div>
+  );
+};
+
+export default GameCard

src/renderer/src/styles/index.css

@@ -0,0 +1,47 @@
+.hoverLink {
+  position: absolute;
+  inset: 0;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.appWrapper {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-areas: "sidebar main main main main";
+}
+
+.gameArea {
+  grid-area: main;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(139px, 1fr));
+  gap: 1em;
+  justify-content: center;
+  justify-items: center;
+  max-height: 92vh;
+  overflow: hidden auto;
+  padding: 3rem 1rem;
+
+  scrollbar-color: #323232 transparent;
+  scrollbar-width: thin;
+  scrollbar-gutter: 10px;
+}
+
+.gameArea::-webkit-scrollbar {
+  width: 10px;
+}
+
+.gameArea::-webkit-scrollbar-track {
+  background-color: transparent;
+  border-radius: 100px;
+}

src/renderer/src/types/index.ts

@@ -0,0 +1,10 @@
+export type Game = {
+    id?: number;
+    game_id: number;
+    title: string;
+    formatted_title: string;
+    path: string;
+    img_cover: string;
+    img_background: string;
+    is_running: boolean;
+};