Push new inprogress pygame powered section

Author: andrewhong04

src/components/powered-card.tsx

@@ -1,8 +1,9 @@
 import styles from '@/styles/powered-card.module.css';
+import Image from 'next/image';
 
 export default function PoweredCard(props: any) {
   return (
-    <div className={styles.card}>
+    <div className={styles.card} style={{ backgroundImage: `url(${props.image})` }}>
       <a href={props.link}>
         <div className={styles.name}>{props.name}</div>
         <div className={styles.author}>{props.author}</div>

src/components/powered.tsx

@@ -50,43 +50,19 @@ const games = [
 class Powered extends React.Component<any, any> {
   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 });
   }
 
   render() {
-    // TODO: clean this up
-    if (this.state.currentGameId === undefined) {
-      this.setState({ currentGameId: 0 });
-    }
-
-    var currentGame = games[this.state.currentGameId];
-    if (currentGame === undefined) {
-      currentGame = games[0];
-    }
-
     return (
-      <div
-        className={styles.powered}
-        style={{
-          backgroundImage: `url(${currentGame.image})`,
-        }}
-      >
-        <div className={styles.poweredcontainer}>
+      <div className={styles.powered}>
+        <div>
           <div className={styles.header}>Pygame Powered</div>
           Over the many years pygame has been around, there have been amazing projects created by the community.
           <div className={styles.poweredcards}>
             {games.map((data, key) => {
               return (
-                <div key={key} onMouseEnter={this.changeBackground} data-info={key}>
-                  <PoweredCard name={data.name} author={data.author} link={data.mainlink} />
+                <div key={key}>
+                  <PoweredCard name={data.name} author={data.author} link={data.mainlink} image={data.image} />
                 </div>
               );
             })}

src/styles/powered-card.module.css

@@ -1,6 +1,9 @@
 .card {
-  margin: 20px;
-  padding: 15px;
+  width: 384px;
+  height: 208px;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
 }
 
 .card:hover {
@@ -12,4 +15,9 @@
 .name {
   font-size: 1.5rem;
   font-weight: 700;
+  display: none;
+}
+
+.author {
+  display: none;
 }

src/styles/powered.module.css

@@ -2,18 +2,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  min-height: 80vh;
-  background-color: grey;
-  background-blend-mode: multiply;
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: cover;
-  image-rendering: crisp-edges;
-}
-
-.poweredcontainer {
-  width: 1200px;
-  max-width: 90vw;
 }
 
 .header {
@@ -22,16 +10,7 @@
 }
 
 .poweredcards {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
   justify-content: center;
 }
-
-@media only screen and (max-width: 950px) {
-  .poweredcards {
-    display: block;
-  }
-  .powered {
-    padding-top: 50px;
-    padding-bottom: 50px;
-  }
-}