work on back-end to get bs version from remote, detect installed depot and steam bs, add store in front, get all bs version available in front, add steam launch test in front

src/renderer/App.tsx

@@ -1,15 +1,36 @@
 import { NavBar } from "./components/nav-bar/nav-bar.component";
 import TitleBar from "./components/title-bar/title-bar.component";
+import { Routes, Route } from "react-router-dom";
+import VersionsList from "./pages/versions-list.components";
+import { useDispatch, useSelector } from "react-redux";
+import { useEffect } from "react";
+import VersionViewer from "./pages/version-viewer.component";
 
 export default function App() {
 
+  const dispatch = useDispatch()
+
+  useEffect(() => {
+    initIpcsListener();
+    window.electron.ipcRenderer.sendMessage('bs-version.installed-versions');
+  }, [])
+
+  const initIpcsListener= () => {
+    window.electron.ipcRenderer.on('bs-version.installed-versions', versions => dispatch({type: 'INSTALLED_BS_ADD_ALL', payload: versions}));
+  }
+  
+  
+
   return (
     <div className="w-screen h-screen overflow-hidden flex dark:bg-[#202225]">
       <NavBar/>
       <div className="flex flex-col grow">
         <TitleBar/>
         <div className="bg-[#2C2F33] rounded-tl-lg grow">
-          a
+          <Routes>
+            <Route path={"/bs-version/:versionNumber"} element={<VersionViewer/>}/>
+            <Route path="*" element={<VersionsList/>}/>
+          </Routes>
         </div>
       </div>
     </div>

src/renderer/components/nav-bar/bs-version-item.component.tsx

@@ -0,0 +1,10 @@
+import { BSVersion } from "main/services/bs-version-manager.service";
+import { Link } from "react-router-dom";
+
+export default function BsVersionItem(props: {version: BSVersion}) {
+  return (
+    <div className='w-full h-fit pl-1 pr-1 cursor-pointer'>
+        <Link to={`/bs-version/${props.version.BSVersion}`} state={props.version} className="block w-full flex justify-center items-center content-center text-lg text-gray-200 font-bold">{props.version.BSVersion}</Link>
+    </div>
+  )
+}

src/renderer/components/nav-bar/nav-bar.component.tsx

@@ -1,9 +1,16 @@
-import React from 'react'
 import { FaPlus, } from 'react-icons/fa';
 import { AiFillSetting } from 'react-icons/ai'
 import './nav-bar.component.css'
+import { useSelector } from 'react-redux';
+import BsVersionItem from './bs-version-item.component';
+import { BSVersion } from 'main/services/bs-version-manager.service';
 
 export function NavBar() {
+
+  const { installedVersions }: {installedVersions: BSVersion[]} = useSelector((state: any) => ({...state.installedBSReducer}));
+
+  console.log(installedVersions);
+
   return (
     <div id='nav-bar' className='flex flex-col items-center w-fit h-full max-h-full p-2 bg-gray-200 dark:bg-[#202225]'>
       <div className='w-full flex items-start content-start justify-center relative mb-3'>
@@ -12,62 +19,8 @@ export function NavBar() {
           <span id='logo-top' className='bg-red-500 aspect-square w-16'> </span>
         </div>
       </div>
-      <div id='versions' className='relative left-1 w-full grow overflow-y-hidden scrollbar-th scrollbar-track-transparent scrollbar-thin scrollbar-thumb-neutral-900 hover:overflow-y-scroll'>
-        <div className='cursor-pointer grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
-          <span className='font-bold text-gray-200'>1.19.0</span>
-        </div>
-        <div className='cursor-pointer grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
-          <span className='font-bold text-gray-200'>1.19.0</span>
-        </div>
-        <div className='cursor-pointer grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
-          <span className='font-bold text-gray-200'>1.19.0</span>
-        </div>
-        <div className='cursor-pointer grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
-          <span className='font-bold text-gray-200'>1.19.0</span>
-        </div>
-        <div className='cursor-pointer grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
-          <span className='font-bold text-gray-200'>1.19.0</span>
-        </div>
-        <div className='cursor-pointer grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
-          <span className='font-bold text-gray-200'>1.19.0</span>
-        </div>
-        <div className='cursor-pointer grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
-          <span className='font-bold text-gray-200'>1.19.0</span>
-        </div>
-        <div className='cursor-pointer grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
-          <span className='font-bold text-gray-200'>1.19.0</span>
-        </div>
-        <div className='cursor-pointer grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
-          <span className='font-bold text-gray-200'>1.19.0</span>
-        </div>
-        <div className='cursor-pointer grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
-          <span className='font-bold text-gray-200'>1.19.0</span>
-        </div>
-        <div className='cursor-pointer grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
-          <span className='font-bold text-gray-200'>1.19.0</span>
-        </div>
-        <div className='cursor-pointer grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
-          <span className='font-bold text-gray-200'>1.19.0</span>
-        </div>
-        <div className='cursor-pointer grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
-          <span className='font-bold text-gray-200'>1.19.0</span>
-        </div>
-        <div className='cursor-pointer grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
-          <span className='font-bold text-gray-200'>1.19.0</span>
-        </div>
-        <div className='cursor-pointer grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
-          <span className='font-bold text-gray-200'>1.19.0</span>
-        </div>
-        <div className='cursor-pointer grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
-          <span className='font-bold text-gray-200'>1.19.0</span>
-        </div>
-        <div className='grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
-          <span className='font-bold text-gray-200'>1.19.0</span>
-        </div>
-        <div className='cursor-pointer grow pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
-          <span className='font-bold text-gray-200'>1.19.0</span>
-        </div>
-
+      <div id='versions' className='relative w-full left-[2px] grow overflow-y-hidden scrollbar-th scrollbar-track-transparent scrollbar-thin scrollbar-thumb-neutral-900 hover:overflow-y-scroll'>
+        {installedVersions.map((version, index) => <BsVersionItem key={index} version={version}/>)}
       </div>
       <div className='w-full p-2 flex flex-col items-center content-center justify-start'>
         <span className='cursor-pointer mb-3'>

src/renderer/index.tsx

@@ -1,12 +1,22 @@
 import { createRoot } from 'react-dom/client';
 import { InitDownloadInfoInterface } from '../main/ipcs/bs-download-ipcs';
+import { HashRouter } from 'react-router-dom';
 import App from './App';
 import 'tailwindcss/tailwind.css';
 import './index.css'
+import { Provider } from 'react-redux';
+import store from './store/store'
 
 const container = document.getElementById('root')!;
 const root = createRoot(container);
-root.render(<App />);
+
+root.render(
+  <Provider store={store}>
+    <HashRouter>
+      <App />
+    </HashRouter>
+  </Provider>
+);
 
 // setTimeout(() => {
 //   window.electron.ipcRenderer.sendMessage('bs-download.start', {app: '620980', depot: '620981', manifest: '6222769774084748916', stay: true, username: 'lekilleur618', folder: 'test2', cwd: 'C:\\test'} as InitDownloadInfoInterface);
@@ -15,7 +25,8 @@ root.render(<App />);
 // window.electron.ipcRenderer.on('bs-download.ask-password', () => console.log('omg popup password'));
 
 setTimeout(() => {
-  window.electron.ipcRenderer.sendMessage('test-launch', null);
+  //window.electron.ipcRenderer.sendMessage('test-launch', null);
+  //window.electron.ipcRenderer.sendMessage('bs-version.request-versions', null);
 }, 5000);
 
-window.electron.ipcRenderer.on('bs-download.ask-password', () => console.log('omg popup password'));
+//window.electron.ipcRenderer.on('bs-version.request-versions', (v) => console.log(v));

src/renderer/pages/version-viewer.component.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { useLocation } from 'react-router-dom'
+
+export default function VersionViewer() {
+
+  const {state} = useLocation();
+  console.log(state);
+
+  const launchBs = () => {
+    window.electron.ipcRenderer.sendMessage('bs-launch.steam'); //Temporary
+  }
+
+  return (
+    <div>
+      <button onClick={launchBs}>Launch</button>
+    </div>
+  )
+}

src/renderer/pages/versions-list.components.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function VersionsList() {
+  return (
+    <div>versions-list.components</div>
+  )
+}

src/renderer/store/reducers/bs-versions-installed.reducer.ts

@@ -0,0 +1,25 @@
+import { BSVersion } from "../../../main/services/bs-version-manager.service"
+import { ReducerAction } from "../store"
+
+const INITIAL_STATE = {
+    installedVersions: [] as BSVersion[] 
+}
+
+function installedBSReducer(state = INITIAL_STATE, action: ReducerAction<BSVersion|BSVersion[]>){
+    switch(action.type){
+        case 'INSTALLED_BS_ADD_ALL': {
+            if(!action.payload){ return state; }
+            const payload = action.payload as BSVersion[];
+            return { ...state, installedVersions: [...state.installedVersions, ...payload] };
+        }
+        case 'INSTALLED_BS_ADD':{
+            if(!action.payload){ return state; }
+            const payload = action.payload as BSVersion;
+            return { ...state, installedVersions: [...state.installedVersions, payload]}
+        }
+    }
+
+    return state;
+}
+
+export default installedBSReducer;

src/renderer/store/store.ts

@@ -0,0 +1,15 @@
+import { configureStore } from "@reduxjs/toolkit";
+import installedBSReducer from './reducers/bs-versions-installed.reducer'
+
+const store = configureStore({
+    reducer:{
+        installedBSReducer,
+    }
+});
+
+export default store;
+
+export interface ReducerAction<T> {
+    type: string,
+    payload?: T
+}