From bf2572c0ddda2d48c91e44bc8f6c2c03752c985f Mon Sep 17 00:00:00 2001 From: Cristhian Duran Date: Sat, 12 Sep 2020 19:26:42 -0300 Subject: [PATCH] Episodio 7 - UX con Pecas --- components/CreateChallenge.tsx | 2 +- components/Layout.tsx | 46 +++++++++++---------- components/ListChallenges.tsx | 7 +++- icons/XCircle.tsx | 22 ++++++++++ pages/_document.tsx | 2 +- pages/games/[gameId].tsx | 42 ++++++++++--------- pages/games/[gameId]/[playerId].tsx | 62 +++++++++++++++++------------ pages/index.tsx | 18 ++++++++- 8 files changed, 132 insertions(+), 69 deletions(-) create mode 100644 icons/XCircle.tsx diff --git a/components/CreateChallenge.tsx b/components/CreateChallenge.tsx index 0359aa7..4cdfab1 100644 --- a/components/CreateChallenge.tsx +++ b/components/CreateChallenge.tsx @@ -115,7 +115,7 @@ const CreateChallenge = () => { return ( <>
- + Create a challenge
diff --git a/components/Layout.tsx b/components/Layout.tsx index 6f4636b..512b2a7 100644 --- a/components/Layout.tsx +++ b/components/Layout.tsx @@ -13,29 +13,35 @@ const Layout = ({ children }: Props) => { return (
-
- - - Cremona - - -
{user ? : }
+
+
+ + + Cremona + + +
{user ? : }
+
-
{children}
+
+
{children}
+
) diff --git a/components/ListChallenges.tsx b/components/ListChallenges.tsx index 3f5cfc0..3b2645b 100644 --- a/components/ListChallenges.tsx +++ b/components/ListChallenges.tsx @@ -30,7 +30,7 @@ const ListChallenges = () => { return ( <>
- + Your challenges
@@ -44,7 +44,10 @@ const ListChallenges = () => { {data.map((game) => ( - + {game.name} diff --git a/icons/XCircle.tsx b/icons/XCircle.tsx new file mode 100644 index 0000000..000c193 --- /dev/null +++ b/icons/XCircle.tsx @@ -0,0 +1,22 @@ +import React, { SVGAttributes } from 'react' + +type Props = SVGAttributes + +const CheckCircle = (props: Props) => { + return ( + + + + ) +} + +export default CheckCircle diff --git a/pages/_document.tsx b/pages/_document.tsx index 496e2b5..f13eb7e 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -8,7 +8,7 @@ class MyDocument extends Document { - +
diff --git a/pages/games/[gameId].tsx b/pages/games/[gameId].tsx index 3ec6406..630fac0 100644 --- a/pages/games/[gameId].tsx +++ b/pages/games/[gameId].tsx @@ -67,25 +67,25 @@ const GameId = () => {

{game.createdAt.toLocaleString()}

{game.questions.length} questions

+ {isAdmin && game.status !== 'finished' && ( +
+ +
+ )} - {isAdmin && game.status !== 'finished' && ( -
- -
- )}
- {game.status === 'created' && } + {game.status === 'created' && !isAdmin && } {game.status === 'playing' && } {game.status === 'finished' && ( @@ -123,6 +123,7 @@ function Playing({ gameId }: PlayingProps) { if (!user) { return ( + /* TODO: add login action */

You have to log in before playing.

) } @@ -142,9 +143,14 @@ function Playing({ gameId }: PlayingProps) { const currentPlayer = players?.[0] + /* + TODO: + - redirect the user after creating the object + - show the score after playing + */ + return ( <> - Playing
{currentPlayer ? (
@@ -162,7 +168,7 @@ function Playing({ gameId }: PlayingProps) {
) : ( )}
diff --git a/pages/games/[gameId]/[playerId].tsx b/pages/games/[gameId]/[playerId].tsx index ca1ea8d..c0c973f 100644 --- a/pages/games/[gameId]/[playerId].tsx +++ b/pages/games/[gameId]/[playerId].tsx @@ -13,6 +13,7 @@ import Countdown from '../../../components/Countdown' import Link from 'next/link' import A from '../../../ui/A' import CheckCircle from '../../../icons/CheckCircle' +import XCircle from '../../../icons/XCircle' const PlayerId = () => { const router = useRouter() @@ -60,14 +61,20 @@ const PlayerId = () => { if (player.status === 'finished') { /* return */ return ( - <> -

You finished with {player.score} points.

-
+
+

+ You finished + + {player.score.toLocaleString()} + + with points +

+ - +
) } @@ -85,7 +92,7 @@ const PlayerId = () => { {player.status === 'playing' ? ( ) : ( - <> +
{game.name} - +
)} ) @@ -134,16 +141,19 @@ function PlayerGame({ game, onFinish }: GameProps) { if (gameEnded) return null return ( -
+
+

+ {currentIndex + 1} of {totalQuestions} +

{currentQuestion.description}
-
    +
      {currentQuestion.options.map((option) => ( -
    • +
      • ))}
    -

    - Question {currentIndex + 1} of {totalQuestions} -

    {showNext && ( - +
    + +
    )} {!showNext && (
    diff --git a/pages/index.tsx b/pages/index.tsx index 2423f36..e103e9d 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -2,6 +2,7 @@ import React from 'react' import CreateChallenge from '../components/CreateChallenge' import ListChallenges from '../components/ListChallenges' import { useAuth, useUser } from '../hooks/useAuth' +import Button from '../ui/Button' import Heading from '../ui/Heading' export default function Index() { @@ -15,7 +16,7 @@ function LoggedIn() { return ( <> - Welcome, {user.email} +

    Welcome, {user.displayName}

    @@ -27,5 +28,18 @@ function LoggedIn() { } function LoggedOut() { - return

    You need to sign in.

    + const { googleSignIn } = useAuth() + + return ( +
    +

    You need to sign in.

    + +
    + ) }