Rework home carousel, game lost modal, polish

src/pages/Forbidden.tsx

@@ -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

@@ -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

@@ -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

-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

-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

-import { Image } from 'antd';
-
-type PokemonProps = {
-	sprite: string;
-};
-
-export const Pokemon = ({ sprite }: PokemonProps) => {
-	<Image width={200} src={sprite} />;
-};

src/pages/Game/TopBar.tsx

@@ -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

+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

-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

 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

@@ -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

@@ -15,7 +15,7 @@ export type PokemonOnCanvas = {
 export type PokemonResponse = {
 	id: number;
 	name: string;
-	sprites: any;
+	sprites: { front_default: string };
 };
 
 export const getPokemons = async () => {