Skip to content

Commit

Permalink
Episodio 6 - Mejoras
Browse files Browse the repository at this point in the history
  • Loading branch information
durancristhian committed Sep 8, 2020
1 parent bdd7267 commit da78212
Show file tree
Hide file tree
Showing 4 changed files with 46 additions and 18 deletions.
2 changes: 1 addition & 1 deletion components/Layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
22 changes: 22 additions & 0 deletions icons/CheckCircle.tsx
Original file line number Diff line number Diff line change
@@ -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
2 changes: 1 addition & 1 deletion pages/games/[gameId].tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
38 changes: 22 additions & 16 deletions pages/games/[gameId]/[playerId].tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down Expand Up @@ -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>
</>
)}
</>
)
Expand Down Expand Up @@ -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)
Expand All @@ -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>
))}
Expand Down

1 comment on commit da78212

@vercel
Copy link

@vercel vercel bot commented on da78212 Sep 8, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.