103 lines
3.3 KiB
TypeScript
103 lines
3.3 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect } from 'react'
|
|
import './Installs.css'
|
|
import { useGlobal } from './GlobalProvider'
|
|
import Link from 'next/link'
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
import {
|
|
faCheck,
|
|
faShieldHalved,
|
|
faWarning
|
|
} from '@fortawesome/free-solid-svg-icons'
|
|
|
|
export default function Installs () {
|
|
const {
|
|
downloadProgress,
|
|
showPopup,
|
|
setShowPopup,
|
|
setPopupMode,
|
|
setFadeOut,
|
|
setSelectedVersionList,
|
|
downloadedVersionsConfig,
|
|
normalConfig,
|
|
setSelectedGame,
|
|
getListOfGames,
|
|
getVersionsAmountData
|
|
} = useGlobal()
|
|
|
|
useEffect(() => {
|
|
if (!showPopup) return
|
|
setSelectedVersionList([])
|
|
}, [normalConfig, setSelectedVersionList, showPopup])
|
|
|
|
return (
|
|
<div className='mx-4 mt-4'>
|
|
<div className='flex justify-between items-center mb-4'>
|
|
<p className='text-3xl'>Games</p>
|
|
<button
|
|
className='button text-3xl'
|
|
onClick={() => {
|
|
setSelectedGame(null)
|
|
setPopupMode(0)
|
|
setShowPopup(true)
|
|
setFadeOut(false)
|
|
}}
|
|
disabled={downloadProgress.length != 0}
|
|
>
|
|
Download game
|
|
</button>
|
|
</div>
|
|
<div className='downloads-container'>
|
|
<div className='downloads-scroll'>
|
|
{downloadedVersionsConfig && downloadedVersionsConfig.list.length ? (
|
|
getListOfGames()
|
|
.sort((a, b) => {
|
|
return a.id - b.id
|
|
})
|
|
.map(i => (
|
|
<div key={i.id} className='downloads-entry'>
|
|
<div className='flex flex-col'>
|
|
<p className='text-2xl'>{i.name}</p>
|
|
<div className='flex gap-2'>
|
|
<div className='entry-info-item'>
|
|
<p>
|
|
{(() => {
|
|
const data = getVersionsAmountData(i.id)
|
|
if (!data) return 'N/A'
|
|
return `${data.installed}/${data.total}`
|
|
})()}{' '}
|
|
versions installed
|
|
</p>
|
|
</div>
|
|
<div className='entry-info-item' hidden={!i.official}>
|
|
<FontAwesomeIcon icon={faCheck} color='#19c84b' />
|
|
<p>Official</p>
|
|
</div>
|
|
<div className='entry-info-item' hidden={i.official}>
|
|
<FontAwesomeIcon
|
|
icon={i.verified ? faShieldHalved : faWarning}
|
|
color={i.verified ? '#19c84b' : '#ffc800'}
|
|
/>
|
|
<p>{i.verified ? 'Verified' : 'Unverified'}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className='flex flex-row items-center gap-2'>
|
|
<Link className='button' href={'/game?id=' + i.id}>
|
|
Installs
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
))
|
|
) : (
|
|
<div className='flex justify-center items-center h-full'>
|
|
<p className='text-3xl'>No games installed</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|