Lncvrt-Games/launcher
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Read description for changes

Browse Source 
- 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
This commit is contained in:
Lncvrt
2025-07-19 17:45:44 -07:00
parent 00577a28c1
commit f5d6712126
11 changed files with 180 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src-tauri/Cargo.lock generated
View File

@@ -261,6 +261,7 @@ checksum = "72b3254f16251a8381aa12e40e3c4d2f0199f8c6508fbecb9d91f575e0fbb8c6"
name = "berry-dash-launcher"
version = "1.0.0"
dependencies = [
"base64 0.22.1",
"serde",
"serde_json",
"tauri",

1
src-tauri/Cargo.toml
View File

@@ -17,4 +17,5 @@ tauri-plugin-opener = "2.4.0"
serde = { version = "1.0.219", features = ["derive"] }
serde_json = "1.0.141"
tauri-plugin-os = "2.3.0"
base64 = "0.22.1"

16
src-tauri/src/lib.rs
View File

@@ -1,9 +1,23 @@
#[cfg_attr(mobile, tauri::mobile_entry_point)]
use base64::{Engine, engine::general_purpose};
use tauri::{AppHandle, Emitter};
#[tauri::command]
fn download(app: AppHandle, url: String) {
app.emit("download-started", &url).unwrap();
for progress in [1, 15, 50, 80, 100] {
app.emit("download-progress", format!("{}:{}", general_purpose::STANDARD.encode(&url), progress)).unwrap();
}
app.emit("download-finished", &url).unwrap();
//code from the wiki i didnt change it yet
}
pub fn run() {
tauri::Builder::default()
.plugin(tauri_plugin_os::init())
.plugin(tauri_plugin_opener::init())
.invoke_handler(tauri::generate_handler![])
.invoke_handler(tauri::generate_handler![download])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}

41
src/Globals.css
View File

@@ -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;
}

4
src/componets/Sidebar.tsx
View File

@@ -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>

118
src/main.tsx
View File

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

42
src/routes/Installs.css
View File

@@ -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;
}

73
src/routes/Installs.tsx
View File

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

2
src/types/DownloadProgress.ts
View File

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

7
src/types/InstallsProps.ts
View File

@@ -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
}

6
src/types/SidebarProps.ts
View File

@@ -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
}