TheoryOfNekomata
/
game-gallery

import type { NextPage } from 'next'
import {GetServerSideProps} from 'next';
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[],
}

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>
        <title>Flash Games</title>
        <style>{`
          body {
            background-color: #eee;
          }
        
          @media (min-width: 720px) {
            .games {
              grid-template-columns: 1fr 1fr;
            }
          }
          
          .foo {
            object-fit: cover;
            object-position: center;
          }
        `}</style>
      </Head>
      <div
        style={{
          width: '100%',
          maxWidth: 720,
          margin: '0 auto',
          padding: '0 2rem',
          boxSizing: 'border-box',
        }}
      >
        <ul
          className="games"
          style={{
            padding: 0,
            margin: '2rem 0',
            display: 'grid',
            gap: '2rem',
            gridGap: '2rem',
          }}
        >
          {
            displayGames.map((g) => (
              <li
                key={g.id}
                style={{
                  display: 'block',
                }}
              >
                <Link
                  href={{
                    pathname: '/games/[id]',
                    query: {
                      id: g.id,
                    },
                  }}
                  passHref
                >
                  <a
                    href={`/games/${g.id}`}
                    style={{
                      display: 'block',
                      height: '12rem',
                      position: 'relative',
                      overflow: 'hidden',
                      borderRadius: '0.25rem',
                      border: '1px solid #ddd',
                      boxShadow: '0.125rem 0.25rem 0.25rem rgba(0,0,0,0.0625)'
                    }}
                  >
                    <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',
                        bottom: 0,
                        left: 0,
                        width: '100%',
                        textAlign: 'center',
                        backgroundColor: 'white',
                        padding: '0.5rem 0',
                        boxSizing: 'border-box',
                      }}
                    >
                      {g.name}
                    </div>
                  </a>
                </Link>
              </li>
            ))
          }
        </ul>
      </div>
    </>
  )
}

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const response = await fetch('http://localhost:3000/api/games');
  if (response.status !== 200) {
    return {
      notFound: true,
    }
  }

  const games = await response.json();
  return {
    props: {
      games,
    }
  }
}

export default GamesPage