Skip to content

Commit

Permalink
+ performance
Browse files Browse the repository at this point in the history
  • Loading branch information
dragoonDorise committed Nov 10, 2024
1 parent 7af3442 commit 0519f29
Show file tree
Hide file tree
Showing 2 changed files with 53 additions and 20 deletions.
70 changes: 53 additions & 17 deletions src/components/Game.tsx
Original file line number Diff line number Diff line change
@@ -1,38 +1,74 @@
import { VFC, useState, useEffect } from "react";
import { VFC, useState, useEffect, useRef } from "react";
import { Button } from "decky-frontend-lib";

const Game = ({ item, game, random, launchGame, fixArtwork, loadMore, setIsFocus, isFocus }) => {
const Game = ({ item, game, random, launchGame, fixArtwork, loadMore }) => {
const [isFocus, setIsFocus] = useState(false);
const [isVisible, setIsVisible] = useState(false);
const targetRef = useRef(null);

useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
setIsVisible(entry.isIntersecting);
},
{
root: null, // viewport
rootMargin: "0px", // no margin
threshold: 0.5, // 50% of target visible
}
);

if (targetRef.current) {
observer.observe(targetRef.current);
}

// Clean up the observer
return () => {
if (targetRef.current) {
observer.unobserve(targetRef.current);
}
};
}, []);

return (
<Button
ref={targetRef}
className="game"
onGamepadFocus={() => setIsFocus(true)}
onGamepadBlur={() => setIsFocus(false)}
onClick={() => launchGame(item.launcher, game.filename, game.name)}
onSecondaryActionDescription={"Fix Artwork"}
onOKActionDescription="Launch"
onCancelActionDescription="Exit"
onSecondaryButton={() => fixArtwork(game.name)}
onButtonDown={() => loadMore()}>
{isFocus && (
<div
className="_1sTuvqUAeproqHEae5sn9z"
style={{
position: "absolute",
width: "100%",
height: "100%",
top: "0px",
left: "0px",
}}></div>
{isVisible && (
<img loading="lazy" className="game__img" src={`${game.img}?id=${random}`} alt={game.name.replace(/_/g, " ")} />
)}
<img loading="lazy" className="game__img" src={`${game.img}?id=${random}`} alt={game.name.replace(/_/g, " ")} />
{/* <img
loading="lazy"
className="game__cartridge"
src={`/customimages/emudeck/default/${game.platform}.png?id=${random}`}
alt="Super Nintendo"
/> */}
<img loading="lazy" className="game__bg" src={`${game.img}?id=${random}`} alt={game.name} />
<div className="game__file">
<span>{game.file}</span>
</div>
{isFocus && (
<>
<div
className="_1sTuvqUAeproqHEae5sn9z"
style={{
position: "absolute",
width: "100%",
height: "100%",
top: "0px",
left: "0px",
}}></div>

<img loading="lazy" className="game__bg" src={`${game.img}?id=${random}`} alt={game.name} />
<div className="game__file">
<span>{game.file}</span>
</div>
</>
)}
</Button>
);
};
Expand Down
3 changes: 0 additions & 3 deletions src/components/Games.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,6 @@ const Games: VFC<{ serverAPI: any }> = ({ serverAPI }) => {
});
const [percentage, setPercentage] = useState(0);
const [searchTerm, setSearchTerm] = useState("");
const [isFocus, setIsFocus] = useState(false);
const [currentTab, setCurrentTab] = useState<string>("Tab1");
const [visibleCount, setVisibleCount] = useState(20);

Expand Down Expand Up @@ -356,8 +355,6 @@ const Games: VFC<{ serverAPI: any }> = ({ serverAPI }) => {
launchGame={launchGame}
fixArtwork={fixArtwork}
loadMore={loadMore}
setIsFocus={setIsFocus}
isFocus={isFocus}
/>
);
})}
Expand Down

0 comments on commit 0519f29

Please sign in to comment.