diff --git a/package-lock.json b/package-lock.json index bf3aa37..2d5d7c3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3629,4 +3629,4 @@ } } } -} +} \ No newline at end of file diff --git a/src/components/powered.tsx b/src/components/powered.tsx index 76718b8..af67993 100644 --- a/src/components/powered.tsx +++ b/src/components/powered.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState, useCallback } from 'react'; import Head from 'next/head'; import styles from '@/styles/powered.module.css'; import drawnDownAbyss1 from '@/assets/drawn-down-abyss-1.png'; @@ -7,6 +7,7 @@ import resync1 from '@/assets/resync-1.png'; import tuxemon1 from '@/assets/tuxemon-1.png'; import PoweredCard from './powered-card'; + const games = [ { name: 'Drawn Down Abyss', @@ -41,61 +42,44 @@ const games = [ }, ]; -class Powered extends React.Component { - constructor(props: any) { - super(props); - this.state = { - currentGameId: 0, - }; - this.changeBackground = this.changeBackground.bind(this); - } - changeBackground(e: any) { - const data = Object.assign({}, e.target.dataset); - this.setState({ currentGameId: data.info }); - } +const Powered: React.FC = () => { + const [currentGameId, setCurrentGameId] = useState(0); + + const changeBackground = useCallback((id: number) => { + setCurrentGameId(id); + }, []); - render() { - // TODO: clean this up - if (this.state.currentGameId === undefined) { - this.setState({ currentGameId: 0 }); - } + const currentGame = games[currentGameId]; - var currentGame = games[this.state.currentGameId]; - if (currentGame === undefined) { - currentGame = games[0]; - } + return ( + <> + + {games.map((data, key) => ( + + ))} + - return ( - <> - - {games.map((data, key) => { - return ; - })} - -
-
-
Pygame Powered
- Over the many years pygame has been around, there have been amazing projects created by the community. -
- {games.map((data, key) => { - return ( -
- -
- ); - })} -
+
+
+
Pygame Powered
+ Over the many years pygame has been around, there have been amazing projects created by the community. +
+ {games.map((data, key) => ( +
changeBackground(key)} data-info={key}> + +
+ ))}
- - ); - } -} +
+ + ); +}; export default Powered;