Read description for changes

- Moved popup css code to globals
- Invoked rust code with download stuff
- Invoke the main script with progress
- Move popup code to `main.tsx`
- Don't use Strict Mode
- Made sidebar downloads menu do something
- And more

src/main.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import ReactDOM from 'react-dom/client'
 import Installs from './routes/Installs'
 import Settings from './routes/Settings'
@@ -6,18 +6,49 @@ import Sidebar from './componets/Sidebar'
 import './Globals.css'
 import { LauncherVersion } from './types/LauncherVersion'
 import { DownloadProgress } from './types/DownloadProgress'
+import { platform } from '@tauri-apps/plugin-os'
+import { invoke } from '@tauri-apps/api/core'
+import { listen } from '@tauri-apps/api/event'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faAdd, faRemove, faX } from '@fortawesome/free-solid-svg-icons'
 
 function App () {
   const [hash, setHash] = useState(window.location.hash || '#installs')
+  const [versionList, setVersionList] = useState<null | LauncherVersion[]>(null);
+  const [selectedVersionList, setSelectedVersionList] = useState<LauncherVersion[]>([]);
   const [downloadProgress, setDownloadProgress] = useState<DownloadProgress[]>([]);
+  const [showPopup, setShowPopup] = useState(false)
+  const [popupMode, setPopupMode] = useState<null | number>(null)
+  const [fadeOut, setFadeOut] = useState(false)
+
+  listen<string>('download-progress', (event) => {
+    const [urlEnc, progStr] = event.payload.split(':')
+    const url = atob(urlEnc)
+    const prog = Number(progStr)
+    setDownloadProgress(prev => {
+      const i = prev.findIndex(d => d.version.downloadUrls[d.version.platforms.indexOf(platform())] === url)
+      if (i === -1) return prev
+      if (prog >= 100) return prev.filter((_, j) => j !== i)
+      const copy = [...prev]
+      copy[i] = { ...copy[i], progress: prog }
+      return copy
+    })
+  })
 
   function downloadVersions(versions: LauncherVersion[]) {
-    setDownloadProgress(prev => [
-      ...prev,
-      ...versions.map(v => new DownloadProgress(v, 0, false))
-    ])
+    const newDownloads = versions.map(v => new DownloadProgress(v, 0, false));
+    setDownloadProgress(prev => [...prev, ...newDownloads]);
 
-    return;
+    newDownloads.forEach(download => {
+      invoke('download', { url: download.version.downloadUrls[download.version.platforms.indexOf(platform())] });
+    });
+  }
+
+  function handleOverlayClick (e: React.MouseEvent<HTMLDivElement>) {
+    if (e.target === e.currentTarget) {
+      setFadeOut(true)
+      setTimeout(() => setShowPopup(false), 200)
+    }
   }
 
   useEffect(() => {
@@ -34,7 +65,7 @@ function App () {
 
   function renderContent () {
     if (hash === '#installs') {
-      return <Installs downloadVersions={downloadVersions} downloadProgress={downloadProgress} />
+      return <Installs downloadProgress={downloadProgress} showPopup={showPopup} setShowPopup={setShowPopup} setPopupMode={setPopupMode} setFadeOut={setFadeOut} setSelectedVersionList={setSelectedVersionList} setVersionList={setVersionList} />
     } else if (hash === '#settings') {
       return <Settings />
     }
@@ -43,14 +74,79 @@ function App () {
 
   return (
     <>
-      <Sidebar downloadProgress={downloadProgress} />
+      <Sidebar setShowPopup={setShowPopup} setPopupMode={setPopupMode} setFadeOut={setFadeOut} />
       <main style={{ marginLeft: '15rem' }}>{renderContent()}</main>
+      {showPopup && (
+        <div
+          className={`popup-overlay ${fadeOut ? 'fade-out' : ''}`}
+          onClick={handleOverlayClick}
+        >
+          <div className='popup-box'>
+            <button
+              className='close-button'
+              onClick={() => {
+                setFadeOut(true)
+                setTimeout(() => setShowPopup(false), 200)
+              }}
+            >
+              <FontAwesomeIcon icon={faX} />
+            </button>
+            {popupMode === 0 ? (
+              <>
+                <p className='text-xl text-center'>Select versions to download</p>
+                <div className='popup-content'>
+                  {versionList == null ? (
+                    <p className='text-center'>Getting version list...</p>
+                  ) : (
+                    versionList.map((v, i) => 
+                      <div key={i} className='popup-entry'>
+                        <p className='text-2xl'>Berry Dash v{v.displayName}</p>
+                        <button className='button right-2 bottom-2' onClick={() => {
+                          if (!selectedVersionList) return
+                          if (!selectedVersionList.includes(v)) {
+                            setSelectedVersionList([...selectedVersionList, v])
+                          } else {
+                            setSelectedVersionList(selectedVersionList.filter(x => x !== v))
+                          }
+                        }}>{selectedVersionList.includes(v) ? <><FontAwesomeIcon icon={faRemove} /> Remove</> : <><FontAwesomeIcon icon={faAdd} /> Add</>}</button>
+                      </div>
+                    )
+                  )}
+                </div>
+              </>
+            ) : popupMode === 1 ? (
+              <>
+                <p className='text-xl text-center'>Downloads</p>
+                <div className='popup-content'>
+                  {downloadProgress.length === 0 ? (
+                    <p className='text-center mt-6'>Nothing here...</p>
+                  ) : (
+                    downloadProgress.map((v, i) => (
+                      <div key={i} className='popup-entry'>
+                        <p className='text-2xl'>Berry Dash v{v.version.displayName}</p>
+                        <p className='mt-[25px]'>{v.progress}% downloaded</p>
+                      </div>
+                    ))
+                  )}
+                </div>
+              </>
+            ) : null}
+            {popupMode == 0 && versionList != null && (
+              <div className='flex justify-center'>
+                <button className='button w-fit mt-2 mb-[-16px]' onClick={() => {
+                  setFadeOut(true)
+                  setTimeout(() => setShowPopup(false), 200)
+                  downloadVersions(selectedVersionList)
+                }}>Download {selectedVersionList.length} version{selectedVersionList.length == 1 ? '' : 's'}</button>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
     </>
   )
 }
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+  <App />
 )