Pokeformula
January 2024
As a frontend developer, my task was to be the quality assurance where I check if we have what we needed for PokeFormula. PokeFormula is where you choose a pokemon, check stats, and battle 1v1. Earn Pokemon TCG cards with victories! We used by Next.js, CSS, TypeScript, Cypress and PokeAPI.
Cypress
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
context('Home page', () => {
beforeEach(() => {
cy.visit('http://localhost:3000/')
})
it('should contain main content', () => {
cy.get('main').should('exist');
});
it('should contain a favicon', () => {
cy.get('head').find('link[rel="shortcut icon"]').should('have.attr', 'href', './Images/logo.png');
});
it('should container h1', () => {
cy.get('h1').contains('PokeFormula')
})
it('should contain title', () => {
cy.title().should('eq', 'PokeFormula')
})
it('should contain a link to the battle page in the header', () => {
cy.get('header').find('a[href="/battle"]').should('exist');
});
it('should contain a header on the page', () => {
cy.get('header').should('exist')
})
it('should contain a footer on the page', () => {
cy.get('footer').should('exist')
})
})
I wrote Cypress tests to check our home page's functionality. Each test confirms elements like main content, favicon, headers, footers, and links to other pages. These ensure our app works as expected and displays essential components correctly.
Battle Page Outcome
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
export default function Outcome({outcome, func1, func2, exit, button1, button2}: BattleProps){
return (
<>
{outcome === 'win' ? (
<div className={styles.container}>
// shows win component
<Tcg />
<div className={styles.buttonContainer}>
<Button type="outcome" func={func1} name={button1} link=''/>
<Button type="outcome" func={func2} name={button2} link=''/>
</div>
</div>
) : outcome === 'lose' ? (
<div className={styles.container}>
// shows lose component
<div className={styles.buttonContainer}>
<Button type="outcome" func={func1} name={button1} link=''/>
<Button type="outcome" func={func2} name={button2} link=''/>
</div>
</div>
) : null}
</>
);
}In this component I made called `Outcome`, I handle different outcomes based on the `outcome` prop. If it's "win", I display a container with a win component and two buttons. If it's "lose", I show two buttons only. The functions `func1` and `func2` are associated with these buttons. If `outcome` isn't "win" or "lose", I render nothing.
1
2
3
4
5
6
7
const [battleOutcome, setBattleOutcome] = useState(BattleOutcome.NULL);
enum BattleOutcome {
WIN,
LOSE,
NULL
}I created an enum called `BattleOutcome`. It lists three outcomes: `WIN`, `LOSE`, and `NULL`. This enum helps manage different battle results in a concise and clear manner.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{/* should return something if you win */}
{battleOutcome === BattleOutcome.WIN &&
<Modal
isOpen={modalIsOpen}
onRequestClose={home}
shouldCloseOnOverlayClick={false}
style={{
overlay: {
backgroundColor: "rgba(0,0,0,0.2)",
},
content: {
width: "60%",
maxWidth: "30rem",
height: "85vh",
margin: "auto",
padding: "0px",
border: "none",
},
}}
>
<Outcome outcome="win" button1="Restart" func1={handleRestartBattle} button2="Home" func2={home} exit={exit}/>
</Modal>
}When I win the battle, I show a modal using the `Modal` library. Inside the modal, I display the outcome component with the prop `outcome` set to "win". This component includes two buttons: "Restart" and "Home", linked to the functions handleRestartBattle and home. The exit function is also passed to handle closing the modal.
This is the same for when you lose except "Outcome outcome="win"", it will be "Outcome outcome="lose"".
Challenges
- Dealing with data from PokeAPI and how we wanted to handle was a challenge. In the PokeApi, we have to grab the name and url first and then use the name to grab the information. Making the 3d components was also harder than expected but got it to work
Outcome
PokeFormula lets you pick and fight Pokémon, but it can be better. We can make it easier to use, faster, and more fun. We might add cool features like multiplayer battles or animation. Overall, PokeFormula has room to grow and become even more awesome!
