7 |
11 | )
12 | }
13 |
14 | export default Error404
15 |
--------------------------------------------------------------------------------
/utils/store.ts:
--------------------------------------------------------------------------------
1 | import { configureStore } from "@reduxjs/toolkit"
2 | import userReducer from "@lib/userSlice"
3 | import pokemonReducer from "@lib/pokemonSlice"
4 |
5 | export const store = configureStore({
6 | reducer: {
7 | user: userReducer,
8 | pokemon: pokemonReducer,
9 | },
10 | })
11 |
12 | export type RootState = ReturnType404
9 |This page could not be found.
10 |
10 |
13 | )
14 |
15 | export default FlexBetween
16 |
--------------------------------------------------------------------------------
/pages/user/[uid].tsx:
--------------------------------------------------------------------------------
1 | import AccessDenied from "@components/AccessDenied/AccessDenied"
2 | import UserPage from "@components/Profile/UserPage"
3 | import { useSession } from "next-auth/client"
4 | import { useRouter } from "next/router"
5 | import React from "react"
6 |
7 | const User = () => {
8 | const [session] = useSession()
9 | const router = useRouter()
10 |
11 | if (!session) return {category}
11 |{details}
12 |
8 |
15 | )
16 | }
17 |
18 | export default AccessDenied
19 |
--------------------------------------------------------------------------------
/components/Leaderboard/_leaderboard.scss:
--------------------------------------------------------------------------------
1 | .leaderboard-page {
2 | margin-top: 40px;
3 |
4 | .table-wrapper {
5 | .table-head,
6 | .table-row {
7 | display: grid;
8 | grid-template-columns: repeat(3, 1fr);
9 | align-items: center;
10 | justify-items: center;
11 | height: 40px;
12 | }
13 | .table-row {
14 | font-weight: 300;
15 | cursor: pointer;
16 | border-radius: 5px;
17 | transition: all 0.1s ease-in-out;
18 | &:hover {
19 | background: #00000025;
20 | }
21 | }
22 | }
23 | }
24 |
25 | .spinner-wrapper {
26 | position: fixed;
27 | bottom: 50px;
28 | right: 50px;
29 | }
30 |
--------------------------------------------------------------------------------
/components/Cards/EndCard.tsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image"
2 | import React from "react"
3 |
4 | const EndCard: React.FC = () => {
5 | return (
6 | Access Denied
10 |You must be signed in to view this page
11 | 14 |
7 |
24 | )
25 | }
26 |
27 | export default EndCard
28 |
--------------------------------------------------------------------------------
/components/InputComponents/Search.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { FaSearch } from "react-icons/fa"
3 |
4 | interface SearchProps {
5 | handleSearch: (event: React.ChangeEvent
13 |
23 | End of Deck
22 |
12 |
23 | )
24 | }
25 |
26 | export default Search
27 |
--------------------------------------------------------------------------------
/pages/explore.tsx:
--------------------------------------------------------------------------------
1 | import ExplorePage from "@components/Explore/ExplorePage"
2 | import HeadTitle from "@components/HeadTitle/HeadTitle"
3 | import { fetchExploreList } from "@helpers/getPokemon"
4 | import { PokemonDataInterface } from "@interfaces/Interfaces"
5 | import { InferGetStaticPropsType } from "next"
6 |
7 | export const getStaticProps = async () => {
8 | const list = await fetchExploreList()
9 | return {
10 | props: {
11 | pokemons: list,
12 | },
13 | }
14 | }
15 |
16 | const Explore = ({ pokemons }: InferGetStaticPropsType
13 |
25 | )
26 | }
27 |
28 | export default Sort
29 |
--------------------------------------------------------------------------------
/pages/api/user/[userID].ts:
--------------------------------------------------------------------------------
1 | import type { NextApiRequest, NextApiResponse } from "next"
2 | import User from "@models/User"
3 | import dbConnect from "@utils/dataBaseConnection"
4 | import { getSession } from "next-auth/client"
5 |
6 | export default async (req: NextApiRequest, res: NextApiResponse) => {
7 | await dbConnect()
8 | const session = getSession({ req })
9 | const { userID } = req.query
10 | const { method } = req
11 | if (method === "GET" && session) {
12 | try {
13 | const user = await User.findById(userID)
14 | if (user) {
15 | return res.json({ user })
16 | }
17 | return res.status(404).json({ message: "Cannot find user" })
18 | } catch (err) {
19 | return res.status(400).json({ err })
20 | }
21 | } else {
22 | return res.status(400).json({ message: "invalid method or not authorized" })
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/components/LandingPage/_landing-page.scss:
--------------------------------------------------------------------------------
1 | .landing-page {
2 | width: 100%;
3 | min-height: 80vh;
4 | display: flex;
5 | justify-content: space-between;
6 | align-items: center;
7 |
8 | .right {
9 | display: none;
10 | @media screen and (min-width: 640px) {
11 | display: block;
12 | }
13 | .card-wrapper {
14 | height: 315px;
15 | width: 240px;
16 |
17 | button {
18 | display: none;
19 | }
20 | .name {
21 | font-size: medium;
22 | }
23 | }
24 | }
25 |
26 | .left {
27 | h1 {
28 | line-height: 1.2;
29 | }
30 | .button-wrapper {
31 | margin-top: 20px;
32 | button {
33 | margin-right: 10px;
34 | }
35 | }
36 | .signin {
37 | font-size: smaller;
38 | button:hover {
39 | color: $color-accent-dark;
40 | }
41 | }
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/pages/_error.tsx:
--------------------------------------------------------------------------------
1 | import HeadTitle from "@components/HeadTitle/HeadTitle"
2 | import type { NextPageContext } from "next"
3 |
4 | interface ErrorProps {
5 | statusCode: number
6 | message: string
7 | }
8 |
9 | function Error({ statusCode, message }: ErrorProps) {
10 | return (
11 |
12 |
16 | )
17 | }
18 |
19 | Error.getInitialProps = ({ res, err }: NextPageContext) => {
20 | let statusCode
21 | let message
22 | if (res) {
23 | statusCode = res.statusCode
24 | message = res.statusMessage
25 | }
26 | if (err) {
27 | statusCode = err.statusCode
28 | message = err.message
29 | }
30 |
31 | return { statusCode, message }
32 | }
33 |
34 | export default Error
35 |
--------------------------------------------------------------------------------
/pages/api/signin.ts:
--------------------------------------------------------------------------------
1 | import type { NextApiRequest, NextApiResponse } from "next"
2 | import User from "@models/User"
3 | import dbConnect from "@utils/dataBaseConnection"
4 |
5 | export default async (req: NextApiRequest, res: NextApiResponse) => {
6 | await dbConnect()
7 |
8 | let user
9 | const { uid, name, picture } = req.body
10 | const { method } = req
11 | if (method === "POST") {
12 | try {
13 | const isUserAlready = await User.findOne({ uid })
14 | if (isUserAlready) {
15 | user = isUserAlready
16 | return res.status(200).json({ user })
17 | }
18 | const newuser = new User({ uid, name, picture })
19 | user = await newuser.save()
20 | return res.status(201).json({ user })
21 | } catch (err) {
22 | return res.status(400).json({ err })
23 | }
24 | } else {
25 | return res.status(400).json({ message: "invalid method" })
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/components/Cards/HiddenCard.tsx:
--------------------------------------------------------------------------------
1 | import { getPokemonImage } from "@helpers/GlobalFunctions"
2 | import { NameIDInterface } from "@interfaces/Interfaces"
3 | import Image from "next/image"
4 | import React from "react"
5 |
6 | interface ExploreCardProps {
7 | pokemon: NameIDInterface
8 | reveal: boolean
9 | }
10 |
11 | const HiddenCard: React.FC{statusCode}
} 14 | {message &&{message}
} 15 |
15 |
26 | )
27 | }
28 |
29 | export default HiddenCard
30 |
--------------------------------------------------------------------------------
/pages/api/delete/[deleteID].ts:
--------------------------------------------------------------------------------
1 | import type { NextApiRequest, NextApiResponse } from "next"
2 | import User from "@models/User"
3 | import dbConnect from "@utils/dataBaseConnection"
4 | import { getSession } from "next-auth/client"
5 |
6 | export default async (req: NextApiRequest, res: NextApiResponse) => {
7 | await dbConnect()
8 | const session = getSession({ req })
9 | const { deleteID } = req.query
10 | const { method } = req
11 | if (method === "DELETE" && session) {
12 | try {
13 | const isUserAlready = await User.findById(deleteID)
14 | if (isUserAlready) {
15 | isUserAlready.remove()
16 | return res.json({ message: `Account was deleted` })
17 | }
18 | return res.status(404).json({ message: "Cannot find user" })
19 | } catch (err) {
20 | return res.status(400).json({ err })
21 | }
22 | } else {
23 | return res.status(400).json({ message: "invalid method or not authorized" })
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/pages/api/auth/[...nextauth].ts:
--------------------------------------------------------------------------------
1 | import NextAuth from "next-auth"
2 | import Providers from "next-auth/providers"
3 | import { NextApiRequest, NextApiResponse } from "next"
4 |
5 | export default (req: NextApiRequest, res: NextApiResponse) =>
6 | NextAuth(req, res, {
7 | providers: [
8 | Providers.GitHub({
9 | clientId: process.env.GITHUB_CLIENT_ID,
10 | clientSecret: process.env.GITHUB_CLIENT_SECRET,
11 | scope: "read:user",
12 | }),
13 | ],
14 | session: {
15 | maxAge: 60 * 60 * 24,
16 | },
17 | secret: process.env.AUTH_SECRET,
18 | jwt: {
19 | secret: process.env.JWT_SECRET,
20 | },
21 | callbacks: {
22 | session: async (session, user) => {
23 | session.user = user
24 | session.user = {
25 | name: user.name,
26 | picture: user.picture as string,
27 | uid: user.sub as string,
28 | }
29 | return Promise.resolve(session)
30 | },
31 | },
32 | })
33 |
--------------------------------------------------------------------------------
/styles/_pages.scss:
--------------------------------------------------------------------------------
1 | .page {
2 | width: 100%;
3 | min-height: 80vh;
4 | height: max-content;
5 | display: flex;
6 | flex-direction: column;
7 | align-items: center;
8 | justify-content: center;
9 | user-select: none;
10 |
11 | .black-button {
12 | border-radius: 5px;
13 | margin-top: 10px;
14 | font-size: 1rem;
15 | padding: 5px 10px;
16 | }
17 | }
18 |
19 | .error-page {
20 | width: 100%;
21 | min-height: 80vh;
22 | height: max-content;
23 | display: flex;
24 | align-items: center;
25 | justify-content: center;
26 |
27 | .status-code {
28 | display: inline-block;
29 | border-right: 1px solid rgba(0, 0, 0, 0.3);
30 | margin: 0;
31 | margin-right: 20px;
32 | padding: 10px 23px 10px 0;
33 | font-size: 24px;
34 | font-weight: 500;
35 | vertical-align: top;
36 | }
37 | .message {
38 | font-size: 14px;
39 | font-weight: normal;
40 | line-height: inherit;
41 | margin: 0;
42 | padding: 0;
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "allowJs": true,
4 | "alwaysStrict": true,
5 | "esModuleInterop": true,
6 | "forceConsistentCasingInFileNames": true,
7 | "isolatedModules": true,
8 | "jsx": "preserve",
9 | "lib": ["dom", "es2019"],
10 | "module": "esnext",
11 | "moduleResolution": "node",
12 | "noEmit": true,
13 | "noFallthroughCasesInSwitch": true,
14 | "noUnusedLocals": true,
15 | "noUnusedParameters": true,
16 | "resolveJsonModule": true,
17 | "skipLibCheck": true,
18 | "strict": true,
19 | "target": "esnext",
20 | "baseUrl": "./",
21 | "paths": {
22 | "@models/*": ["models/*"],
23 | "@utils/*": ["utils/*"],
24 | "@components/*": ["components/*"],
25 | "@lib/*": ["lib/*"],
26 | "@helpers/*": ["helpers/*"],
27 | "@interfaces/*": ["interfaces/*"],
28 | "@styles/*": ["styles/*"]
29 | }
30 | },
31 |
32 | "exclude": ["node_modules"],
33 | "include": ["**/*.ts", "**/*.tsx"]
34 | }
35 |
--------------------------------------------------------------------------------
/pages/api/update/[updateID].ts:
--------------------------------------------------------------------------------
1 | import type { NextApiRequest, NextApiResponse } from "next"
2 | import User from "@models/User"
3 | import dbConnect from "@utils/dataBaseConnection"
4 | import { getSession } from "next-auth/client"
5 |
6 | export default async (req: NextApiRequest, res: NextApiResponse) => {
7 | await dbConnect()
8 | const session = getSession({ req })
9 | const {
10 | method,
11 | query: { updateID },
12 | body,
13 | } = req
14 | if (method === "PATCH" && session) {
15 | try {
16 | const isUserAlready = await User.findById(updateID)
17 | if (isUserAlready) {
18 | isUserAlready[body.key] = body[body.key]
19 | const user = await isUserAlready.save()
20 | return res.status(202).json({ user })
21 | }
22 | return res.status(404).json({ message: "Cannot find user" })
23 | } catch (err) {
24 | return res.status(400).json({ err })
25 | }
26 | } else {
27 | return res.status(400).json({ message: "invalid method or not authorized" })
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import Router from "next/router"
2 | import type { AppProps } from "next/app"
3 | import { Provider as ReduxProvider } from "react-redux"
4 | import { Provider as NextAuthProvider } from "next-auth/client"
5 | import ProgressBar from "@badrap/bar-of-progress"
6 | import Nav from "@components/Nav/Nav"
7 | import "@styles/styles.scss"
8 | import { store } from "@utils/store"
9 |
10 | const progress = new ProgressBar({
11 | size: 2,
12 | color: "#ff5a5f",
13 | className: "bar-of-progress",
14 | delay: 100,
15 | })
16 |
17 | Router.events.on("routeChangeStart", progress.start)
18 | Router.events.on("routeChangeComplete", progress.finish)
19 | Router.events.on("routeChangeError", progress.finish)
20 |
21 | const MyApp = ({ Component, pageProps }: AppProps) => {
22 | return (
23 |
21 |
25 |
22 |
24 |
27 |
29 |
16 |
31 | )
32 | }
33 |
34 | export default FilterByType
35 |
--------------------------------------------------------------------------------
/components/Explore/_explore.scss:
--------------------------------------------------------------------------------
1 | .item-wrapper {
2 | padding: 10px 20px;
3 | display: flex;
4 | align-items: flex-start;
5 | justify-content: center;
6 | flex-direction: column;
7 | @media screen and (min-width: 640px) {
8 | flex-direction: row;
9 | align-items: center;
10 | }
11 |
12 | .select-wrapper {
13 | position: relative;
14 | color: #666;
15 | cursor: pointer;
16 |
17 | &:focus-within,
18 | &:hover {
19 | color: #000;
20 | }
21 |
22 | select,
23 | input {
24 | appearance: none;
25 | font-family: inherit;
26 | border: none;
27 | outline: none;
28 | font-family: inherit;
29 | background: none;
30 | font-size: 0.75rem;
31 | padding: 5px 10px 5px 20px;
32 | color: inherit;
33 | max-width: 180px;
34 | }
35 |
36 | svg {
37 | position: absolute;
38 | left: 0;
39 | top: 50%;
40 | transform: translateY(-50%);
41 | pointer-events: none;
42 | }
43 | }
44 | }
45 |
46 | .undo-wrapper {
47 | border-radius: 50%;
48 | padding: 10px;
49 | background: #fff;
50 | display: flex;
51 | align-items: center;
52 | justify-content: center;
53 | }
54 |
--------------------------------------------------------------------------------
/components/HeadTitle/HeadTitle.tsx:
--------------------------------------------------------------------------------
1 | import Head from "next/head"
2 | import React from "react"
3 |
4 | interface HeadTitleProps {
5 | title: string
6 | }
7 |
8 | const metaDescription =
9 | 'A pokédex in card style. Explore and swipe through pokemon cards or play "who\'s that pokemon?".'
10 | const metaIMG = "./screen.gif"
11 |
12 | const HeadTitle: React.FC
11 | {list && (
12 |
34 | )
35 | }
36 |
37 | export default LeaderboardPage
38 |
--------------------------------------------------------------------------------
/helpers/getUsers.ts:
--------------------------------------------------------------------------------
1 | import { UserSessionProps, UserFavoritesProps } from "@interfaces/Interfaces"
2 | import axios from "axios"
3 |
4 | export async function getUsers(link: string) {
5 | const { data } = await axios.get(`${link}`)
6 | return data
7 | }
8 |
9 | export const getUserSignIn = async (body: UserSessionProps) => {
10 | const { data } = await axios.post(`/api/signin`, body)
11 | return data
12 | }
13 |
14 | export const deleteUser = async (id: string) => {
15 | const { data } = await axios.delete(`/api/delete/${id}`)
16 | return data
17 | }
18 |
19 | type UpdateKey = "score" | "favorites" | "name"
20 |
21 | export const updateUserScore = async (id: string, key: UpdateKey, score: number) => {
22 | const { data } = await axios.patch(`/api/update/${id}`, { key, score })
23 | return data
24 | }
25 |
26 | export const updateUserFavorites = async (
27 | id: string,
28 | key: UpdateKey,
29 | favorites: UserFavoritesProps[]
30 | ) => {
31 | const { data } = await axios.patch(`/api/update/${id}`, { key, favorites })
32 | return data
33 | }
34 |
35 | export const updateUserName = async (id: string, key: UpdateKey, name: string) => {
36 | const { data } = await axios.patch(`/api/update/${id}`, { key, name })
37 | return data
38 | }
39 |
--------------------------------------------------------------------------------
/components/Game/GameOver.tsx:
--------------------------------------------------------------------------------
1 | import { useAppDispatch, useAppSelector } from "@lib/reduxHooks"
2 | import { updateScore } from "@lib/userSlice"
3 | import { useSession } from "next-auth/client"
4 | import Link from "next/link"
5 | import React, { useEffect } from "react"
6 | import { IoClose } from "react-icons/io5"
7 |
8 | interface GameOverProps {
9 | score: number
10 | handleCloseModal: () => void
11 | }
12 |
13 | const GameOver: React.FC
13 |
32 | )}
33 |
14 |
18 | {list
19 | .sort((a, b) => b.score - a.score)
20 | .map((user, index) => (
21 |
22 |
23 | Rank
15 |Name
16 |Score
17 |
24 |
28 |
29 |
30 | ))}
31 | {index + 1}
25 |{user.name}
26 |{user.score}
27 |
24 |
40 | )
41 | }
42 |
43 | export default GameOver
44 |
--------------------------------------------------------------------------------
/public/favicon.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
18 |
--------------------------------------------------------------------------------
/components/Game/Options.tsx:
--------------------------------------------------------------------------------
1 | import { motion } from "framer-motion"
2 | import React from "react"
3 |
4 | interface OptionsProps {
5 | options: string[]
6 | handleSelect: (option: string) => void
7 | reveal: boolean
8 | chosen: string | null
9 | answer: string
10 | }
11 |
12 | const Options: React.FC
25 |
26 |
28 |
39 |
26 | handleCloseModal()} />
27 |
28 | Game Over
29 |score: {score}
30 | {session &&best score: {userData?.score}
} 31 | {session && ( 32 | 33 | 34 | View Leaderboard 35 | 36 | 37 | )} 38 |
31 | {options.map((option) => (
32 | handleSelect(option)}
40 | whileTap={{
41 | scale: 0.95,
42 | }}
43 | whileHover={{
44 | cursor: "pointer",
45 | boxShadow: "rgba(0, 0, 0, 0.314) 0px 0px 15px 1px",
46 | }}
47 | >
48 |
50 | ))}
51 |
52 | )
53 | }
54 |
55 | export default Options
56 |
--------------------------------------------------------------------------------
/styles/_config.scss:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap");
2 |
3 | $color-accent-light: #ff5a5f;
4 | $color-accent-dark: #c81d25;
5 |
6 | *,
7 | *::before,
8 | *::after {
9 | margin: 0;
10 | padding: 0;
11 | box-sizing: border-box;
12 | }
13 |
14 | body {
15 | width: 100%;
16 | font-family: "Poppins", sans-serif;
17 | overflow-x: hidden;
18 | background-image: url("/bg-tile.png");
19 | background-repeat: repeat;
20 | }
21 |
22 | .container {
23 | width: 100%;
24 | margin: 0 auto;
25 | padding: 0 25px;
26 | @media screen and (min-width: 640px) {
27 | max-width: 640px;
28 | }
29 | @media screen and (min-width: 768px) {
30 | max-width: 768px;
31 | }
32 | @media screen and (min-width: 1024px) {
33 | max-width: 1024px;
34 | }
35 | @media screen and (min-width: 1280px) {
36 | max-width: 1280px;
37 | }
38 | }
39 |
40 | .mt-40 {
41 | margin-top: 20px;
42 | margin-bottom: 20px;
43 |
44 | @media screen and (min-width: 640px) {
45 | margin-top: 40px;
46 | margin-bottom: 40px;
47 | }
48 | }
49 |
50 | button {
51 | appearance: none;
52 | background: none;
53 | border: none;
54 | outline: none;
55 | color: inherit;
56 | font-family: inherit;
57 | cursor: pointer;
58 | }
59 |
60 | .card-wrapper {
61 | height: 315px;
62 | width: 240px;
63 | user-select: none;
64 | margin-bottom: 50px;
65 | margin-top: 75px;
66 | position: relative;
67 |
68 | @media screen and (min-width: 640px) {
69 | height: 420px;
70 | width: 320px;
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "pokenext",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "format": "prettier --write **/*.{ts,tsx,scss,css,json,md}",
10 | "lint": "tsc --noEmit && eslint --fix **/*.ts?(x)"
11 | },
12 | "dependencies": {
13 | "@badrap/bar-of-progress": "^0.1.2",
14 | "@reduxjs/toolkit": "^1.5.1",
15 | "axios": "^0.21.1",
16 | "case": "^1.6.3",
17 | "framer-motion": "^4.1.4",
18 | "mongoose": "^5.12.3",
19 | "next": "^10.2.0",
20 | "next-absolute-url": "^1.2.2",
21 | "next-auth": "^3.17.2",
22 | "popmotion": "^9.3.5",
23 | "react": "17.0.2",
24 | "react-dom": "17.0.2",
25 | "react-icons": "^4.2.0",
26 | "react-redux": "^7.2.3",
27 | "react-spinners": "^0.10.6",
28 | "redux": "^4.0.5",
29 | "sass": "^1.32.8",
30 | "swr": "^0.5.6"
31 | },
32 | "devDependencies": {
33 | "@types/node": "^14.14.37",
34 | "@types/react": "^17.0.3",
35 | "@typescript-eslint/eslint-plugin": "^4.21.0",
36 | "@typescript-eslint/parser": "^4.21.0",
37 | "eslint": "^7.24.0",
38 | "eslint-config-airbnb-typescript": "^12.3.1",
39 | "eslint-config-prettier": "^8.1.0",
40 | "eslint-plugin-import": "^2.22.1",
41 | "eslint-plugin-jsx-a11y": "^6.4.1",
42 | "eslint-plugin-prettier": "^3.3.1",
43 | "eslint-plugin-react": "^7.23.2",
44 | "eslint-plugin-react-hooks": "^4.2.0",
45 | "prettier": "^2.2.1",
46 | "prettier-eslint-cli": "^5.0.1",
47 | "typescript": "^4.2.4"
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/components/PokemonPage/PokemonPage.tsx:
--------------------------------------------------------------------------------
1 | import Card from "@components/Cards/Card"
2 | import { getEvolutionData, getPokemonData, getPokemonSpeciesData } from "@lib/pokemonSlice"
3 | import { useAppDispatch, useAppSelector } from "@lib/reduxHooks"
4 | import { useRouter } from "next/router"
5 | import { useEffect } from "react"
6 | import BioTrainCard from "./BioTrainCard"
7 | import EvoStatCard from "./EvoStatCard"
8 |
9 | const PokemonPage = () => {
10 | const { pokemonSpeciesData, pokemonData } = useAppSelector((state) => state.pokemon)
11 | const router = useRouter()
12 | const { pid } = router.query
13 | const dispatch = useAppDispatch()
14 |
15 | useEffect(() => {
16 | if (pid) {
17 | dispatch(getPokemonSpeciesData(+pid))
18 | dispatch(getPokemonData(+pid))
19 | }
20 | }, [pid, dispatch])
21 |
22 | useEffect(() => {
23 | if (pokemonSpeciesData) {
24 | dispatch(getEvolutionData(pokemonSpeciesData.evolution_chain.url))
25 | }
26 | }, [pokemonSpeciesData, dispatch])
27 |
28 | return (
29 | {option}
49 |
30 |
33 |
43 | )
44 | }
45 |
46 | export default PokemonPage
47 |
--------------------------------------------------------------------------------
/components/PokemonPage/EvoStatCard.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { PokemonDataInterface } from "@interfaces/Interfaces"
3 | import Evolution from "./Evolution"
4 |
5 | interface RightCardProps {
6 | pokemondata: PokemonDataInterface
7 | }
8 |
9 | const EvoStatCard: React.FC
34 |
42 | {pokemonData &&
35 |
36 | {pokemonSpeciesData && pokemonData && (
37 |
41 |
11 |
45 | )
46 |
47 | export default EvoStatCard
48 |
--------------------------------------------------------------------------------
/lib/pokemonSlice.ts:
--------------------------------------------------------------------------------
1 | import {
2 | PokemonDataInterface,
3 | PokemonSpeciesDataInterface,
4 | NameURLInterface,
5 | } from "@interfaces/Interfaces"
6 | import { createAsyncThunk, createSlice } from "@reduxjs/toolkit"
7 | import { fetchEvolutionData, fetchPokemonData, fetchSpeciesData } from "@helpers/getPokemon"
8 | import { extractEvolutionChain } from "@helpers/GlobalFunctions"
9 |
10 | export const getPokemonData = createAsyncThunk("pokemon/data", async (id: number) => {
11 | const data = await fetchPokemonData(id)
12 | return data
13 | })
14 |
15 | export const getPokemonSpeciesData = createAsyncThunk("pokemon/species", async (id: number) => {
16 | const data = await fetchSpeciesData(id)
17 | return data
18 | })
19 |
20 | export const getEvolutionData = createAsyncThunk("pokemon/evolution", async (link: string) => {
21 | const data = await fetchEvolutionData(link)
22 | const evolutionChain = extractEvolutionChain(data)
23 | return evolutionChain
24 | })
25 |
26 | interface InitialStateProps {
27 | pokemonData: PokemonDataInterface | null
28 | pokemonSpeciesData: PokemonSpeciesDataInterface | null
29 | evolutionData: NameURLInterface[] | null
30 | }
31 |
32 | const initialState: InitialStateProps = {
33 | pokemonData: null,
34 | pokemonSpeciesData: null,
35 | evolutionData: null,
36 | }
37 |
38 | const pokemon = createSlice({
39 | name: "pokemon",
40 | initialState,
41 | reducers: {},
42 | extraReducers: (builder) => {
43 | builder.addCase(getPokemonSpeciesData.fulfilled, (state, { payload }) => {
44 | state.pokemonSpeciesData = payload
45 | })
46 | builder.addCase(getEvolutionData.fulfilled, (state, { payload }) => {
47 | state.evolutionData = payload
48 | })
49 | builder.addCase(getPokemonData.fulfilled, (state, { payload }) => {
50 | state.pokemonData = payload
51 | })
52 | },
53 | })
54 |
55 | export default pokemon.reducer
56 |
--------------------------------------------------------------------------------
/helpers/getTypeIconsAndColor.ts:
--------------------------------------------------------------------------------
1 | const normal = "/typeIcons/normal.png"
2 | const fire = "/typeIcons/fire.png"
3 | const fighting = "/typeIcons/fighting.png"
4 | const water = "/typeIcons/water.png"
5 | const flying = "/typeIcons/flying.png"
6 | const grass = "/typeIcons/grass.png"
7 | const poison = "/typeIcons/poison.png"
8 | const electric = "/typeIcons/electric.png"
9 | const ground = "/typeIcons/ground.png"
10 | const psychic = "/typeIcons/psychic.png"
11 | const rock = "/typeIcons/rock.png"
12 | const ice = "/typeIcons/ice.png"
13 | const bug = "/typeIcons/bug.png"
14 | const dragon = "/typeIcons/dragon.png"
15 | const ghost = "/typeIcons/ghost.png"
16 | const dark = "/typeIcons/dark.png"
17 | const steel = "/typeIcons/steel.png"
18 | const fairy = "/typeIcons/fairy.png"
19 |
20 | export const getTypeIcon = (type: string) => {
21 | const colors = {
22 | normal,
23 | fire,
24 | fighting,
25 | water,
26 | flying,
27 | grass,
28 | poison,
29 | electric,
30 | ground,
31 | psychic,
32 | rock,
33 | ice,
34 | bug,
35 | dragon,
36 | ghost,
37 | dark,
38 | steel,
39 | fairy,
40 | }
41 | const getIcon = Object.entries(colors).filter(([key]) => key === type)
42 | return getIcon[0]
43 | }
44 |
45 | export const findColor = (color: string) => {
46 | const colors = {
47 | normal: "#C4C4A4",
48 | fire: "#F08030",
49 | fighting: "#C03028",
50 | water: "#6890F0",
51 | flying: "#A890F0",
52 | grass: "#78C850",
53 | poison: "#A040A0",
54 | electric: "#F8D030",
55 | ground: "#E0C068",
56 | psychic: "#F85888",
57 | rock: "#B8A038",
58 | ice: "#98D8D8",
59 | bug: "#A8B820",
60 | dragon: "#7038F8",
61 | ghost: "#705898",
62 | dark: "#705848",
63 | steel: "#B8B8D0",
64 | fairy: "#EE99AC",
65 | }
66 | const getColor = Object.entries(colors).filter(([key]) => key === color)
67 | return getColor[0]
68 | }
69 |
--------------------------------------------------------------------------------
/components/PokemonPage/_pokemon-page.scss:
--------------------------------------------------------------------------------
1 | .flex-wrapper {
2 | width: 100%;
3 | display: grid;
4 | grid-template-columns: 1fr 1fr;
5 | }
6 |
7 | .evolution-wrapper {
8 | display: flex;
9 | align-items: center;
10 | justify-content: space-evenly;
11 |
12 | .evolution-card {
13 | display: flex;
14 | flex-direction: column;
15 | align-items: center;
16 |
17 | .evolution-img {
18 | display: flex;
19 | align-items: center;
20 | justify-content: center;
21 | border-radius: 50%;
22 | height: 100px;
23 | width: 100px;
24 | cursor: pointer;
25 | }
26 | }
27 | }
28 |
29 | .cards-container {
30 | margin-top: 40px;
31 | display: grid;
32 | grid-template-rows: 420px 1fr;
33 | grid-template-columns: unset;
34 | grid-gap: 40px;
35 | align-items: center;
36 | justify-items: center;
37 | height: max-content;
38 | font-size: small;
39 | width: 100%;
40 |
41 | .details-wrapper {
42 | width: 100%;
43 | }
44 |
45 | @media screen and (min-width: 768px) {
46 | grid-template-rows: unset;
47 | grid-template-columns: 320px 1fr;
48 | }
49 |
50 | .details {
51 | margin: 20px 0;
52 | height: max-content;
53 | padding: 0 20px;
54 | }
55 | .card-wrapper {
56 | margin: 0;
57 | }
58 | .biotrain-content {
59 | display: flex;
60 | flex-direction: column;
61 |
62 | @media screen and (min-width: 768px) {
63 | display: grid;
64 | grid-template-columns: 1fr 1fr;
65 | grid-gap: 20px;
66 | }
67 |
68 | .flavor {
69 | word-wrap: break-word;
70 | margin-bottom: 10px;
71 | }
72 | }
73 | .stats-container {
74 | display: grid;
75 | grid-template-columns: repeat(6, 1fr);
76 |
77 | .stats {
78 | display: flex;
79 | align-items: center;
80 | justify-content: center;
81 | flex-direction: column;
82 | }
83 | }
84 | }
85 |
86 | .title {
87 | font-weight: bold;
88 | font-size: medium;
89 | }
90 |
--------------------------------------------------------------------------------
/helpers/getPokemon.ts:
--------------------------------------------------------------------------------
1 | import { NameURLInterface, PokemonTypes } from "@interfaces/Interfaces"
2 | import axios from "axios"
3 | import { getIDfromURL, getPokemonImage } from "./GlobalFunctions"
4 |
5 | const headURL = "https://pokeapi.co/"
6 | const limit = process.env.NODE_ENV === "production" ? 807 : 8
7 | export const fetchExploreList = async () => {
8 | const { data: pokemonlist } = await axios.get(`${headURL}api/v2/pokemon/?limit=${limit}&offset=0`)
9 | const list = Promise.all(
10 | pokemonlist.results.map(async (pokemon: NameURLInterface) => {
11 | const { data } = await axios.get(pokemon.url)
12 | return {
13 | id: data.id,
14 | name: data.species.name,
15 | types: data.types.map((type: PokemonTypes) => type.type.name),
16 | sprite: getPokemonImage(data.id),
17 | }
18 | })
19 | )
20 | return list
21 | }
22 |
23 | export const fetchPlayList = async () => {
24 | const { data } = await axios.get(`${headURL}api/v2/pokemon/?limit=${limit}&offset=0`)
25 | const list = data.results.map(({ name, url }: NameURLInterface) => ({
26 | name,
27 | id: getIDfromURL(url),
28 | }))
29 | const pokemonlist = list
30 | return pokemonlist
31 | }
32 |
33 | export const fetchPokemonData = async (id: number) => {
34 | const { data } = await axios.get(`${headURL}api/v2/pokemon/${id}`)
35 | return {
36 | abilities: data.abilities,
37 | base_experience: data.base_experience,
38 | height: data.height,
39 | id: data.id,
40 | name: data.species.name,
41 | species: data.species,
42 | types: data.types.map((type: PokemonTypes) => type.type.name),
43 | weight: data.weight,
44 | stats: data.stats,
45 | sprite: getPokemonImage(data.id),
46 | }
47 | }
48 |
49 | export const fetchEvolutionData = async (link: string) => {
50 | const { data } = await axios.get(link)
51 | return data
52 | }
53 | export const fetchSpeciesData = async (id: number) => {
54 | const { data } = await axios.get(`${headURL}api/v2/pokemon-species/${id}/`)
55 | return data
56 | }
57 |
--------------------------------------------------------------------------------
/components/Game/_game.scss:
--------------------------------------------------------------------------------
1 | .modal {
2 | position: fixed;
3 | top: 0;
4 | left: 0;
5 | height: 100%;
6 | width: 100%;
7 | background: #00000080;
8 | display: flex;
9 | align-items: center;
10 | justify-content: center;
11 |
12 | .wrapper {
13 | padding: 50px;
14 | display: flex;
15 | align-items: center;
16 | justify-content: center;
17 | flex-direction: column;
18 | position: relative;
19 | background: #fff;
20 | border-radius: 20px;
21 |
22 | span {
23 | margin-top: 20px;
24 | }
25 |
26 | .close-modal {
27 | position: absolute;
28 | top: 10px;
29 | right: 10px;
30 | cursor: pointer;
31 | }
32 | }
33 | }
34 |
35 | .play-wrapper {
36 | h1 {
37 | text-align: center;
38 | line-height: 1;
39 | font-size: 1rem;
40 | @media screen and (min-width: 640px) {
41 | font-size: 2rem;
42 | }
43 | }
44 |
45 | .dash {
46 | margin-top: 20px;
47 | display: flex;
48 | align-items: center;
49 | justify-content: space-between;
50 | width: 100%;
51 |
52 | @media screen and (min-width: 640px) {
53 | width: 320px;
54 | }
55 |
56 | span {
57 | margin-left: 5px;
58 | color: #ef2b2b;
59 | }
60 | }
61 |
62 | .options-wrapper {
63 | display: grid;
64 | grid-template-columns: 1fr 1fr;
65 | grid-template-rows: 1fr 1fr;
66 | grid-gap: 5px;
67 | align-items: center;
68 | justify-items: center;
69 |
70 | @media screen and (min-width: 640px) {
71 | display: flex;
72 | align-items: center;
73 | justify-content: center;
74 | flex-wrap: wrap;
75 | }
76 |
77 | .option {
78 | padding: 5px 10px;
79 | border-radius: 999px;
80 | width: 100%;
81 | text-align: center;
82 | p {
83 | font-size: small;
84 | }
85 | @media screen and (min-width: 640px) {
86 | padding: 10px 20px;
87 | margin: 10px;
88 | width: auto;
89 | p {
90 | font-size: medium;
91 | }
92 | }
93 | }
94 | }
95 | }
96 |
--------------------------------------------------------------------------------
/components/Profile/Favorites.tsx:
--------------------------------------------------------------------------------
1 | import Card from "@components/Cards/Card"
2 | import FilterByType from "@components/InputComponents/FilterByType"
3 | import Search from "@components/InputComponents/Search"
4 | import Sort from "@components/InputComponents/Sort"
5 | import { UserFavoritesProps } from "@interfaces/Interfaces"
6 | import useRefineItems from "@lib/useRefineItems"
7 | import React from "react"
8 |
9 | interface FavoritesProps {
10 | favorites: UserFavoritesProps[]
11 | }
12 |
13 | const Favorites: React.FC
12 |
15 | Evolution
13 |
16 |
44 | Stats
17 |
18 |
43 |
19 |
22 | HP
20 |{pokemondata.stats[0].base_stat}
21 |
23 |
26 | Atk
24 |{pokemondata.stats[1].base_stat}
25 |
27 |
30 | Def
28 |{pokemondata.stats[2].base_stat}
29 |
31 |
34 | Sp. Atk
32 |{pokemondata.stats[3].base_stat}
33 |
35 |
38 | Sp. Def
36 |{pokemondata.stats[4].base_stat}
37 |
39 |
42 | Speed
40 |{pokemondata.stats[5].base_stat}
41 |
43 |
61 | )
62 | }
63 |
64 | export default Favorites
65 |
--------------------------------------------------------------------------------
/lib/useRefineItems.ts:
--------------------------------------------------------------------------------
1 | import { shuffle } from "@helpers/GlobalFunctions"
2 | import { UserFavoritesProps } from "@interfaces/Interfaces"
3 | import { useMemo, useState } from "react"
4 |
5 | export type SortKey = "id" | "name" | null
6 |
7 | const useRefineItems = (items: UserFavoritesProps[]) => {
8 | const [sortKey, setSortKey] = useStateFavorites
44 |
45 |
53 |
54 | {refinedItems.map((favorite) => (
55 |
60 |
56 |
58 | ))}
59 |
30 | router.push(`/pokemon/${+getIDfromURL(url)}`)}
34 | style={{
35 | background: `linear-gradient(0deg, rgb(255,255,255) 0%, ${
36 | findColor(pokemonData.types[0])[1]
37 | } 80%)`,
38 | }}
39 | initial={{
40 | scale: 0,
41 | y: 0,
42 | opacity: 0,
43 | }}
44 | animate={{
45 | scale: 1,
46 | y: 0,
47 | opacity: 1,
48 | }}
49 | whileHover={{
50 | scale: 1.05,
51 | boxShadow: "0 0px 15px 0px rgba(0,0,0,.25)",
52 | }}
53 | whileTap={{
54 | scale: 1,
55 | boxShadow: "0 0px 0px 0px rgba(0,0,0,.25)",
56 | }}
57 | >
58 |
67 |
69 | ))}
70 | #{getIDfromURL(url)}
31 |{name}
68 |
58 |
81 | )
82 | }
83 |
84 | export default ExplorePage
85 |
--------------------------------------------------------------------------------
/components/Profile/_profile-page.scss:
--------------------------------------------------------------------------------
1 | .delete-button {
2 | padding: 5px 10px;
3 | border-radius: 5px;
4 | cursor: pointer;
5 | border: 1px solid red;
6 | color: red;
7 |
8 | &:hover {
9 | background: red;
10 | color: #fff;
11 | }
12 | }
13 |
14 | .buttons-wrapper {
15 | display: flex;
16 | align-items: center;
17 |
18 | .delete-button,
19 | .black-button {
20 | margin: 0 5px;
21 | margin-top: 10px;
22 | }
23 | }
24 |
25 | .black-button {
26 | padding: 5px 10px;
27 | border-radius: 5px;
28 | cursor: pointer;
29 | border: 1px solid black;
30 | color: black;
31 |
32 | &:hover {
33 | background: black;
34 | color: #fff;
35 | }
36 | }
37 |
38 | .favorites-wrapper {
39 | display: flex;
40 | align-items: center;
41 | justify-content: center;
42 | flex-wrap: wrap;
43 | margin-top: 20px;
44 | .card-wrapper {
45 | margin: 5px;
46 | height: 315px;
47 | width: 240px;
48 | .name {
49 | font-size: medium;
50 | }
51 | .card-container {
52 | box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.5);
53 | }
54 | }
55 | }
56 |
57 | .profile-wrapper {
58 | display: grid;
59 | grid-template-rows: 150px 1fr;
60 | grid-template-columns: unset;
61 | grid-gap: 20px;
62 | width: 100%;
63 | height: 100%;
64 |
65 | @media screen and (min-width: 640px) {
66 | grid-template-columns: 150px 1fr;
67 | grid-template-rows: unset;
68 | }
69 |
70 | .profile {
71 | display: flex;
72 | flex-direction: row;
73 | align-items: center;
74 | justify-content: space-between;
75 | @media screen and (min-width: 640px) {
76 | flex-direction: column;
77 | justify-content: flex-start;
78 | }
79 | .profile-card {
80 | display: flex;
81 | flex-direction: column;
82 | align-items: center;
83 | .name {
84 | font-size: large;
85 | }
86 | .score {
87 | font-size: small;
88 | }
89 |
90 | .avatar {
91 | border-radius: 50%;
92 | border: 2px solid #000;
93 | width: 100px;
94 | height: 100px;
95 |
96 | img {
97 | border-radius: 50%;
98 | }
99 | }
100 | }
101 |
102 | .button-wrapper {
103 | display: flex;
104 | flex-direction: column;
105 | align-items: center;
106 | margin-top: 20px;
107 | .delete-button,
108 | .black-button {
109 | margin-top: 10px;
110 | padding: 2.5px 5px;
111 | @media screen and (min-width: 640px) {
112 | padding: 5px 10px;
113 | }
114 | }
115 | }
116 | }
117 |
118 | .favorites {
119 | width: 100%;
120 | }
121 |
122 | .profile,
123 | .favorites {
124 | padding: 0 10px;
125 | }
126 | }
127 |
--------------------------------------------------------------------------------
/components/LandingPage/LandingPage.tsx:
--------------------------------------------------------------------------------
1 | import Card from "@components/Cards/Card"
2 | import Deck from "@components/Cards/Deck"
3 | import { signIn } from "next-auth/client"
4 | import { useRouter } from "next/router"
5 | import { wrap } from "popmotion"
6 | import React, { useEffect, useState } from "react"
7 | import { FaGithub } from "react-icons/fa"
8 |
9 | export const landingPokemons = [
10 | {
11 | id: 1,
12 | name: "bulbasaur",
13 | types: ["grass", "poison"],
14 | sprite: "https://raw.githubusercontent.com/HybridShivam/Pokemon/master/assets/images/001.png",
15 | },
16 | {
17 | id: 4,
18 | name: "charmander",
19 | types: ["fire"],
20 | sprite: "https://raw.githubusercontent.com/HybridShivam/Pokemon/master/assets/images/004.png",
21 | },
22 | {
23 | id: 7,
24 | name: "squirtle",
25 | types: ["water"],
26 | sprite: "https://raw.githubusercontent.com/HybridShivam/Pokemon/master/assets/images/007.png",
27 | },
28 | ]
29 |
30 | let timer: ReturnType
59 |
67 | {refinedItems && (
68 |
51 |
86 | )
87 | }
88 |
89 | export default LandingPage
90 |
--------------------------------------------------------------------------------
/interfaces/Interfaces.ts:
--------------------------------------------------------------------------------
1 | export interface UserFavoritesProps {
2 | id: number
3 | name: string
4 | types: string[]
5 | sprite: string
6 | _id?: string
7 | }
8 |
9 | export interface UserProps {
10 | favorites: UserFavoritesProps[]
11 | _id: string
12 | uid: string
13 | name: string
14 | picture: string
15 | score: number
16 | __v: number
17 | }
18 |
19 | export interface NameURLInterface {
20 | name: string
21 | url: string
22 | }
23 | export interface NameIDInterface {
24 | name: string
25 | id: string
26 | }
27 |
28 | interface PokemonAbilities {
29 | ability: NameURLInterface
30 | is_hidden: boolean
31 | }
32 | export interface PokemonTypes {
33 | slot: number
34 | type: NameURLInterface
35 | }
36 | interface PokemonStats {
37 | base_stat: number
38 | effort: number
39 | stat: NameURLInterface
40 | }
41 |
42 | export interface PokemonDataInterface {
43 | abilities: PokemonAbilities[]
44 | base_experience: number
45 | height: number
46 | id: number
47 | name: string
48 | species: NameURLInterface
49 | types: string[]
50 | weight: number
51 | stats: PokemonStats[]
52 | sprite: string
53 | }
54 |
55 | interface FlavorTextEntry {
56 | flavor_text: string
57 | language: { name: string; url: string }
58 | }
59 |
60 | interface Genera {
61 | genus: string
62 | language: {
63 | name: string
64 | url: string
65 | }
66 | }
67 |
68 | export interface PokemonSpeciesDataInterface {
69 | base_happiness: number
70 | capture_rate: number
71 | evolution_chain: { url: string }
72 | flavor_text_entries: FlavorTextEntry[]
73 | gender_rate: number
74 | generation: { name: string; url: string }
75 | growth_rate: { name: string; url: string }
76 | is_legendary: boolean
77 | is_mythical: boolean
78 | shape: { name: string; url: string }
79 | genera: Genera[]
80 | }
81 |
82 | interface Chain {
83 | is_baby: boolean
84 | species: NameURLInterface
85 | evolution_details: {
86 | item: NameURLInterface
87 | trigger: NameURLInterface
88 | gender: number
89 | held_item: NameURLInterface
90 | known_move: NameURLInterface
91 | known_move_type: NameURLInterface
92 | location: NameURLInterface
93 | min_level: NameURLInterface
94 | min_happiness: NameURLInterface
95 | min_beauty: NameURLInterface
96 | min_affection: NameURLInterface
97 | needs_overworldRain: boolean
98 | party_species: NameURLInterface
99 | party_type: NameURLInterface
100 | relative_physicalStats: number
101 | time_of_day: string
102 | trade_species: NameURLInterface
103 | turn_upside_down: boolean
104 | }[]
105 | evolves_to: Chain[]
106 | }
107 |
108 | export interface PokemonEvolutionChainInterface {
109 | baby_trigger_item: null
110 | chain: Chain
111 | }
112 |
113 | export interface UserSessionProps {
114 | name?: string | null
115 | picture?: string | null
116 | uid?: string | null
117 | }
118 |
--------------------------------------------------------------------------------
/components/Profile/ProfileComponent.tsx:
--------------------------------------------------------------------------------
1 | import { deleteUser } from "@helpers/getUsers"
2 | import { UserProps } from "@interfaces/Interfaces"
3 | import { signOut } from "next-auth/client"
4 | import Image from "next/image"
5 | import { useRouter } from "next/router"
6 | import React, { useState } from "react"
7 | import { IoClose } from "react-icons/io5"
8 | import Favorites from "./Favorites"
9 |
10 | interface ProfileComponentProps {
11 | userData: UserProps
12 | }
13 |
14 | const ProfileComponent: React.FC
52 |
73 | Pokédex app in card style
53 |Swipe through pokemon cards or guess who's that pokemon?
54 |55 | Record your score and collect your favorite pokemons by{" "} 56 | 57 | {" "} 58 | 61 | {" "} 62 |
63 | 64 |
65 |
68 |
71 |
72 |
74 |
85 |
31 |
87 | )
88 | }
89 |
90 | export default ProfileComponent
91 |
--------------------------------------------------------------------------------
/components/Cards/Card.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { UserFavoritesProps } from "@interfaces/Interfaces"
3 | import Image from "next/image"
4 | import { findColor, getTypeIcon } from "@helpers/getTypeIconsAndColor"
5 | import { getStringIDfromID } from "@helpers/GlobalFunctions"
6 | import { useAppDispatch, useAppSelector } from "@lib/reduxHooks"
7 | import { updateFavorites } from "@lib/userSlice"
8 | import { FaInfoCircle, FaRegStar, FaStar } from "react-icons/fa"
9 | import { useSession } from "next-auth/client"
10 | import { useRouter } from "next/router"
11 |
12 | export interface CardProps {
13 | pokemon: UserFavoritesProps
14 | }
15 |
16 | const Card: React.FC
32 |
59 | {userData.favorites.length > 0 ? (
60 |
33 |
47 |
48 | {!router.query.uid && (
49 |
34 |
43 |
44 | {userData.name}
45 |High score: {userData.score}
46 |
50 |
53 |
56 |
57 | )}
58 | No Favorites
63 | )} 64 | {confirm && ( 65 |
66 |
85 | )}
86 |
67 |
68 |
70 |
84 |
68 | setConfirm(false)} />
69 |
70 | Confirm Deletion
71 |72 | Are you sure you want to delete this account? You will not able to revert this 73 | process. 74 |
75 |
76 |
79 |
82 |
83 |
24 |
85 | )
86 | }
87 |
88 | export default Card
89 |
--------------------------------------------------------------------------------
/components/Cards/_card.scss:
--------------------------------------------------------------------------------
1 | .card-container {
2 | width: 100%;
3 | height: 100%;
4 | padding: 10px;
5 | background: #fff;
6 | border-radius: 20px;
7 | box-shadow: 0 5px 25px 1px rgba(0, 0, 0, 0.5);
8 | .card {
9 | height: 100%;
10 | width: 100%;
11 | padding: 10px;
12 | border-radius: 15px;
13 | position: relative;
14 | display: flex;
15 | align-items: center;
16 | justify-content: center;
17 | flex-direction: column;
18 |
19 | &:hover {
20 | .star-wrapper,
21 | .info-wrapper {
22 | transform: translateY(0px);
23 | opacity: 1;
24 | }
25 | }
26 |
27 | .icon-wrapper {
28 | position: relative;
29 | &:hover {
30 | .tooltip {
31 | opacity: 1;
32 | transform: translateX(-50%) translateY(0px);
33 | }
34 | }
35 | .tooltip {
36 | position: absolute;
37 | top: -30px;
38 | left: 50%;
39 | color: #fff;
40 | font-size: x-small;
41 | white-space: nowrap;
42 | padding: 5px 10px;
43 | border-radius: 2.5px;
44 | transform: translateX(-50%) translateY(5px);
45 | opacity: 0;
46 | pointer-events: none;
47 | transition: all 0.15s ease-in-out;
48 | background: #000;
49 |
50 | &::before {
51 | content: "";
52 | position: absolute;
53 | top: 100%;
54 | left: 50%;
55 | width: 0;
56 | height: 0;
57 | border: 5px solid transparent;
58 | border-top-color: #000;
59 | transform: translate(-50%, 0);
60 | }
61 | }
62 | }
63 |
64 | .star-wrapper {
65 | position: absolute;
66 | z-index: 1000;
67 | top: 8px;
68 | right: 10px;
69 | transition: all 0.15s ease-in-out;
70 | color: #fff;
71 | font-size: 1.5rem;
72 | transform: translateY(0px);
73 | opacity: 1;
74 | @media screen and (min-width: 640px) {
75 | transform: translateY(-10px);
76 | opacity: 0;
77 | }
78 |
79 | &:hover {
80 | color: #ffc300;
81 | }
82 | }
83 |
84 | .info-wrapper {
85 | position: absolute;
86 | z-index: 1000;
87 | top: 8px;
88 | left: 10px;
89 | transition: all 0.15s ease-in-out;
90 | transform: translateY(0px);
91 | opacity: 1;
92 | color: #fff;
93 | font-size: 1.5rem;
94 | @media screen and (min-width: 640px) {
95 | transform: translateY(-10px);
96 | opacity: 0;
97 | }
98 | &:hover {
99 | color: #eee;
100 | }
101 | }
102 |
103 | .types-container {
104 | display: flex;
105 | position: absolute;
106 | bottom: 25px;
107 | left: 50%;
108 | transform: translateX(-50%);
109 | }
110 | .id-number {
111 | position: absolute;
112 | top: 10px;
113 | left: 50%;
114 | transform: translateX(-50%);
115 | font-size: 2.5rem;
116 | font-weight: 700;
117 | opacity: 0.5;
118 | }
119 | .name {
120 | position: absolute;
121 | bottom: 0;
122 | left: 50%;
123 | transform: translateX(-50%);
124 | font-size: 1rem;
125 | font-weight: 700;
126 | line-height: 1;
127 | text-transform: capitalize;
128 |
129 | @media screen and (min-width: 640px) {
130 | font-size: 1.25rem;
131 | }
132 | }
133 | }
134 |
135 | img {
136 | user-select: none;
137 | pointer-events: none;
138 | }
139 | }
140 |
--------------------------------------------------------------------------------
/components/PokemonPage/BioTrainCard.tsx:
--------------------------------------------------------------------------------
1 | import { PokemonDataInterface, PokemonSpeciesDataInterface } from "@interfaces/Interfaces"
2 | import React from "react"
3 | import Case from "case"
4 | import { getFlavorSpeech } from "@helpers/GlobalFunctions"
5 | import FlexBetween from "./FlexBetween"
6 |
7 | interface LeftCardProps {
8 | pokemondata: PokemonDataInterface
9 | speciesdata: PokemonSpeciesDataInterface
10 | }
11 |
12 | const BioTrainCard: React.FC
32 | {session && !router.query.uid && (
33 |
50 | )}
51 |
52 | {!router.query.pid && (
53 |
63 | )}
64 |
65 |
84 | #{getStringIDfromID(id)}
66 |
68 | {types.map((type) => (
69 | [1]})
1 ? "-2.5px" : "0",
76 | }}
77 | key={type}
78 | alt={getTypeIcon(type)[0]}
79 | />
80 | ))}
81 |
82 | {name}
83 |
15 | {speciesdata && pokemondata && (
16 |
90 | )}
91 |
92 | )
93 | }
94 |
95 | export default BioTrainCard
96 |
--------------------------------------------------------------------------------
/components/Game/GamePage.tsx:
--------------------------------------------------------------------------------
1 | import Deck from "@components/Cards/Deck"
2 | import HiddenCard from "@components/Cards/HiddenCard"
3 | import { getOptions, shuffle } from "@helpers/GlobalFunctions"
4 | import { NameIDInterface } from "interfaces/Interfaces"
5 | import { useEffect, useState } from "react"
6 | import { ImHeart } from "react-icons/im"
7 | import Options from "./Options"
8 | import GameOver from "./GameOver"
9 |
10 | interface ExploreProps {
11 | pokemonsList: NameIDInterface[]
12 | }
13 |
14 | const GamePage: React.FC
17 |
71 |
72 |
18 |
70 | Bio
19 |{Case.sentence(getFlavorSpeech(speciesdata, pokemondata))}
20 |
21 |
22 |
26 | {Case.capital(
27 | speciesdata.genera.filter((entry) => entry.language.name === "en")[0].genus
28 | )}
29 |
30 | }
31 | />
32 |
36 | {pokemondata.height / 10}m{" "}
37 |
38 | ({Math.floor(((pokemondata.height / 10) * 39.37) / 12)}'
39 | {(((pokemondata.height / 10) * 39.37) % 12).toFixed(1)}")
40 |
41 |
42 | }
43 | />
44 |
48 | {pokemondata.weight / 10}kg{" "}
49 | ({((pokemondata.weight / 10) * 2.2).toFixed(1)} lbs)
50 |
51 | }
52 | />
53 |
57 | {pokemondata.abilities.map((ability) => (
58 |
67 | }
68 | />
69 | 59 | {ability.ability.name 60 | .split("-") 61 | .map((txt) => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase()) 62 | .join(" ")}{" "} 63 | {ability.is_hidden && "(Hidden Ability)"}{" "} 64 |
65 | ))} 66 |
73 | {pokemondata.base_experience}} />
75 | {speciesdata.base_happiness}} />
76 |
80 | {speciesdata.capture_rate}{" "}
81 |
82 | ({((speciesdata.capture_rate / 255) * 100).toFixed(1)}%)
83 |
84 |
85 | }
86 | />
87 | {speciesdata.growth_rate.name}} />
88 |
89 | Training
74 |
80 |
119 | )
120 | }
121 |
122 | export default GamePage
123 |
--------------------------------------------------------------------------------
/components/Cards/Deck.tsx:
--------------------------------------------------------------------------------
1 | // import { NameIDInterface, PokemonDataInterface } from "@interfaces/Interfaces"
2 | import { AnimatePresence, PanInfo } from "framer-motion"
3 | import React from "react"
4 | import EndCard from "./EndCard"
5 | // import { CardProps } from "./Card"
6 | import FramerCard from "./FramerCard"
7 |
8 | interface DeckProps {
9 | pokemons: any[]
10 | cardIndex: number
11 | exitX: number
12 | setExitX?: (x: number) => void
13 | index: number
14 | setIndex?: (x: number) => void
15 | dragX: boolean | "x" | "y"
16 | CardComponent: React.FCWho's that pokemon?
81 |
82 |
93 | {pokemons && (
94 | score: {score}
83 |
84 | {Array(lives)
85 | .fill(
46 |
47 | {pokemons.length >= 3 && cardIndex + 2 < pokemons.length + 1 && (
48 |
65 | {pokemons && cardIndex + 2 < pokemons.length ? (
66 |
71 | )}
72 | {pokemons.length >= 2 && cardIndex + 1 < pokemons.length + 1 && (
73 |
90 | {pokemons && cardIndex + 1 < pokemons.length ? (
91 |
96 | )}
97 | {pokemons.length >= 1 && cardIndex < pokemons.length + 1 && (
98 |
126 | {pokemons && cardIndex < pokemons.length ? (
127 |
132 | )}
133 |
134 |
135 | )
136 | }
137 |
138 | export default Deck
139 |
--------------------------------------------------------------------------------
/components/Nav/Nav.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link"
2 | import { FaCaretDown, FaGithub } from "react-icons/fa"
3 | import { CgPlayButtonO, CgPokemon, CgProfile, CgSearch } from "react-icons/cg"
4 | import { IoPodiumOutline } from "react-icons/io5"
5 | import { VscSignIn } from "react-icons/vsc"
6 | import { signIn, signOut, useSession } from "next-auth/client"
7 | import { useEffect } from "react"
8 | import { useAppDispatch } from "@lib/reduxHooks"
9 | import { signout, userSignIn } from "@lib/userSlice"
10 | import { useRouter } from "next/router"
11 | import ActiveLink from "./ActiveLink"
12 |
13 | const Nav = () => {
14 | const [session] = useSession()
15 | const router = useRouter()
16 | const dispatch = useAppDispatch()
17 |
18 | useEffect(() => {
19 | if (session && session.user) {
20 | dispatch(userSignIn(session.user))
21 | } else dispatch(signout())
22 | }, [session, dispatch])
23 |
24 | const handleSignOut = () => {
25 | signOut()
26 | router.push("/")
27 | }
28 |
29 | return (
30 |
32 |
123 |
33 |
86 |
34 |
35 |
37 |
38 |
39 |
41 |
42 |
43 | Pokénex
36 |
39 |
41 |
42 |
44 |
45 |
46 | Explore
47 |
48 |
49 |
50 |
51 | Play
52 |
53 |
54 |
55 |
56 | Leaderboard
57 |
58 |
59 |
60 |
85 |
61 | {session && session.user ? (
62 |
84 |
63 |
64 |
65 |
66 | {session.user.name}
67 |
78 | ) : (
79 |
82 | )}
83 |
73 |
76 |
77 |
87 |
88 |
89 |
92 |
93 |
94 |
97 |
98 |
99 |
102 |
103 |
104 |
107 |
108 | {session && session.user ? (
109 |
110 |
111 |
114 | ) : (
115 |
120 | )}
121 |
122 | 2 |
3 | 
4 |
5 |
Pokénex
6 | 7 |
8 | Pokédex app in card style. Swipe through pokemon cards or guess who's that pokemon?.
9 |
10 | Explore the docs »
11 |
12 |
13 | View Demo
14 | ·
15 | Report Bug
16 | ·
17 | Request Feature
18 | ·
19 | How it's made?
20 |
25 |
44 |
45 | Table of Contents
26 |-
27 |
-
28 | About The Project
29 |
-
30 |
- Built With 31 |
33 | -
34 | Getting Started
35 |
-
36 |
- Prerequisites 37 |
- Installation 38 |
40 | - Roadmap 41 |
- Contact 42 |
46 |
47 | 48 | 49 | 50 | ## About The Project 51 | 52 |  53 | 54 | There are many great pokédex apps online but I found most of them are similarly built, displayed in a grid, scroll and click a pokémon to view more details about it. So I build my own but in a different style. 55 | 56 | No mobile version yet. 57 | 58 | Features: 59 | 60 | - Swipe pokémon cards to explore 61 | - Add to favorites 62 | - Play "who's that pokémon?" 63 | - Climb the leaderboard 64 | 65 | Of course, I will be adding more soon or you can request a feature. 66 | 67 |
68 |
69 | 70 | ### Built With 71 | 72 | - [PokéAPI](https://pokeapi.co/) 73 | - [Nextjs](https://nextjs.org/) 74 | - [TypeScript](https://www.typescriptlang.org/) 75 | - [Sass](https://sass-lang.com/) 76 | - [redux-toolkit](https://redux-toolkit.js.org/) 77 | - [Framer](https://www.framer.com/api/motion/) 78 | - [next-auth](https://firebase.google.com/docs/auth) 79 | - [MongoDB](https://www.mongodb.com/) 80 | - [Mongoose](https://mongoosejs.com/) 81 | - [Pokémon Assets from HybridShivam](https://github.com/HybridShivam/pokémon) 82 | 83 |
84 |
85 | 86 | 87 | 88 | ## Getting Started 89 | 90 | To get a local copy up and running follow these simple example steps. 91 | 92 | ### Prerequisites 93 | 94 | This is an example of how to list things you need to use the software and how to install them. 95 | 96 | - yarn 97 | ```sh 98 | npm install --global yarn 99 | ``` 100 | 101 | ### Installation 102 | 103 | 1. Clone the repo 104 | ```sh 105 | git clone https://github.com/kitharvey/pokenex.git 106 | ``` 107 | 2. Go to project directory 108 | ```sh 109 | cd pokenex 110 | ``` 111 | 3. Install NPM packages 112 | ```sh 113 | yarn 114 | ``` 115 | 4. Create [MongoDB](https://www.mongodb.com/), set up your database and copy MONGODB_URI 116 | 5. Create [Github-OAuth](https://github.com/settings/applications/new) and copy client ID and secrets 117 | 6. Create `.env` file and add URI and keys 118 | ```js 119 | MONGODB_URI = "xxxxxxxxxxxxxxxxxxxxxxxx" 120 | GITHUB_CLIENT_ID = "xxxxxxxxxxxxxxxxxxxxxxxx" 121 | GITHUB_CLIENT_SECRET = "xxxxxxxxxxxxxxxxxxxxxxxx" 122 | AUTH_SECRET = "xxxxxxxxxxxxxxxxxxxxxxxx" 123 | JWT_SECRET = "xxxxxxxxxxxxxxxxxxxxxxxx" 124 | JWT_SIGNING_PRIVATE_KEY = "xxxxxxxxxxxxxxxxxxxxxxxx" 125 | NEXTAUTH_URL = "http://localhost:3000/" 126 | ``` 127 | 7. Start the application in your localhost 128 | ```sh 129 | yarn dev 130 | ``` 131 |
132 |
133 | 134 | ## Roadmap 135 | 136 | This project is still under development. 137 | 138 | 139 | 140 |
141 |
142 | 143 | 144 | 145 | ## Contact 146 | 147 | Kit Harvey - [linkedIn](https://www.linkedin.com/in/kitharvey/) 148 | 149 | Project Link: [https://github.com/kitharvey/pokenex](https://github.com/kitharvey/pokenex) 150 | 151 |
152 |
153 | --------------------------------------------------------------------------------