Skip to content

Commit

Permalink
added some color
Browse files Browse the repository at this point in the history
  • Loading branch information
@NeoPrint3D
NeoPrint3D committed Nov 13, 2022
1 parent e30fa56 commit ef338df
Show file tree
Hide file tree
Showing 7 changed files with 134 additions and 115 deletions.
112 changes: 56 additions & 56 deletions react-client/src/components/GameRoom/GameHeader/GameHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ function GameHeader({ room, players, fireOff, placing, guessFireOff }: { room: R
return (
<>
<UserPreview selectedId={selectedId} height={height} selectedPlayer={selectedPlayer} room={room} setSelectedId={setSelectedId} width={width} /><header>
<div className="grid grid-cols-3">
<div className={`grid grid-cols-3 ${room.maxPlayers === 1 && "border-b-4 border-white/20"}`}>
<div className="flex justify-start items-center">
<Link to="/">
<img src={Logo} alt="logo" className="translate-y-1 scale-90"
Expand All @@ -31,7 +31,7 @@ function GameHeader({ room, players, fireOff, placing, guessFireOff }: { room: R
</Link>
</div>
<div className="flex flex-col justify-center items-center font-logo">
<div className="flex text-xl gap-2">
<div className="flex text-2xl gap-2">
<p>Round</p>
<AnimatePresence>
{fireOff ?
Expand All @@ -45,7 +45,7 @@ function GameHeader({ room, players, fireOff, placing, guessFireOff }: { room: R
}}>{room.round + 1}/{room.answers.length}</m.p> : <p>{room.round + 1}/{room.answers.length}</p>}
</AnimatePresence>
</div>
<h1 className=" text-xl font-sans select-text font-semisbold">ID: {id}</h1>
<h1 className=" text-xl font-sans select-text font-semibold">ID: {id}</h1>
</div>
<div className="flex gap-3 sm:gap-5 items-center justify-end mr-3">
<MessageButton />
Expand All @@ -63,64 +63,65 @@ function GameHeader({ room, players, fireOff, placing, guessFireOff }: { room: R
</div>
</div>
</div>
<div className="overflow-scroll">
<div className="flex items-center gap-5 h-[4.25rem] min-w-max border-white/20 border-y-4 ">
{players && players.filter((p) => p.uid !== uid).map((player) => (
<m.button
key={player.uid}
transition={{
layout: {
type: "easeInOut",
duration: 0.5
}
}}
layout
onClick={() => {
setSelectedId(player.uid)
setSelectedPlayer(player)
}}
className="first:ml-[.625rem] last:mr-[.625rem]"
>
{selectedId !== player.uid &&
<m.div
className={`flex items-center gap-2 carousel-item py-2 px-3 rounded transition-all duration-500 bg-gray-400/10 backdrop-blur-md border-b-4 w-fit
{room.maxPlayers !== 1 &&
<div className="overflow-scroll">
<div className="flex items-center gap-5 h-[4.25rem] min-w-max border-white/20 border-y-4 ">
{players && players.filter((p) => p.uid !== uid).map((player) => (
<m.button
key={player.uid}
transition={{
layout: {
type: "easeInOut",
duration: 0.5
}
}}
layout
onClick={() => {
setSelectedId(player.uid)
setSelectedPlayer(player)
}}
className="first:ml-[.625rem] last:mr-[.625rem]"
>
{selectedId !== player.uid &&
<m.div
className={`flex items-center gap-2 carousel-item py-2 px-3 rounded transition-all duration-500 bg-gray-400/10 backdrop-blur-md border-b-4 w-fit
${placing[0]?.uid === player.uid ? "text-yellow-400 shadow-lg shadow-yellow-200" : "border-primary"} ${placing[0]?.uid === player?.uid ? "border-yellow-400" : "text-gray-200"}
${player.guesses.length === 6 && "text-gray-200 line-through decoration-[6px] decoration-primary-dark/90 tooltip first:tooltip-right tooltip-bottom tooltip-error hover:z-50 "}
`}
data-tip={"They have used all their guesses."}
key={player.uid}
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
>
{placing[0]?.points > 0 && placing[0]?.uid === player?.uid && (
<m.div
initial={{ y: -100 }}
animate={{ y: 0 }}
exit={{ y: -100 }}
transition={{
type: "spring",
stiffness: 200,
damping: 10
}}
>
<FaCrown className="text-yellow-400" aria-label="Crown" size={25} />
</m.div>
)}
<h1
className={`
data-tip={"They have used all their guesses."}
key={player.uid}
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
>
{placing[0]?.points > 0 && placing[0]?.uid === player?.uid && (
<m.div
initial={{ y: -100 }}
animate={{ y: 0 }}
exit={{ y: -100 }}
transition={{
type: "spring",
stiffness: 200,
damping: 10
}}
>
<FaCrown className="text-yellow-400" aria-label="Crown" size={25} />
</m.div>
)}
<h1
className={`
transition-all duration-600 font-logo text-xl
${placing[0]?.points > 0 && placing[0]?.uid === player?.uid ?
`${guessFireOff.includes(player.uid) ? "text-success scale-[150%] " : "scale-100 text-yellow-300"}` :
`${guessFireOff.includes(player.uid) ? "text-success scale-[150%] " : "scale-100 text-gray-200"} `}`}
>
{player.name}: {player.points}
</h1>
</m.div>}
</m.button>
))}
`${guessFireOff.includes(player.uid) ? "text-success scale-[150%] " : "scale-100 text-yellow-300"}` :
`${guessFireOff.includes(player.uid) ? "text-success scale-[150%] " : "scale-100 text-gray-200"} `}`}
>
{player.name}: {player.points}
</h1>
</m.div>}
</m.button>
))}
</div>
</div>

</div>
}
<div className="flex flex-col items-center">
<m.div
className={`flex gap-3 justify-center text-xl font-logo mt-2
Expand Down Expand Up @@ -149,7 +150,6 @@ function GameHeader({ room, players, fireOff, placing, guessFireOff }: { room: R
</div>
</header>
</>

)
}

Expand Down
9 changes: 6 additions & 3 deletions react-client/src/components/GameRoom/Grid/Cell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,12 @@ function Cell({ keypress, status = 'empty' }: { keypress?: string; status?: "emp
animate={{ scale: 1, opacity: 1, }}
exit={{ scale: 0, opacity: 0, }}
transition={{
type: "tween",
duration: 0.15,
ease: "easeInOut",
scale: {
type: "spring",
stiffness: 300,
damping: 30
},
duration: 0.05,
}}>
{keypress?.toLocaleUpperCase()}
</m.p>
Expand Down
2 changes: 1 addition & 1 deletion react-client/src/components/GameRoom/Keyboard/Key.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { m } from "framer-motion";
import { memo, useCallback, useContext } from "react";
import { memo, useCallback } from "react";
import { useWindowSize } from "react-use";
import { useKeyboard, useGuesses } from "../../../context/GameContext";
import { CharStatus } from "../Grid/utils/getStatuses";
Expand Down
44 changes: 40 additions & 4 deletions react-client/src/components/GameRoom/Keyboard/Keyboard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,48 @@
import { doc, getFirestore, updateDoc } from "firebase/firestore";
import { m } from "framer-motion";
import { memo, useCallback, useEffect, useState } from "react";
import { memo, useCallback, useEffect, useMemo, useState } from "react";
import { AiFillDelete } from "react-icons/ai";
import { useParams } from "react-router-dom";
import { toast } from "react-toastify";
import { useUid } from "../../../context/AuthContext";
import { useGuesses, useKeyboard } from "../../../context/GameContext";
import { app } from "../../../utils/firebase";
import { CharStatus } from "../Grid/utils/getStatuses";
import Key from "./Key";

function Keyboard({ answer, handleEnter, hasGuessed }: { answer: string, handleEnter: any, hasGuessed: boolean }) {
function Keyboard({ room }: { room: Room }) {
const firestore = useMemo(() => getFirestore(app), [])
const [hasGuessed, setHasGuessed] = useState(false)
const [statuses, setStatuses] = useState<{ [key: string]: CharStatus }>({})
const { guesses } = useGuesses()
const { guesses, setGuesses } = useGuesses()
const { key, setKey } = useKeyboard()
const answer = room.answers[room.round].toUpperCase()
const { id } = useParams()
const uid = useUid()


const handleEnter = useCallback(async () => {
if (key.length !== 5) return
const playerRef = doc(firestore, "rooms", `${id}`, "players", uid)
setHasGuessed(true)
const res = await fetch(import.meta.env.DEV ? `http://localhost:4000/api/valid?word=${key}` : `https://neo-letter-fastify.vercel.app/api/valid?word=${key}`)
const data = await res.json()
if (!data.isValid && !room.customWords) {
toast.error("Invalid Guess.", { theme: "dark" })
setHasGuessed(false)
return
}
setKey("")
await new Promise(resolve => setTimeout(resolve, 150))
setGuesses([...guesses, key])
await updateDoc(playerRef, {
guesses: [...guesses, key], guessed: true,
})
await new Promise(resolve => setTimeout(resolve, 450))
await updateDoc(playerRef, { guessed: false, guessedCorrectly: false })
setHasGuessed(false)
}, [key, guesses])

useEffect(() => {
handlekeyboardStatuses()
}, [guesses])
Expand Down Expand Up @@ -59,8 +92,11 @@ function Keyboard({ answer, handleEnter, hasGuessed }: { answer: string, handleE
status={statuses[key]}
/>
))}
<button onClick={() => setKey("")} className="transition-colors shadow-key duration-300 px-0.5 py-4 bg-primary hover:bg-red-400 active:bg-red-600 rounded text-white ">
<AiFillDelete size={30} />
</button>
</div>
<div className="flex just ify-center gap-[0.1875rem]">
<div className="flex justify-center gap-[0.1875rem]">
<m.button
className=" transition-colors duration-300 px-3 py-4 bg-primary hover:bg-red-400 active:bg-red-600 rounded shadow-key text-white disabled:bg-primary/40 "
whileHover={{ scale: 1.025 }}
Expand Down
2 changes: 1 addition & 1 deletion react-client/src/pages/Create.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ export default function CreateRoom() {
round: 0,
allowLateJoiners: allowJoinAfterStart,
customWords: customWords.length !== 0,
allowMessages: allowMessages,
allowMessages: maxPlayers === "solo" ? false : allowMessages,
allowProfanity: allowProfanity,
}
const messageInfo: Message = {
Expand Down
Loading

0 comments on commit ef338df

Please sign in to comment.