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/Globals.css

@@ -22,3 +22,44 @@ body {
   @apply bg-[#555] w-1 rounded-lg active:bg-[#888];
 }
 
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.popup-overlay {
+  @apply fixed w-screen h-screen z-[99999] flex justify-center items-center animate-[fadeIn_0.2s_ease-out_forwards] left-0 top-0 bg-[rgba(0,0,0,0.5)];
+}
+
+.popup-overlay.fade-out {
+  @apply animate-[fadeOut_0.2s_ease-out_forwards];
+}
+
+.popup-box {
+  @apply relative w-[60vw] h-[80vh] shadow-[0_0_20px_rgba(0,0,0,0.2)] rounded-lg bg-[#191919] flex flex-col p-6;
+}
+
+.popup-content {
+  @apply flex-1 overflow-auto border border-[#323232] rounded-lg mt-4;
+}
+
+.popup-entry {
+  @apply relative h-[100px] bg-[#242424] m-2 p-2 rounded-lg border border-[#484848];
+}
+
+.popup-entry button {
+  @apply absolute;
+}

src/componets/Sidebar.tsx

@@ -9,7 +9,7 @@ import { platform } from '@tauri-apps/plugin-os'
 import { getCurrentWindow } from '@tauri-apps/api/window'
 import { SidebarProps } from '../types/SidebarProps'
 
-export default function Sidebar({ downloadProgress }: SidebarProps) {
+export default function Sidebar({ setShowPopup, setPopupMode, setFadeOut }: SidebarProps) {
   const [rot, setRot] = useState(0)
   const [dir, setDir] = useState(1)
 
@@ -76,7 +76,7 @@ export default function Sidebar({ downloadProgress }: SidebarProps) {
         <a draggable={false} href="#settings" className={`link ${(window.location.hash || '#installs') === '#settings' ? 'active' : ''}`}><FontAwesomeIcon icon={faCog} className="mr-2" /> Settings</a>
         <a draggable={false} onClick={() => openUrl("https://berrydash.lncvrt.xyz/discord")} className="link"><FontAwesomeIcon icon={faDiscord} className="mr-2" />Community</a>
       </nav>
-      <div className='sidebar-downloads'>
+      <div className='sidebar-downloads' onClick={() => { setPopupMode(1); setShowPopup(true); setFadeOut(false) }}>
         <p><FontAwesomeIcon icon={faDownload} /> Downloads</p>
       </div>
     </aside>

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 />
 )

src/routes/Installs.css

@@ -1,47 +1,5 @@
 @import 'tailwindcss';
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-.popup-overlay {
-  @apply fixed w-screen h-screen z-[9999] flex justify-center items-center animate-[fadeIn_0.2s_ease-out_forwards] left-0 top-0 bg-[rgba(0,0,0,0.5)];
-}
-
-.popup-overlay.fade-out {
-  @apply animate-[fadeOut_0.2s_ease-out_forwards];
-}
-
-.popup-box {
-  @apply relative w-[60vw] h-[80vh] shadow-[0_0_20px_rgba(0,0,0,0.2)] rounded-lg bg-[#191919] flex flex-col p-6;
-}
-
-.popup-content {
-  @apply flex-1 overflow-auto border border-[#323232] rounded-lg mt-4;
-}
-
-.popup-entry {
-  @apply relative h-[100px] bg-[#242424] m-2 p-2 rounded-lg border border-[#484848];
-}
-
-.popup-entry button {
-  @apply absolute;
-}
-
 .close-button {
   @apply flex justify-center items-center absolute bg-[#323232] hover:bg-[#484848] text-2xl cursor-pointer text-gray-300 hover:text-white h-12 w-12 p-3 rounded-xl border-[none] left-2 top-2 transition-colors;
 }

src/routes/Installs.tsx

@@ -1,29 +1,9 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import './Installs.css'
-import { useEffect, useState } from 'react'
-import { faAdd, faRemove, faX } from '@fortawesome/free-solid-svg-icons'
-import { LauncherVersion } from '../types/LauncherVersion'
+import { useEffect } from 'react'
 import axios from 'axios'
 import { InstallsProps } from '../types/InstallsProps'
 
-export default function Installs({ downloadVersions, downloadProgress }: InstallsProps) {
-  const [showPopup, setShowPopup] = useState(false)
-  const [fadeOut, setFadeOut] = useState(false)
-  const [versionList, setVersionList] = useState<null | LauncherVersion[]>(null);
-  const [selectedVersionList, setSelectedVersionList] = useState<LauncherVersion[]>([]);
-
-  function downloadVersion () {
-    setShowPopup(true)
-    setFadeOut(false)
-  }
-
-  function handleOverlayClick (e: React.MouseEvent<HTMLDivElement>) {
-    if (e.target === e.currentTarget) {
-      setFadeOut(true)
-      setTimeout(() => setShowPopup(false), 200)
-    }
-  }
-
+export default function Installs({ downloadProgress, showPopup, setShowPopup, setPopupMode, setFadeOut, setSelectedVersionList, setVersionList }: InstallsProps) {
   useEffect(() => {
     if (!showPopup) return
     setSelectedVersionList([]);
@@ -38,58 +18,11 @@ export default function Installs({ downloadVersions, downloadProgress }: Install
       <p className='text-3xl ml-4 mt-4'>Installs</p>
       <button
         className='button text-3xl mt-4 absolute right-4 top-4'
-        onClick={downloadVersion}
+        onClick={() => { setPopupMode(0); setShowPopup(true); setFadeOut(false) }}
         disabled={downloadProgress.length != 0}
       >
         Download new version
       </button>
-      {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>
-            <p className='text-xl text-center'>Select versions to download</p>
-            <div className='popup-content'>
-              {versionList == null ? (
-                <p className='text-center'>Downloading 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>
-            {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>
-      )}
     </>
   )
 }

src/types/DownloadProgress.ts

@@ -4,6 +4,6 @@ export class DownloadProgress {
   constructor (
     public version: LauncherVersion,
     public progress: number,
-    public done: boolean
+    public failed: boolean
   ) {}
 }

src/types/InstallsProps.ts

@@ -2,6 +2,11 @@ import { DownloadProgress } from './DownloadProgress'
 import { LauncherVersion } from './LauncherVersion'
 
 export type InstallsProps = {
-  downloadVersions: (versions: LauncherVersion[]) => void
   downloadProgress: DownloadProgress[]
+  showPopup: boolean
+  setShowPopup: (v: boolean) => void
+  setPopupMode: (v: null | number) => void
+  setFadeOut: (v: boolean) => void
+  setSelectedVersionList: (v: LauncherVersion[]) => void
+  setVersionList: (v: null | LauncherVersion[]) => void
 }

src/types/SidebarProps.ts

@@ -1,5 +1,5 @@
-import { DownloadProgress } from './DownloadProgress'
-
 export type SidebarProps = {
-  downloadProgress: DownloadProgress[]
+  setShowPopup: (v: boolean) => void
+  setPopupMode: (v: null | number) => void
+  setFadeOut: (v: boolean) => void
 }