[feature-194] add message when no mods are available

This commit is contained in:
MathieuG-P
2023-04-01 15:59:15 +02:00
parent 4f0f80bbc2
commit f2e6fa486a
4 changed files with 39 additions and 19 deletions
+1
View File
@@ -67,6 +67,7 @@
"mods": {
"loading-mods": "Loading mods...",
"no-internet": "No internet",
"mods-not-available": "No mods are available yet for this version of Beat Saber",
"buttons": {
"more-infos": "More info",
"install-or-update": "Install or update"
+1
View File
@@ -66,6 +66,7 @@
"mods": {
"loading-mods": "Cargando mods...",
"no-internet": "Sin internet",
"mods-not-available": "Aún no hay mods disponibles para esta versión de Beat Saber",
"buttons": {
"more-infos": "Más información",
"install-or-update": "Instalar o actualizar"
+1
View File
@@ -66,6 +66,7 @@
"mods": {
"loading-mods": "Chargement des mods...",
"no-internet": "Pas d'internet",
"mods-not-available": "Aucun mod n'est encore disponible pour cette version de Beat Saber",
"buttons": {
"more-infos": "Plus d'infos",
"install-or-update": "Installer ou mettre à jour"
@@ -135,32 +135,49 @@ export function ModsSlide({version, onDisclamerDecline}: {version: BSVersion, on
if(modsAvailable){
setDownloadWidth(downloadRef?.current?.offsetWidth)
}
}, [modsAvailable])
}, [modsAvailable]);
const renderContent = () => {
if(!isOnline){ return <ModStatus text="pages.version-viewer.mods.no-internet" image={BeatConflictImg}/> }
if(!modsAvailable){ return <ModStatus text="pages.version-viewer.mods.loading-mods" image={BeatWaitingImg} spin/> }
if(!modsAvailable.size){ return <ModStatus text="pages.version-viewer.mods.mods-not-available" image={BeatConflictImg}/> }
return (
<>
<div className="grow overflow-scroll w-full min-h-0 scrollbar-thin scrollbar-thumb-neutral-900 scrollbar-thumb-rounded-full">
<ModsGrid modsMap={modsAvailable} installed={modsInstalled} modsSelected={modsSelected} onModChange={handleModChange} moreInfoMod={moreInfoMod} onWantInfos={handleMoreInfo}/>
</div>
<div className="h-10 shrink-0 flex items-center justify-between px-3">
<BsmButton className="text-center rounded-md px-2 py-[2px]" text="pages.version-viewer.mods.buttons.more-infos" typeColor="cancel" withBar={false} disabled={!moreInfoMod} onClick={handleOpenMoreInfo} style={{width: downloadWith}}/>
<div ref={downloadRef}>
<BsmButton className="text-center rounded-md px-2 py-[2px]" text="pages.version-viewer.mods.buttons.install-or-update" withBar={false} disabled={installing} typeColor="primary" onClick={installMods}/>
</div>
</div>
</>
)
}
return (
<div ref={ref} className='shrink-0 w-full h-full px-8 pb-7 flex justify-center'>
<div className='relative flex flex-col grow-0 bg-light-main-color-2 dark:bg-main-color-2 h-full w-full rounded-md shadow-black shadow-center overflow-hidden'>
{isOnline && modsAvailable ? (
<>
<div className="grow overflow-scroll w-full min-h-0 scrollbar-thin scrollbar-thumb-neutral-900 scrollbar-thumb-rounded-full">
<ModsGrid modsMap={modsAvailable} installed={modsInstalled} modsSelected={modsSelected} onModChange={handleModChange} moreInfoMod={moreInfoMod} onWantInfos={handleMoreInfo}/>
</div>
<div className="h-10 shrink-0 flex items-center justify-between px-3">
<BsmButton className="text-center rounded-md px-2 py-[2px]" text="pages.version-viewer.mods.buttons.more-infos" typeColor="cancel" withBar={false} disabled={!moreInfoMod} onClick={handleOpenMoreInfo} style={{width: downloadWith}}/>
<div ref={downloadRef}>
<BsmButton className="text-center rounded-md px-2 py-[2px]" text="pages.version-viewer.mods.buttons.install-or-update" withBar={false} disabled={installing} typeColor="primary" onClick={installMods}/>
</div>
</div>
</>
) : (
<div className="w-full h-full flex flex-col items-center justify-center text-gray-800 dark:text-gray-200">
<img className={`w-32 h-32 ${isOnline && "spin-loading"}`} src={isOnline ? BeatWaitingImg : BeatConflictImg} alt=" "/>
<span className="text-xl mt-3 h-0 italic">{t(isOnline ? "pages.version-viewer.mods.loading-mods" : "pages.version-viewer.mods.no-internet")}</span>
</div>
)}
{renderContent()}
</div>
</div>
)
}
function ModStatus({text, image, spin = false}: {text: string, image: string, spin?: boolean}) {
const t = useTranslation();
return (
<div className="w-full h-full flex flex-col items-center justify-center text-gray-800 dark:text-gray-200">
<img className={`w-32 h-32 ${spin ? "spin-loading": ""}`} src={image} alt=" "/>
<span className="text-xl mt-3 h-0 italic">{t(text)}</span>
</div>
)
}