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

Use proper way of detecting when a user hovers for games/installs page

Browse Source
This commit is contained in:
Lncvrt
2026-01-07 19:01:58 -07:00
parent a3e9067ba0
commit 3dc24ab3d7
3 changed files with 18 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/Installs.css
View File

@@ -11,3 +11,13 @@
.downloads-entry {
@apply flex justify-between items-center m-2 p-2 rounded-lg text-gray-200 text-lg transition-colors bg-(--col2) hover:bg-(--col3) border border-(--col4) hover:border-(--col5);
}
.downloads-entry .entry-info-item,
.downloads-entry .button {
@apply bg-(--col3) border-(--col5) hover:bg-(--col5) hover:border-(--col7) disabled:text-gray-300 disabled:bg-(--col2) disabled:border-(--col6) disabled:hover:text-gray-100 disabled:hover:bg-(--col3) disabled:hover:border-(--col7);
}
.downloads-entry:hover .entry-info-item,
.downloads-entry:hover .button {
@apply bg-(--col4) border-(--col6) hover:bg-(--col6) hover:border-(--col8) disabled:text-gray-300 disabled:bg-(--col2) disabled:border-(--col7) disabled:hover:text-gray-100 disabled:hover:bg-(--col4) disabled:hover:border-(--col8);
}

21
src/app/game/page.tsx
View File

@@ -24,7 +24,6 @@ export default function Installs () {
} = useGlobal()
const params = useSearchParams()
const [hoveredIds, setHoveredIds] = useState<string[]>([])
useEffect(() => {
if (!showPopup) return
@@ -106,10 +105,6 @@ export default function Installs () {
setShowPopup(true)
setFadeOut(false)
}}
onMouseEnter={() => setHoveredIds(prev => [...prev, entry])}
onMouseLeave={() =>
setHoveredIds(prev => prev.filter(i => i !== i))
}
>
<div className='h-18 w-screen relative'>
<p className='text-2xl'>
@@ -118,9 +113,7 @@ export default function Installs () {
</p>
<div
className={`entry-info-item absolute left-0 bottom-0 ${
hoveredIds.includes(entry) ? 'btntheme3' : 'btntheme2'
}`}
className='entry-info-item absolute left-0 bottom-0'
title='The date the game was installed in MM/dd/yyyy format'
>
<p>
@@ -134,9 +127,7 @@ export default function Installs () {
<div className='flex gap-2 absolute right-0 bottom-0'>
<button
className={`button ${
hoveredIds.includes(entry) ? 'btntheme3' : 'btntheme2'
}`}
className='button'
onClick={e => {
e.stopPropagation()
setManagingVersion(entry)
@@ -149,9 +140,7 @@ export default function Installs () {
View Info
</button>
<button
className={`button ${
hoveredIds.includes(entry) ? 'btntheme3' : 'btntheme2'
}`}
className='button'
hidden={
!normalConfig?.settings.useLegacyInteractButtons
}
@@ -167,9 +156,7 @@ export default function Installs () {
Manage
</button>
<button
className={`button ${
hoveredIds.includes(entry) ? 'btntheme3' : 'btntheme2'
}`}
className='button'
onClick={e => {
e.stopPropagation()
const verInfo = getVersionInfo(entry)

21
src/app/page.tsx
View File

@@ -28,7 +28,6 @@ export default function Installs () {
} = useGlobal()
const router = useRouter()
const [hoveredIds, setHoveredIds] = useState<number[]>([])
useEffect(() => {
if (!showPopup) return
@@ -82,19 +81,13 @@ export default function Installs () {
if (normalConfig?.settings.useLegacyInteractButtons) return
router.push('/game?id=' + i.id)
}}
onMouseEnter={() => setHoveredIds(prev => [...prev, i.id])}
onMouseLeave={() =>
setHoveredIds(prev => prev.filter(e => e !== i.id))
}
>
<div className='h-18 w-screen relative'>
<p className='text-2xl'>{i.name}</p>
<div className='flex gap-2 absolute left-0 bottom-0'>
<div
className={`entry-info-item ${
hoveredIds.includes(i.id) ? 'btntheme3' : 'btntheme2'
}`}
className='entry-info-item'
title='The amount of versions installed of this game in installed/installable format.'
>
<p>
@@ -107,9 +100,7 @@ export default function Installs () {
</p>
</div>
<div
className={`entry-info-item ${
hoveredIds.includes(i.id) ? 'btntheme3' : 'btntheme2'
}`}
className='entry-info-item'
hidden={!i.official}
title='This game is official.'
>
@@ -117,9 +108,7 @@ export default function Installs () {
<p>Official</p>
</div>
<div
className={`entry-info-item ${
hoveredIds.includes(i.id) ? 'btntheme3' : 'btntheme2'
}`}
className='entry-info-item'
hidden={i.official}
title={
i.verified
@@ -136,9 +125,7 @@ export default function Installs () {
</div>
<Link
className={`button absolute right-0 bottom-0 ${
hoveredIds.includes(i.id) ? 'btntheme3' : 'btntheme2'
}`}
className='button absolute right-0 bottom-0'
href={'/game?id=' + i.id}
hidden={!normalConfig?.settings.useLegacyInteractButtons}
title='Click to view game installs'