|
|
|
@@ -4,6 +4,7 @@ import {Game} from '../../utils/games'; |
|
|
|
import Link from 'next/link'; |
|
|
|
import Head from 'next/head'; |
|
|
|
import Image from 'next/image'; |
|
|
|
import {useState} from 'react'; |
|
|
|
|
|
|
|
type HomeProps = { |
|
|
|
games: Game[], |
|
|
|
@@ -12,6 +13,15 @@ type HomeProps = { |
|
|
|
const GamesPage: NextPage<HomeProps> = ({ |
|
|
|
games, |
|
|
|
}) => { |
|
|
|
const [displayGames, setDisplayGames] = useState(games); |
|
|
|
|
|
|
|
const handleImageError = (game: Game) => () => { |
|
|
|
setDisplayGames((games) => games.map(g => ({ |
|
|
|
...g, |
|
|
|
thumbnail: g.id === game.id ? undefined : g.thumbnail, |
|
|
|
}))) |
|
|
|
} |
|
|
|
|
|
|
|
return ( |
|
|
|
<> |
|
|
|
<Head> |
|
|
|
@@ -53,7 +63,7 @@ const GamesPage: NextPage<HomeProps> = ({ |
|
|
|
}} |
|
|
|
> |
|
|
|
{ |
|
|
|
games.map((g) => ( |
|
|
|
displayGames.map((g) => ( |
|
|
|
<li |
|
|
|
key={g.id} |
|
|
|
style={{ |
|
|
|
@@ -81,12 +91,46 @@ const GamesPage: NextPage<HomeProps> = ({ |
|
|
|
boxShadow: '0.125rem 0.25rem 0.25rem rgba(0,0,0,0.0625)' |
|
|
|
}} |
|
|
|
> |
|
|
|
<Image |
|
|
|
alt={g.name} |
|
|
|
src={`/games/${g.id}/${g.thumbnail}`} |
|
|
|
layout="fill" |
|
|
|
className="foo" |
|
|
|
/> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
width: '100%', |
|
|
|
height: '100%', |
|
|
|
backgroundColor: '#ddd', |
|
|
|
}} |
|
|
|
> |
|
|
|
{ |
|
|
|
g.thumbnail |
|
|
|
&& ( |
|
|
|
<Image |
|
|
|
alt={g.name} |
|
|
|
src={`/games/${g.id}/${g.thumbnail}`} |
|
|
|
layout="fill" |
|
|
|
className="foo" |
|
|
|
onError={handleImageError(g)} |
|
|
|
/> |
|
|
|
) |
|
|
|
} |
|
|
|
{ |
|
|
|
!g.thumbnail |
|
|
|
&& ( |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
fontSize: '10rem', |
|
|
|
display: 'grid', |
|
|
|
placeContent: 'center', |
|
|
|
width: '100%', |
|
|
|
height: '100%', |
|
|
|
opacity: 0.125, |
|
|
|
filter: 'grayscale(1)', |
|
|
|
overflow: 'hidden', |
|
|
|
lineHeight: 1, |
|
|
|
}} |
|
|
|
> |
|
|
|
🎮 |
|
|
|
</div> |
|
|
|
) |
|
|
|
} |
|
|
|
</div> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
position: 'absolute', |
|
|
|
@@ -113,12 +157,13 @@ const GamesPage: NextPage<HomeProps> = ({ |
|
|
|
} |
|
|
|
|
|
|
|
export const getServerSideProps: GetServerSideProps = async (ctx) => { |
|
|
|
const response = await fetch(`http://localhost:3000/api/games`); |
|
|
|
const response = await fetch('http://localhost:3000/api/games'); |
|
|
|
if (response.status !== 200) { |
|
|
|
return { |
|
|
|
notFound: true, |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const games = await response.json(); |
|
|
|
return { |
|
|
|
props: { |
|
|
|
|
