12 |
18 | {experienceToNextLevel} xp
19 |
13 |
14 | {currentExperience} xp
15 |
16 |
17 |
11 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/src/pages/api/auth/[...nextauth].js:
--------------------------------------------------------------------------------
1 | import NextAuth from 'next-auth'
2 | import Providers from 'next-auth/providers'
3 |
4 | // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
5 | export default (req, res) =>
6 | NextAuth(req, res, {
7 | // Configure one or more authentication providers
8 | providers: [
9 | Providers.GitHub({
10 | clientId: process.env.GITHUB_ID,
11 | clientSecret: process.env.GITHUB_SECRET
12 | }),
13 | Providers.Google({
14 | clientId: process.env.GOOGLE_CLIENT_ID,
15 | clientSecret: process.env.GOOGLE_CLIENT_SECRET
16 | }),
17 | Providers.Facebook({
18 | clientId: process.env.FACEBOOK_CLIENT_ID,
19 | clientSecret: process.env.FACEBOOK_CLIENT_SECRET
20 | })
21 | ],
22 | debug: process.env.NODE_ENV === 'development',
23 | secret: process.env.AUTH_SECRET,
24 | jwt: {
25 | secret: process.env.JWT_SECRET
26 | }
27 | })
28 |
--------------------------------------------------------------------------------
/src/pages/api/_lib/chromeOptions.ts:
--------------------------------------------------------------------------------
1 | import chrome from 'chrome-aws-lambda'
2 |
3 | const chromeExecPaths = {
4 | win32: 'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe',
5 | linux: '/usr/bin/google-chrome',
6 | darwin: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome'
7 | }
8 |
9 | const exePath = chromeExecPaths[process.platform]
10 | interface Options {
11 | args: string[]
12 | executablePath: string
13 | headless: boolean
14 | }
15 |
16 | export async function getOptions(isDev: boolean): Promise
12 | 
13 |
21 |
24 |
14 | {props.data.user.name}
15 |
20 |
16 | 
17 | Level {level}
18 |
Internal Error
Sorry, there was a problem
') 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /public/icons/github.svg: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /src/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-explicit-any */ 2 | import React, { ReactNode } from 'react' 3 | import { AppInitialProps, AppProps } from 'next/app' 4 | import Head from 'next/head' 5 | import { ThemeProvider, DefaultTheme } from 'styled-components' 6 | import usePersistedState from '../utils/usePersistedState' 7 | import light from '../styles/themes/light' 8 | import dark from '../styles/themes/dark' 9 | import GlobalStyle from '../styles/global' 10 | import { Provider } from 'next-auth/client' 11 | 12 | function MyApp({ 13 | Component, 14 | ...pageProps 15 | }: AppInitialProps & { Component: any; session: any; toggleTheme: void }): JSX.Element { 16 | const [theme, setTheme] = usePersistedState
22 | {activeChallenge ? (
23 |
49 | )
50 | }
51 |
--------------------------------------------------------------------------------
/src/components/Sidebar.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react'
2 | import { useRouter } from 'next/router'
3 | import Link from 'next/link'
4 | import Switch from 'react-switch'
5 | import { ThemeContext } from 'styled-components'
6 | import { BiHomeAlt, BiMedal, BiSun, BiMoon } from 'react-icons/bi'
7 | import styles from '../styles/components/Sidebar.module.css'
8 |
9 | export function Sidebar({ toggleTheme }): JSX.Element {
10 | const router = useRouter()
11 | const { colors, title } = useContext(ThemeContext)
12 | return (
13 |
54 | )
55 | }
56 |
--------------------------------------------------------------------------------
/public/icons/eye.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/Countdown.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react'
2 | import { CountdownContext } from '../contexts/CountdownContext'
3 | import styles from '../styles/components/Countdown.module.css'
4 |
5 | export function Countdown(): JSX.Element {
6 | const { minutes, seconds, isActive, hasFinished, startCountdown, resetCountdown, percentToClose } = useContext(
7 | CountdownContext
8 | )
9 |
10 | const [minuteL, minuteR] = String(minutes).padStart(2, '0').split('')
11 | const [secondL, secondR] = String(seconds).padStart(2, '0').split('')
12 |
13 | return (
14 | <>
15 |
24 | Ganhe {activeChallenge.amount} xp
25 |
26 | 
27 | Novo Desafio
28 |
30 |
38 |
39 | ) : (
40 |
27 | Novo Desafio
28 | {activeChallenge.description}
29 |
41 | Inicie um ciclo para receber desafios a serem completados
42 |
47 | )}
48 |
43 | 
44 | Complete-os e ganhe experiência e avance de leve.
45 |
16 |
26 | {hasFinished ? (
27 |
31 | ) : (
32 | <>
33 | {isActive ? (
34 |
43 | ) : (
44 |
52 | )}
53 |
54 | )}
55 |
56 | )
57 | }
58 |
--------------------------------------------------------------------------------
/src/pages/login.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react'
2 | import { AppProps } from 'next/dist/next-server/lib/router/router'
3 | import Head from 'next/head'
4 | import { useRouter } from 'next/router'
5 | import { signIn, useSession } from 'next-auth/client'
6 | import styles from '../styles/pages/Login.module.css'
7 | import { IoLogoFacebook, IoLogoGithub, IoLogoGoogle } from 'react-icons/io'
8 |
9 | const Login: React.FC
17 | {minuteL}
18 | {minuteR}
19 |
20 | :
21 |
22 | {secondL}
23 | {secondR}
24 |
25 |
23 |
24 | Sign in | Move.On
25 |
26 |
47 | )
48 | }
49 | export default Login
50 |
--------------------------------------------------------------------------------
/public/icons/drinking.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
51 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "move-on",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "test": "jest"
10 | },
11 | "dependencies": {
12 | "@next/bundle-analyzer": "^10.0.8",
13 | "chrome-aws-lambda": "^6.0.*",
14 | "firebase": "^8.2.9",
15 | "firebase-admin": "^9.5.0",
16 | "js-cookie": "^2.2.1",
17 | "next": "^10.0.7",
18 | "next-auth": "^3.6.0",
19 | "next-firebase-auth": "^0.13.0-alpha.0",
20 | "next-images": "^1.7.0",
21 | "next-pwa": "^5.0.5",
22 | "puppeteer-core": "^6.0.*",
23 | "react": "17.0.1",
24 | "react-device-detect": "^1.15.0",
25 | "react-dom": "17.0.1",
26 | "react-hot-toast": "^1.0.2",
27 | "react-icons": "^4.2.0",
28 | "react-share": "^4.4.0",
29 | "react-switch": "^6.0.0",
30 | "styled-components": "^5.2.1"
31 | },
32 | "devDependencies": {
33 | "@babel/core": "^7.0.0",
34 | "@firebase/app-types": "^0.6.1",
35 | "@firebase/firestore-types": "^2.1.0",
36 | "@types/jest": "^26.0.20",
37 | "@types/js-cookie": "^2.2.6",
38 | "@types/next-auth": "^3.1.24",
39 | "@types/node": "^14.14.31",
40 | "@types/puppeteer": "^5.4.3",
41 | "@types/react": "^17.0.2",
42 | "@types/react-dom": "^17.0.1",
43 | "@types/styled-components": "^5.1.7",
44 | "@types/styled-components-react-native": "^5.1.1",
45 | "@typescript-eslint/eslint-plugin": "^4.16.1",
46 | "@typescript-eslint/parser": "^4.16.1",
47 | "@vercel/node": "^1.9.0",
48 | "csstype": "^2.6.2",
49 | "eslint": "^7.21.0",
50 | "eslint-config-prettier": "^8.1.0",
51 | "eslint-config-standard": "^16.0.2",
52 | "eslint-plugin-import": "^2.22.1",
53 | "eslint-plugin-node": "^11.1.0",
54 | "eslint-plugin-prettier": "^3.3.1",
55 | "eslint-plugin-promise": "^4.3.1",
56 | "eslint-plugin-react": "^7.22.0",
57 | "jest": "^26.6.3",
58 | "prettier": "^2.2.1",
59 | "prettier-eslint": "^12.0.0",
60 | "react-is": "^17.0.1",
61 | "typescript": "^4.1.5",
62 | "webpack": "^4.4.0"
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/src/components/Score.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import styles from '../styles/components/Score.module.css'
3 |
4 | export function Score(props): JSX.Element {
5 | const usersSorted = []
6 | const list = props.profiles
7 | Object.keys(list)
8 | .sort((a, b) => {
9 | return list[b].totalxp - list[a].totalxp
10 | })
11 | .map(key => {
12 | usersSorted.push(
13 | Object.assign(
14 | {
15 | key: list[key]
16 | },
17 | list[key]
18 | )
19 | )
20 | return usersSorted
21 | })
22 | return (
23 |
27 | 
28 | Bem-vindo
29 |
46 |
28 | Bem-vindo
29 | Conecte-se para começar seus desafios
30 |
31 |
34 |
37 |
40 |
41 |
42 | O MoveOn é uma aplicação com base na técnica Pomodoro, destinada a desenvolvedores para
43 | auxiliar no cuidado da sua saúde e postura.
44 |
45 | -
24 | {usersSorted.map(
25 | (user: any, idx: number): JSX.Element => {
26 | if (user.totalxp > 0) {
27 | return (
28 |
-
29 | 30 | {idx + 1} 31 |32 |33 | 34 |56 |
35 |
36 | {user.user.name} 37 | 38 |42 | 43 | 44 | 45 |
39 | Level {user.level}
40 |
41 | 46 | {user.challenges} completado{user.challenges > 1 && 's'} 47 |
48 | 49 | 50 |51 | {user.totalxp} xp 52 |
53 | 54 | 55 |
57 | )
58 | }
59 | }
60 | )}
61 |
25 |
47 |
48 | `
49 | }
50 |
--------------------------------------------------------------------------------
/src/styles/pages/Login.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | height: 100vh;
3 | width: 100vw;
4 | /* background-color: #202024; */
5 | /* background: linear-gradient(45deg, #202024 0%, #1e1e1e 50%, #202024 100%); */
6 | background: #202024 url('/bg-moveon.svg') no-repeat center left;
7 | background-size: cover;
8 | overflow: hidden;
9 | display: flex;
10 | flex-direction: column;
11 | align-items: center;
12 | }
13 |
14 | .container {
15 | height: 100vh;
16 | width: 100%;
17 | max-width: 30rem;
18 | padding: 2.5rem 2rem;
19 | display: flex;
20 | flex: 1;
21 | flex-direction: column;
22 | align-items: flex-start;
23 | justify-content: center;
24 | text-align: left;
25 | margin-left: 25%;
26 | }
27 | .container .logo {
28 | margin-bottom: 2rem;
29 | }
30 |
31 | .container strong {
32 | font-size: 3rem;
33 | font-weight: 600;
34 | line-height: 1.4;
35 | margin-bottom: 0.5rem;
36 | color: #fff;
37 | }
38 |
39 | .container p {
40 | font-size: 1rem;
41 | font-weight: 400;
42 | line-height: 1.4;
43 | margin-bottom: 2rem;
44 | color: #f2f3f5;
45 | }
46 |
47 | .container small {
48 | font-size: 0.75rem;
49 | font-weight: 400;
50 | line-height: 1.4;
51 | margin-bottom: 2rem;
52 | color: #f2f3f5;
53 | }
54 | .container small strong {
55 | font-size: 0.75rem;
56 | }
57 |
58 | .buttons {
59 | display: flex;
60 | flex-direction: column;
61 | align-items: center;
62 | justify-content: center;
63 | width: 100%;
64 | margin-bottom: 2rem;
65 | }
66 |
67 | .container button {
68 | width: 100%;
69 | height: 3rem;
70 | padding: 1rem;
71 | margin-bottom: 1rem;
72 | display: flex;
73 | align-items: center;
74 | justify-content: center;
75 | border-radius: 5px;
76 | font-size: 1.25rem;
77 | font-weight: 400;
78 | transition: filter 0.2s;
79 | position: relative;
80 | overflow: hidden;
81 | color: #fff;
82 | border: none;
83 | box-shadow: 0 0 1rem 0.25rem rgba(0, 0, 0, 0.2);
84 | }
85 | .container button:last-child {
86 | margin-bottom: 0;
87 | }
88 |
89 | .container button:not(:disabled):hover {
90 | filter: brightness(0.9);
91 | }
92 |
93 | .container button svg {
94 | margin-right: 0.5rem;
95 | }
96 |
97 | button.git {
98 | background: #24292e;
99 | }
100 | button.gg {
101 | background: #DB4437;
102 | }
103 | button.fb {
104 | background: #4267B2;
105 | }
106 |
107 | @media(max-width: 767px) {
108 | .container {
109 | margin-left: 0;
110 | }
111 | .container button {
112 | font-size: 1rem;
113 | }
114 | }
115 |
--------------------------------------------------------------------------------
/src/styles/components/ChallengeBox.module.css:
--------------------------------------------------------------------------------
1 | .challangeBoxConainer {
2 | height: 100%;
3 | min-height: 320px;
4 | background: var(--shape);
5 | border-radius: 5px;
6 | box-shadow: 0 0 50px rgba(0, 0, 0, 0.05);
7 | padding: 1.5rem 3.2rem;
8 | display: flex;
9 | flex-direction: column;
10 | align-items: center;
11 | justify-content: center;
12 | text-align: center;
13 | }
14 |
15 | .challangeNotActive {
16 | display: flex;
17 | flex-direction: column;
18 | align-items: center;
19 | }
20 |
21 | .challangeNotActive strong {
22 | font-size: 1.5rem;
23 | font-weight: 500;
24 | line-height: 1.4;
25 | }
26 |
27 | .challangeNotActive p {
28 | width: 90%;
29 | display: flex;
30 | flex-direction: row;
31 | align-items: center;
32 | line-height: 1.4;
33 | justify-content: space-around;
34 | margin-top: 3rem;
35 | text-align: left;
36 | }
37 |
38 | .challangeNotActive img {
39 | margin-right: 0.5rem;
40 | width: 2rem;
41 | }
42 |
43 | .challangeActive {
44 | height: 100%;
45 | display: flex;
46 | flex-direction: column;
47 | }
48 |
49 | .challangeActive header {
50 | color: var(--blue);
51 | font-weight: 600;
52 | font-size: 1.25rem;
53 | padding: 0 2rem 1.5rem;
54 | border-bottom: 1px solid var(--gray-line);
55 | }
56 |
57 | .challangeActive main {
58 | flex: 1;
59 | display: flex;
60 | flex-direction: column;
61 | align-items: center;
62 | justify-content: center;
63 | }
64 |
65 | .challangeActive main strong {
66 | font-size: 2rem;
67 | font-weight: 600;
68 | color: var(--title);
69 | margin: 1.5rem 0 1rem;
70 | }
71 |
72 | .challangeActive main p {
73 | line-height: 1.5;
74 | }
75 | .challangeActive main img {
76 | width: 100%;
77 | max-width: 10rem;
78 | }
79 |
80 | .challangeActive footer {
81 | display: grid;
82 | grid-template-columns: 1fr 1fr;
83 | gap: 1rem;
84 | margin-top: 0.75rem;
85 | }
86 |
87 | .challangeActive footer button {
88 | height: 3rem;
89 | display:flex;
90 | align-items: center;
91 | justify-content: center;
92 | border: 0;
93 | border-radius: 5px;
94 | color: var(--shape);
95 | font-size: 1rem;
96 | font-weight: 600;
97 | transition: filter 0.2s;
98 | padding: 0 0.75rem;
99 | }
100 |
101 | .challangeActive footer button:hover {
102 | filter: brightness(0.9);
103 | }
104 |
105 | .challangeActive footer button.challangeFailedButton {
106 | background: var(--red);
107 | }
108 | .challangeActive footer button.ChallengesucceededButton {
109 | background: var(--green)
110 | }
111 |
112 |
113 | @media(max-width: 767px) {
114 | .challangeBoxConainer {
115 | height: auto;
116 | margin-bottom: 2rem;
117 | }
118 | .challangeActive main img {
119 | margin-top: 1.5rem;
120 | }
121 | .challangeActive footer {
122 | margin-top: 1.5rem;
123 | }
124 | }
125 |
--------------------------------------------------------------------------------
/src/styles/global.ts:
--------------------------------------------------------------------------------
1 | import { createGlobalStyle } from 'styled-components'
2 |
3 | export default createGlobalStyle`
4 | :root {
5 | --shape: ${props => props.theme.colors.shape};
6 | --background: ${props => props.theme.colors.background};
7 | --gray-line: ${props => props.theme.colors.grayLine};
8 | --text: ${props => props.theme.colors.text};
9 | --text-highlight: ${props => props.theme.colors.textHighlight};
10 | --title: ${props => props.theme.colors.title};
11 | --red: #E83F5B;
12 | --green: #4CD62B;
13 | --blue: #5965E0;
14 | --blue-dark: #4953B8;
15 | --blue-twitter: #2AA9E0;
16 | --invert-white: ${props => props.theme.colors.invertWhite};
17 | --invert-black: ${props => props.theme.colors.invertBlack};
18 | --overlay: ${props => props.theme.colors.overlay};
19 | }
20 |
21 | * {
22 | margin: 0;
23 | padding: 0;
24 | box-sizing: border-box;
25 | }
26 |
27 | html {
28 | font-size: 16px;
29 | }
30 |
31 | body {
32 | background: var(--background);
33 | color: var(--text);
34 | }
35 |
36 | body, input, textarea, button {
37 | font: 400 1rem "Montserrat", sans-serif;
38 | }
39 |
40 | button {
41 | cursor: pointer;
42 | }
43 |
44 | a {
45 | color: inherit;
46 | text-decoration: none;
47 | }
48 |
49 | .wrapper {
50 | height: 100vh;
51 | display: flex;
52 | align-items: center;
53 | margin-left: 5rem;
54 | }
55 |
56 | @media(max-width: 1080px) {
57 | html {
58 | font-size: 93.75%;
59 | }
60 | }
61 |
62 | @media(max-width: 767px) {
63 | html {
64 | font-size: 87.5%;
65 | }
66 | .wrapper {
67 | margin-left: 0;
68 | }
69 | }
70 |
71 | @media(min-width: 768px) {
72 | :focus {
73 | outline: 2px dotted var(--green);
74 | filter: brightness(1.2) saturate(2);
75 | }
76 | }
77 |
78 | .loading {
79 | height: 100vh;
80 | width: 100%;
81 | display: flex;
82 | align-items: center;
83 | justify-content: center;
84 | align-content: center;
85 | background: rgba(0, 0, 0, 0.975);
86 | position: fixed;
87 | top: 0;
88 | left: 0;
89 | z-index: 3;
90 | }
91 |
92 | ::-webkit-scrollbar {
93 | width: 0.625rem;
94 | height: 0.625rem;
95 | }
96 |
97 | ::-webkit-scrollbar-button:start:decrement,
98 | ::-webkit-scrollbar-button:end:increment {
99 | display: none;
100 | }
101 |
102 | ::-webkit-scrollbar-track-piece {
103 | /* background-color: #3b3b3b; */
104 | background-color: var(--gray-line);
105 | -webkit-border-radius: 6px;
106 | }
107 |
108 | ::-webkit-scrollbar-thumb:vertical {
109 | background-color: var(--green);
110 | -webkit-border-radius: 6px;
111 | }
112 |
113 | .c-loader {
114 | animation: pulsate 1s infinite;
115 | border: 6px solid var(--gray-line);
116 | border-radius: 50%;
117 | border-top-color: var(--green);
118 | height: 3.75rem;
119 | width: 3.75rem;
120 | }
121 |
122 | @keyframes pulsate {
123 | 0% {transform: scale(1.0, 1.0) rotate(0deg); opacity: 0.5;}
124 | 50% {transform: scale(1.2, 1.2) rotate(1turn); opacity: 1;}
125 | 100% {transform: scale(1.0, 1.0) rotate(360deg); opacity: 0.5;}
126 | }
127 |
128 | `
129 |
--------------------------------------------------------------------------------
/src/styles/components/Score.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | width: 100%;
3 | display: flex;
4 | flex-direction: column;
5 | align-items: flex-start;
6 | justify-content: flex-start;
7 | list-style: none;
8 | margin-bottom: 2rem;
9 | }
10 |
11 | .user, .topUser {
12 | width: 100%;
13 | display: grid;
14 | grid-template-columns: 1fr 11fr;
15 | margin-bottom: 1rem;
16 | }
17 |
18 | .position {
19 | padding: 1rem;
20 | display: flex;
21 | flex-direction: column;
22 | align-items: center;
23 | justify-content: center;
24 | margin-right: 4px;
25 | background: var(--shape);
26 | border-top-left-radius: 0.75rem;
27 | border-bottom-left-radius: 0.75rem;
28 | position: relative;
29 | overflow: hidden;
30 | }
31 |
32 | .topUser .position::before {
33 | display: block;
34 | content: " ";
35 | background: url(/icons/medal.svg) no-repeat center center;
36 | background-size: contain;
37 | width: 2.25rem;
38 | height: 2.25rem;
39 | position: absolute;
40 | top: -0.25rem;
41 | bottom: 0;
42 | right: 0.25rem;
43 | }
44 |
45 | .position strong {
46 | font-size: 1.5rem;
47 | color: var(--title);
48 | }
49 |
50 | .info {
51 | padding: 1rem;
52 | display: grid;
53 | grid-template-columns: 7fr 4fr;
54 | background: var(--shape);
55 | border-top-right-radius: 0.75rem;
56 | border-bottom-right-radius: 0.75rem;
57 | }
58 |
59 | .profile {
60 | display: flex;
61 | flex-direction: row;
62 | align-items: center;
63 | justify-content: flex-start;
64 | }
65 |
66 | .avatar {
67 | width: 4rem;
68 | height: 4rem;
69 | margin-right: 1rem;
70 | border-radius: 50%;
71 | }
72 |
73 | .profile strong {
74 | font-size: 1.5rem;
75 | font-weight: 600;
76 | color: var(--title);
77 | }
78 |
79 | .profile div {
80 | display: flex;
81 | flex-direction: column;
82 | align-items: flex-start;
83 | justify-content: center;
84 | }
85 |
86 | .profile span {
87 | font-size: 1rem;
88 | margin-top: 0.5rem;
89 | }
90 |
91 | .profile span img {
92 | margin-right: 0.5rem;
93 | }
94 |
95 | .score {
96 | display: grid;
97 | grid-template-columns: 1.5fr 1fr;
98 | }
99 | .score span {
100 | display: flex;
101 | flex-direction: column;
102 | align-items: flex-start;
103 | justify-content: center;
104 | }
105 | .score p {
106 | font-size: 1rem;
107 | line-height: 1.4;
108 | font-weight: 600;
109 | color: var(--text);
110 | }
111 | .score strong {
112 | color: var(--blue-dark);
113 | }
114 |
115 | @media(max-width: 767px) {
116 | .user, .topUser {
117 | grid-template-columns: 1.5fr 10.5fr;
118 | }
119 |
120 | .position {
121 | padding: 1rem 1.5rem;
122 | }
123 |
124 | .avatar {
125 | width: 2rem;
126 | height: 2rem;
127 | }
128 |
129 | .profile strong {
130 | font-size: 1rem;
131 | }
132 | .score span {
133 | align-items: center;
134 | text-align: center;
135 | }
136 | .score p {
137 | font-size: 0.75rem;
138 | }
139 | .score strong {
140 | font-size: 1.25rem;
141 | display: block;
142 | }
143 |
144 | .topUser .position::before {
145 | width: 2rem;
146 | height: 2rem;
147 | right: 0;
148 | }
149 |
150 | }
151 |
--------------------------------------------------------------------------------
/public/icons/toilet.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/public/logo-full.svg:
--------------------------------------------------------------------------------
1 |
20 |
--------------------------------------------------------------------------------
/src/pages/leaderboard.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react'
2 | import Head from 'next/head'
3 | import { GetServerSideProps } from 'next'
4 | import { useSession } from 'next-auth/client'
5 |
6 | import { useRouter } from 'next/router'
7 | import { loadFirebase } from '../utils/firebase'
8 | import styles from '../styles/pages/Leaderboard.module.css'
9 | import { Sidebar } from '../components/Sidebar'
10 | import { Score } from '../components/Score'
11 | import { AppProps } from 'next/dist/next-server/lib/router/router'
12 |
13 | const Leaderboard: React.FC
26 |
27 |
30 |
31 | ${level}
28 |Avancei para o próximo level
29 |
32 | 
45 |
46 |
33 |
38 | Desafios
34 |35 | ${challenges} completado${challenges > 1 && 's'} 36 |
37 |
39 |
44 | Experiência
40 |41 | ${totalxp} xp 42 |
43 |
45 |
42 |
58 |
59 | )
60 | }
61 | return (
62 |
44 |
45 |
47 |
48 |
49 |
54 |
56 |
57 | Leaderboard
46 |Posição
50 |Usuário
51 |Desafios
52 |Experiência
53 |
63 |
64 |
65 | )
66 | }
67 | export default Leaderboard
68 |
69 | export const getServerSideProps: GetServerSideProps = async () => {
70 | const firebase = loadFirebase()
71 | const result = await new Promise((resolve, reject) => {
72 | firebase
73 | .ref('profiles')
74 | .get()
75 | .then(snapshot => {
76 | const data = []
77 | snapshot.forEach(user => {
78 | data.push(
79 | Object.assign(
80 | {
81 | key: user.key
82 | },
83 | user.val()
84 | )
85 | )
86 | })
87 | // eslint-disable-next-line array-callback-return
88 | data.filter((user, idx): void => {
89 | const nextUser = data[idx + 1]
90 | if (nextUser) {
91 | if (user.user.email === nextUser.user.email) {
92 | loadFirebase().ref('profiles').child(nextUser.key).remove()
93 | }
94 | }
95 | })
96 | resolve(data)
97 | })
98 | .catch(error => {
99 | reject(console.log(error.stack))
100 | })
101 | })
102 | return {
103 | props: { profiles: result }
104 | }
105 | }
106 |
--------------------------------------------------------------------------------
/public/icons/body-2.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/pages/_document.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Document, { Html, Head, Main, NextScript, DocumentInitialProps, DocumentContext } from 'next/document'
3 |
4 | const APP_NAME = 'Move.On'
5 | const APP_DESCRIPTION =
6 | 'O MoveOn é uma aplicação com base na técnica Pomodoro, destinada a desenvolvedores para auxiliar no cuidado da sua saúde e postura.'
7 | export default class MyDocument extends Document {
8 | static async getInitialProps(ctx: DocumentContext): Promise
33 |
73 |
74 | )
75 | }
76 |
--------------------------------------------------------------------------------
/public/icons/levelup.svg:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/challenges.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "type": "drinking",
4 | "description": "Levante-se e vá se hidratar! 🥃 Além de movimentar o corpo você mantenha-se hidratado",
5 | "amount": 150
6 | },
7 | {
8 | "type": "toilet",
9 | "description": "Aproveite o intervalo para ir ao banheiro 💩, se estiver sem vontade, apenas de uma caminhada para esticar as pernas!",
10 | "amount": 20
11 | },
12 | {
13 | "type": "body",
14 | "description": "Estique um de seus braços com a palma da mão virada para frente e puxe os dedos para cima por 10 segundos por mão.",
15 | "amount": 80
16 | },
17 | {
18 | "type": "body",
19 | "description": "Estique seu braço contra o peito e puxe-o utilizando o outro braço por 10 segundos por braço.",
20 | "amount": 60
21 | },
22 | {
23 | "type": "body",
24 | "description": "Puxe seu pescoço com a ajuda da mão para a direita e para a esquerda, permanecendo na posição por alguns segundos.",
25 | "amount": 70
26 | },
27 | {
28 | "type": "body",
29 | "description": "Com as duas mãos na parte de trás da cabeça, leve-a para baixo, alongando a parte de trás da região.",
30 | "amount": 60
31 | },
32 | {
33 | "type": "body",
34 | "description": "Cruze as pernas e desça com as mãos esticadas em direção ao chão. Repita o movimento com a outra perna na frente.",
35 | "amount": 100
36 | },
37 | {
38 | "type": "body",
39 | "description": "Sentado, abra as pernas e tente encostar as palmas das mãos no chão, repita 3 vezes por 5 segundos.",
40 | "amount": 80
41 | },
42 | {
43 | "type": "body",
44 | "description": "Puxe o joelho de encontro ao peito e segure, troque de perna após 10 segundos.",
45 | "amount": 50
46 | },
47 | {
48 | "type": "body",
49 | "description": "Sentado, cruze uma perna e incline seu tronco à frente, troque de perna após 10 segundos.",
50 | "amount": 80
51 | },
52 | {
53 | "type": "eye",
54 | "description": "Sentado, feche os olhos e cubra-os com as palmas da mão durante 2 minutos, depois abra normalmente.",
55 | "amount": 90
56 | },
57 | {
58 | "type": "eye",
59 | "description": "Em algum ambiente aberto, olhe o mais longe que puder em quatro direções por 3s, mexa apenas os olhos. Repita 3 vezes.",
60 | "amount": 140
61 | },
62 | {
63 | "type": "eye",
64 | "description": "Com o dedo, faça um número oito no ar, sempre acompanhando com o olhar e a cabeça parada. Faça isso por 30 segundos.",
65 | "amount": 80
66 | },
67 | {
68 | "type": "eye",
69 | "description": "Usando os polegares, massage a área abaixo das sobrancelhas em movimentos circulares por 15 segundos.",
70 | "amount": 70
71 | },
72 | {
73 | "type": "body",
74 | "description": "Em pé, gire a cintura o máximo que puder para a esquerda, segure por cinco segundos. Repita para a direita.",
75 | "amount": 90
76 | },
77 | {
78 | "type": "body",
79 | "description": "Levante uma perna atrás, segurando pelo pé, e aguente por cinco segundos. Faça o mesmo com a outra perna e repita cinco vezes.",
80 | "amount": 90
81 | },
82 | {
83 | "type": "body",
84 | "description": "Sentado, endireite a coluna, estique as pernas o máximo que conseguir e aguente dez segundos. Faça duas séries de dez.",
85 | "amount": 80
86 | },
87 | {
88 | "type": "body",
89 | "description": "Estique as pernas à frente do seu corpo e alongue-se tentando pegar as pontas dos pés com as mãos.",
90 | "amount": 50
91 | },
92 | {
93 | "type": "body",
94 | "description": "Estique seu braço direito em direção ao lado esquerdo o máximo que puder. Apoie a mão esquerda na dobra do seu cotovelo esquerdo, ajudando a alongá-lo. Sinta o alongamento por cerca de cinco segundos e, depois, faça o mesmo movimento com o outro braço. Tente repetir cinco vezes de cada lado.",
95 | "amount": 100
96 | },
97 | {
98 | "type": "body",
99 | "description": "Coloque as mãos atrás da cabeça e leve os cotovelos lentamente para trás. Mantenha a posição por cerca de 20 segundos.",
100 | "amount": 50
101 | },
102 | {
103 | "type": "body",
104 | "description": "Mexa cada um dos seus dedos com cuidado: estenda-os, flexione-os, abra-os e feche-os.",
105 | "amount": 50
106 | },
107 | {
108 | "type": "body",
109 | "description": "Olhe para o chão e, segurando mais atrás da cabeça, tente encostar o queixo no peito, mais inclinado para o lado direito. Depois, repita para o outro lado.",
110 | "amount": 60
111 | },
112 | {
113 | "type": "body",
114 | "description": "Estique os braços acima da cabeça, entrelaçando os dedos e se mantenha nesta posição por alguns segundos.",
115 | "amount": 60
116 | }
117 | ]
118 |
--------------------------------------------------------------------------------
/src/contexts/ChallengesContext.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-new */
2 | import React, { createContext, useState, useEffect, useMemo } from 'react'
3 | import challenges from '../../challenges.json'
4 | import { LevelUpModal } from '../components/LevelUpModal'
5 | import toast from 'react-hot-toast'
6 | import { isMobile } from 'react-device-detect'
7 | interface Challenge {
8 | type: 'body' | 'eye'
9 | description: string
10 | amount: number
11 | }
12 | interface ChallengesContextData {
13 | level: number
14 | currentExperience: number
15 | experienceToNextLevel: number
16 | challengesCompleted: number
17 | totalExperience: number
18 | profileData: ProfilesProps
19 | activeChallenge: Challenge
20 | levelUp: () => void
21 | startNewChallange: () => void
22 | resetChallenge: () => void
23 | completeChallenge: () => void
24 | closeLevelUpModal: () => void
25 | }
26 | interface UserProps {
27 | name: string
28 | email: string
29 | image: string
30 | }
31 | interface ProfilesProps {
32 | user: UserProps
33 | level: number
34 | challenges: number
35 | currentxp: number
36 | totalxp: number
37 | }
38 |
39 | export const ChallengesContext = createContext({} as ChallengesContextData)
40 |
41 | export function ChallagesProvider({ children, ...rest }): JSX.Element {
42 | const [dataUser] = useState(rest.user)
43 | const [level, setLevel] = useState(dataUser.level)
44 | const [challengesCompleted, setChallengesCompleted] = useState(dataUser.challenges)
45 | const [currentExperience, setCurrentExperience] = useState(dataUser.currentxp)
46 | const [totalExperience, setTotalExperience] = useState(dataUser.totalxp)
47 |
48 | const [activeChallenge, setActiveChallenge] = useState(null)
49 | const [isLevelUpModalOpen, setIsLevelUpModalOpen] = useState(false)
50 | const experienceToNextLevel = Math.pow((level + 1) * 4, 2)
51 | const [profileData, setProfileData] = useState({
52 | user: dataUser.user,
53 | level: level,
54 | challenges: challengesCompleted,
55 | currentxp: currentExperience,
56 | totalxp: totalExperience
57 | })
58 |
59 | useEffect(() => {
60 | Notification.requestPermission()
61 | }, [])
62 |
63 | useEffect(() => {
64 | setProfileData({
65 | user: dataUser.user,
66 | level: level,
67 | challenges: challengesCompleted,
68 | currentxp: currentExperience,
69 | totalxp: totalExperience
70 | })
71 | }, [level, currentExperience, challengesCompleted, totalExperience])
72 |
73 | useMemo(() => {
74 | rest.updateUser(profileData)
75 | }, [profileData])
76 |
77 | function levelUp(): void {
78 | setLevel(level + 1)
79 | setIsLevelUpModalOpen(true)
80 | }
81 |
82 | function closeLevelUpModal(): void {
83 | setIsLevelUpModalOpen(false)
84 | }
85 |
86 | function startNewChallange(): void {
87 | const randomChallengeIndex = Math.floor(Math.random() * challenges.length)
88 | const challenge = challenges[randomChallengeIndex]
89 | setActiveChallenge(challenge)
90 | new Audio('/notification.mp3').play()
91 | const notify = (): string =>
92 | toast(`Desafio disponível, valendo ${challenge.amount}xp!`, {
93 | duration: 5000,
94 | style: {
95 | borderRadius: '10px',
96 | background: 'var(--title)',
97 | color: 'var(--shape)'
98 | },
99 | icon: '🥊',
100 | role: 'status',
101 | ariaLive: 'polite'
102 | })
103 | notify()
104 | if (
105 | 'showNotification' in ServiceWorkerRegistration.prototype &&
106 | 'PushManager' in window &&
107 | !(Notification.permission === 'denied')
108 | ) {
109 | if (isMobile) {
110 | navigator.serviceWorker.ready.then(registration => {
111 | registration.showNotification('Novo desafio disponível 🥊', {
112 | body: `Valendo ${challenge.amount}xp!`,
113 | icon: '/favicon.png',
114 | vibrate: [200, 100, 200, 100, 200, 100, 400]
115 | })
116 | })
117 | } else {
118 | new Notification('Novo desafio disponível 🥊', {
119 | body: `Valendo ${challenge.amount}xp!`
120 | })
121 | }
122 | }
123 | }
124 |
125 | function resetChallenge(): void {
126 | setActiveChallenge(null)
127 | }
128 |
129 | function completeChallenge(): void {
130 | if (!activeChallenge) {
131 | return
132 | }
133 | const { amount } = activeChallenge
134 | let finalExperience = currentExperience + amount
135 | if (finalExperience >= experienceToNextLevel) {
136 | finalExperience = finalExperience - experienceToNextLevel
137 | levelUp()
138 | }
139 | setCurrentExperience(finalExperience)
140 | setActiveChallenge(null)
141 | setChallengesCompleted(challengesCompleted + 1)
142 | setTotalExperience(totalExperience + amount)
143 | rest.stealing && levelUp()
144 | }
145 |
146 | return (
147 |
34 | {level}
35 | Parabéns
36 |
72 | Voce alcançou um novo level!
37 | 40 |
41 |
46 |
48 |
54 |
56 |
60 |
62 | {isMobile && (
63 |
67 |
69 | )}
70 |
71 |
2 | 
3 |
4 |
5 |
6 | 
15 |
16 | 
32 |
33 |
34 | 
35 |
36 |
37 | 
38 |
39 |
40 |
41 | Layouts by Tiago Luchtenberg
42 |
43 |
154 |
155 | 
156 |
157 |
158 | 
159 |
160 |
161 | 
162 |
163 |
123 |
124 |
125 | )
126 | }
127 | if (session) {
128 | return (
129 |
134 |
152 |
137 |
139 |
140 |
149 |
150 |
151 |
141 |
145 |
146 |
148 |
157 |
158 |
159 | )
160 | }
161 | export default Page
162 |
163 | export async function getServerSideProps(context): Promise