Unverified Commit bd4bafd2 authored by Michal Čaniga's avatar Michal Čaniga
Browse files

Rework home carousel, game lost modal, polish

parent 410071e2
......@@ -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);
......
......@@ -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,
......
......@@ -67,7 +67,9 @@ const CanvasObject = ({
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
justifyContent: 'center',
fontWeight: 'bold',
fontSize: 18
}}
>
{label}
......
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]);
......
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>
);
};
import { Image } from 'antd';
type PokemonProps = {
sprite: string;
};
export const Pokemon = ({ sprite }: PokemonProps) => {
<Image width={200} src={sprite} />;
};
......@@ -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>
......
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>
);
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}
</>
);
};
......
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}
/>
</>
);
};
......@@ -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>
......
......@@ -15,7 +15,7 @@ export type PokemonOnCanvas = {
export type PokemonResponse = {
id: number;
name: string;
sprites: any;
sprites: { front_default: string };
};
export const getPokemons = async () => {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment