Skip to content

Commit

Permalink
instructions modal + question validation
Browse files Browse the repository at this point in the history
  • Loading branch information
@lineville
lineville committed Feb 26, 2024
1 parent aca6617 commit 9faa357
Show file tree
Hide file tree
Showing 5 changed files with 169 additions and 117 deletions.
10 changes: 1 addition & 9 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,15 +75,7 @@ export default function Home() {
</Menu>
</Box>

<Box
ml={isMobile ? 2 : 0}
mr={isMobile ? 2 : 0}
flex={1}
overflowY={"auto"}
mb={4}
>
<Instructions />
</Box>
<Instructions />
</Flex>
</GradientBackground>
);
Expand Down
10 changes: 10 additions & 0 deletions src/components/Game.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import { COLUMNS } from "@/lib/constants";
import { useSocket } from "@/hooks/useSocket";
import { GameType } from "@/lib/gameType";
import { usePathname } from "next/navigation";
import InstructionsModal from "./InstructionsModal";

interface GameProps {
clientId: string;
Expand Down Expand Up @@ -64,6 +65,11 @@ export default function Game({ clientId }: GameProps): JSX.Element {
onClose: closeGuessCharacterModal,
} = useDisclosure();

const {
isOpen: isInstructionsModalOpen,
onClose: closeInstructionsModal,
} = useDisclosure({ defaultIsOpen: true });

const {
socketConnection,
yourCharacter,
Expand Down Expand Up @@ -302,6 +308,10 @@ export default function Game({ clientId }: GameProps): JSX.Element {
playerCount={playerCount}
/>
)}
<InstructionsModal
isOpen={isInstructionsModalOpen}
onClose={closeInstructionsModal}
/>
<QuestionModal
isOpen={isQuestionModalOpen}
onClose={closeQuestionModal}
Expand Down
231 changes: 124 additions & 107 deletions src/components/Instructions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,120 +24,137 @@ import {
Link,
ButtonGroup,
Kbd,
Box,
} from "@chakra-ui/react";
import { HeartFillIcon, MarkGithubIcon } from "@primer/octicons-react";
import styles from "../styles/styles.module.css";
import NextLink from "next/link";

export default function Instructions(): JSX.Element {
interface InstructionsProps {
variant?: string;
}

export default function Instructions({
variant = "elevated",
}: InstructionsProps): JSX.Element {
const isMobile = useBreakpointValue({ base: true, md: false });

return (
<Card>
<CardHeader p={isMobile ? 5 : 10}>
<Heading size={isMobile ? "md" : "xl"}>How it works</Heading>
</CardHeader>
<Divider />
<CardBody>
<List className="how-to">
<ListItem mb={3}>
<ListIcon as={CheckCircleIcon} color="green.500" />
<strong className={styles["how-to-header"]}>Goal</strong>
<Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
{
"Guess your opponent's secret character before they guess who you are."
}
</Code>
</ListItem>
<ListItem mb={3}>
<ListIcon as={ArrowRightIcon} />
<strong className={styles["how-to-header"]}>Start Up</strong>
<Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
{"Copy the invite link in the game room and send it to a friend."}
</Code>
</ListItem>
<ListItem mb={3}>
<ListIcon as={RepeatIcon} color="blue.500" />
<strong className={styles["how-to-header"]}>Playing</strong>
<Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
{
"You and your opponent take turns asking and answering questions."
}
</Code>
</ListItem>
<ListItem mb={3}>
<ListIcon as={ChatIcon} color="green.500" />
<strong className={styles["how-to-header"]}>Your Turn</strong>
<Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
{
"Answer your opponent's question, then ask your opponent a question about their secret character."
}
</Code>
</ListItem>
<ListItem mb={3}>
<ListIcon as={InfoOutlineIcon} color="blue.500" />
<strong className={styles["how-to-header"]}>Tip</strong>
<Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
{"If you can't think of a question, click the "}
</Code>
<Kbd ml={2} mr={2}>
Ask AI ✨
</Kbd>
<Code>{" button for some inspiration!"}</Code>
</ListItem>
<ListItem mb={3}>
<ListIcon as={SpinnerIcon} />
<strong className={styles["how-to-header"]}>Their Turn</strong>
<Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
{
"Eliminate characters on your board while your opponent thinks of their next question."
}
</Code>
</ListItem>
<ListItem mb={3}>
<ListIcon as={StarIcon} color="yellow.500" />
<strong className={styles["how-to-header"]}>Winning</strong>
<Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
{"Guess your opponent's secret character correctly!"}
</Code>
</ListItem>
<ListItem mb={3}>
<ListIcon as={MoonIcon} color="black.500" />
<strong className={styles["how-to-header"]}>Theme</strong>
<Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
{
"Toggle dark and light mode by clicking the button in the top left."
}
</Code>
</ListItem>
<ListItem mb={3}>
<ListIcon as={HeartFillIcon} color="red.500" />
<strong className={styles["how-to-header"]}>Donate</strong>
<Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
{"Support this project by sponsoring me on GitHub"}
</Code>
</ListItem>
</List>
</CardBody>
<Divider />
<CardFooter
display={"flex"}
justifyContent={"flex-end"}
alignItems={"flex-end"}
>
<ButtonGroup gap={3}>
<Link as={NextLink} href="https://github.com/sponsors/lineville">
<Button colorScheme="pink" leftIcon={<HeartFillIcon />}>
Donate
</Button>
</Link>
<Link as={NextLink} href="https://github.com/lineville/guess-who">
<Button colorScheme={"blackAlpha"} leftIcon={<MarkGithubIcon />}>
Source Code
</Button>
</Link>
</ButtonGroup>
</CardFooter>
</Card>
<Box
ml={isMobile ? 2 : 0}
mr={isMobile ? 2 : 0}
flex={1}
overflowY={"auto"}
mb={4}
>
<Card variant={variant}>
<CardHeader p={isMobile ? 5 : 10}>
<Heading size={isMobile ? "md" : "xl"}>How it works</Heading>
</CardHeader>
<Divider />
<CardBody>
<List className="how-to">
<ListItem mb={3}>
<ListIcon as={CheckCircleIcon} color="green.500" />
<strong className={styles["how-to-header"]}>Goal</strong>
<Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
{
"Guess your opponent's secret character before they guess who you are."
}
</Code>
</ListItem>
<ListItem mb={3}>
<ListIcon as={ArrowRightIcon} />
<strong className={styles["how-to-header"]}>Start Up</strong>
<Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
{
"Copy the invite link in the game room and send it to a friend."
}
</Code>
</ListItem>
<ListItem mb={3}>
<ListIcon as={RepeatIcon} color="blue.500" />
<strong className={styles["how-to-header"]}>Playing</strong>
<Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
{
"You and your opponent take turns asking and answering questions."
}
</Code>
</ListItem>
<ListItem mb={3}>
<ListIcon as={ChatIcon} color="green.500" />
<strong className={styles["how-to-header"]}>Your Turn</strong>
<Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
{
"Answer your opponent's question, then ask your opponent a question about their secret character."
}
</Code>
</ListItem>
<ListItem mb={3}>
<ListIcon as={InfoOutlineIcon} color="blue.500" />
<strong className={styles["how-to-header"]}>Tip</strong>
<Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
{"If you can't think of a question, click the "}
</Code>
<Kbd ml={2} mr={2}>
Ask AI ✨
</Kbd>
<Code>{" button for some inspiration!"}</Code>
</ListItem>
<ListItem mb={3}>
<ListIcon as={SpinnerIcon} />
<strong className={styles["how-to-header"]}>Their Turn</strong>
<Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
{
"Eliminate characters on your board while your opponent thinks of their next question."
}
</Code>
</ListItem>
<ListItem mb={3}>
<ListIcon as={StarIcon} color="yellow.500" />
<strong className={styles["how-to-header"]}>Winning</strong>
<Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
{"Guess your opponent's secret character correctly!"}
</Code>
</ListItem>
<ListItem mb={3}>
<ListIcon as={MoonIcon} color="black.500" />
<strong className={styles["how-to-header"]}>Theme</strong>
<Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
{
"Toggle dark and light mode by clicking the button in the top left."
}
</Code>
</ListItem>
<ListItem mb={3}>
<ListIcon as={HeartFillIcon} color="red.500" />
<strong className={styles["how-to-header"]}>Donate</strong>
<Code ml={isMobile ? 0 : 2} mt={isMobile ? 2 : 0}>
{"Support this project by sponsoring me on GitHub"}
</Code>
</ListItem>
</List>
</CardBody>
<Divider />
<CardFooter
display={"flex"}
justifyContent={"flex-end"}
alignItems={"flex-end"}
>
<ButtonGroup gap={3}>
<Link as={NextLink} href="https://github.com/sponsors/lineville">
<Button colorScheme="pink" leftIcon={<HeartFillIcon />}>
Donate
</Button>
</Link>
<Link as={NextLink} href="https://github.com/lineville/guess-who">
<Button colorScheme={"blackAlpha"} leftIcon={<MarkGithubIcon />}>
Source Code
</Button>
</Link>
</ButtonGroup>
</CardFooter>
</Card>
</Box>
);
}
33 changes: 33 additions & 0 deletions src/components/InstructionsModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import {
Checkbox,
HStack,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalOverlay,
Text,
} from "@chakra-ui/react";
import Instructions from "./Instructions";

interface InstructionsModalProps {
isOpen: boolean;
onClose: () => void;
}

export default function InstructionsModal({
isOpen,
onClose,
}: InstructionsModalProps): JSX.Element {
return (
<Modal isOpen={isOpen} onClose={onClose} size="6xl" scrollBehavior="inside">
<ModalOverlay />
<ModalContent>
<ModalCloseButton onClick={onClose} />
<ModalBody overflowY="auto" style={{ touchAction: "auto" }} mr={6}>
<Instructions variant="filled" />
</ModalBody>
</ModalContent>
</Modal>
);
}
2 changes: 1 addition & 1 deletion src/components/QuestionModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ export default function QuestionModal({
</ModalBody>

<ModalFooter>
<Button colorScheme="blue" mr={3} onClick={handleAskQuestion}>
<Button colorScheme="blue" mr={3} onClick={handleAskQuestion} isDisabled={!question.trim()}>
Ask
</Button>
<Button variant="ghost" onClick={onClose}>
Expand Down

0 comments on commit 9faa357

Please sign in to comment.