Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Ondřej Bazala
PV247
Commits
bd4bafd2
Unverified
Commit
bd4bafd2
authored
Nov 22, 2021
by
Michal Čaniga
Browse files
Rework home carousel, game lost modal, polish
parent
410071e2
Changes
13
Hide whitespace changes
Inline
Side-by-side
public/placeholder.png
0 → 100644
View file @
bd4bafd2
11.9 KB
src/pages/Forbidden.tsx
View file @
bd4bafd2
...
...
@@ -2,8 +2,8 @@ import { FrownOutlined } from '@ant-design/icons';
import
{
Result
}
from
'
antd
'
;
import
{
useState
}
from
'
react
'
;
import
{
SignInButton
,
SignUpButton
}
from
'
./Home/AuthButtons
'
;
import
{
AuthModal
,
AuthModalType
}
from
'
./Home/AuthModal
'
;
import
{
SignInButton
,
SignUpButton
}
from
'
./Home/Home
'
;
export
const
Forbidden
=
()
=>
{
const
[
isAuthModalVisible
,
setIsAuthModalVisible
]
=
useState
(
false
);
...
...
src/pages/Game/BottomBar.tsx
View file @
bd4bafd2
...
...
@@ -3,7 +3,6 @@ import { useMemo } from 'react';
import
{
getUserFood
}
from
'
../../data/food
'
;
import
{
getUserPokeballs
}
from
'
../../data/pokeballs
'
;
import
{
useLoggedInUser
}
from
'
../../hooks/useLoggedInUser
'
;
import
{
SetPokemonsAlive
,
SetScore
,
...
...
src/pages/Game/Canvas.tsx
View file @
bd4bafd2
...
...
@@ -67,7 +67,9 @@ const CanvasObject = ({
height
:
'
100%
'
,
display
:
'
flex
'
,
alignItems
:
'
center
'
,
justifyContent
:
'
center
'
justifyContent
:
'
center
'
,
fontWeight
:
'
bold
'
,
fontSize
:
18
}
}
>
{
label
}
...
...
src/pages/Game/Game.tsx
View file @
bd4bafd2
import
{
cloneDeep
,
set
,
union
}
from
'
lodash
'
;
import
{
cloneDeep
,
union
}
from
'
lodash
'
;
import
{
useEffect
,
useLayoutEffect
,
useState
}
from
'
react
'
;
import
{
catchReward
,
maxHearts
}
from
'
../../data/constants
'
;
...
...
@@ -12,7 +12,7 @@ import {
SetUserData
}
from
'
../../utils/commonTypes
'
;
import
{
getElementSize
}
from
'
../../utils/dom
'
;
import
{
updateUserDataInFirebase
,
UserData
}
from
'
../../utils/firebase
'
;
import
{
UserData
}
from
'
../../utils/firebase
'
;
import
{
Loading
}
from
'
../../utils/Loading
'
;
import
{
PokemonOnCanvas
}
from
'
../../utils/pokemonFetcher
'
;
...
...
@@ -97,8 +97,13 @@ const Game = ({ setGamePhase }: GameProps) => {
// check if esh died
useEffect
(()
=>
{
if
(
hearts
<=
0
)
{
onEshDeath
(
setGamePhase
,
userData
!
,
newUserData
!
,
score
!
,
seconds
);
if
(
hearts
<=
0
&&
userData
!==
undefined
&&
newUserData
!==
undefined
&&
score
!==
undefined
)
{
onEshDeath
(
setGamePhase
,
userData
,
newUserData
,
score
,
seconds
);
}
},
[
hearts
,
setGamePhase
,
userData
]);
...
...
src/pages/Game/GameLostModal.tsx
View file @
bd4bafd2
import
{
FrownOutlined
,
RocketOutlined
}
from
'
@ant-design/icons
'
;
import
{
FireOutlined
,
FrownOutlined
,
RetweetOutlined
,
RocketOutlined
}
from
'
@ant-design/icons
'
;
import
{
Modal
,
Typography
}
from
'
antd
'
;
import
{
useHistory
}
from
'
react-router-dom
'
;
import
{
useLoggedInUser
}
from
'
../../hooks/useLoggedInUser
'
;
import
{
useSelectedMenuKey
}
from
'
../../hooks/useMenu
'
;
import
{
Loading
}
from
'
../../utils/Loading
'
;
import
{
UserAchievemnt
}
from
'
../Leaderboard/UserAchievement
'
;
type
GameLostModalProps
=
{
visible
:
boolean
;
onOk
:
()
=>
void
};
export
const
GameLostModal
=
({
visible
,
onOk
}:
GameLostModalProps
)
=>
{
const
{
push
}
=
useHistory
();
const
[,
setSelectedMenuKey
]
=
useSelectedMenuKey
();
const
{
userData
}
=
useLoggedInUser
();
if
(
!
userData
)
{
return
<
Loading
/>;
}
return
(
<
Modal
title
=
{
null
}
title
=
{
<
span
>
<
FireOutlined
/>
You lost
</
span
>
}
visible
=
{
visible
}
okText
=
{
<
span
>
...
...
@@ -29,7 +47,15 @@ export const GameLostModal = ({ visible, onOk }: GameLostModalProps) => {
setSelectedMenuKey
(
'
leaderboard
'
);
}
}
>
<
Typography
>
You have been killed, try again?
</
Typography
>
<
Typography
>
<
UserAchievemnt
highestScore
=
{
userData
.
highestScore
}
highestSecondsAlive
=
{
userData
.
highestSecondsAlive
}
/>
<
div
style
=
{
{
textAlign
:
'
center
'
,
marginTop
:
5
,
fontSize
:
16
}
}
>
<
RetweetOutlined
/>
Try again?
</
div
>
</
Typography
>
</
Modal
>
);
};
src/pages/Game/Pokemon.tsx
deleted
100644 → 0
View file @
410071e2
import
{
Image
}
from
'
antd
'
;
type
PokemonProps
=
{
sprite
:
string
;
};
export
const
Pokemon
=
({
sprite
}:
PokemonProps
)
=>
{
<
Image
width
=
{
200
}
src
=
{
sprite
}
/>
;
};
src/pages/Game/TopBar.tsx
View file @
bd4bafd2
...
...
@@ -29,12 +29,14 @@ export const updateUserData = async (
actualScore
>
highestScore
?
actualScore
:
highestScore
;
const
newHighestSecondsAlive
=
seconds
>
highestSecondsAlive
?
seconds
:
highestSecondsAlive
;
await
updateUserDataInFirebase
(
oldUserData
.
id
!
,
{
...
newUserData
,
actualScore
,
highestScore
:
newHighestScore
,
highestSecondsAlive
:
newHighestSecondsAlive
});
if
(
oldUserData
.
id
!==
undefined
)
{
await
updateUserDataInFirebase
(
oldUserData
.
id
,
{
...
newUserData
,
actualScore
,
highestScore
:
newHighestScore
,
highestSecondsAlive
:
newHighestSecondsAlive
});
}
};
export
const
onEshDeath
=
async
(
...
...
@@ -73,9 +75,16 @@ export const TopBar = ({
<
Button
icon
=
{
<
CoffeeOutlined
/>
}
size
=
"large"
onClick
=
{
()
=>
onEshDeath
(
setGamePhase
,
userData
!
,
newUserData
!
,
score
!
,
seconds
)
}
style
=
{
{
marginTop
:
3
}
}
onClick
=
{
()
=>
{
if
(
userData
!==
undefined
&&
newUserData
!==
undefined
&&
score
!==
undefined
)
{
onEshDeath
(
setGamePhase
,
userData
,
newUserData
,
score
,
seconds
);
}
}
}
>
Retreat
</
Button
>
...
...
src/pages/Home/AuthButtons.tsx
0 → 100644
View file @
bd4bafd2
import
{
FormOutlined
,
LoginOutlined
}
from
'
@ant-design/icons
'
;
import
{
Button
}
from
'
antd
'
;
import
{
AuthModalType
}
from
'
./AuthModal
'
;
export
type
SetAuthModalType
=
React
.
Dispatch
<
React
.
SetStateAction
<
AuthModalType
|
undefined
>
>
;
export
type
SetIsAuthModalVisible
=
React
.
Dispatch
<
React
.
SetStateAction
<
boolean
>
>
;
type
AuthButtonProps
=
{
setAuthModalType
:
SetAuthModalType
;
setIsAuthModalVisible
:
SetIsAuthModalVisible
;
};
export
const
SignInButton
=
({
setAuthModalType
,
setIsAuthModalVisible
}:
AuthButtonProps
)
=>
(
<
Button
type
=
"primary"
onClick
=
{
()
=>
{
setAuthModalType
(
AuthModalType
.
SignIn
);
setIsAuthModalVisible
(
true
);
}
}
style
=
{
{
marginRight
:
10
}
}
>
<
LoginOutlined
/>
Sign in
</
Button
>
);
export
const
SignUpButton
=
({
setAuthModalType
,
setIsAuthModalVisible
}:
AuthButtonProps
)
=>
(
<
Button
type
=
"primary"
onClick
=
{
()
=>
{
setAuthModalType
(
AuthModalType
.
SignUp
);
setIsAuthModalVisible
(
true
);
}
}
style
=
{
{
marginRight
:
10
}
}
>
<
FormOutlined
/>
Sign Up
</
Button
>
);
src/pages/Home/Home.tsx
View file @
bd4bafd2
import
{
FormOutlined
,
LoginOutlined
}
from
'
@ant-design/icons
'
;
import
{
Button
,
Typography
}
from
'
antd
'
;
import
{
useMemo
,
useState
}
from
'
react
'
;
import
{
Typography
}
from
'
antd
'
;
import
{
useLoggedInUser
}
from
'
../../hooks/useLoggedInUser
'
;
import
usePageTitle
from
'
../../hooks/usePageTitle
'
;
import
{
AuthModal
,
AuthModalType
}
from
'
./AuthModal
'
;
import
{
HomeCarousel
}
from
'
./HomeCarousel
'
;
type
SetAuthModalType
=
React
.
Dispatch
<
React
.
SetStateAction
<
AuthModalType
|
undefined
>
>
;
type
SetIsAuthModalVisible
=
React
.
Dispatch
<
React
.
SetStateAction
<
boolean
>>
;
type
AuthButtonProps
=
{
setAuthModalType
:
SetAuthModalType
;
setIsAuthModalVisible
:
SetIsAuthModalVisible
;
};
export
const
SignInButton
=
({
setAuthModalType
,
setIsAuthModalVisible
}:
AuthButtonProps
)
=>
(
<
Button
type
=
"primary"
onClick
=
{
()
=>
{
setAuthModalType
(
AuthModalType
.
SignIn
);
setIsAuthModalVisible
(
true
);
}
}
style
=
{
{
marginRight
:
10
}
}
>
<
LoginOutlined
/>
Sign in
</
Button
>
);
export
const
SignUpButton
=
({
setAuthModalType
,
setIsAuthModalVisible
}:
AuthButtonProps
)
=>
(
<
Button
type
=
"primary"
onClick
=
{
()
=>
{
setAuthModalType
(
AuthModalType
.
SignUp
);
setIsAuthModalVisible
(
true
);
}
}
style
=
{
{
marginRight
:
10
}
}
>
<
FormOutlined
/>
Sign Up
</
Button
>
);
const
Home
=
()
=>
{
usePageTitle
(
'
Home
'
);
const
{
user
}
=
useLoggedInUser
();
const
isLoggedIn
=
useMemo
(()
=>
user
!==
undefined
,
[
user
]);
const
[
isAuthModalVisible
,
setIsAuthModalVisible
]
=
useState
(
false
);
const
[
authModalType
,
setAuthModalType
]
=
useState
<
AuthModalType
>
();
return
(
<>
<
Typography
>
Add text
</
Typography
>
<
HomeCarousel
/>
<
Typography
>
Add text
</
Typography
>
{
!
isLoggedIn
?
(
<>
<
SignInButton
setAuthModalType
=
{
setAuthModalType
}
setIsAuthModalVisible
=
{
setIsAuthModalVisible
}
/>
<
SignUpButton
setAuthModalType
=
{
setAuthModalType
}
setIsAuthModalVisible
=
{
setIsAuthModalVisible
}
/>
<
AuthModal
type
=
{
authModalType
}
isVisible
=
{
isAuthModalVisible
}
setAuthModalType
=
{
setAuthModalType
}
setIsAuthModalVisible
=
{
setIsAuthModalVisible
}
/>
</>
)
:
null
}
</>
);
};
...
...
src/pages/Home/HomeCarousel.tsx
View file @
bd4bafd2
import
{
Carousel
}
from
'
antd
'
;
import
{
useMemo
,
useState
}
from
'
react
'
;
export
const
HomeCarousel
=
()
=>
{
const
contentStyle
=
{
import
{
useLoggedInUser
}
from
'
../../hooks/useLoggedInUser
'
;
import
{
SetAuthModalType
,
SetIsAuthModalVisible
,
SignInButton
,
SignUpButton
}
from
'
./AuthButtons
'
;
import
{
AuthModal
,
AuthModalType
}
from
'
./AuthModal
'
;
type
SlideProps
=
{
isLoggedIn
:
boolean
;
setAuthModalType
:
SetAuthModalType
;
setIsAuthModalVisible
:
SetIsAuthModalVisible
;
imagePath
:
string
;
};
const
Slide
=
({
isLoggedIn
,
setAuthModalType
,
setIsAuthModalVisible
,
imagePath
}:
SlideProps
)
=>
{
const
containerStyle
=
{
height
:
'
800px
'
,
color
:
'
#fff
'
,
lineHeight
:
'
800px
'
,
textAlign
:
'
center
'
,
background
:
'
#364d79
'
}
as
any
;
backgroundImage
:
`url("
${
imagePath
}
")`
,
backgroundSize
:
'
cover
'
,
backgroundPosition
:
'
center
'
,
display
:
'
flex
'
,
justifyContent
:
'
center
'
,
alignItems
:
'
center
'
}
as
React
.
CSSProperties
;
return
(
<
div
style
=
{
containerStyle
}
>
{
!
isLoggedIn
?
(
<>
<
SignInButton
setAuthModalType
=
{
setAuthModalType
}
setIsAuthModalVisible
=
{
setIsAuthModalVisible
}
/>
<
SignUpButton
setAuthModalType
=
{
setAuthModalType
}
setIsAuthModalVisible
=
{
setIsAuthModalVisible
}
/>
</>
)
:
null
}
</
div
>
);
};
// replace placeholders with website screenshots
const
imagePaths
=
[
'
/placeholder.png
'
,
'
/placeholder.png
'
,
'
/placeholder.png
'
,
'
/placeholder.png
'
];
export
const
HomeCarousel
=
()
=>
{
const
{
user
}
=
useLoggedInUser
();
const
isLoggedIn
=
useMemo
(()
=>
user
!==
undefined
,
[
user
]);
const
[
isAuthModalVisible
,
setIsAuthModalVisible
]
=
useState
(
false
);
const
[
authModalType
,
setAuthModalType
]
=
useState
<
AuthModalType
>
();
return
(
<
Carousel
autoplay
>
<
div
>
<
h3
style
=
{
contentStyle
}
>
1
</
h3
>
</
div
>
<
div
>
<
h3
style
=
{
contentStyle
}
>
2
</
h3
>
</
div
>
<
div
>
<
h3
style
=
{
contentStyle
}
>
3
</
h3
>
</
div
>
<
div
>
<
h3
style
=
{
contentStyle
}
>
4
</
h3
>
</
div
>
</
Carousel
>
<>
<
Carousel
autoplay
>
{
imagePaths
.
map
((
path
,
idx
)
=>
(
<
Slide
key
=
{
idx
}
setIsAuthModalVisible
=
{
setIsAuthModalVisible
}
setAuthModalType
=
{
setAuthModalType
}
isLoggedIn
=
{
isLoggedIn
}
imagePath
=
{
path
}
/>
))
}
</
Carousel
>
<
AuthModal
type
=
{
authModalType
}
isVisible
=
{
isAuthModalVisible
}
setAuthModalType
=
{
setAuthModalType
}
setIsAuthModalVisible
=
{
setIsAuthModalVisible
}
/>
</>
);
};
src/pages/Leaderboard/UserAchievement.tsx
View file @
bd4bafd2
...
...
@@ -11,7 +11,7 @@ export const UserAchievemnt = ({
}:
UserAchievemntProps
)
=>
(
<
div
style
=
{
{
textAlign
:
'
center
'
}
}
>
<
span
style
=
{
{
fontWeight
:
'
bold
'
,
fontSize
:
'
22px
'
}
}
>
You -
<
DollarOutlined
/>
{
highestScore
}
<
ClockCircleOutlined
/>
{
'
'
}
<
DollarOutlined
/>
{
highestScore
}
<
ClockCircleOutlined
/>
{
'
'
}
{
highestSecondsAlive
}
s
</
span
>
</
div
>
...
...
src/utils/pokemonFetcher.ts
View file @
bd4bafd2
...
...
@@ -15,7 +15,7 @@ export type PokemonOnCanvas = {
export
type
PokemonResponse
=
{
id
:
number
;
name
:
string
;
sprites
:
any
;
sprites
:
{
front_default
:
string
}
;
};
export
const
getPokemons
=
async
()
=>
{
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment