Episodio 6 - Mejoras

durancristhian · Sep 8, 2020 · da78212 · da78212 · vercel · Sep 8, 2020
1 parent bdd7267
commit da78212
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 18 deletions.
diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -16,7 +16,7 @@ const Layout = ({ children }: Props) => {
         <div className="flex items-center justify-between">
           <Link href="/" passHref>
             <A href="#!">
-              <img src="logo.png" alt="Cremona" className="h-12" />
+              <img src="/logo.png" alt="Cremona" className="h-12" />
             </A>
           </Link>
           <div className="flex">{user ? <LoggedOut /> : <LoggedIn />}</div>

diff --git a/icons/CheckCircle.tsx b/icons/CheckCircle.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 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+}
+
+export default CheckCircle
diff --git a/pages/games/[gameId].tsx b/pages/games/[gameId].tsx
@@ -229,7 +229,7 @@ function Table({ gameId }: TableProps) {
       </thead>
       <tbody>
         {players.map((player, i) => (
-          <tr key={player.id}>
+          <tr key={player.id} className={i < 3 ? 'bg-green-200' : ''}>
             <td className="border px-4 py-2">{i + 1}</td>
             <td className="border px-4 py-2">{player.name}</td>
             <td className="border px-4 py-2">{player.score}</td>

diff --git a/pages/games/[gameId]/[playerId].tsx b/pages/games/[gameId]/[playerId].tsx
@@ -12,6 +12,7 @@ import useInterval from '../../../hooks/useInterval'
 import Countdown from '../../../components/Countdown'
 import Link from 'next/link'
 import A from '../../../ui/A'
+import CheckCircle from '../../../icons/CheckCircle'
 
 const PlayerId = () => {
   const router = useRouter()
@@ -81,19 +82,21 @@ const PlayerId = () => {
 
   return (
     <>
-      <Heading type="h1">{game.name}</Heading>
       {player.status === 'playing' ? (
         <PlayerGame game={game} onFinish={onFinish} />
       ) : (
-        <Button
-          onClick={() => {
-            update({
-              status: 'playing',
-            })
-          }}
-        >
-          Play
-        </Button>
+        <>
+          <Heading type="h1">{game.name}</Heading>
+          <Button
+            onClick={() => {
+              update({
+                status: 'playing',
+              })
+            }}
+          >
+            Play
+          </Button>
+        </>
       )}
     </>
   )
@@ -126,22 +129,23 @@ function PlayerGame({ game, onFinish }: GameProps) {
   const currentQuestion = game.questions[currentIndex]
 
   return (
-    <div className="">
+    <div>
       <div className="mb-4">
         <Heading type="h2">{currentQuestion.description}</Heading>
       </div>
-      <ul className="flex flex-wrap">
+      <ul className="flex flex-wrap -mx-2">
         {currentQuestion.options.map((option) => (
-          <li key={option.id} className="w-1/2">
+          <li key={option.id} className="p-2 w-1/2">
             <button
               className={classnames([
-                'block px-4 py-2 my-4 bg-white border w-full text-left',
+                'flex px-4 py-2 bg-white border w-full text-left items-center',
                 showNext &&
                   currentQuestion.validOption === option.id &&
                   'bg-green-300',
                 showNext &&
                   currentQuestion.validOption !== option.id &&
                   'bg-red-300',
+                showNext && option.id !== selectedOption?.id && 'opacity-50',
               ])}
               onClick={() => {
                 setSelectedOption(option)
@@ -157,8 +161,10 @@ function PlayerGame({ game, onFinish }: GameProps) {
               }}
               disabled={!!selectedOption}
             >
-              {selectedOption?.id === option.id && '😎  '}
-              {option.content}
+              {selectedOption?.id === option.id && (
+                <CheckCircle className="h-6 mr-4" />
+              )}
+              <span>{option.content}</span>
             </button>
           </li>
         ))}