Skip to content

Commit 802f208

Browse files
committed
Possibilidade de escolher o personagem principal
1 parent 8ee59e0 commit 802f208

19 files changed

Lines changed: 342 additions & 154 deletions

README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,11 @@ Este projeto foi desenvolvido utilizando as seguintes tecnologias:
3636
- [Material-UI](https://material-ui.com/)
3737
- [Material-UI Icons](https://material-ui.com/pt/components/icons/)
3838
- [Mui-Datatable](https://github.com/gregnb/mui-datatables)
39+
- [Js-Cookie](https://github.com/js-cookie/js-cookie)
3940

4041
## 🚀 Iniciando localmente em seu PC
4142

42-
O projeto utiliza autenticação do google e banco de dados pelo firebase, ambos para armazenar a pontuação dos jogadores do modo história e exibi-la em um [ranking](https://react-battle-rpg.web.app/ranking). Você deve configurar o firebase para usar todos os recursos atuais do projeto ou utilizar a [versão 1.2.0 beta](https://github.com/gonribeiro/React-Battle-Rpg/releases/tag/v1.2.0-beta) (Esta versão pode ser executada seguindo apenas os passos abaixo).
43+
O projeto utiliza autenticação do google e banco de dados pelo firebase, ambos para armazenar a pontuação dos jogadores do modo história e exibi-la em um [ranking](https://react-battle-rpg.web.app/ranking). Você deve configurar o firebase para usar todos os recursos atuais do projeto ou utilizar a [versão 1.2.0 beta](https://github.com/gonribeiro/React-Battle-Rpg/releases/tag/v1.2.0-beta) (Esta antiga versão pode ser executada seguindo apenas os passos abaixo).
4344

4445
Clone o projeto e acesse a pasta.
4546

package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"@types/react": "^17.0.0",
1515
"@types/react-dom": "^17.0.0",
1616
"firebase": "^8.7.0",
17-
"js-cookie": "^2.2.1",
17+
"js-cookie": "^3.0.0",
1818
"mui-datatables": "^3.7.7",
1919
"react": "^17.0.2",
2020
"react-dom": "^17.0.2",
@@ -48,7 +48,7 @@
4848
]
4949
},
5050
"devDependencies": {
51-
"@types/js-cookie": "^2.2.6",
51+
"@types/js-cookie": "^2.2.7",
5252
"@types/react-router-dom": "^5.1.7"
5353
}
5454
}

public/img/monsters/bulbasaur.jpg

242 KB
Loading

public/img/monsters/charmander.jpg

66.5 KB
Loading

public/img/monsters/squirtle.jpg

-278 KB
Loading
Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { CardActions, Fab } from '@material-ui/core';
2+
3+
type buttonProps = {
4+
monsterNumber: number;
5+
selected: number;
6+
}
7+
8+
const ButtonSelectMonster: React.FC<buttonProps> = (props) => {
9+
return (
10+
<CardActions>
11+
<Fab size="small" color={props.monsterNumber === props.selected ? 'primary' : 'inherit'} variant="extended">
12+
{props.monsterNumber === props.selected ? 'Salvo!' : 'Escolho você!'}
13+
</Fab>
14+
</CardActions>
15+
)
16+
}
17+
18+
export default ButtonSelectMonster;

src/components/Fighter.tsx

Lines changed: 0 additions & 95 deletions
This file was deleted.

src/components/Monster.tsx

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import {
2+
Card,
3+
CardActionArea,
4+
CardContent,
5+
CardMedia,
6+
Typography
7+
} from '@material-ui/core';
8+
9+
type MonsterProps = {
10+
monster: {
11+
id: string;
12+
name: string;
13+
attack: number;
14+
defense: number;
15+
life: number;
16+
monsterImg: string;
17+
};
18+
}
19+
20+
const Monster: React.FC<MonsterProps> = (props) => {
21+
return (
22+
<Card>
23+
<CardActionArea>
24+
<CardMedia
25+
image={props.monster.monsterImg}
26+
style={{
27+
height: 140
28+
}}
29+
/>
30+
<CardContent>
31+
<Typography gutterBottom variant="h5" component="h2">
32+
{props.monster.name}
33+
</Typography>
34+
<Typography variant="body2" color="textSecondary" component="p">
35+
{props.monster.life >= 0 ? props.monster.life : '0'} HP
36+
{props.monster.attack} Ataque
37+
{props.monster.defense} Defesa
38+
</Typography>
39+
</CardContent>
40+
</CardActionArea>
41+
</Card>
42+
)
43+
}
44+
45+
export default Monster;

src/contexts/SaveStoryContext.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ type StoryType = {
44
remedy: number;
55
maximumPower: number;
66
yourMonsterNumber: number;
7+
monsterImage: string;
78
opponentMonsterNumber: number;
89
storyNumber: number;
910
inGame: boolean;
@@ -26,6 +27,7 @@ export function SaveStoryContextProvider(props: StoryContextProviderProps) {
2627
remedy: 2,
2728
maximumPower: 2,
2829
yourMonsterNumber: 0,
30+
monsterImage: '',
2931
opponentMonsterNumber: 0,
3032
storyNumber: 0,
3133
inGame: false,
@@ -37,6 +39,7 @@ export function SaveStoryContextProvider(props: StoryContextProviderProps) {
3739
remedy: value.remedy,
3840
maximumPower: value.maximumPower,
3941
yourMonsterNumber: value.yourMonsterNumber,
42+
monsterImage: value.monsterImage,
4043
opponentMonsterNumber: value.opponentMonsterNumber,
4144
storyNumber: value.storyNumber,
4245
inGame: value.inGame,

src/hooks/useMatch.tsx

Lines changed: 35 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useEffect, useState } from "react";
22
import { useHistory, useLocation } from "react-router-dom";
3+
import Cookies from "js-cookie";
34

45
import { useAuth } from '../hooks/useAuth';
56
import { useSaveStory } from '../hooks/useSaveStory';
@@ -28,6 +29,9 @@ export function useMatch() {
2829
const { storyValue, updateStoryValue } = useSaveStory();
2930
const history = useHistory();
3031
const locationUrl = useLocation();
32+
const [selectedMonster, setSelectedMonster] = useState(
33+
Cookies.get('monsterSelected') === undefined ? 0 : Number(Cookies.get('monsterSelected'))
34+
);
3135

3236
const [match, setMatch] = useState<MatchType>({
3337
turn: true,
@@ -38,8 +42,8 @@ export function useMatch() {
3842
const [battleSituation, setBattleSituation] = useState(String);
3943
const [battleStatus, setBattleStatus] = useState(String);
4044

41-
const [yourMonster, setYourMonster] = useState<MonsterType>({...yourMonsterStorage[0]});
4245
const [opponentMonster, setOpponentMonster] = useState<MonsterType>({...opponentMonsterStorage[0]});
46+
const [yourMonster, setYourMonster] = useState<MonsterType>({...yourMonsterStorage[selectedMonster]});
4347

4448
useEffect(() => {
4549
if (locationUrl.pathname === '/story-battle') {
@@ -52,19 +56,33 @@ export function useMatch() {
5256
})
5357
} else { // treino
5458
setOpponentMonster({...opponentMonsterStorage[match.opponentMonsterNumber]});
55-
setYourMonster({...yourMonsterStorage[0]});
59+
setYourMonster({
60+
...yourMonsterStorage[selectedMonster]
61+
});
5662
}
5763
}, [match.opponentMonsterNumber]);
5864

65+
function selectMonster(number: number) {
66+
setSelectedMonster(number);
67+
68+
Cookies.set('monsterSelected', String(number));
69+
}
70+
5971
async function gameMode(mode: String) {
60-
if (mode === 'new-game') {
72+
if (mode === 'new-game' || mode === 'select-monster') {
6173
if (!user) {
6274
await signInWithGoogle();
6375
}
6476

77+
if (mode === 'select-monster') {
78+
history.push('/select-monster');
79+
return;
80+
}
81+
6582
updateStoryValue({ // Parâmetros para novo jogo do modo história
6683
opponentMonsterNumber: 0,
67-
yourMonsterNumber: 0,
84+
yourMonsterNumber: selectedMonster,
85+
monsterImage: yourMonsterStorage[selectedMonster].monsterImg,
6886
storyNumber: 0,
6987
remedy: 2,
7088
maximumPower: 2,
@@ -107,14 +125,16 @@ export function useMatch() {
107125
setMatch({...match, turn: !match.turn});
108126
}
109127

110-
function useItem(item: string) {
128+
function item(item: string) {
111129
if (item === 'remedy' && match.remedy > 0) {
112130
if (locationUrl.pathname === '/story-battle') {
113131
updateStoryValue({...storyValue, remedy: storyValue.remedy - 1});
114132
}
115133

116134
setMatch({...match, remedy: match.remedy - 1, turn: false});
117-
setYourMonster({...yourMonster, life: yourMonster.id === 'inicial' ? 6 : 12});
135+
setYourMonster({...yourMonster,
136+
life: Number(yourMonster.id) - 1 === selectedMonster ? yourMonsterStorage[selectedMonster].life : 12
137+
});
118138
setBattleSituation(yourMonster.name + ' restaurou a vida!');
119139
} else if (item === 'maximumPower' && match.maximumPower > 0){
120140
if (locationUrl.pathname === '/story-battle') {
@@ -131,32 +151,32 @@ export function useMatch() {
131151

132152
function aftermath(attackerName: string) {
133153
// Modo história
134-
// @todo não deveria atualizar informações da história aqui? rever
154+
// @todo useMatch não deveria atualizar informações do modo história
135155
if (locationUrl.pathname === '/story-battle') {
136156
let score = storyValue.score + 100 + (storyValue.remedy * 100) + (storyValue.maximumPower * 100) + (yourMonster.life * 10);
137157

138-
if (opponentMonster.life <= 0 && opponentMonster.id !== 'boss1') { // Próxima história
158+
if (opponentMonster.life <= 0 && opponentMonster.id !== '5') { // Próxima história
139159
updateStoryValue({
140160
...storyValue,
141161
storyNumber: storyStorage.findIndex(x => x.callBattle === storyValue.opponentMonsterNumber) + 1,
142162
opponentMonsterNumber: storyValue.opponentMonsterNumber + 1,
143163
score: score
144164
});
145165
} else if (
146-
yourMonster.life <= 0 && opponentMonster.id === 'boss1' && yourMonster.id === 'inicial'
166+
yourMonster.life <= 0 && opponentMonster.id === '5' && yourMonster.id !== '4'
147167
) { // Ultima chance
148168
updateStoryValue({
149169
...storyValue,
150170
storyNumber: storyStorage.findIndex(x => x.id === 'part5'),
151-
yourMonsterNumber: 1
171+
yourMonsterNumber: 3
152172
});
153173
} else if (yourMonster.life <= 0) {
154174
updateStoryValue({
155175
...storyValue,
156176
storyNumber: storyStorage.findIndex(x => x.id === 'bad-ending'),
157177
inGame: false
158178
});
159-
} else if (opponentMonster.life <= 0 && yourMonster.id === 'yourMonster1') {
179+
} else if (opponentMonster.life <= 0 && yourMonster.id === '4') {
160180
updateStoryValue({
161181
...storyValue,
162182
storyNumber: storyStorage.findIndex(x => x.id === 'good-ending'),
@@ -200,12 +220,14 @@ export function useMatch() {
200220
return {
201221
gameMode,
202222
fighting,
203-
useItem,
223+
item,
204224
continueGame,
205225
match,
206226
battleSituation,
207227
battleStatus,
208228
yourMonster,
209-
opponentMonster
229+
opponentMonster,
230+
selectMonster,
231+
selectedMonster
210232
};
211233
}

0 commit comments

Comments
 (0)