Skip to content

Fix: Pygame Powered section issue #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Hammad-hab wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Fix: Pygame Powered section issue #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ff80fb8
fix: page shows the same image for two or more games
Hammad-hab Dec 6, 2025
5c6b212
fix: change class component -> function component
Hammad-hab Dec 6, 2025
faf9c55
fix: re-added lock file
MayorEmpror Dec 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

86 changes: 35 additions & 51 deletions src/components/powered.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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',
Expand Down Expand Up @@ -41,61 +42,44 @@ 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 });
}
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 (
<>
<Head>
{games.map((data, key) => (
<link key={key} rel="preload" href={data.image} as="image" />
))}
</Head>

return (
<>
<Head>
{games.map((data, key) => {
return <link key={key} rel="preload" href={data.image} as="image" />;
})}
</Head>
<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} onMouseEnter={this.changeBackground} data-info={key}>
<PoweredCard name={data.name} author={data.author} link={data.mainlink} />
</div>
);
})}
</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) => (
<div key={key} onMouseEnter={() => changeBackground(key)} data-info={key}>
<PoweredCard name={data.name} author={data.author} link={data.mainlink} />
</div>
))}
</div>
</div>
</>
);
}
}
</div>
</>
);
};

export default Powered;