Add titles/tooltips

This commit is contained in:
2025-12-20 21:10:05 -07:00
parent bc1ca2a2b1
commit e5d9226233
6 changed files with 59 additions and 4 deletions

View File

@@ -3,9 +3,15 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCheck } from '@fortawesome/free-solid-svg-icons'
import { SettingProps } from '../types/SettingProps'
export function Setting ({ label, value, onChange, className }: SettingProps) {
export function Setting ({
label,
value,
onChange,
className,
title
}: SettingProps) {
return (
<div className={`flex items-center gap-2 mb-2 ${className}`}>
<div className={`flex items-center gap-2 mb-2 ${className}`} title={title}>
<label className='text-white text-lg'>{label}</label>
<div className='setting-checkbox-wrapper'>
<input

View File

@@ -111,6 +111,7 @@ export default function Installs () {
className={`entry-info-item mt-2 ${
hoveredIds.includes(entry) ? 'btntheme3' : 'btntheme2'
}`}
title='The date the game was installed in MM/dd/yyyy format'
>
<p>
Installed{' '}
@@ -133,6 +134,7 @@ export default function Installs () {
setShowPopup(true)
setFadeOut(false)
}}
title='Click to view version info'
>
View Info
</button>
@@ -147,6 +149,7 @@ export default function Installs () {
setShowPopup(true)
setFadeOut(false)
}}
title='Click to manage this version install'
>
Manage
</button>

View File

@@ -522,6 +522,11 @@ export default function RootLayout ({
: [...prev, v.id]
)
}}
title={
selectedVersionList.includes(v.id)
? 'This version will be downloaded. Click to remove from the list of versions that will be downloaded.'
: 'This version will NOT be downloaded. Click to add from the list of versions that will be downloaded.'
}
>
{selectedVersionList.includes(v.id) ? (
<>
@@ -541,6 +546,7 @@ export default function RootLayout ({
setViewingInfoFromDownloads(true)
setPopupMode(3)
}}
title='Click to view version info'
>
<FontAwesomeIcon icon={faInfo} /> Info
</button>
@@ -561,7 +567,10 @@ export default function RootLayout ({
{v.name}
</p>
<div className='flex gap-2'>
<div className='entry-info-item btntheme3'>
<div
className='entry-info-item btntheme3'
title='The amount of versions installed of this game in installed/installable format.'
>
<p>
{(() => {
const data = getVersionsAmountData(v.id)
@@ -574,6 +583,7 @@ export default function RootLayout ({
<div
className='entry-info-item btntheme3'
hidden={!v.official}
title='This game is official.'
>
<FontAwesomeIcon
icon={faCheck}
@@ -584,6 +594,11 @@ export default function RootLayout ({
<div
className='entry-info-item btntheme3'
hidden={v.official}
title={
v.verified
? 'This game is verified to be safe'
: 'This game is NOT verified to be save. Proceed with caution.'
}
>
<FontAwesomeIcon
icon={
@@ -599,6 +614,7 @@ export default function RootLayout ({
<div
className='entry-info-item btntheme3 mt-2'
hidden={v.developer == null}
title={`The developer of ${v.name} is ${v.developer}.`}
>
<FontAwesomeIcon
icon={faCode}
@@ -609,6 +625,11 @@ export default function RootLayout ({
<button
className='button btntheme3 right-2 bottom-2'
onClick={() => setSelectedGame(v.id)}
title={`Click to download specific versions of the game. You have ${(() => {
const data = getVersionsAmountData(v.id)
if (!data) return 'N/A'
return `${data.installed} of ${data.total}`
})()} versions downloaded.`}
>
<>
<FontAwesomeIcon icon={faDownload} />{' '}
@@ -657,6 +678,7 @@ export default function RootLayout ({
)
)
}}
title='Click to remove this version from this menu.'
>
Cancel
</button>
@@ -736,6 +758,7 @@ export default function RootLayout ({
name: managingVersion
})
}
title='Click to uninstall this game. This will NOT remove any progress or any save files.'
>
Uninstall
</button>
@@ -746,6 +769,7 @@ export default function RootLayout ({
name: managingVersion
})
}
title="Click to browse the game's files."
>
Open Folder
</button>
@@ -776,6 +800,11 @@ export default function RootLayout ({
setTimeout(() => setShowPopup(false), 200)
downloadVersions()
}}
title={`Click to download ${
selectedVersionList.length
} version${
selectedVersionList.length == 1 ? '' : 's'
} of ${getVersionGame(selectedGame)?.name}`}
>
Download {selectedVersionList.length} version
{selectedVersionList.length == 1 ? '' : 's'}
@@ -790,6 +819,12 @@ export default function RootLayout ({
prev.length === allIds.length ? [] : allIds
)
}}
title={
selectedVersionList.length ===
getSpecialVersionsList(selectedGame).length
? 'Click to remove all selected versions for download.'
: 'Click to add all selected versions for download.'
}
>
{selectedVersionList.length ===
getSpecialVersionsList(selectedGame).length

View File

@@ -95,6 +95,7 @@ export default function Installs () {
className={`entry-info-item ${
hoveredIds.includes(i.id) ? 'btntheme3' : 'btntheme2'
}`}
title='The amount of versions installed of this game in installed/installable format.'
>
<p>
{(() => {
@@ -110,6 +111,7 @@ export default function Installs () {
hoveredIds.includes(i.id) ? 'btntheme3' : 'btntheme2'
}`}
hidden={!i.official}
title='This game is official.'
>
<FontAwesomeIcon icon={faCheck} color='#19c84b' />
<p>Official</p>
@@ -119,6 +121,11 @@ export default function Installs () {
hoveredIds.includes(i.id) ? 'btntheme3' : 'btntheme2'
}`}
hidden={i.official}
title={
i.verified
? 'This game is verified to be safe'
: 'This game is not verified to be save. Proceed with caution.'
}
>
<FontAwesomeIcon
icon={i.verified ? faShieldHalved : faWarning}

View File

@@ -62,6 +62,7 @@ export default function Settings () {
break
}
}}
title='This setting does as you expect, allow the launcher to send notifications for when stuff like downloading is done.'
/>
<Setting
label='Always show games in sidebar'
@@ -86,6 +87,7 @@ export default function Settings () {
break
}
}}
title="This setting will make it so when you are on a page like this, the games won't disappear."
/>
<Setting
label='Show Installs/Launch Buttons'
@@ -110,8 +112,9 @@ export default function Settings () {
break
}
}}
title='Enable the legacy method of using the installs/launch buttons. In the future this setting may be removed so try and get used to the new method.'
/>
<div>
<div title='The theme you want the launcher to use.'>
<label className='text-lg'>Theme:</label>
<select
className='ml-2 bg-(--col2) border border-(--col4) rounded-md'

View File

@@ -3,4 +3,5 @@ export type SettingProps = {
value: boolean
onChange: (val: boolean) => void
className?: string
title?: string
}