Revert "Push new inprogress pygame powered section"

This reverts commit 64c831b.

Author: andrewhong04

src/components/powered-card.tsx

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

src/components/powered.tsx

@@ -50,19 +50,43 @@ 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}>
-        <div>
+      <div
+        className={styles.powered}
+        style={{
+          backgroundImage: `url(${currentGame.image})`,
+        }}
+      >
+        <div className={styles.poweredcontainer}>
           <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}>
-                  <PoweredCard name={data.name} author={data.author} link={data.mainlink} image={data.image} />
+                <div key={key} onMouseEnter={this.changeBackground} data-info={key}>
+                  <PoweredCard name={data.name} author={data.author} link={data.mainlink} />
                 </div>
               );
             })}

src/styles/powered-card.module.css

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

src/styles/powered.module.css

@@ -2,6 +2,18 @@
   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 {
@@ -10,7 +22,16 @@
 }
 
 .poweredcards {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  display: flex;
   justify-content: center;
 }
+
+@media only screen and (max-width: 950px) {
+  .poweredcards {
+    display: block;
+  }
+  .powered {
+    padding-top: 50px;
+    padding-bottom: 50px;
+  }
+}