Episodio 7 - UX con Pecas

durancristhian · Sep 12, 2020 · bf2572c · bf2572c · vercel · Sep 12, 2020
1 parent e25955b
commit bf2572c
Show file tree

Hide file tree

Showing 8 changed files with 132 additions and 69 deletions.
diff --git a/components/CreateChallenge.tsx b/components/CreateChallenge.tsx
@@ -115,7 +115,7 @@ const CreateChallenge = () => {
   return (
     <>
       <div className="mb-4">
-        <Heading type="h2" align="left">
+        <Heading type="h2" align="center">
           Create a challenge
         </Heading>
       </div>

diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -13,29 +13,35 @@ const Layout = ({ children }: Props) => {
   return (
     <div className="flex flex-col min-h-screen">
       <header className="bg-white p-4 shadow">
-        <div className="flex items-center justify-between">
-          <Link href="/" passHref>
-            <A href="#!">
-              <img src="/logo.png" alt="Cremona" className="h-12" />
-            </A>
-          </Link>
-          <div className="flex">{user ? <LoggedOut /> : <LoggedIn />}</div>
+        <div className="container mx-auto w-full">
+          <div className="flex items-center justify-between">
+            <Link href="/" passHref>
+              <A href="#!">
+                <img src="/logo.png" alt="Cremona" className="h-12" />
+              </A>
+            </Link>
+            <div className="flex">{user ? <LoggedOut /> : <LoggedIn />}</div>
+          </div>
         </div>
       </header>
-      <main className="flex-1 p-4">{children}</main>
+      <main className="flex-1 p-4">
+        <div className="container mx-auto w-full">{children}</div>
+      </main>
       <footer className="p-4">
-        <p className="text-center">
-          <span>Created by </span>
-          <Link href="/signin" passHref>
-            <A
-              href="http://twitter.com/durancristhian"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              @durancristhian
-            </A>
-          </Link>
-        </p>
+        <div className="container mx-auto w-full">
+          <p className="text-center">
+            <span>Created by </span>
+            <Link href="/signin" passHref>
+              <A
+                href="http://twitter.com/durancristhian"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                @durancristhian
+              </A>
+            </Link>
+          </p>
+        </div>
       </footer>
     </div>
   )

diff --git a/components/ListChallenges.tsx b/components/ListChallenges.tsx
@@ -30,7 +30,7 @@ const ListChallenges = () => {
   return (
     <>
       <div className="mb-4">
-        <Heading type="h2" align="left">
+        <Heading type="h2" align="center">
           Your challenges
         </Heading>
       </div>
@@ -44,7 +44,10 @@ const ListChallenges = () => {
         </thead>
         <tbody>
           {data.map((game) => (
-            <tr key={game.id}>
+            <tr
+              key={game.id}
+              className={game.status === 'finished' ? '' : 'bg-green-100'}
+            >
               <td className="border px-4 py-2">
                 <Link href="/games/[gameId]" as={`/games/${game.id}`} passHref>
                   <A href="#!">{game.name}</A>

diff --git a/icons/XCircle.tsx b/icons/XCircle.tsx
@@ -0,0 +1,22 @@
+import React, { SVGAttributes } from 'react'
+
+type Props = SVGAttributes<SVGElement>
+
+const CheckCircle = (props: Props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+}
+
+export default CheckCircle
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -8,7 +8,7 @@ class MyDocument extends Document {
         <Head>
           <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
         </Head>
-        <body className="bg-orange-100">
+        <body className="bg-gray-100">
           <Main />
           <NextScript />
         </body>

diff --git a/pages/games/[gameId].tsx b/pages/games/[gameId].tsx
@@ -67,25 +67,25 @@ const GameId = () => {
             <p>{game.createdAt.toLocaleString()}</p>
           </div>
           <p>{game.questions.length} questions</p>
+          {isAdmin && game.status !== 'finished' && (
+            <div className="mt-4">
+              <button
+                type="submit"
+                className="border bg-blue-200 border-blue-500 px-4 py-2 disabled:opacity-50 focus:outline-none focus:shadow-outline"
+                onClick={nextState}
+              >
+                {game.status === 'created'
+                  ? 'Activate this challenge'
+                  : game.status === 'playing'
+                  ? 'Finish this challenge'
+                  : ''}
+              </button>
+            </div>
+          )}
         </div>
       </div>
-      {isAdmin && game.status !== 'finished' && (
-        <div className="mt-4 text-center">
-          <button
-            type="submit"
-            className="border bg-blue-200 border-blue-500 px-4 py-2 disabled:opacity-50 focus:outline-none focus:shadow-outline"
-            onClick={nextState}
-          >
-            {game.status === 'created'
-              ? 'Play'
-              : game.status === 'playing'
-              ? 'Finish'
-              : ''}
-          </button>
-        </div>
-      )}
       <div className="mt-4">
-        {game.status === 'created' && <Created></Created>}
+        {game.status === 'created' && !isAdmin && <Created></Created>}
         {game.status === 'playing' && <Playing gameId={gameId || ''}></Playing>}
         {game.status === 'finished' && (
           <Finished gameId={gameId || ''}></Finished>
@@ -123,6 +123,7 @@ function Playing({ gameId }: PlayingProps) {
 
   if (!user) {
     return (
+      /* TODO: add login action */
       <p className="italic text-center">You have to log in before playing.</p>
     )
   }
@@ -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 (
     <>
-      <Heading>Playing</Heading>
       <div className="mt-4 text-center">
         {currentPlayer ? (
           <div className="flex">
@@ -162,7 +168,7 @@ function Playing({ gameId }: PlayingProps) {
           </div>
         ) : (
           <Button type="submit" onClick={play}>
-            Ready to play
+            Go to the game
           </Button>
         )}
       </div>

diff --git 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 <PlayerScore /> */
     return (
-      <>
-        <p>You finished with {player.score} points.</p>
-        <div className="mt-4">
+      <div>
+        <p className="flex flex-col items-center justify-center">
+          <span>You finished</span>
+          <span className="text-6xl font-bold mx-4">
+            {player.score.toLocaleString()}
+          </span>
+          <span>with points</span>
+        </p>
+        <div className="mt-8 text-center">
           <Link href="/games/[gameId]" as={`/games/${gameId}`} passHref>
-            <A href="#!">Go back</A>
+            <A href="#!">Go back to challenge</A>
           </Link>
         </div>
-      </>
+      </div>
     )
   }
 
@@ -85,7 +92,7 @@ const PlayerId = () => {
       {player.status === 'playing' ? (
         <PlayerGame game={game} onFinish={onFinish} />
       ) : (
-        <>
+        <div className="text-center">
           <Heading type="h1">{game.name}</Heading>
           <Button
             onClick={() => {
@@ -94,9 +101,9 @@ const PlayerId = () => {
               })
             }}
           >
-            Play
+            Ready to play
           </Button>
-        </>
+        </div>
       )}
     </>
   )
@@ -134,16 +141,19 @@ function PlayerGame({ game, onFinish }: GameProps) {
   if (gameEnded) return null
 
   return (
-    <div>
+    <div className="mx-auto max-w-2xl w-full">
+      <p className="mt-4 text-center italic">
+        {currentIndex + 1} of {totalQuestions}
+      </p>
       <div className="mb-4">
         <Heading type="h2">{currentQuestion.description}</Heading>
       </div>
-      <ul className="flex flex-wrap -mx-2">
+      <ul>
         {currentQuestion.options.map((option) => (
-          <li key={option.id} className="p-2 w-1/2">
+          <li key={option.id} className="py-2">
             <button
               className={classnames([
-                'flex px-4 py-2 bg-white border w-full text-left items-center',
+                'flex px-4 py-2 bg-white border w-full text-left h-16 items-center',
                 showNext &&
                   currentQuestion.validOption === option.id &&
                   'bg-green-300',
@@ -166,27 +176,29 @@ function PlayerGame({ game, onFinish }: GameProps) {
               }}
               disabled={!!selectedOption}
             >
-              {selectedOption?.id === option.id && (
+              {showNext && currentQuestion.validOption === option.id && (
                 <CheckCircle className="h-6 mr-4" />
               )}
+              {showNext && currentQuestion.validOption !== option.id && (
+                <XCircle className="h-6 mr-4" />
+              )}
               <span>{option.content}</span>
             </button>
           </li>
         ))}
       </ul>
-      <p className="mt-4 text-center italic">
-        Question {currentIndex + 1} of {totalQuestions}
-      </p>
       {showNext && (
-        <Button
-          onClick={() => {
-            update(selectedOption, ms)
-            setSelectedOption(null)
-            setShowNext(false)
-          }}
-        >
-          {currentIndex === totalQuestions - 1 ? 'Finish' : 'Next'}
-        </Button>
+        <div className="mt-4 text-right">
+          <Button
+            onClick={() => {
+              update(selectedOption, ms)
+              setSelectedOption(null)
+              setShowNext(false)
+            }}
+          >
+            {currentIndex === totalQuestions - 1 ? 'Finish' : 'Next'}
+          </Button>
+        </div>
       )}
       {!showNext && (
         <div className="mt-4">

diff --git 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 (
     <>
-      <Heading type="h2">Welcome, {user.email}</Heading>
+      <p className="text-center">Welcome, {user.displayName}</p>
       <div className="my-4">
         <CreateChallenge />
       </div>
@@ -27,5 +28,18 @@ function LoggedIn() {
 }
 
 function LoggedOut() {
-  return <p className="italic text-center">You need to sign in.</p>
+  const { googleSignIn } = useAuth()
+
+  return (
+    <div className="text-center">
+      <p className="italic mb-4">You need to sign in.</p>
+      <Button
+        onClick={() => {
+          googleSignIn()
+        }}
+      >
+        Sign in with Google
+      </Button>
+    </div>
+  )
 }