├── .editorconfig ├── .eslintignore ├── .eslintrc.json ├── .gitignore ├── .vscode └── launch.json ├── README.md ├── api ├── [endpoint].ts ├── data.json └── index.ts ├── babel.config.js ├── next-env.d.ts ├── next.config.js ├── package.json ├── prettier.config.js ├── public ├── favicon.ico ├── img │ ├── abilities │ │ ├── breach │ │ │ ├── 1.png │ │ │ ├── 2.png │ │ │ ├── 3.png │ │ │ └── 4.png │ │ ├── brimstone │ │ │ ├── 1.png │ │ │ ├── 2.png │ │ │ ├── 3.png │ │ │ └── 4.png │ │ ├── cypher │ │ │ ├── 1.png │ │ │ ├── 2.png │ │ │ ├── 3.png │ │ │ └── 4.png │ │ ├── jett │ │ │ ├── 1.png │ │ │ ├── 2.png │ │ │ ├── 3.png │ │ │ └── 4.png │ │ ├── killjoy │ │ │ ├── 1.png │ │ │ ├── 2.png │ │ │ ├── 3.png │ │ │ └── 4.png │ │ ├── omen │ │ │ ├── 1.png │ │ │ ├── 2.png │ │ │ ├── 3.png │ │ │ └── 4.png │ │ ├── phoenix │ │ │ ├── 1.png │ │ │ ├── 2.png │ │ │ ├── 3.png │ │ │ └── 4.png │ │ ├── raze │ │ │ ├── 1.png │ │ │ ├── 2.png │ │ │ ├── 3.png │ │ │ └── 4.png │ │ ├── reyna │ │ │ ├── 1.png │ │ │ ├── 2.png │ │ │ ├── 3.png │ │ │ └── 4.png │ │ ├── sage │ │ │ ├── 1.png │ │ │ ├── 2.png │ │ │ ├── 3.png │ │ │ └── 4.png │ │ ├── skye │ │ │ ├── 1.png │ │ │ ├── 2.png │ │ │ ├── 3.png │ │ │ └── 4.png │ │ ├── sova │ │ │ ├── 1.png │ │ │ ├── 2.png │ │ │ ├── 3.png │ │ │ └── 4.png │ │ ├── viper │ │ │ ├── 1.png │ │ │ ├── 2.png │ │ │ ├── 3.png │ │ │ └── 4.png │ │ └── yoru │ │ │ ├── 1.png │ │ │ ├── 2.png │ │ │ ├── 3.png │ │ │ └── 4.png │ ├── agents │ │ ├── breach .png │ │ ├── breach.png │ │ ├── breach_3d.png │ │ ├── brimstone.png │ │ ├── brimstone_3d.png │ │ ├── cypher.png │ │ ├── cypher_3d.png │ │ ├── jett.png │ │ ├── jett_3d.png │ │ ├── killjoy.png │ │ ├── killjoy_3d.png │ │ ├── omen.png │ │ ├── omen_3d.png │ │ ├── phoenix.png │ │ ├── phoenix_3d.png │ │ ├── raze.png │ │ ├── raze_3d.png │ │ ├── reyna.png │ │ ├── reyna_3d.png │ │ ├── sage.png │ │ ├── sage_3d.png │ │ ├── skye.png │ │ ├── skye_3d.png │ │ ├── sova.png │ │ ├── sova_3d.png │ │ ├── viper.png │ │ ├── viper_3d.png │ │ ├── yoru.png │ │ └── yoru_3d.png │ ├── agents_profile │ │ ├── breach.png │ │ ├── brimstone.png │ │ ├── cypher.png │ │ ├── jett.png │ │ ├── killjoy.png │ │ ├── omen.png │ │ ├── phoenix.png │ │ ├── raze.png │ │ ├── reyna.png │ │ ├── sage.png │ │ ├── skye.png │ │ ├── sova.png │ │ ├── viper.png │ │ └── yoru.png │ ├── banner-news.jpg │ ├── guns │ │ ├── ares.png │ │ ├── bucky.png │ │ ├── bulldog.png │ │ ├── classic.png │ │ ├── frenzy.png │ │ ├── ghost.png │ │ ├── guardian.png │ │ ├── judge.png │ │ ├── marshal.png │ │ ├── odin.png │ │ ├── operator.png │ │ ├── phantom.png │ │ ├── sheriff.png │ │ ├── shorty.png │ │ ├── spectre.png │ │ ├── stinger.png │ │ ├── tacticalknife.png │ │ └── vandal.png │ ├── home_bg.jpg │ ├── home_bg_2021.jpg │ ├── profile-avatars │ │ ├── breach.png │ │ ├── brimstone.png │ │ ├── cypher.png │ │ ├── jett.png │ │ ├── killjoy.png │ │ ├── omen.png │ │ ├── phoenix.png │ │ ├── raze.png │ │ ├── reyna.png │ │ ├── sage.png │ │ ├── skye.png │ │ ├── sova.png │ │ ├── viper copy.png │ │ └── viper.png │ ├── rank-icons │ │ ├── bronze-1.png │ │ ├── bronze-2.png │ │ ├── bronze-3.png │ │ ├── diamond-1.png │ │ ├── diamond-2.png │ │ ├── diamond-3.png │ │ ├── gold-1.png │ │ ├── gold-2.png │ │ ├── gold-3.png │ │ ├── immortal-1.png │ │ ├── immortal-2.png │ │ ├── immortal-3.png │ │ ├── iron-1.png │ │ ├── iron-2.png │ │ ├── iron-3.png │ │ ├── platinum-1.png │ │ ├── platinum-2.png │ │ ├── platinum-3.png │ │ ├── silver-1.png │ │ ├── silver-2.png │ │ ├── silver-3.png │ │ └── valorant.png │ ├── readme │ │ ├── banner.jpg │ │ ├── screenshot_1.jpg │ │ ├── screenshot_2.jpg │ │ ├── screenshot_3.jpg │ │ ├── screenshot_4.jpg │ │ └── screenshot_5.jpg │ ├── roles │ │ ├── controller.png │ │ ├── duelist.png │ │ ├── initiator.png │ │ └── sentinel.png │ ├── sprays │ │ ├── bear.gif │ │ ├── killjoy.png │ │ └── tool.png │ └── valorant-launch.jpg ├── svg │ ├── add-friend.svg │ ├── agents-select-arrow.svg │ ├── aim.svg │ ├── arrow-config.svg │ ├── arrow-left.svg │ ├── arrow-up.svg │ ├── bg-reticule.svg │ ├── clock-icon.svg │ ├── close-group-icon.svg │ ├── close-group-track.svg │ ├── close.svg │ ├── crosshair.svg │ ├── friends-network.svg │ ├── gear-config.svg │ ├── gm-deathmath.svg │ ├── gm-ranked.svg │ ├── gm-spike.svg │ ├── gun-detail.svg │ ├── logo-front.svg │ ├── main-nav-center.svg │ ├── pag-first.svg │ ├── pag-last.svg │ ├── pag-next.svg │ ├── pag-prev.svg │ ├── player-ready-arrow-icon.svg │ ├── plus-button.svg │ ├── radiant-points.svg │ ├── return-button.svg │ ├── search.svg │ ├── send-message.svg │ ├── sound-bars.svg │ ├── star.svg │ ├── valorant-logo.svg │ ├── valorant-points.svg │ ├── video-off.svg │ └── video-on.svg └── videos │ ├── valorant-launch.mp4 │ └── valorant-launch.webm ├── src ├── components │ ├── atoms │ │ ├── CloseGroupButton │ │ │ ├── Styles.ts │ │ │ └── index.tsx │ │ ├── DefaultButton │ │ │ ├── Styles.ts │ │ │ └── index.tsx │ │ ├── Loading │ │ │ ├── Styles.ts │ │ │ └── index.tsx │ │ ├── LoadingLoop │ │ │ ├── Styles.ts │ │ │ └── index.tsx │ │ ├── NavLink │ │ │ ├── Styles.ts │ │ │ └── index.tsx │ │ ├── PlaceholderTag │ │ │ ├── index.tsx │ │ │ └── styles.ts │ │ ├── ReturnButton │ │ │ ├── Styles.ts │ │ │ └── index.tsx │ │ └── ValorantGameLink │ │ │ ├── Styles.ts │ │ │ └── index.tsx │ ├── molecules │ │ ├── AddPlayer │ │ │ ├── Styles.ts │ │ │ └── index.tsx │ │ ├── AgentAbilities │ │ │ ├── Styles.ts │ │ │ └── index.tsx │ │ ├── AgentDescription │ │ │ ├── Styles.ts │ │ │ └── index.tsx │ │ ├── AgentPhoto │ │ │ ├── Styles.ts │ │ │ └── index.tsx │ │ ├── AgentsMenu │ │ │ ├── Styles.ts │ │ │ └── index.tsx │ │ ├── BackgroundVideo │ │ │ ├── Styles.ts │ │ │ └── index.tsx │ │ ├── BannerNews │ │ │ ├── Styles.ts │ │ │ └── index.tsx │ │ ├── CareerMenu │ │ │ ├── Styles.ts │ │ │ └── index.tsx │ │ ├── CareerRankList │ │ │ ├── index.tsx │ │ │ └── styles.ts │ │ ├── CareerRankType │ │ │ ├── index.tsx │ │ │ └── styles.ts │ │ ├── CollectionGuns │ │ │ ├── index.tsx │ │ │ └── styles.ts │ │ ├── CollectionPLayerInfo │ │ │ ├── index.tsx │ │ │ └── styles.ts │ │ ├── ConfigDialog │ │ │ ├── Styles.ts │ │ │ └── index.tsx │ │ ├── FrontLogo │ │ │ ├── Styles.ts │ │ │ └── index.tsx │ │ ├── GameModes │ │ │ ├── Styles.ts │ │ │ └── index.tsx │ │ ├── MainNav │ │ │ ├── Styles.tsx │ │ │ └── index.tsx │ │ ├── Modal │ │ │ ├── Styles.ts │ │ │ └── index.tsx │ │ ├── PlayMenu │ │ │ ├── Styles.ts │ │ │ └── index.tsx │ │ ├── ProfileCard │ │ │ ├── Styles.ts │ │ │ └── index.tsx │ │ └── UpdateNotes │ │ │ ├── Styles.ts │ │ │ └── index.tsx │ └── organisms │ │ ├── AsideLeftHome │ │ ├── Styles.ts │ │ └── index.tsx │ │ └── FriendsList │ │ ├── Styles.ts │ │ └── index.tsx ├── hooks │ └── SwrFetchHook.ts ├── pages │ ├── _app.tsx │ ├── _document.tsx │ ├── agents │ │ └── [slug].tsx │ ├── api │ │ ├── [endpoint].ts │ │ ├── data.json │ │ └── index.ts │ ├── career.tsx │ ├── collection.tsx │ ├── index.tsx │ ├── play.tsx │ └── store.tsx ├── providers │ ├── BackgroundVideo.tsx │ └── Modal.tsx └── styles │ ├── global │ ├── device.ts │ ├── fonts.ts │ ├── global.ts │ ├── normalize.ts │ └── nprogress.css │ ├── pages │ ├── agents.ts │ ├── career.ts │ ├── colection.ts │ ├── home.ts │ └── play.ts │ ├── styled.d.ts │ └── theme.ts ├── tsconfig.json └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | charset = utf-8 7 | trim_trailing_whitespace = true 8 | insert_final_newline = true 9 | end_of_line = lf -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /*.js 2 | .next 3 | node_modules 4 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2021": true, 5 | "node": true, 6 | "jest": true 7 | }, 8 | "extends": [ 9 | "plugin:react/recommended", 10 | "standard", 11 | "plugin:@typescript-eslint/recommended", 12 | "prettier/@typescript-eslint", 13 | "prettier/standard", 14 | "prettier/react" 15 | ], 16 | "parser": "@typescript-eslint/parser", 17 | "parserOptions": { 18 | "ecmaFeatures": { 19 | "jsx": true 20 | }, 21 | "ecmaVersion": 12, 22 | "sourceType": "module" 23 | }, 24 | "plugins": [ 25 | "react", 26 | "@typescript-eslint", 27 | "prettier" 28 | ], 29 | "rules": { 30 | "prettier/prettier": "error", 31 | "space-before-function-paren": "off", 32 | "react/prop-types": "off", 33 | "no-use-before-define": [0], 34 | "@typescript-eslint/no-use-before-define": [1], 35 | "multiline-ternary": "off", 36 | "@typescript-eslint/explicit-module-boundary-types": "off" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "pwa-chrome", 9 | "request": "launch", 10 | "name": "Launch Chrome against localhost", 11 | "url": "http://localhost:8080", 12 | "webRoot": "${workspaceFolder}" 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Valorant Game Interface](https://github.com/luanmessias/valorant-game-interface/blob/main/public/img/readme/banner.jpg?raw=true) 2 | ![React](https://img.shields.io/badge/React-61DAFB?style=flat-square&logo=React&logoColor=black) 3 | ![Styled Components](https://img.shields.io/badge/Styled_Components-CC6699?style=flat-square&logo=styled-components&logoColor=white) 4 | ![RestAPI](https://img.shields.io/badge/Rest_API-637984?style=flat-square&logo=gear&logoColor=white) 5 | ![Next.Js](https://img.shields.io/badge/Next.Js-000000?style=flat-square&logo=Next.Js&logoColor=white) 6 | ![Typescript](https://img.shields.io/badge/Typescript-3178C6?style=flat-square&logo=typescript&logoColor=white) 7 | ![VSCode](https://img.shields.io/badge/VSCode-007ACC?style=flat-square&logo=visual-studio-code&logoColor=white) 8 | ![Linux](https://img.shields.io/badge/Linux-FCC624?style=flat-square&logo=linux&logoColor=black) 9 | ![Figma](https://img.shields.io/badge/Figma-F24E1E?style=flat-square&logo=Figma&logoColor=white) 10 | ![Photoshop](https://img.shields.io/badge/Photoshop-31A8FF?style=flat-square&logo=Adobe-Photoshop&logoColor=white) 11 | 12 | 13 | This project is a game interface based on Valorant game UI from Riot Games made with ReactJS and NextJs. The proposal of this project is for code practice. THe ursers can access many game data like characters, habilities, ranks, guns and other informations from a fake API. 14 | 15 | ## Project Screen Shots 16 | | | | 17 | |-|-| 18 | |![Screenshot 1](https://github.com/luanmessias/valorant-game-interface/blob/main/public/img/readme/screenshot_1.jpg?raw=true)|![Screenshot 2](https://github.com/luanmessias/valorant-game-interface/blob/main/public/img/readme/screenshot_2.jpg?raw=true)| 19 | |![Screenshot 3](https://github.com/luanmessias/valorant-game-interface/blob/main/public/img/readme/screenshot_3.jpg?raw=true)|![Screenshot 5](https://github.com/luanmessias/valorant-game-interface/blob/main/public/img/readme/screenshot_5.jpg?raw=true)| 20 | 21 | 22 | ## Instalation 23 | Run this command on project root folder 24 | ``` 25 | yarn install 26 | ``` 27 | or with npm 28 | ``` 29 | npm install 30 | ``` 31 | 32 | ## Running the project 33 | Run this command on project root folder 34 | ``` 35 | yarn dev 36 | ``` 37 | or with npm 38 | ``` 39 | npm run dev 40 | ``` 41 | 42 | The project will run on this address: 43 | ``` 44 | http://localhost:3000 45 | ``` 46 | 47 | 48 | ## Dependencies 49 | - [axios](https://ghub.io/axios): Promise based HTTP client for the browser and node.js 50 | - [cors](https://ghub.io/cors): Node.js CORS middleware 51 | - [framer-motion](https://ghub.io/framer-motion): 52 | - [next](https://ghub.io/next): The React Framework 53 | - [next-react-svg](https://ghub.io/next-react-svg): Transform your svg image to a React component. 54 | - [polished](https://ghub.io/polished): A lightweight toolset for writing styles in Javascript. 55 | - [react](https://ghub.io/react): React is a JavaScript library for building user interfaces. 56 | - [react-dom](https://ghub.io/react-dom): React package for working with the DOM. 57 | - [react-paginate](https://ghub.io/react-paginate): A ReactJS component that creates a pagination. 58 | - [styled-components](https://ghub.io/styled-components): Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 59 | - [swr](https://ghub.io/swr): React Hooks library for remote data fetching 60 | 61 | ## Dev Dependencies 62 | - [babel-plugin-styled-components](https://ghub.io/babel-plugin-styled-components): Improve the debugging experience and add server-side rendering support to styled-components 63 | - [eslint](https://ghub.io/eslint): An AST-based pattern checker for JavaScript. 64 | - [eslint-config-airbnb](https://ghub.io/eslint-config-airbnb): Airbnb's ESLint config, following our styleguide 65 | - [eslint-config-prettier](https://ghub.io/eslint-config-prettier): Turns off all rules that are unnecessary or might conflict with Prettier. 66 | - [eslint-config-standard](https://ghub.io/eslint-config-standard): JavaScript Standard Style - ESLint Shareable Config 67 | - [eslint-import-resolver-typescript](https://ghub.io/eslint-import-resolver-typescript): TypeScript .ts .tsx module resolver for `eslint-plugin-import`. 68 | - [eslint-plugin-import](https://ghub.io/eslint-plugin-import): Import with sanity. 69 | - [eslint-plugin-jsx-a11y](https://ghub.io/eslint-plugin-jsx-a11y): Static AST checker for accessibility rules on JSX elements. 70 | - [eslint-plugin-node](https://ghub.io/eslint-plugin-node): Additional ESLint's rules for Node.js 71 | - [eslint-plugin-prettier](https://ghub.io/eslint-plugin-prettier): Runs prettier as an eslint rule 72 | - [eslint-plugin-promise](https://ghub.io/eslint-plugin-promise): Enforce best practices for JavaScript promises 73 | - [eslint-plugin-react](https://ghub.io/eslint-plugin-react): React specific linting rules for ESLint 74 | - [eslint-plugin-react-hooks](https://ghub.io/eslint-plugin-react-hooks): ESLint rules for React Hooks 75 | - [nprogress](https://ghub.io/nprogress): Simple slim progress bars 76 | - [prettier](https://ghub.io/prettier): Prettier is an opinionated code formatter 77 | - [typescript](https://ghub.io/typescript): TypeScript is a language for application scale JavaScript development 78 | 79 | ## Show your support 80 | 81 | Give a ⭐️ if you like this project! 82 | 83 | ## Contact 84 | If you want to contact me you can reach me at . 85 | 86 | ![LinkedIn](https://img.shields.io/badge/LinkedIn-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white) 87 | 88 | ## License 89 | [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) 90 | 91 | 92 | -------------------------------------------------------------------------------- /api/[endpoint].ts: -------------------------------------------------------------------------------- 1 | import data from './data.json' 2 | 3 | export default function dataHandler(req, res) { 4 | const { endpoint } = req.query 5 | 6 | res.status(200).json(data[endpoint]) 7 | } 8 | -------------------------------------------------------------------------------- /api/index.ts: -------------------------------------------------------------------------------- 1 | import data from './data.json' 2 | 3 | export default function handler(req, res) { 4 | res.status(200).json(data) 5 | } 6 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["next/babel"], 3 | plugins: [ 4 | ["styled-components", { "ssr": true }], 5 | ] 6 | }; 7 | -------------------------------------------------------------------------------- /next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | const withReactSvg = require('next-react-svg') 2 | const path = require('path') 3 | 4 | module.exports = withReactSvg({ 5 | include: path.resolve(__dirname, './public/svg'), 6 | webpack(config, options) { 7 | return config 8 | } 9 | }) 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "valorant-game-interface", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build && next export", 8 | "start": "next start", 9 | "server": "npx json-server db.json -p 3333 -w" 10 | }, 11 | "dependencies": { 12 | "@types/react-paginate": "^6.2.1", 13 | "axios": "^0.21.0", 14 | "cors": "^2.8.5", 15 | "framer-motion": "^2.9.4", 16 | "next": "latest", 17 | "next-react-svg": "1.1.2", 18 | "polished": "^4.0.4", 19 | "react": "^17.0.1", 20 | "react-dom": "^17.0.1", 21 | "react-paginate": "^7.1.2", 22 | "styled-components": "^5.2.1", 23 | "swr": "^0.3.9", 24 | "vercel": "^21.3.3" 25 | }, 26 | "devDependencies": { 27 | "@types/next": "^9.0.0", 28 | "@types/node": "^14.14.8", 29 | "@types/nprogress": "^0.2.0", 30 | "@types/react": "^16.9.56", 31 | "@types/styled-components": "^5.1.4", 32 | "@typescript-eslint/eslint-plugin": "^4.8.2", 33 | "@typescript-eslint/parser": "^4.8.2", 34 | "babel-plugin-styled-components": "^1.11.1", 35 | "eslint": "^7.14.0", 36 | "eslint-config-airbnb": "^18.2.0", 37 | "eslint-config-prettier": "^6.15.0", 38 | "eslint-config-standard": "^16.0.2", 39 | "eslint-import-resolver-typescript": "^2.3.0", 40 | "eslint-plugin-import": "^2.22.1", 41 | "eslint-plugin-jsx-a11y": "^6.2.3", 42 | "eslint-plugin-node": "^11.1.0", 43 | "eslint-plugin-prettier": "^3.1.4", 44 | "eslint-plugin-promise": "^4.2.1", 45 | "eslint-plugin-react": "^7.21.5", 46 | "eslint-plugin-react-hooks": "^2.5.0", 47 | "nprogress": "^0.2.0", 48 | "prettier": "^2.2.0", 49 | "typescript": "^4.0.5" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | semi: false, 3 | singleQuote: true, 4 | arrowParens: 'avoid', 5 | trailingComma: 'none', 6 | endOfLine: 'auto' 7 | }; 8 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/favicon.ico -------------------------------------------------------------------------------- /public/img/abilities/breach/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/breach/1.png -------------------------------------------------------------------------------- /public/img/abilities/breach/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/breach/2.png -------------------------------------------------------------------------------- /public/img/abilities/breach/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/breach/3.png -------------------------------------------------------------------------------- /public/img/abilities/breach/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/breach/4.png -------------------------------------------------------------------------------- /public/img/abilities/brimstone/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/brimstone/1.png -------------------------------------------------------------------------------- /public/img/abilities/brimstone/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/brimstone/2.png -------------------------------------------------------------------------------- /public/img/abilities/brimstone/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/brimstone/3.png -------------------------------------------------------------------------------- /public/img/abilities/brimstone/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/brimstone/4.png -------------------------------------------------------------------------------- /public/img/abilities/cypher/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/cypher/1.png -------------------------------------------------------------------------------- /public/img/abilities/cypher/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/cypher/2.png -------------------------------------------------------------------------------- /public/img/abilities/cypher/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/cypher/3.png -------------------------------------------------------------------------------- /public/img/abilities/cypher/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/cypher/4.png -------------------------------------------------------------------------------- /public/img/abilities/jett/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/jett/1.png -------------------------------------------------------------------------------- /public/img/abilities/jett/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/jett/2.png -------------------------------------------------------------------------------- /public/img/abilities/jett/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/jett/3.png -------------------------------------------------------------------------------- /public/img/abilities/jett/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/jett/4.png -------------------------------------------------------------------------------- /public/img/abilities/killjoy/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/killjoy/1.png -------------------------------------------------------------------------------- /public/img/abilities/killjoy/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/killjoy/2.png -------------------------------------------------------------------------------- /public/img/abilities/killjoy/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/killjoy/3.png -------------------------------------------------------------------------------- /public/img/abilities/killjoy/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/killjoy/4.png -------------------------------------------------------------------------------- /public/img/abilities/omen/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/omen/1.png -------------------------------------------------------------------------------- /public/img/abilities/omen/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/omen/2.png -------------------------------------------------------------------------------- /public/img/abilities/omen/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/omen/3.png -------------------------------------------------------------------------------- /public/img/abilities/omen/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/omen/4.png -------------------------------------------------------------------------------- /public/img/abilities/phoenix/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/phoenix/1.png -------------------------------------------------------------------------------- /public/img/abilities/phoenix/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/phoenix/2.png -------------------------------------------------------------------------------- /public/img/abilities/phoenix/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/phoenix/3.png -------------------------------------------------------------------------------- /public/img/abilities/phoenix/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/phoenix/4.png -------------------------------------------------------------------------------- /public/img/abilities/raze/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/raze/1.png -------------------------------------------------------------------------------- /public/img/abilities/raze/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/raze/2.png -------------------------------------------------------------------------------- /public/img/abilities/raze/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/raze/3.png -------------------------------------------------------------------------------- /public/img/abilities/raze/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/raze/4.png -------------------------------------------------------------------------------- /public/img/abilities/reyna/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/reyna/1.png -------------------------------------------------------------------------------- /public/img/abilities/reyna/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/reyna/2.png -------------------------------------------------------------------------------- /public/img/abilities/reyna/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/reyna/3.png -------------------------------------------------------------------------------- /public/img/abilities/reyna/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/reyna/4.png -------------------------------------------------------------------------------- /public/img/abilities/sage/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/sage/1.png -------------------------------------------------------------------------------- /public/img/abilities/sage/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/sage/2.png -------------------------------------------------------------------------------- /public/img/abilities/sage/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/sage/3.png -------------------------------------------------------------------------------- /public/img/abilities/sage/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/sage/4.png -------------------------------------------------------------------------------- /public/img/abilities/skye/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/skye/1.png -------------------------------------------------------------------------------- /public/img/abilities/skye/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/skye/2.png -------------------------------------------------------------------------------- /public/img/abilities/skye/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/skye/3.png -------------------------------------------------------------------------------- /public/img/abilities/skye/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/skye/4.png -------------------------------------------------------------------------------- /public/img/abilities/sova/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/sova/1.png -------------------------------------------------------------------------------- /public/img/abilities/sova/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/sova/2.png -------------------------------------------------------------------------------- /public/img/abilities/sova/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/sova/3.png -------------------------------------------------------------------------------- /public/img/abilities/sova/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/sova/4.png -------------------------------------------------------------------------------- /public/img/abilities/viper/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/viper/1.png -------------------------------------------------------------------------------- /public/img/abilities/viper/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/viper/2.png -------------------------------------------------------------------------------- /public/img/abilities/viper/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/viper/3.png -------------------------------------------------------------------------------- /public/img/abilities/viper/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/viper/4.png -------------------------------------------------------------------------------- /public/img/abilities/yoru/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/yoru/1.png -------------------------------------------------------------------------------- /public/img/abilities/yoru/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/yoru/2.png -------------------------------------------------------------------------------- /public/img/abilities/yoru/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/yoru/3.png -------------------------------------------------------------------------------- /public/img/abilities/yoru/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/abilities/yoru/4.png -------------------------------------------------------------------------------- /public/img/agents/breach .png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents/breach .png -------------------------------------------------------------------------------- /public/img/agents/breach.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents/breach.png -------------------------------------------------------------------------------- /public/img/agents/breach_3d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents/breach_3d.png -------------------------------------------------------------------------------- /public/img/agents/brimstone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents/brimstone.png -------------------------------------------------------------------------------- /public/img/agents/brimstone_3d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents/brimstone_3d.png -------------------------------------------------------------------------------- /public/img/agents/cypher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents/cypher.png -------------------------------------------------------------------------------- /public/img/agents/cypher_3d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents/cypher_3d.png -------------------------------------------------------------------------------- /public/img/agents/jett.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents/jett.png -------------------------------------------------------------------------------- /public/img/agents/jett_3d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents/jett_3d.png -------------------------------------------------------------------------------- /public/img/agents/killjoy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents/killjoy.png -------------------------------------------------------------------------------- /public/img/agents/killjoy_3d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents/killjoy_3d.png -------------------------------------------------------------------------------- /public/img/agents/omen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents/omen.png -------------------------------------------------------------------------------- /public/img/agents/omen_3d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents/omen_3d.png -------------------------------------------------------------------------------- /public/img/agents/phoenix.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents/phoenix.png -------------------------------------------------------------------------------- /public/img/agents/phoenix_3d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents/phoenix_3d.png -------------------------------------------------------------------------------- /public/img/agents/raze.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents/raze.png -------------------------------------------------------------------------------- /public/img/agents/raze_3d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents/raze_3d.png -------------------------------------------------------------------------------- /public/img/agents/reyna.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents/reyna.png -------------------------------------------------------------------------------- /public/img/agents/reyna_3d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents/reyna_3d.png -------------------------------------------------------------------------------- /public/img/agents/sage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents/sage.png -------------------------------------------------------------------------------- /public/img/agents/sage_3d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents/sage_3d.png -------------------------------------------------------------------------------- /public/img/agents/skye.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents/skye.png -------------------------------------------------------------------------------- /public/img/agents/skye_3d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents/skye_3d.png -------------------------------------------------------------------------------- /public/img/agents/sova.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents/sova.png -------------------------------------------------------------------------------- /public/img/agents/sova_3d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents/sova_3d.png -------------------------------------------------------------------------------- /public/img/agents/viper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents/viper.png -------------------------------------------------------------------------------- /public/img/agents/viper_3d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents/viper_3d.png -------------------------------------------------------------------------------- /public/img/agents/yoru.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents/yoru.png -------------------------------------------------------------------------------- /public/img/agents/yoru_3d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents/yoru_3d.png -------------------------------------------------------------------------------- /public/img/agents_profile/breach.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents_profile/breach.png -------------------------------------------------------------------------------- /public/img/agents_profile/brimstone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents_profile/brimstone.png -------------------------------------------------------------------------------- /public/img/agents_profile/cypher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents_profile/cypher.png -------------------------------------------------------------------------------- /public/img/agents_profile/jett.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents_profile/jett.png -------------------------------------------------------------------------------- /public/img/agents_profile/killjoy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents_profile/killjoy.png -------------------------------------------------------------------------------- /public/img/agents_profile/omen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents_profile/omen.png -------------------------------------------------------------------------------- /public/img/agents_profile/phoenix.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents_profile/phoenix.png -------------------------------------------------------------------------------- /public/img/agents_profile/raze.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents_profile/raze.png -------------------------------------------------------------------------------- /public/img/agents_profile/reyna.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents_profile/reyna.png -------------------------------------------------------------------------------- /public/img/agents_profile/sage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents_profile/sage.png -------------------------------------------------------------------------------- /public/img/agents_profile/skye.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents_profile/skye.png -------------------------------------------------------------------------------- /public/img/agents_profile/sova.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents_profile/sova.png -------------------------------------------------------------------------------- /public/img/agents_profile/viper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents_profile/viper.png -------------------------------------------------------------------------------- /public/img/agents_profile/yoru.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/agents_profile/yoru.png -------------------------------------------------------------------------------- /public/img/banner-news.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/banner-news.jpg -------------------------------------------------------------------------------- /public/img/guns/ares.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/guns/ares.png -------------------------------------------------------------------------------- /public/img/guns/bucky.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/guns/bucky.png -------------------------------------------------------------------------------- /public/img/guns/bulldog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/guns/bulldog.png -------------------------------------------------------------------------------- /public/img/guns/classic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/guns/classic.png -------------------------------------------------------------------------------- /public/img/guns/frenzy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/guns/frenzy.png -------------------------------------------------------------------------------- /public/img/guns/ghost.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/guns/ghost.png -------------------------------------------------------------------------------- /public/img/guns/guardian.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/guns/guardian.png -------------------------------------------------------------------------------- /public/img/guns/judge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/guns/judge.png -------------------------------------------------------------------------------- /public/img/guns/marshal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/guns/marshal.png -------------------------------------------------------------------------------- /public/img/guns/odin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/guns/odin.png -------------------------------------------------------------------------------- /public/img/guns/operator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/guns/operator.png -------------------------------------------------------------------------------- /public/img/guns/phantom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/guns/phantom.png -------------------------------------------------------------------------------- /public/img/guns/sheriff.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/guns/sheriff.png -------------------------------------------------------------------------------- /public/img/guns/shorty.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/guns/shorty.png -------------------------------------------------------------------------------- /public/img/guns/spectre.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/guns/spectre.png -------------------------------------------------------------------------------- /public/img/guns/stinger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/guns/stinger.png -------------------------------------------------------------------------------- /public/img/guns/tacticalknife.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/guns/tacticalknife.png -------------------------------------------------------------------------------- /public/img/guns/vandal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/guns/vandal.png -------------------------------------------------------------------------------- /public/img/home_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/home_bg.jpg -------------------------------------------------------------------------------- /public/img/home_bg_2021.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/home_bg_2021.jpg -------------------------------------------------------------------------------- /public/img/profile-avatars/breach.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/profile-avatars/breach.png -------------------------------------------------------------------------------- /public/img/profile-avatars/brimstone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/profile-avatars/brimstone.png -------------------------------------------------------------------------------- /public/img/profile-avatars/cypher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/profile-avatars/cypher.png -------------------------------------------------------------------------------- /public/img/profile-avatars/jett.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/profile-avatars/jett.png -------------------------------------------------------------------------------- /public/img/profile-avatars/killjoy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/profile-avatars/killjoy.png -------------------------------------------------------------------------------- /public/img/profile-avatars/omen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/profile-avatars/omen.png -------------------------------------------------------------------------------- /public/img/profile-avatars/phoenix.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/profile-avatars/phoenix.png -------------------------------------------------------------------------------- /public/img/profile-avatars/raze.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/profile-avatars/raze.png -------------------------------------------------------------------------------- /public/img/profile-avatars/reyna.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/profile-avatars/reyna.png -------------------------------------------------------------------------------- /public/img/profile-avatars/sage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/profile-avatars/sage.png -------------------------------------------------------------------------------- /public/img/profile-avatars/skye.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/profile-avatars/skye.png -------------------------------------------------------------------------------- /public/img/profile-avatars/sova.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/profile-avatars/sova.png -------------------------------------------------------------------------------- /public/img/profile-avatars/viper copy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/profile-avatars/viper copy.png -------------------------------------------------------------------------------- /public/img/profile-avatars/viper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/profile-avatars/viper.png -------------------------------------------------------------------------------- /public/img/rank-icons/bronze-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/rank-icons/bronze-1.png -------------------------------------------------------------------------------- /public/img/rank-icons/bronze-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/rank-icons/bronze-2.png -------------------------------------------------------------------------------- /public/img/rank-icons/bronze-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/rank-icons/bronze-3.png -------------------------------------------------------------------------------- /public/img/rank-icons/diamond-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/rank-icons/diamond-1.png -------------------------------------------------------------------------------- /public/img/rank-icons/diamond-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/rank-icons/diamond-2.png -------------------------------------------------------------------------------- /public/img/rank-icons/diamond-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/rank-icons/diamond-3.png -------------------------------------------------------------------------------- /public/img/rank-icons/gold-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/rank-icons/gold-1.png -------------------------------------------------------------------------------- /public/img/rank-icons/gold-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/rank-icons/gold-2.png -------------------------------------------------------------------------------- /public/img/rank-icons/gold-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/rank-icons/gold-3.png -------------------------------------------------------------------------------- /public/img/rank-icons/immortal-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/rank-icons/immortal-1.png -------------------------------------------------------------------------------- /public/img/rank-icons/immortal-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/rank-icons/immortal-2.png -------------------------------------------------------------------------------- /public/img/rank-icons/immortal-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/rank-icons/immortal-3.png -------------------------------------------------------------------------------- /public/img/rank-icons/iron-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/rank-icons/iron-1.png -------------------------------------------------------------------------------- /public/img/rank-icons/iron-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/rank-icons/iron-2.png -------------------------------------------------------------------------------- /public/img/rank-icons/iron-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/rank-icons/iron-3.png -------------------------------------------------------------------------------- /public/img/rank-icons/platinum-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/rank-icons/platinum-1.png -------------------------------------------------------------------------------- /public/img/rank-icons/platinum-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/rank-icons/platinum-2.png -------------------------------------------------------------------------------- /public/img/rank-icons/platinum-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/rank-icons/platinum-3.png -------------------------------------------------------------------------------- /public/img/rank-icons/silver-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/rank-icons/silver-1.png -------------------------------------------------------------------------------- /public/img/rank-icons/silver-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/rank-icons/silver-2.png -------------------------------------------------------------------------------- /public/img/rank-icons/silver-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/rank-icons/silver-3.png -------------------------------------------------------------------------------- /public/img/rank-icons/valorant.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/rank-icons/valorant.png -------------------------------------------------------------------------------- /public/img/readme/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/readme/banner.jpg -------------------------------------------------------------------------------- /public/img/readme/screenshot_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/readme/screenshot_1.jpg -------------------------------------------------------------------------------- /public/img/readme/screenshot_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/readme/screenshot_2.jpg -------------------------------------------------------------------------------- /public/img/readme/screenshot_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/readme/screenshot_3.jpg -------------------------------------------------------------------------------- /public/img/readme/screenshot_4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/readme/screenshot_4.jpg -------------------------------------------------------------------------------- /public/img/readme/screenshot_5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/readme/screenshot_5.jpg -------------------------------------------------------------------------------- /public/img/roles/controller.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/roles/controller.png -------------------------------------------------------------------------------- /public/img/roles/duelist.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/roles/duelist.png -------------------------------------------------------------------------------- /public/img/roles/initiator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/roles/initiator.png -------------------------------------------------------------------------------- /public/img/roles/sentinel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/roles/sentinel.png -------------------------------------------------------------------------------- /public/img/sprays/bear.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/sprays/bear.gif -------------------------------------------------------------------------------- /public/img/sprays/killjoy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/sprays/killjoy.png -------------------------------------------------------------------------------- /public/img/sprays/tool.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/sprays/tool.png -------------------------------------------------------------------------------- /public/img/valorant-launch.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/img/valorant-launch.jpg -------------------------------------------------------------------------------- /public/svg/add-friend.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /public/svg/agents-select-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/svg/aim.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /public/svg/arrow-config.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/svg/arrow-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/svg/arrow-up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/svg/bg-reticule.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /public/svg/clock-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/svg/close-group-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /public/svg/close-group-track.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/svg/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/svg/crosshair.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/svg/friends-network.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /public/svg/gear-config.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/svg/gm-deathmath.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /public/svg/gm-ranked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /public/svg/gm-spike.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /public/svg/gun-detail.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/svg/main-nav-center.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /public/svg/pag-first.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/svg/pag-last.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/svg/pag-next.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/svg/pag-prev.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/svg/player-ready-arrow-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/svg/plus-button.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/svg/radiant-points.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/svg/return-button.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /public/svg/search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/svg/send-message.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/svg/sound-bars.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/svg/star.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/svg/valorant-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/svg/valorant-points.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/svg/video-off.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/svg/video-on.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/videos/valorant-launch.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/videos/valorant-launch.mp4 -------------------------------------------------------------------------------- /public/videos/valorant-launch.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luanmessias/valorant-game-interface/ff1f2cd658f324fc35773dcdeb0ccb3691b322a5/public/videos/valorant-launch.webm -------------------------------------------------------------------------------- /src/components/atoms/CloseGroupButton/Styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | export const Container = styled.div` 4 | width: 100%; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 100px; 9 | ` 10 | export const Button = styled.div` 11 | display: flex; 12 | flex-direction: row; 13 | justify-content: center; 14 | align-items: center; 15 | background-color: rgba(255, 255, 255, 0.2); 16 | padding: 10px 30px; 17 | 18 | > span { 19 | color: #fff; 20 | } 21 | ` 22 | 23 | export const Switch = styled.div` 24 | width: 51px; 25 | height: 31px; 26 | display: flex; 27 | justify-content: center; 28 | align-items: center; 29 | position: relative; 30 | cursor: pointer; 31 | margin-left: 25px; 32 | 33 | svg { 34 | transition: all 0.3s; 35 | } 36 | 37 | svg:first-of-type { 38 | margin-right: auto; 39 | position: absolute; 40 | z-index: 1; 41 | left: -5px; 42 | } 43 | 44 | svg + svg { 45 | position: absolute; 46 | } 47 | 48 | &[data-active='true'] { 49 | svg:first-of-type { 50 | left: 25px; 51 | rect { 52 | fill: rgba(79, 164, 146, 1); 53 | } 54 | } 55 | 56 | svg + svg { 57 | path { 58 | fill: rgba(79, 164, 146, 1); 59 | } 60 | } 61 | } 62 | ` 63 | -------------------------------------------------------------------------------- /src/components/atoms/CloseGroupButton/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { Container, Button, Switch } from './Styles' 3 | import CloseGroupIconSVG from '@/svg/close-group-icon.svg' 4 | import CloseGroupTrackSVG from '@/svg/close-group-track.svg' 5 | 6 | const CloseGroupButton: React.FC = () => { 7 | const [buttonActive, setButtonActive] = useState(false) 8 | 9 | return ( 10 | 11 | 21 | 22 | ) 23 | } 24 | 25 | export default CloseGroupButton 26 | -------------------------------------------------------------------------------- /src/components/atoms/DefaultButton/Styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | export const Container = styled.a` 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | position: relative; 8 | padding: 2px; 9 | box-sizing: border-box; 10 | font-size: 18; 11 | font-weight: 500; 12 | color: #d7d9e8; 13 | text-decoration: none; 14 | text-transform: uppercase; 15 | letter-spacing: 3.5px; 16 | width: 100%; 17 | height: 60px; 18 | background-color: rgba(90, 93, 97, 1); 19 | transition: all 0.5s; 20 | 21 | .dot { 22 | width: 2px; 23 | height: 2px; 24 | background-color: #fff; 25 | position: absolute; 26 | transition: all 0.5s; 27 | 28 | &--tl { 29 | top: 0; 30 | left: 0; 31 | } 32 | &--tr { 33 | top: 0; 34 | right: 0; 35 | } 36 | &--bl { 37 | bottom: 0; 38 | left: 0; 39 | } 40 | &--br { 41 | bottom: 0; 42 | right: 0; 43 | } 44 | } 45 | 46 | &:hover { 47 | .dot { 48 | &--tl { 49 | top: 0; 50 | left: calc(100% - 2px); 51 | } 52 | &--tr { 53 | top: calc(100% - 2px); 54 | right: 0; 55 | } 56 | &--bl { 57 | bottom: calc(100% - 2px); 58 | left: 0; 59 | } 60 | &--br { 61 | bottom: 0; 62 | right: calc(100% - 2px); 63 | } 64 | } 65 | } 66 | ` 67 | 68 | export const Content = styled.div` 69 | display: flex; 70 | justify-content: center; 71 | align-items: center; 72 | box-sizing: border-box; 73 | width: 100%; 74 | height: 100%; 75 | border: 1px solid rgba(127, 129, 133, 1); 76 | background-color: rgba(85, 88, 93, 1); 77 | transition: all 0.5s; 78 | 79 | &:hover { 80 | background-color: rgba(55, 58, 63, 1); 81 | } 82 | ` 83 | -------------------------------------------------------------------------------- /src/components/atoms/DefaultButton/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { LinkHTMLAttributes } from 'react' 2 | 3 | import Link from 'next/link' 4 | 5 | import { Container, Content } from './Styles' 6 | 7 | type linkProps = LinkHTMLAttributes 8 | 9 | const DefaultButton: React.FC = ({ href, children, className }) => { 10 | return ( 11 | 12 | 13 |
14 |
15 |
16 |
17 | {children} 18 | 19 | 20 | ) 21 | } 22 | 23 | export default DefaultButton 24 | -------------------------------------------------------------------------------- /src/components/atoms/Loading/Styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | export const Container = styled.div`` 4 | -------------------------------------------------------------------------------- /src/components/atoms/Loading/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Container } from './Styles' 3 | 4 | const Loading: React.FC = (): JSX.Element => { 5 | return ( 6 | <> 7 | carregando... 8 | 9 | ) 10 | } 11 | 12 | export default Loading 13 | -------------------------------------------------------------------------------- /src/components/atoms/LoadingLoop/Styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | export const Container = styled.div` 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | width: 100%; 8 | height: 100%; 9 | position: relative; 10 | > div { 11 | display: inline-block; 12 | width: 80px; 13 | height: 80px; 14 | 15 | &:after { 16 | content: ' '; 17 | display: block; 18 | width: 80px; 19 | height: 80px; 20 | border-radius: 50%; 21 | border: 2px solid #fff; 22 | border-color: #fff transparent #fff transparent; 23 | animation: lds-dual-ring 1.2s linear infinite; 24 | } 25 | } 26 | 27 | @keyframes lds-dual-ring { 28 | 0% { 29 | transform: rotate(0deg); 30 | } 31 | 100% { 32 | transform: rotate(360deg); 33 | } 34 | } 35 | 36 | svg { 37 | fill: #dd555c; 38 | width: 40px; 39 | height: 40px; 40 | position: absolute; 41 | left: 50%; 42 | right: 50%; 43 | top: 50%; 44 | bottom: 50%; 45 | transform: translate(-50%, -50%); 46 | } 47 | ` 48 | -------------------------------------------------------------------------------- /src/components/atoms/LoadingLoop/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Container } from './Styles' 3 | import ValorantLogoSVG from '@/svg/valorant-logo.svg' 4 | 5 | const LoadingLoop = () => { 6 | return ( 7 | 8 |
9 | 10 | 11 | ) 12 | } 13 | 14 | export default LoadingLoop 15 | -------------------------------------------------------------------------------- /src/components/atoms/NavLink/Styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | export const Container = styled.a` 4 | font-size: 14px; 5 | font-weight: bold; 6 | color: #d7d9e8; 7 | text-decoration: none; 8 | text-transform: uppercase; 9 | letter-spacing: 3.5px; 10 | transition: all 0.3s; 11 | 12 | &:hover, 13 | &:active { 14 | color: #eaeeb2; 15 | } 16 | ` 17 | -------------------------------------------------------------------------------- /src/components/atoms/NavLink/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { LinkHTMLAttributes } from 'react' 2 | import Link from 'next/link' 3 | 4 | import { Container } from './Styles' 5 | 6 | type linkProps = LinkHTMLAttributes 7 | 8 | const NavLink: React.FC = ({ href, children }) => { 9 | return ( 10 | 11 | {children} 12 | 13 | ) 14 | } 15 | 16 | export default NavLink 17 | -------------------------------------------------------------------------------- /src/components/atoms/PlaceholderTag/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import LoadingLoop from '@/atoms/LoadingLoop' 3 | 4 | import { Container } from './styles' 5 | 6 | interface PlaceholderTagProps { 7 | circle?: boolean 8 | showLoading?: boolean 9 | width?: number | string 10 | height?: number | string 11 | color?: string 12 | } 13 | 14 | const PlaceholderTag = ({ 15 | circle, 16 | width, 17 | height, 18 | color, 19 | showLoading 20 | }: PlaceholderTagProps) => { 21 | return ( 22 | 26 | {showLoading && } 27 | 28 | ) 29 | } 30 | 31 | export default PlaceholderTag 32 | -------------------------------------------------------------------------------- /src/components/atoms/PlaceholderTag/styles.ts: -------------------------------------------------------------------------------- 1 | import styled, { keyframes } from 'styled-components' 2 | 3 | const placeholderLoading = keyframes` 4 | 0%{ 5 | opacity: .2 6 | } 7 | 50%{ 8 | opacity: .5 9 | } 10 | 100%{ 11 | opacity: .2 12 | } 13 | ` 14 | 15 | export const Container = styled.div` 16 | width: 50px; 17 | height: 50px; 18 | display: block; 19 | animation: ${placeholderLoading} 2s linear infinite; 20 | background-color: #000; 21 | 22 | &[data-circle='true'] { 23 | border-radius: 50%; 24 | } 25 | ` 26 | -------------------------------------------------------------------------------- /src/components/atoms/ReturnButton/Styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | export const Container = styled.div` 4 | display: flex; 5 | justify-content: flex-start; 6 | align-items: center; 7 | font-size: 18px; 8 | color: #fff; 9 | letter-spacing: 5px; 10 | cursor: pointer; 11 | transition: all 0.3s; 12 | 13 | svg { 14 | margin-right: 10px; 15 | transition: all 0.3s; 16 | * { 17 | transition: all 0.3s; 18 | } 19 | } 20 | 21 | &:hover { 22 | color: #eaeeb2; 23 | letter-spacing: 0px; 24 | svg { 25 | margin-right: -10px; 26 | rect { 27 | opacity: 0; 28 | } 29 | path { 30 | stroke: #eaeeb2; 31 | } 32 | } 33 | } 34 | ` 35 | -------------------------------------------------------------------------------- /src/components/atoms/ReturnButton/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Container } from './Styles' 3 | import ReturnSVG from '@/svg/return-button.svg' 4 | import Link from 'next/link' 5 | 6 | const ReturnButton: React.FC = () => { 7 | return ( 8 | 9 | 10 | 11 | RETURN 12 | 13 | 14 | ) 15 | } 16 | 17 | export default ReturnButton 18 | -------------------------------------------------------------------------------- /src/components/atoms/ValorantGameLink/Styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import { motion } from 'framer-motion' 3 | 4 | export const Container = styled(motion.div)` 5 | display: flex; 6 | align-items: center; 7 | justify-content: center; 8 | border: 2px solid #fff; 9 | width: 30px; 10 | height: 30px; 11 | 12 | .ValorantGameLink { 13 | display: block; 14 | } 15 | 16 | svg { 17 | width: 20px; 18 | height: 20px; 19 | fill: #fff; 20 | } 21 | ` 22 | -------------------------------------------------------------------------------- /src/components/atoms/ValorantGameLink/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Link from 'next/link' 3 | import ValorantLogo from '@/svg/valorant-logo.svg' 4 | import { Container } from './Styles' 5 | 6 | const ValorantGameLink: React.FC = () => { 7 | return ( 8 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | ) 28 | } 29 | 30 | export default ValorantGameLink 31 | -------------------------------------------------------------------------------- /src/components/molecules/AddPlayer/Styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | interface ICardImage { 4 | CardImage: string 5 | } 6 | 7 | export const Container = styled.div` 8 | width: 100%; 9 | height: 100%; 10 | ` 11 | 12 | export const PlayerStage = styled.div` 13 | display: flex; 14 | margin: 10px; 15 | box-sizing: border-box; 16 | position: relative; 17 | &[data-size='1'] { 18 | width: 240px; 19 | height: 560px; 20 | } 21 | &[data-size='2'] { 22 | width: 220px; 23 | height: 510px; 24 | } 25 | &[data-size='3'] { 26 | width: 200px; 27 | height: 470px; 28 | } 29 | ` 30 | 31 | export const MainPlayer = styled.div` 32 | width: 100%; 33 | height: 100%; 34 | background: url(${props => String(props.CardImage)}); 35 | background-repeat: no-repeat; 36 | background-size: cover; 37 | background-position: center top; 38 | ` 39 | 40 | export const EmptyPlayer = styled.div` 41 | cursor: pointer; 42 | display: flex; 43 | justify-content: center; 44 | align-items: center; 45 | background-color: rgba(255, 255, 255, 0.2); 46 | border: 1px solid #85848d; 47 | width: 100%; 48 | height: 100%; 49 | font-size: 50px; 50 | font-weight: 200; 51 | color: rgba(255, 255, 255, 0.5); 52 | transition: all 0.3s; 53 | 54 | &:hover { 55 | color: rgba(255, 255, 255, 0.8); 56 | background-color: rgba(255, 255, 255, 0.3); 57 | } 58 | ` 59 | 60 | export const PlayerStatus = styled.div` 61 | position: absolute; 62 | bottom: 36%; 63 | box-sizing: border-box; 64 | padding: 5px; 65 | width: 100%; 66 | color: #fff; 67 | font-size: 20px; 68 | font-weight: 700; 69 | width: 100%; 70 | text-align: center; 71 | ` 72 | 73 | export const PlayerName = styled.div` 74 | position: absolute; 75 | bottom: 30%; 76 | display: flex; 77 | justify-content: center; 78 | align-items: center; 79 | box-sizing: border-box; 80 | padding: 5px; 81 | width: 100%; 82 | background-color: #eaeeb2; 83 | color: #2f363c; 84 | font-size: 18px; 85 | svg { 86 | margin-right: 10px; 87 | } 88 | ` 89 | 90 | export const PlayerRanking = styled.div` 91 | position: absolute; 92 | bottom: 10%; 93 | left: 50%; 94 | transform: translateX(-50%); 95 | z-index: 1; 96 | 97 | &:after { 98 | content: ''; 99 | position: absolute; 100 | top: -5px; 101 | left: -5px; 102 | width: 70px; 103 | height: 70px; 104 | transform: rotate(45deg); 105 | background-color: rgba(0, 0, 0, 0.5); 106 | border: 1px solid rgba(200, 200, 200, 0.4); 107 | } 108 | ` 109 | 110 | export const PlayerContent = styled.div`` 111 | 112 | export const FormPlayer = styled.div`` 113 | 114 | export const PlusButton = styled.div`` 115 | -------------------------------------------------------------------------------- /src/components/molecules/AddPlayer/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Image from 'next/image' 3 | import SwrFetchHook from '@/hooks/SwrFetchHook' 4 | import ArrowPlayerReadySVG from '@/svg/player-ready-arrow-icon.svg' 5 | 6 | import { 7 | PlayerStage, 8 | EmptyPlayer, 9 | MainPlayer, 10 | PlayerStatus, 11 | PlayerName, 12 | PlayerRanking, 13 | PlayerContent 14 | } from './Styles' 15 | 16 | interface IAddFriend { 17 | playerName?: string 18 | dataSize: number 19 | onClick?: any 20 | } 21 | 22 | interface IProfile { 23 | name: string 24 | activity: string 25 | status: string 26 | avatar: string 27 | card: number 28 | ranking: number 29 | } 30 | 31 | interface ICard { 32 | id: number 33 | url: string 34 | } 35 | 36 | interface IRanking { 37 | id: number 38 | name: string 39 | img: string 40 | } 41 | 42 | const AddPlayer: React.FC = ({ 43 | playerName, 44 | dataSize, 45 | onClick, 46 | children 47 | }) => { 48 | const profile = SwrFetchHook('/api/friends').data 49 | const cards = SwrFetchHook('/api/cards').data 50 | const rankings = SwrFetchHook('/api/ranking').data 51 | 52 | if (!profile) { 53 | return

carregando...

54 | } 55 | 56 | if (!cards) { 57 | return

carregando...

58 | } 59 | 60 | if (!rankings) { 61 | return

carregando...

62 | } 63 | 64 | const getCard = id => { 65 | const card = cards.filter(card => card.id === id)[0].url 66 | return card 67 | } 68 | 69 | const getRanking = id => { 70 | const ranking = (rankings || []).filter(ranking => ranking.id === id)[0].img 71 | return ranking 72 | } 73 | return ( 74 | <> 75 | {playerName && 76 | (profile || []) 77 | .filter(p => p.name === playerName) 78 | .map(player => ( 79 | 80 | 81 | {children} 82 | READY 83 | 84 | 85 | {player.name} 86 | 87 | 88 | 93 | 94 | 95 | 96 | ))} 97 | 98 | {!playerName && ( 99 | 100 | + 101 | 102 | )} 103 | 104 | ) 105 | } 106 | 107 | export default AddPlayer 108 | -------------------------------------------------------------------------------- /src/components/molecules/AgentAbilities/Styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | type ActiveAbilityPropTypes = { 4 | ActiveAbility: number 5 | } 6 | 7 | export const AbilitiesCont = styled.div` 8 | width: 450px; 9 | height: calc(100% - 230px); 10 | display: flex; 11 | flex-direction: column; 12 | 13 | h1 { 14 | display: block; 15 | color: #fff; 16 | font-size: 36px; 17 | font-weight: 400; 18 | text-transform: uppercase; 19 | margin-top: 0px; 20 | } 21 | ` 22 | 23 | export const AbilitiesTab = styled.div` 24 | display: flex; 25 | flex-wrap: wrap; 26 | width: 100%; 27 | padding-top: 20px; 28 | border-top: 1px solid #fff; 29 | 30 | > div:nth-of-type(${props => props.ActiveAbility}) { 31 | opacity: 1; 32 | background-color: rgba(129, 204, 186, 0.5); 33 | img { 34 | filter: initial; 35 | } 36 | } 37 | ` 38 | export const Ability = styled.div` 39 | margin: 10px; 40 | padding: 10px; 41 | border: 1px solid #fff; 42 | cursor: pointer; 43 | transition: all 0.3s; 44 | opacity: 0.4; 45 | overflow: hidden; 46 | position: relative; 47 | 48 | &:after { 49 | content: ''; 50 | display: block; 51 | position: absolute; 52 | height: 100%; 53 | width: 120%; 54 | top: 0; 55 | opacity: 1; 56 | transition: transform 0.2s ease-out; 57 | background-color: rgba(129, 204, 186, 0.5); 58 | left: -10%; 59 | transform: translateX(-100%) skew(-10deg); 60 | } 61 | 62 | img { 63 | width: 48px; 64 | height: 48px; 65 | transition: all 0.3s; 66 | z-index: 1; 67 | } 68 | 69 | &:hover { 70 | opacity: 1; 71 | &:after { 72 | transform: translateX(0) skew(-10deg); 73 | } 74 | img { 75 | filter: initial; 76 | } 77 | } 78 | ` 79 | 80 | export const AbilitieDescription = styled.div` 81 | display: flex; 82 | flex-direction: column; 83 | width: 100%; 84 | box-sizing: border-box; 85 | margin-bottom: 10px; 86 | padding: 10px; 87 | strong { 88 | display: block; 89 | width: 100%; 90 | margin-bottom: 10px; 91 | font-size: 24px; 92 | text-transform: uppercase; 93 | color: #fff; 94 | } 95 | 96 | span { 97 | font-size: 16px; 98 | color: #fff; 99 | display: block; 100 | height: 140px; 101 | } 102 | ` 103 | 104 | export const AbilityVideoContainer = styled.div` 105 | position: relative; 106 | box-sizing: border-box; 107 | width: 100%; 108 | height: auto; 109 | min-height: 238.5px; 110 | background-color: rgba(0, 0, 0, 0.2); 111 | transition: all 0.3s; 112 | cursor: zoom-in; 113 | 114 | &:hover { 115 | transform: scale(1.8) translateX(-110px) translateY(-50px); 116 | z-index: 999; 117 | } 118 | ` 119 | 120 | export const AbilityVideo = styled.video` 121 | width: 100%; 122 | height: auto; 123 | margin-top: auto; 124 | position: absolute; 125 | z-index: 1; 126 | ` 127 | -------------------------------------------------------------------------------- /src/components/molecules/AgentAbilities/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import Image from 'next/image' 3 | import SwrFetchHook from '@/hooks/SwrFetchHook' 4 | import LoadingLoop from '@/atoms/LoadingLoop' 5 | 6 | import { 7 | AbilitiesCont, 8 | AbilitiesTab, 9 | Ability, 10 | AbilitieDescription, 11 | AbilityVideoContainer, 12 | AbilityVideo 13 | } from './Styles' 14 | 15 | interface IRouteAgent { 16 | RouteAgent: string 17 | } 18 | 19 | interface IAgents { 20 | id: number 21 | name: string 22 | role: string 23 | abilities: [ 24 | { 25 | id: number 26 | name: string 27 | description: string 28 | video: string 29 | } 30 | ] 31 | } 32 | 33 | const AgentAbilities: React.FC = ({ RouteAgent }: IRouteAgent) => { 34 | const agents = SwrFetchHook('/api/agents').data 35 | const [activeAbility, setActiveAbility] = useState(1) 36 | 37 | if (!agents) { 38 | return

carregando...

39 | } 40 | 41 | return ( 42 | <> 43 | {(agents || []) 44 | .filter(a => a.name === RouteAgent) 45 | .map(agent => ( 46 | 47 |

special abilities

48 | setActiveAbility(1)} 50 | ActiveAbility={activeAbility} 51 | > 52 | setActiveAbility(1)}> 53 | 58 | 59 | setActiveAbility(2)}> 60 | 65 | 66 | setActiveAbility(3)}> 67 | 72 | 73 | setActiveAbility(4)}> 74 | 79 | 80 | 81 |
82 | {agent.abilities[activeAbility - 1].name} 83 | {agent.abilities[activeAbility - 1].description} 84 |
85 | 86 | 93 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | ))} 104 | 105 | ) 106 | } 107 | export default AgentAbilities 108 | -------------------------------------------------------------------------------- /src/components/molecules/AgentDescription/Styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | type AgentListItemPropTypes = { 4 | AgentListItem: string 5 | } 6 | 7 | export const NameCont = styled.div` 8 | width: 500px; 9 | ` 10 | export const AgentInfo = styled.div` 11 | display: flex; 12 | flex-direction: column; 13 | h1 { 14 | font-size: 96px; 15 | font-weight: 900; 16 | text-transform: uppercase; 17 | color: #cfbb75; 18 | margin-bottom: 45px; 19 | margin-top: 0px; 20 | } 21 | span { 22 | color: #828282; 23 | font-size: 18px; 24 | } 25 | ` 26 | 27 | export const AgentRole = styled.div` 28 | display: flex; 29 | justify-content: flex-start; 30 | align-items: center; 31 | margin-top: 10px; 32 | width: 100%; 33 | border-bottom: 1px solid #fff; 34 | padding-bottom: 20px; 35 | margin-bottom: 20px; 36 | span { 37 | font-size: 36px; 38 | color: #fff; 39 | text-transform: uppercase; 40 | margin-left: 20px; 41 | } 42 | ` 43 | 44 | export const RoleDescription = styled.div` 45 | > div { 46 | max-height: 250px; 47 | overflow-y: auto; 48 | padding: 10px; 49 | 50 | span { 51 | font-size: 18px; 52 | font-weight: 400; 53 | color: #fff; 54 | } 55 | 56 | /* width */ 57 | ::-webkit-scrollbar { 58 | width: 3px; 59 | } 60 | 61 | /* Track */ 62 | ::-webkit-scrollbar-track { 63 | background-color: #000; 64 | } 65 | 66 | /* Handle */ 67 | ::-webkit-scrollbar-thumb { 68 | background-color: #ccc; 69 | border-radius: 3px; 70 | } 71 | 72 | /* Handle on hover */ 73 | ::-webkit-scrollbar-thumb:hover { 74 | background: #dd555c; 75 | } 76 | } 77 | ` 78 | -------------------------------------------------------------------------------- /src/components/molecules/AgentDescription/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Image from 'next/image' 3 | import SwrFetchHook from '@/hooks/SwrFetchHook' 4 | import { NameCont, AgentInfo, AgentRole, RoleDescription } from './Styles' 5 | 6 | interface IRouteAgent { 7 | RouteAgent: string 8 | } 9 | 10 | interface IRoles { 11 | name: string 12 | description: string 13 | } 14 | 15 | interface IAgents { 16 | id: number 17 | name: string 18 | role: string 19 | abilities: [ 20 | { 21 | id: number 22 | name: string 23 | description: string 24 | video: string 25 | } 26 | ] 27 | } 28 | 29 | const AgentDescription: React.FC = ({ 30 | RouteAgent 31 | }: IRouteAgent) => { 32 | const agents = SwrFetchHook('/api/agents').data 33 | const roles = SwrFetchHook('/api/roles').data 34 | 35 | if (!agents) { 36 | return

carregando...

37 | } 38 | 39 | if (!roles) { 40 | return

carregando...

41 | } 42 | 43 | return ( 44 | <> 45 | {(agents || []) 46 | .filter(a => a.name === RouteAgent) 47 | .map(agent => ( 48 | 49 | 50 |

{agent.name}

51 | 52 | {'// ROLE'} 53 | 54 | 59 | {agent.role} 60 | 61 | 62 | {(roles || []) 63 | .filter(r => r.name === agent.role) 64 | .map(role => ( 65 | 66 |
67 | {role.description.split('\n').map(function (item, idx) { 68 | return ( 69 | 70 | {item} 71 |
72 |
73 | 74 | ) 75 | })} 76 |
77 | 78 | ))} 79 | 80 | 81 | ))} 82 | 83 | ) 84 | } 85 | export default AgentDescription 86 | -------------------------------------------------------------------------------- /src/components/molecules/AgentPhoto/Styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | type ActiveAgentPropTypes = { 4 | ActiveAgent: string 5 | } 6 | 7 | export const PhotoCont = styled.div` 8 | display: flex; 9 | flex: 1; 10 | max-width: 600px; 11 | position: relative; 12 | height: 100%; 13 | ` 14 | 15 | export const ArtContent = styled.div` 16 | flex: 1; 17 | max-width: 600px; 18 | background-size: contain; 19 | background-position: center bottom; 20 | background-repeat: no-repeat; 21 | 22 | &[data-3dart='true'] { 23 | background-image: url('/img/agents/${props => props.ActiveAgent}_3d.png'); 24 | } 25 | 26 | &[data-3dart='false'] { 27 | background-image: url('/img/agents/${props => props.ActiveAgent}.png'); 28 | } 29 | ` 30 | 31 | export const ArtToggle = styled.div` 32 | display: flex; 33 | justify-content: space-between; 34 | padding: 3px; 35 | border-radius: 50px; 36 | position: absolute; 37 | top: 0; 38 | left: 50px; 39 | 40 | > div { 41 | color: #fff; 42 | font-weight: 700; 43 | display: flex; 44 | justify-content: center; 45 | align-items: center; 46 | cursor: pointer; 47 | padding: 8px; 48 | background-color: #65aca2; 49 | border: 1px solid transparent; 50 | transition: all 0.3s; 51 | } 52 | 53 | &[data-active='false'] { 54 | .Art3D { 55 | background-color: transparent; 56 | border-color: #65aca2; 57 | opacity: 0.5; 58 | color: #65aca2; 59 | } 60 | } 61 | 62 | &[data-active='true'] { 63 | .Art2D { 64 | background-color: transparent; 65 | border-color: #65aca2; 66 | opacity: 0.5; 67 | color: #65aca2; 68 | } 69 | } 70 | ` 71 | 72 | export const Art2D = styled.div` 73 | border-top-left-radius: 50px; 74 | border-top-right-radius: 0px; 75 | border-bottom-left-radius: 50px; 76 | border-bottom-right-radius: 0px; 77 | ` 78 | 79 | export const Art3D = styled.div` 80 | border-top-left-radius: 0px; 81 | border-top-right-radius: 50px; 82 | border-bottom-left-radius: 0px; 83 | border-bottom-right-radius: 50px; 84 | ` 85 | -------------------------------------------------------------------------------- /src/components/molecules/AgentPhoto/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import SwrFetchHook from '@/hooks/SwrFetchHook' 3 | import { PhotoCont, ArtToggle, Art2D, Art3D, ArtContent } from './Styles' 4 | import PlaceholderTag from '@/atoms/PlaceholderTag' 5 | 6 | interface IRouteAgent { 7 | RouteAgent: string 8 | } 9 | 10 | interface IAgents { 11 | id: number 12 | name: string 13 | role: string 14 | abilities: [ 15 | { 16 | id: number 17 | name: string 18 | description: string 19 | video: string 20 | } 21 | ] 22 | } 23 | 24 | const AgentDescription: React.FC = ({ 25 | RouteAgent 26 | }: IRouteAgent) => { 27 | const [changeArt, setChangeArt] = useState(true) 28 | const agents = SwrFetchHook('/api/agents').data 29 | 30 | if (!agents) { 31 | return ( 32 | 38 | ) 39 | } 40 | return ( 41 | 42 | 43 | setChangeArt(false)}> 44 | 2D 45 | 46 | setChangeArt(true)}> 47 | 3D 48 | 49 | 50 | 51 | 52 | ) 53 | } 54 | export default AgentDescription 55 | -------------------------------------------------------------------------------- /src/components/molecules/AgentsMenu/Styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | type AgentListItemPropTypes = { 4 | AgentListItem: string 5 | } 6 | 7 | export const AgentListContainer = styled.div` 8 | display: flex; 9 | justify-content: center; 10 | position: absolute; 11 | bottom: 0px; 12 | height: 150px; 13 | width: 100%; 14 | > svg { 15 | position: absolute; 16 | top: -8px; 17 | left: 50%; 18 | right: 50%; 19 | transform: translateX(-50%); 20 | } 21 | ` 22 | export const AgentList = styled.ul` 23 | display: flex; 24 | flex-direction: row; 25 | border-top: 1px solid #d1b15e; 26 | width: auto; 27 | padding-top: 10px; 28 | ` 29 | export const AgentListItem = styled.li` 30 | list-style: none; 31 | box-sizing: border-box; 32 | width: 100px; 33 | height: 100px; 34 | border: 2px solid #81ccba; 35 | margin: 5px 10px; 36 | cursor: pointer; 37 | transition: all 0.3s; 38 | 39 | > svg { 40 | position: absolute; 41 | left: 50%; 42 | right: 50%; 43 | transform: translateX(-50%); 44 | top: -25px; 45 | transition: all 0.3s; 46 | } 47 | 48 | > div { 49 | box-sizing: border-box; 50 | position: relative; 51 | width: 100%; 52 | height: 100%; 53 | border: 2px solid #262b33; 54 | background-color: rgba(95, 95, 95, 0.7); 55 | 56 | .dot { 57 | width: 4px; 58 | height: 4px; 59 | background-color: rgba(129, 204, 186, 1); 60 | position: absolute; 61 | transition: all 0.3s; 62 | &--TL { 63 | top: 0px; 64 | left: 0px; 65 | } 66 | &--TR { 67 | top: 0px; 68 | right: 0px; 69 | } 70 | &--BL { 71 | bottom: 0px; 72 | left: 0px; 73 | } 74 | &--BR { 75 | bottom: 0px; 76 | right: 0px; 77 | } 78 | } 79 | } 80 | 81 | &:hover { 82 | border-color: #d1b15e; 83 | 84 | .dot { 85 | background-color: #d1b15e; 86 | &--TL { 87 | width: 100%; 88 | } 89 | &--TR { 90 | height: 100%; 91 | } 92 | &--BL { 93 | height: 100%; 94 | } 95 | &--BR { 96 | width: 100%; 97 | } 98 | } 99 | } 100 | 101 | &[data-active='true'] { 102 | transform: scale(1.15); 103 | border-color: #d1b15e; 104 | background-color: rgba(129, 204, 186, 1); 105 | 106 | .dot { 107 | background-color: #d1b15e; 108 | &--TL { 109 | width: 100%; 110 | } 111 | &--TR { 112 | height: 100%; 113 | } 114 | &--BL { 115 | height: 100%; 116 | } 117 | &--BR { 118 | width: 100%; 119 | } 120 | } 121 | } 122 | ` 123 | 124 | export const AgentItemStage = styled.div` 125 | box-sizing: border-box; 126 | width: 100%; 127 | height: 100%; 128 | transition: all 0.3s; 129 | 130 | > div { 131 | box-sizing: border-box; 132 | width: 100%; 133 | height: 100%; 134 | background: url('/img/agents_profile/${props => props.AgentListItem}.png'); 135 | background-size: cover; 136 | background-position: center center; 137 | background-repeat: no-repeat; 138 | transition: all 0.5s; 139 | } 140 | ` 141 | -------------------------------------------------------------------------------- /src/components/molecules/AgentsMenu/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import SwrFetchHook from '@/hooks/SwrFetchHook' 3 | import Link from 'next/link' 4 | import AgentListArrowSVG from '@/svg/agents-select-arrow.svg' 5 | import { 6 | AgentListContainer, 7 | AgentList, 8 | AgentListItem, 9 | AgentItemStage 10 | } from './Styles' 11 | 12 | interface IRouteAgent { 13 | RouteAgent: string 14 | } 15 | 16 | interface IAgents { 17 | id: number 18 | name: string 19 | role: string 20 | abilities: [ 21 | { 22 | id: number 23 | name: string 24 | description: string 25 | video: string 26 | } 27 | ] 28 | } 29 | 30 | const AgentsMenu: React.FC = ({ RouteAgent }: IRouteAgent) => { 31 | const agents = SwrFetchHook('/api/agents').data 32 | 33 | if (!agents) { 34 | return

carregando...

35 | } 36 | 37 | return ( 38 | 39 | 40 | {(agents || []).map(agent => { 41 | return ( 42 | 43 | 44 | {RouteAgent === agent.name && } 45 | 46 |
47 |
48 |
49 |
50 |
51 |
52 | 53 | 54 | 55 | ) 56 | })} 57 | 58 | 59 | ) 60 | } 61 | export default AgentsMenu 62 | -------------------------------------------------------------------------------- /src/components/molecules/BackgroundVideo/Styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import { minDevice, maxDevice } from '@/globalStyles/global/device' 3 | 4 | export const BgPattern = styled.div` 5 | background-image: url('/svg/bg-reticule.svg'); 6 | position: absolute; 7 | width: 100vw; 8 | height: 100vh; 9 | opacity: 0.5; 10 | 11 | @media ${maxDevice.mobileL} { 12 | background-image: inherit; 13 | background-color: rgba(0, 0, 0, 0.8); 14 | } 15 | ` 16 | 17 | export const Container = styled.div` 18 | width: 100vw; 19 | height: 100vh; 20 | position: fixed; 21 | top: 0; 22 | left: 0; 23 | z-index: 0; 24 | background: rgb(2, 0, 36); 25 | background: linear-gradient( 26 | 90deg, 27 | rgba(2, 0, 36, 1) 0%, 28 | rgba(24, 80, 124, 1) 35%, 29 | rgba(0, 212, 255, 1) 100% 30 | ); 31 | 32 | transition: opacity 0.5s; 33 | 34 | &[data-active='false'] { 35 | opacity: 0.3; 36 | } 37 | 38 | @media ${maxDevice.mobileL} { 39 | background: inherit; 40 | } 41 | ` 42 | 43 | export const BgVideo = styled.video` 44 | width: 100vw; 45 | height: 100vh; 46 | object-fit: cover; 47 | opacity: 0.2; 48 | transition: all 0.5s; 49 | 50 | &[data-active='false'] { 51 | display: none; 52 | } 53 | 54 | @media ${maxDevice.mobileL} { 55 | display: none; 56 | } 57 | ` 58 | 59 | export const PlayPanel = styled.div` 60 | display: flex; 61 | align-items: center; 62 | justify-content: space-between; 63 | position: absolute; 64 | box-sizing: border-box; 65 | top: 60px; 66 | left: 0; 67 | right: 0; 68 | margin-left: auto; 69 | margin-right: auto; 70 | width: 140px; 71 | z-index: 1; 72 | padding: 5px 10px; 73 | border: 2px solid #fff; 74 | border-radius: 50px; 75 | 76 | @media ${maxDevice.mobileL} { 77 | display: none; 78 | } 79 | ` 80 | export const VideoSwitch = styled.div` 81 | display: flex; 82 | justify-content: space-between; 83 | flex-direction: row; 84 | align-items: center; 85 | position: relative; 86 | width: 65px; 87 | height: 25px; 88 | background-color: rgba(0, 212, 255, 1); 89 | margin-left: auto; 90 | border-radius: 50px; 91 | padding: 2px 5px; 92 | transition: all 0.3s; 93 | cursor: pointer; 94 | 95 | &:hover { 96 | -webkit-box-shadow: inset 0px 0px 10px -1px rgba(0, 0, 0, 0.61); 97 | -moz-box-shadow: inset 0px 0px 10px -1px rgba(0, 0, 0, 0.61); 98 | box-shadow: inset 0px 0px 10px -1px rgba(0, 0, 0, 0.61); 99 | } 100 | 101 | &[data-active='false'] { 102 | background-color: rgba(221, 85, 92, 1); 103 | } 104 | ` 105 | export const VideoSwictDot = styled.div` 106 | width: 20px; 107 | height: 20px; 108 | background-color: #fff; 109 | border-radius: 50%; 110 | position: absolute; 111 | left: 5px; 112 | transition: all 0.3s; 113 | 114 | &[data-active='false'] { 115 | left: 50px; 116 | } 117 | ` 118 | 119 | export const VideoSwitchDesc = styled.div` 120 | font-weight: 900; 121 | color: #fff; 122 | margin: 0px 5px; 123 | position: absolute; 124 | right: 5px; 125 | transition: all 0.3s; 126 | 127 | &[data-active='false'] { 128 | right: 35px; 129 | } 130 | ` 131 | -------------------------------------------------------------------------------- /src/components/molecules/BackgroundVideo/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { 3 | Container, 4 | BgVideo, 5 | BgPattern, 6 | PlayPanel, 7 | VideoSwitch, 8 | VideoSwictDot, 9 | VideoSwitchDesc 10 | } from './Styles' 11 | import VideoOnSVG from '@/svg/video-on.svg' 12 | import VideoOffSVG from '@/svg/video-off.svg' 13 | import { useBGVideoContext } from '@/context/BackgroundVideo' 14 | 15 | const BackgroundVideo = () => { 16 | const { playVideo, setpLayVideo }: any = useBGVideoContext() 17 | 18 | const switchVideoPlayer = () => { 19 | return setpLayVideo(!playVideo) 20 | } 21 | 22 | return ( 23 | <> 24 | 25 | {playVideo ? : } 26 | 27 | 28 | 29 | {playVideo ? 'ON' : 'OFF'} 30 | 31 | 32 | 33 | 34 | 35 | 36 | 45 | 46 | 47 | 48 | 49 | 50 | ) 51 | } 52 | 53 | export default BackgroundVideo 54 | -------------------------------------------------------------------------------- /src/components/molecules/BannerNews/Styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | export const Container = styled.div` 4 | background-image: url('/img/banner-news.jpg'); 5 | background-color: #000; 6 | width: 319px; 7 | height: 450px; 8 | display: flex; 9 | flex-direction: column; 10 | justify-content: flex-end; 11 | div { 12 | padding: 20px; 13 | } 14 | strong { 15 | font-size: 27px; 16 | color: ${props => props.theme.colors.text}; 17 | display: block; 18 | width: 100%; 19 | box-sizing: border-box; 20 | } 21 | span { 22 | font-size: 14px; 23 | font-weight: 300; 24 | color: ${props => props.theme.colors.text}; 25 | } 26 | ` 27 | -------------------------------------------------------------------------------- /src/components/molecules/BannerNews/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Container } from './Styles' 3 | 4 | const BannerNews: React.FC = () => { 5 | return ( 6 | 7 |
8 | NEWS 9 | NEW AGENT 10 |
11 | 12 | ) 13 | } 14 | 15 | export default BannerNews 16 | -------------------------------------------------------------------------------- /src/components/molecules/CareerMenu/Styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | interface IActiveOpt { 4 | ActiveOpt: number 5 | } 6 | 7 | export const Container = styled.div` 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | width: 100%; 12 | padding: 25px 0px; 13 | ` 14 | export const Menu = styled.ul` 15 | display: flex; 16 | width: auto; 17 | list-style: none; 18 | border-bottom: 2px solid rgba(255, 255, 255, 0.3); 19 | 20 | > li:nth-child(${props => props.ActiveOpt}) { 21 | background-color: rgba(255, 255, 255, 0.3); 22 | &:after { 23 | background-color: #eaeeb2; 24 | } 25 | &:before { 26 | background-color: #eaeeb2; 27 | } 28 | } 29 | ` 30 | 31 | export const MenuItem = styled.li` 32 | padding: 10px; 33 | margin: 0px 10px; 34 | color: #fff; 35 | cursor: pointer; 36 | position: relative; 37 | transition: all 0.3s; 38 | &:after { 39 | content: ''; 40 | display: block; 41 | width: 5px; 42 | height: 5px; 43 | transform: rotate(45deg) translateX(-50%); 44 | background-color: #fff; 45 | position: absolute; 46 | bottom: -5px; 47 | left: 50%; 48 | transition: all 0.3s; 49 | } 50 | 51 | &:before { 52 | content: ''; 53 | display: block; 54 | width: 100%; 55 | height: 2px; 56 | background-color: transparent; 57 | position: absolute; 58 | bottom: -2px; 59 | left: 0; 60 | transition: all 0.3s; 61 | } 62 | 63 | &:hover { 64 | background-color: rgba(255, 255, 255, 0.3); 65 | &:after { 66 | background-color: #eaeeb2; 67 | } 68 | &:before { 69 | background-color: #eaeeb2; 70 | } 71 | } 72 | ` 73 | -------------------------------------------------------------------------------- /src/components/molecules/CareerMenu/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { Container, Menu, MenuItem } from './Styles' 3 | 4 | const CareerMenu: React.FC = () => { 5 | const [selectedOption, setSelectedOption] = useState(1) 6 | 7 | return ( 8 | 9 | 10 | setSelectedOption(1)}>MATCH HISTORY 11 | setSelectedOption(2)}>ACT RANK 12 | setSelectedOption(3)}>LEADERBOARD 13 | 14 | 15 | ) 16 | } 17 | 18 | export default CareerMenu 19 | -------------------------------------------------------------------------------- /src/components/molecules/CareerRankList/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import SwrFetchHook from '@/hooks/SwrFetchHook' 3 | import PlaceholderTag from '@/atoms/PlaceholderTag' 4 | import Image from 'next/image' 5 | import { 6 | Container, 7 | HeadList, 8 | TitleHead, 9 | LeaderboardContainer, 10 | RankList, 11 | RankItem, 12 | RankItemPosition, 13 | RankItemRating, 14 | RankItemDetails, 15 | RankItemWon, 16 | PaginateContainer 17 | } from './styles' 18 | import ReactPaginate from 'react-paginate' 19 | 20 | import StarSVG from '@/svg/star.svg' 21 | import PagPrevSVG from '@/svg/pag-prev.svg' 22 | import PagNextSVG from '@/svg/pag-next.svg' 23 | 24 | interface Leaderboard { 25 | name: string 26 | position: number 27 | rank: number 28 | rating: number 29 | team: string 30 | won: number 31 | } 32 | interface Friend { 33 | name: string 34 | activity: string 35 | status: string 36 | avatar: string 37 | card: number 38 | ranking: number 39 | } 40 | 41 | interface Ranking { 42 | id: number 43 | name: string 44 | img: string 45 | } 46 | 47 | interface Card { 48 | id: number 49 | url: string 50 | } 51 | 52 | const CareerRankList = () => { 53 | const careerData = SwrFetchHook('/api/leaderboard').data 54 | const playerData = SwrFetchHook('/api/friends').data 55 | const rankingData = SwrFetchHook('/api/ranking').data 56 | const cardsData = SwrFetchHook('/api/cards').data 57 | const [pageNumber, setPageNumber] = useState(0) 58 | 59 | if (!careerData || !playerData || !rankingData || !cardsData) { 60 | return ( 61 | 62 | 68 | 69 | ) 70 | } 71 | 72 | const playerWithCards = playerData.map(player => ({ 73 | ...player, 74 | cardDetail: cardsData.find(card => card.id === player.card) 75 | })) 76 | 77 | const fullData = careerData.map(career => ({ 78 | ...career, 79 | playerDetail: playerWithCards.find(player => player.name === career.name), 80 | rankingDetail: rankingData.find(rank => rank.id === career.rank) 81 | })) 82 | 83 | const postsPerPage = 9 84 | const pagesVisted = pageNumber * postsPerPage 85 | const pageCount = Math.ceil(fullData.length / postsPerPage) 86 | const changePage = ({ selected }) => { 87 | setPageNumber(selected) 88 | } 89 | 90 | const displayData = fullData 91 | .slice(pagesVisted, pagesVisted + postsPerPage) 92 | .map(fd => { 93 | const { 94 | name, 95 | playerDetail, 96 | position, 97 | rankingDetail, 98 | rating, 99 | team, 100 | won 101 | } = fd 102 | 103 | return ( 104 | 105 | 106 | {position} 107 | 108 | 109 | 110 | 115 | {rating} 116 | 117 | 118 | {position === 1 ? ( 119 | 124 | ) : ( 125 | 130 | )} 131 |
132 | {name} 133 | {team} 134 |
135 | 136 | 137 |
138 | {won} GAMES WON 139 |
140 | 141 | 142 | ) 143 | }) 144 | if (!fullData) { 145 | return ( 146 | 147 | 153 | 154 | ) 155 | } 156 | return ( 157 | 158 | 159 | 160 | RANK 161 | RATING 162 | 163 | Ended on 3/2 164 | 165 | {displayData} 166 | 167 | } 169 | nextLabel={} 170 | pageCount={pageCount} 171 | onPageChange={changePage} 172 | containerClassName={'paginate'} 173 | previousLinkClassName={'pagPrev'} 174 | nextLinkClassName={'pagNext'} 175 | disabledClassName={'pagDisabled'} 176 | activeClassName={'pagActive'} 177 | pageRangeDisplayed={2} 178 | marginPagesDisplayed={0} 179 | /> 180 | 181 | 182 | 183 | ) 184 | } 185 | 186 | export default CareerRankList 187 | -------------------------------------------------------------------------------- /src/components/molecules/CareerRankList/styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | const ColRankWidth = '10%' 4 | const ColRatingWidth = '20%' 5 | const ColProfileWidth = '50%' 6 | const ColGamesWidth = '20%' 7 | 8 | export const Container = styled.div` 9 | box-sizing: border-box; 10 | border: 1px solid #5a657a; 11 | width: 100%; 12 | margin-top: 20px; 13 | background-color: rgba(255, 255, 255, 0.1); 14 | min-height: 636px; 15 | ` 16 | export const LeaderboardContainer = styled.div` 17 | height: 100%; 18 | display: flex; 19 | flex-direction: column; 20 | flex-wrap: nowrap; 21 | ` 22 | export const HeadList = styled.div` 23 | display: flex; 24 | flex-direction: row; 25 | flex-wrap: nowrap; 26 | justify-content: space-between; 27 | align-items: center; 28 | height: 30px; 29 | ` 30 | export const TitleHead = styled.div` 31 | display: flex; 32 | color: #b9cdf1; 33 | justify-content: center; 34 | align-items: center; 35 | 36 | &:nth-of-type(1) { 37 | width: ${ColRankWidth}; 38 | } 39 | &:nth-of-type(2) { 40 | width: ${ColRatingWidth}; 41 | } 42 | &:nth-of-type(3) { 43 | width: ${ColProfileWidth}; 44 | } 45 | &:nth-of-type(4) { 46 | width: ${ColGamesWidth}; 47 | justify-content: flex-end; 48 | padding-right: 15px; 49 | } 50 | ` 51 | export const RankList = styled.div` 52 | box-sizing: border-box; 53 | display: flex; 54 | flex-direction: column; 55 | flex-wrap: nowrap; 56 | justify-content: space-between; 57 | ` 58 | export const RankItem = styled.div` 59 | display: flex; 60 | flex-direction: row; 61 | flex-wrap: nowrap; 62 | justify-content: space-between; 63 | align-items: center; 64 | height: 60px; 65 | background-color: rgba(255, 255, 255, 0.1); 66 | border-bottom: 1px solid #5a657a; 67 | 68 | &[data-first='true'] { 69 | height: 120px; 70 | ~ div { 71 | height: 52.5px; 72 | } 73 | } 74 | 75 | > div { 76 | height: 100%; 77 | display: flex; 78 | align-items: center; 79 | box-sizing: border-box; 80 | } 81 | ` 82 | export const RankItemPosition = styled.div` 83 | width: ${ColRankWidth}; 84 | justify-content: center; 85 | align-items: center; 86 | font-size: 35px; 87 | font-weight: 300; 88 | color: #fff; 89 | 90 | svg { 91 | display: none; 92 | * { 93 | fill: #ffff00; 94 | } 95 | } 96 | 97 | &[data-first='true'] { 98 | font-size: 45px; 99 | font-weight: 500; 100 | svg { 101 | display: flex; 102 | } 103 | } 104 | ` 105 | export const RankItemRating = styled.div` 106 | width: ${ColRatingWidth}; 107 | display: flex; 108 | align-items: center; 109 | justify-content: center; 110 | background-color: rgba(255, 255, 255, 0.05); 111 | span { 112 | font-size: 16px; 113 | color: #fff; 114 | margin-left: 40px; 115 | } 116 | ` 117 | export const RankItemDetails = styled.div` 118 | width: ${ColProfileWidth}; 119 | background-color: rgba(255, 255, 255, 0.05); 120 | 121 | .playerInfo { 122 | display: flex; 123 | flex-direction: column; 124 | align-items: flex-start; 125 | justify-content: space-around; 126 | height: 45px; 127 | margin-left: 20px; 128 | 129 | strong { 130 | font-size: 18px; 131 | color: #fff; 132 | } 133 | 134 | span { 135 | font-size: 12px; 136 | color: #c2c2c2; 137 | } 138 | } 139 | ` 140 | export const RankItemWon = styled.div` 141 | width: ${ColGamesWidth}; 142 | background-color: rgba(255, 255, 255, 0.05); 143 | justify-content: flex-end; 144 | padding-right: 15px; 145 | 146 | div { 147 | font-size: 14px; 148 | color: #c2c2c2; 149 | span { 150 | opacity: 1; 151 | color: #fff; 152 | } 153 | } 154 | ` 155 | export const PaginateContainer = styled.div` 156 | width: 100%; 157 | padding: 15px; 158 | box-sizing: border-box; 159 | display: flex; 160 | justify-content: flex-end; 161 | align-items: center; 162 | margin-top: auto; 163 | 164 | .paginate { 165 | font-size: 18px; 166 | display: flex; 167 | justify-content: center; 168 | align-items: center; 169 | flex-direction: row; 170 | list-style: none; 171 | 172 | li { 173 | margin: 0px 1px; 174 | 175 | > a { 176 | width: 22px; 177 | height: 22px; 178 | cursor: pointer; 179 | background-color: rgba(255, 255, 255, 0.5); 180 | display: flex; 181 | justify-content: center; 182 | align-items: center; 183 | border: 2px solid rgba(255, 255, 255, 0.5); 184 | font-size: 14px; 185 | } 186 | 187 | &:hover:not(.pagDisabled) { 188 | background-color: rgba(255, 255, 255, 0.3); 189 | } 190 | 191 | &.pagDisabled { 192 | opacity: 0.3; 193 | cursor: not-allowed; 194 | } 195 | 196 | &.pagActive { 197 | background-color: rgba(255, 255, 255, 0.3); 198 | } 199 | 200 | a:active, 201 | a:focus { 202 | outline: 0; 203 | -moz-outline-style: none; 204 | } 205 | } 206 | } 207 | ` 208 | -------------------------------------------------------------------------------- /src/components/molecules/CareerRankType/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Image from 'next/image' 3 | 4 | import { Container, RatingContent, RatingTitle, RatingEpisode } from './styles' 5 | 6 | const CareerRankType = () => { 7 | return ( 8 | 9 | 10 | 11 | 12 | 13 |
14 | LEADERBOARD 15 | GOLD 16 |
17 | 18 |
19 |
20 |
21 |
22 | 23 | 24 |
25 | EPISODE 2 26 | ACT 1 27 |
28 | 29 |
30 |
31 |
32 |
33 | 34 | 35 | ) 36 | } 37 | 38 | export default CareerRankType 39 | -------------------------------------------------------------------------------- /src/components/molecules/CareerRankType/styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | export const Container = styled.div` 3 | width: 100%; 4 | display: flex; 5 | justify-content: space-between; 6 | ` 7 | 8 | export const RatingContent = styled.div` 9 | box-sizing: border-box; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | width: 160px; 14 | height: 95px; 15 | background-color: rgba(255, 255, 255, 0.2); 16 | ` 17 | 18 | export const RatingTitle = styled.div` 19 | border: 1px solid #4e566a; 20 | box-sizing: border-box; 21 | display: flex; 22 | justify-content: center; 23 | align-items: center; 24 | width: 960px; 25 | height: 95px; 26 | background-color: rgba(255, 255, 255, 0.1); 27 | padding: 5px; 28 | position: relative; 29 | 30 | .container { 31 | display: flex; 32 | flex-direction: column; 33 | justify-content: space-around; 34 | align-items: center; 35 | box-sizing: border-box; 36 | width: 100%; 37 | height: 100%; 38 | background-color: #e6e6e6; 39 | 40 | strong { 41 | font-size: 45px; 42 | font-weight: 900; 43 | text-transform: uppercase; 44 | color: #464646; 45 | } 46 | span { 47 | color: #828282; 48 | font-size: 14px; 49 | } 50 | } 51 | 52 | .dot { 53 | width: 2px; 54 | height: 2px; 55 | background-color: #fff; 56 | position: absolute; 57 | transition: all 0.5s; 58 | 59 | &--tl { 60 | top: 0; 61 | left: 0; 62 | } 63 | &--tr { 64 | top: 0; 65 | right: 0; 66 | } 67 | &--bl { 68 | bottom: 0; 69 | left: 0; 70 | } 71 | &--br { 72 | bottom: 0; 73 | right: 0; 74 | } 75 | } 76 | ` 77 | 78 | export const RatingEpisode = styled.div` 79 | border: 1px solid #4e566a; 80 | box-sizing: border-box; 81 | display: flex; 82 | justify-content: center; 83 | align-items: center; 84 | width: 130px; 85 | height: 95px; 86 | background-color: rgba(255, 255, 255, 0.1); 87 | padding: 5px; 88 | position: relative; 89 | 90 | .container { 91 | display: flex; 92 | flex-direction: column; 93 | justify-content: space-around; 94 | align-items: flex-start; 95 | box-sizing: border-box; 96 | width: 100%; 97 | height: 100%; 98 | background-color: #e6e6e6; 99 | padding: 10px; 100 | 101 | strong { 102 | font-size: 30px; 103 | font-weight: 900; 104 | text-transform: uppercase; 105 | color: #464646; 106 | } 107 | span { 108 | color: #828282; 109 | font-size: 14px; 110 | } 111 | } 112 | 113 | .dot { 114 | width: 2px; 115 | height: 2px; 116 | background-color: #fff; 117 | position: absolute; 118 | transition: all 0.5s; 119 | 120 | &--tl { 121 | top: 0; 122 | left: 0; 123 | } 124 | &--tr { 125 | top: 0; 126 | right: 0; 127 | } 128 | &--bl { 129 | bottom: 0; 130 | left: 0; 131 | } 132 | &--br { 133 | bottom: 0; 134 | right: 0; 135 | } 136 | } 137 | ` 138 | -------------------------------------------------------------------------------- /src/components/molecules/CollectionGuns/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | Container, 4 | Title, 5 | ColGuns, 6 | GunsGroup, 7 | GunContainer, 8 | CloseModal, 9 | ModalGun, 10 | ModalGunName 11 | } from './styles' 12 | import SwrFetchHook from '@/hooks/SwrFetchHook' 13 | import PlaceholderTag from '@/atoms/PlaceholderTag' 14 | import { useModalContext } from '@/context/Modal' 15 | import AimSVF from '@/svg/aim.svg' 16 | 17 | interface Gun { 18 | name: string 19 | category: string 20 | } 21 | 22 | const CollectionGuns = () => { 23 | const { closeModal, openModal }: any = useModalContext() 24 | const gunsData = SwrFetchHook('/api/guns').data 25 | 26 | if (!gunsData) { 27 | return ( 28 | 29 | 35 | 36 | ) 37 | } 38 | 39 | const sidearm = gunsData.filter(g => g.category === 'sidearm') 40 | const smg = gunsData.filter(g => g.category === 'smg') 41 | const shotgun = gunsData.filter(g => g.category === 'shotgun') 42 | const rifle = gunsData.filter(g => g.category === 'rifle') 43 | const sniper = gunsData.filter(g => g.category === 'sniper') 44 | const machinegun = gunsData.filter(g => g.category === 'machinegun') 45 | const melee = gunsData.filter(g => g.category === 'melee') 46 | 47 | const GunModal = ({ name, img }) => { 48 | return ( 49 |
50 | 51 | 52 | 53 | {name} 54 | 55 | 56 | 57 |
58 | ) 59 | } 60 | 61 | const Gun = ({ name, category }) => { 62 | const imgName = name.toLowerCase().replace(/\s+/g, '') 63 | return ( 64 | openModal()} 67 | > 68 |
69 | 70 |
71 | {name} 72 | 73 | ) 74 | } 75 | 76 | return ( 77 | 78 | 79 | 80 | SIDEARMS 81 | {sidearm.map(({ name, category }) => ( 82 | 83 | ))} 84 | 85 | 86 | 87 | 88 | SMGS 89 | {smg.map(({ name, category }) => ( 90 | 91 | ))} 92 | 93 | 94 | SHOTGUNS 95 | {shotgun.map(({ name, category }) => ( 96 | 97 | ))} 98 | 99 | 100 | 101 | 102 | RIFLES 103 | {rifle.map(({ name, category }) => ( 104 | 105 | ))} 106 | 107 | 108 | 109 | 110 | SNIPER RIFLES 111 | {sniper.map(({ name, category }) => ( 112 | 113 | ))} 114 | 115 | 116 | MACHINE GUNS 117 | {machinegun.map(({ name, category }) => ( 118 | 119 | ))} 120 | 121 | 122 | MELEE 123 | {melee.map(({ name, category }) => ( 124 | 125 | ))} 126 | 127 | 128 | 129 | ) 130 | } 131 | 132 | export default CollectionGuns 133 | -------------------------------------------------------------------------------- /src/components/molecules/CollectionGuns/styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | export const Container = styled.div` 4 | display: flex; 5 | flex-direction: row; 6 | justify-content: space-around; 7 | width: 90%; 8 | height: 100%; 9 | ` 10 | export const Title = styled.div` 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | width: 100%; 15 | height: 30px; 16 | font-size: 12px; 17 | font-weight: 600; 18 | color: #f5f7d8; 19 | ` 20 | export const ColGuns = styled.div` 21 | display: flex; 22 | flex-direction: column; 23 | justify-content: flex-start; 24 | margin-left: 10px; 25 | width: auto; 26 | height: 100%; 27 | ` 28 | export const GunsGroup = styled.div`` 29 | 30 | export const GunContainer = styled.div` 31 | height: 120px; 32 | width: 300px; 33 | background-color: rgb(255, 255, 255, 0.1); 34 | transition: all 0.3s; 35 | cursor: pointer; 36 | 37 | &:hover { 38 | background-color: rgb(255, 255, 255, 0.2); 39 | } 40 | 41 | & + div { 42 | margin-top: 30px; 43 | } 44 | 45 | &[data-category='sidearm'] { 46 | width: 200px; 47 | > div { 48 | img { 49 | height: 55%; 50 | width: auto; 51 | } 52 | } 53 | } 54 | 55 | &[data-category='smg'], 56 | &[data-category='shotgun'] { 57 | width: 400px; 58 | } 59 | 60 | &[data-category='sniper'], 61 | &[data-category='machinegun'], 62 | &[data-category='melee'] { 63 | width: 455px; 64 | } 65 | 66 | &[data-category='rifle'] { 67 | width: 340px; 68 | } 69 | 70 | > div { 71 | width: 100%; 72 | height: calc(100% - 20px); 73 | display: flex; 74 | justify-content: center; 75 | align-items: center; 76 | 77 | img { 78 | height: 70%; 79 | width: auto; 80 | } 81 | } 82 | span { 83 | display: flex; 84 | justify-content: center; 85 | align-items: center; 86 | background-color: rgb(255, 255, 255, 0.1); 87 | color: #fff; 88 | text-transform: uppercase; 89 | font-size: 12px; 90 | height: 20px; 91 | } 92 | ` 93 | 94 | export const ModalGunName = styled.div` 95 | color: #fff; 96 | font-size: 40px; 97 | position: absolute; 98 | top: 0; 99 | left: 0; 100 | text-transform: uppercase; 101 | &:first-letter { 102 | text-transform: uppercase; 103 | } 104 | padding: 10px; 105 | ` 106 | export const ModalGun = styled.div` 107 | position: relative; 108 | padding: 80px; 109 | img { 110 | max-width: 900px; 111 | max-height: 400px; 112 | } 113 | ` 114 | 115 | export const CloseModal = styled.div` 116 | cursor: pointer; 117 | display: flex; 118 | margin-left: auto; 119 | justify-content: center; 120 | align-items: center; 121 | box-sizing: border-box; 122 | background-color: rgba(25, 25, 25, 0.9); 123 | border: 2px solid transparent; 124 | width: 50px; 125 | height: 50px; 126 | transition: all 0.5s; 127 | 128 | svg { 129 | transition: all 0.5s; 130 | } 131 | 132 | &:hover { 133 | border-color: #dd555c; 134 | background-color: rgba(25, 25, 25, 0.5); 135 | svg { 136 | transform: scale(-0.5); 137 | } 138 | } 139 | ` 140 | -------------------------------------------------------------------------------- /src/components/molecules/CollectionPLayerInfo/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Container, Card, Spray, Title } from './styles' 3 | import SwrFetchHook from '@/hooks/SwrFetchHook' 4 | import PlaceholderTag from '@/atoms/PlaceholderTag' 5 | 6 | interface Profile { 7 | name: string 8 | activity: string 9 | status: string 10 | avatar: string 11 | card: number 12 | ranking: number 13 | } 14 | 15 | interface Card { 16 | id: number 17 | url: string 18 | } 19 | const CollectionPLayerInfo = () => { 20 | const playerData = SwrFetchHook('/api/friends').data 21 | const cardsData = SwrFetchHook('/api/cards').data 22 | 23 | if (!playerData || !cardsData) { 24 | return ( 25 | 26 | 32 | 33 | ) 34 | } 35 | 36 | const player = playerData.find(p => p.name === 'roxfears') 37 | const card = cardsData.find(c => c.id === player.card) 38 | return ( 39 | 40 | 41 | PLAYER CARD 42 | {player.name} 43 | {`${player.name} 44 | 45 | 46 | 47 | 48 | PREROUND SPRAY 49 | 50 | 51 | 52 | MIDROUND SPRAY 53 | 54 | 55 | 56 | POSTROUND SPRAY 57 | 58 | 59 | ) 60 | } 61 | 62 | export default CollectionPLayerInfo 63 | -------------------------------------------------------------------------------- /src/components/molecules/CollectionPLayerInfo/styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | export const Container = styled.div` 4 | width: auto; 5 | &[data-preloader='true'] { 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | width: 160px; 10 | height: 744px; 11 | } 12 | ` 13 | 14 | export const Title = styled.div` 15 | display: flex; 16 | justify-content: center; 17 | align-items: center; 18 | width: 100%; 19 | height: 30px; 20 | font-size: 12px; 21 | font-weight: 600; 22 | color: #f5f7d8; 23 | ` 24 | 25 | export const Card = styled.div` 26 | position: relative; 27 | img { 28 | width: auto; 29 | height: 380px; 30 | } 31 | span { 32 | display: flex; 33 | justify-content: center; 34 | align-items: center; 35 | background-color: #f5f7d8; 36 | width: 100%; 37 | height: 20px; 38 | position: absolute; 39 | bottom: 150px; 40 | } 41 | ` 42 | 43 | export const Spray = styled.div` 44 | display: flex; 45 | justify-content: space-between; 46 | align-items: center; 47 | flex-direction: column; 48 | background-color: rgb(255, 255, 255, 0.1); 49 | height: 100px; 50 | margin-top: 10px; 51 | 52 | img { 53 | height: calc(100% - 20px); 54 | width: auto; 55 | } 56 | span { 57 | display: flex; 58 | justify-content: center; 59 | align-items: center; 60 | width: 100%; 61 | height: 20px; 62 | background-color: rgb(255, 255, 255, 0.1); 63 | color: #fff; 64 | text-transform: uppercase; 65 | font-size: 12px; 66 | } 67 | ` 68 | -------------------------------------------------------------------------------- /src/components/molecules/ConfigDialog/Styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | export const Container = styled.div` 4 | .DialogButton { 5 | margin: 10px 0px; 6 | } 7 | 8 | .DialogButtonRed { 9 | margin: 10px 0px; 10 | background-color: rgba(221, 85, 92, 0.9); 11 | & > div:last-of-type { 12 | background-color: rgba(221, 85, 92, 0.9); 13 | border-color: rgba(225, 105, 102, 0.9); 14 | &:hover { 15 | background-color: rgba(180, 45, 72, 1); 16 | } 17 | } 18 | } 19 | ` 20 | 21 | export const LineUp = styled.div` 22 | display: flex; 23 | justify-content: center; 24 | align-items: center; 25 | width: 100%; 26 | height: 1px; 27 | background-color: #fff; 28 | overflow: visible; 29 | 30 | &:before { 31 | content: ''; 32 | display: block; 33 | width: 20px; 34 | height: 5px; 35 | background-color: #fff; 36 | position: absolute; 37 | } 38 | ` 39 | 40 | export const LineDown = styled.div` 41 | display: flex; 42 | justify-content: space-between; 43 | align-items: center; 44 | width: 100%; 45 | height: 1px; 46 | background-color: #fff; 47 | overflow: visible; 48 | 49 | &:before, 50 | &:after { 51 | content: ''; 52 | display: block; 53 | width: 20px; 54 | height: 3px; 55 | background-color: #fff; 56 | } 57 | ` 58 | 59 | export const Content = styled.div` 60 | display: flex; 61 | box-sizing: border-box; 62 | flex-direction: column; 63 | width: 510px; 64 | padding: 20px 50px; 65 | background-color: rgba(25, 25, 25, 0.9); 66 | ` 67 | 68 | export const CloseModal = styled.div` 69 | cursor: pointer; 70 | display: flex; 71 | margin-left: auto; 72 | justify-content: center; 73 | align-items: center; 74 | box-sizing: border-box; 75 | background-color: rgba(25, 25, 25, 0.9); 76 | border: 2px solid transparent; 77 | width: 50px; 78 | height: 50px; 79 | transition: all 0.5s; 80 | 81 | svg { 82 | transition: all 0.5s; 83 | } 84 | 85 | &:hover { 86 | border-color: #dd555c; 87 | background-color: rgba(25, 25, 25, 0.5); 88 | svg { 89 | transform: scale(-0.5); 90 | } 91 | } 92 | ` 93 | 94 | export const ArrowSVG = styled.div` 95 | box-sizing: border-box; 96 | display: flex; 97 | align-items: center; 98 | justify-content: center; 99 | width: 100%; 100 | padding: 10px; 101 | 102 | svg { 103 | opacity: 0.6; 104 | } 105 | ` 106 | -------------------------------------------------------------------------------- /src/components/molecules/ConfigDialog/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | Container, 4 | LineUp, 5 | LineDown, 6 | Content, 7 | CloseModal, 8 | ArrowSVG 9 | } from './Styles' 10 | import AimSVF from '@/svg/aim.svg' 11 | import ArrowConfigSVG from '@/svg/arrow-config.svg' 12 | import { useModalContext } from '@/context/Modal' 13 | import DefaultButton from '@/atoms/DefaultButton' 14 | 15 | const ConfigDalog: React.FC = () => { 16 | const { closeModal }: any = useModalContext() 17 | return ( 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | Configuration 26 | 27 | 28 | Support 29 | 30 | 31 | About 32 | 33 | 34 | 35 | 36 | 37 | Exit to desktop 38 | 39 | 40 | 41 | 42 | ) 43 | } 44 | 45 | export default ConfigDalog 46 | -------------------------------------------------------------------------------- /src/components/molecules/FrontLogo/Styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import { motion } from 'framer-motion' 3 | import { minDevice, maxDevice } from '@/globalStyles/global/device' 4 | 5 | export const Container = styled(motion.div)` 6 | display: flex; 7 | flex-direction: column; 8 | justify-content: center; 9 | align-items: center; 10 | position: absolute; 11 | z-index: 1; 12 | 13 | @media ${maxDevice.mobileL} { 14 | padding: 10px; 15 | position: inherit; 16 | width: 100%; 17 | display: none; 18 | } 19 | ` 20 | 21 | export const CurrentAct = styled.span` 22 | display: flex; 23 | justify-content: center; 24 | align-items: center; 25 | background-color: #dd555c; 26 | height: 35px; 27 | width: 100%; 28 | font-size: 26px; 29 | color: #fff; 30 | margin-top: 15px; 31 | letter-spacing: 10px; 32 | ` 33 | -------------------------------------------------------------------------------- /src/components/molecules/FrontLogo/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import FrontLogoSvg from '@/svg/logo-front.svg' 3 | import { Container, CurrentAct } from './Styles' 4 | 5 | const FrontLogo: React.FC = () => { 6 | const animateVariants = { 7 | initial: { 8 | opacity: 0, 9 | scale: 3 10 | }, 11 | enter: { 12 | opacity: 1, 13 | scale: 1, 14 | transition: { 15 | duration: 0.2, 16 | delay: 0 17 | } 18 | }, 19 | exit: { 20 | opacity: 0, 21 | scale: 3, 22 | transition: { duration: 0.5 } 23 | } 24 | } 25 | 26 | return ( 27 | 33 | 34 | RETAKE: ACT 1 35 | 36 | ) 37 | } 38 | 39 | export default FrontLogo 40 | -------------------------------------------------------------------------------- /src/components/molecules/GameModes/Styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | export const Container = styled.div` 4 | width: 319px; 5 | ` 6 | 7 | export const Content = styled.div` 8 | box-sizing: border-box; 9 | width: 100%; 10 | height: 100%; 11 | background-color: rgba(0, 0, 0, 0.3); 12 | padding: 10px; 13 | ` 14 | 15 | export const DecorativeBar = styled.div` 16 | width: 100%; 17 | height: 1px; 18 | background-color: #9e9e9e; 19 | display: flex; 20 | justify-content: space-between; 21 | 22 | &:before, 23 | &:after { 24 | content: ''; 25 | width: 8px; 26 | height: 1px; 27 | background-color: #fff; 28 | display: block; 29 | } 30 | ` 31 | 32 | export const Title = styled.h2` 33 | display: flex; 34 | justify-content: center; 35 | align-items: center; 36 | color: #fff; 37 | background-color: rgba(0, 0, 0, 0.6); 38 | font-size: 15px; 39 | font-weight: 700; 40 | height: 31px; 41 | ` 42 | 43 | export const ModeBox = styled.div` 44 | width: 100%; 45 | height: 45px; 46 | display: flex; 47 | justify-content: space-between; 48 | align-items: center; 49 | flex-wrap: nowrap; 50 | 51 | & + div { 52 | margin-top: 5px; 53 | } 54 | 55 | > div { 56 | box-sizing: border-box; 57 | height: 100%; 58 | display: flex; 59 | align-items: center; 60 | } 61 | 62 | .symbol { 63 | display: flex; 64 | align-items: center; 65 | justify-content: center; 66 | background-color: rgba(255, 255, 255, 0.2); 67 | width: 45px; 68 | } 69 | .name { 70 | background-color: rgba(255, 255, 255, 0.12); 71 | justify-content: flex-start; 72 | width: 180px; 73 | padding: 10px; 74 | font-size: 13px; 75 | color: #fff; 76 | } 77 | .time { 78 | background-color: rgba(255, 255, 255, 0.04); 79 | padding: 10px; 80 | font-size: 12px; 81 | color: #fff; 82 | width: calc(100% - (180 + 45)); 83 | } 84 | ` 85 | -------------------------------------------------------------------------------- /src/components/molecules/GameModes/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ModeRankedSVG from '@/svg/gm-ranked.svg' 3 | import ModeSpikeSVG from '@/svg/gm-spike.svg' 4 | import ModeDMSVG from '@/svg/gm-deathmath.svg' 5 | import SwrFetchHook from '@/hooks/SwrFetchHook' 6 | import { Container, Content, DecorativeBar, ModeBox, Title } from './Styles' 7 | 8 | interface IGameMode { 9 | id: string 10 | position: number 11 | title: string 12 | time: string 13 | } 14 | 15 | const GameModes: React.FC = () => { 16 | const { data } = SwrFetchHook('/api/game_modes') 17 | 18 | function getGameModeSymbol(mode: string): JSX.Element { 19 | switch (mode) { 20 | case 'ranked': 21 | return 22 | break 23 | case 'casual': 24 | return 25 | break 26 | case 'spike': 27 | return 28 | break 29 | case 'dm': 30 | return 31 | break 32 | default: 33 | return 34 | } 35 | } 36 | 37 | return ( 38 | 39 | 40 | MOST PLAYED MODES 41 | 42 | {data?.map(gm => { 43 | return ( 44 | 45 |
{getGameModeSymbol(gm.id)}
46 |
{gm.title}
47 |
{gm.time}
48 | 49 | ) 50 | })} 51 | 52 | 53 | 54 | ) 55 | } 56 | 57 | export default GameModes 58 | -------------------------------------------------------------------------------- /src/components/molecules/MainNav/Styles.tsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | export const Container = styled.nav` 4 | display: flex; 5 | height: 52px; 6 | width: 100%; 7 | 8 | > ul { 9 | width: 100%; 10 | height: 48px; 11 | overflow: hidden; 12 | display: flex; 13 | flex-direction: row; 14 | justify-content: center; 15 | align-items: center; 16 | z-index: 1; 17 | border-bottom: 1px solid #c3c6e9; 18 | box-shadow: 1px 23px 27px 5px rgba(0, 0, 0, 0.34) inset; 19 | -webkit-box-shadow: 1px 23px 27px 5px rgba(0, 0, 0, 0.34) inset; 20 | -moz-box-shadow: 1px 23px 27px 5px rgba(0, 0, 0, 0.34) inset; 21 | 22 | > li { 23 | list-style: none; 24 | margin: 0px 20px; 25 | text-align: center; 26 | width: 120px; 27 | transition: all 0.2s; 28 | 29 | &.website { 30 | width: auto; 31 | position: absolute; 32 | left: 16px; 33 | margin: 0; 34 | } 35 | 36 | &.clock { 37 | display: flex; 38 | justify-content: center; 39 | align-items: center; 40 | svg { 41 | margin-right: 10px; 42 | } 43 | span { 44 | font-size: 15px; 45 | font-weight: 400; 46 | color: #fff; 47 | } 48 | } 49 | 50 | &.points { 51 | div { 52 | display: flex; 53 | justify-content: flex-start; 54 | align-items: center; 55 | & + div { 56 | margin-top: 3px; 57 | } 58 | } 59 | svg { 60 | margin-right: 10px; 61 | } 62 | span { 63 | font-size: 15px; 64 | font-weight: 400; 65 | color: #fff; 66 | } 67 | } 68 | 69 | &.agents { 70 | margin-right: 200px; 71 | } 72 | 73 | &.career { 74 | margin-left: 200px; 75 | } 76 | 77 | &.play { 78 | position: absolute; 79 | left: 50%; 80 | right: 50%; 81 | transform: translate(-50%, -2px); 82 | width: 354px; 83 | height: 55px; 84 | display: flex; 85 | justify-content: center; 86 | align-items: center; 87 | margin: 0; 88 | transition: all 0.3s; 89 | 90 | svg { 91 | transition: all 0.3s; 92 | } 93 | 94 | a { 95 | position: relative; 96 | z-index: 1; 97 | font-size: 23px; 98 | font-weight: 700; 99 | color: #000; 100 | } 101 | 102 | &:hover { 103 | a { 104 | color: #fff; 105 | } 106 | svg { 107 | fill: #fff; 108 | opacity: 0.5; 109 | } 110 | } 111 | } 112 | 113 | &.settings { 114 | display: flex; 115 | justify-content: center; 116 | align-items: center; 117 | box-sizing: border-box; 118 | width: 35px; 119 | height: 35px; 120 | position: absolute; 121 | right: 16px; 122 | margin: 0; 123 | cursor: pointer; 124 | transition: all 0.5s; 125 | border: 1px solid #fff; 126 | padding: 5px; 127 | border-radius: 50%; 128 | 129 | svg { 130 | transition: all 0.5s; 131 | width: 20px; 132 | height: 20px; 133 | } 134 | 135 | &:hover { 136 | padding: 0px; 137 | border: 0px; 138 | svg { 139 | transform: rotate(360deg); 140 | fill: #dd555c; 141 | width: 45px; 142 | height: 45px; 143 | } 144 | } 145 | } 146 | } 147 | } 148 | 149 | &.placeholderCont { 150 | > ul { 151 | > li { 152 | border: 0; 153 | padding: 0; 154 | } 155 | } 156 | } 157 | ` 158 | 159 | export const SvgPlay = styled.div` 160 | position: absolute; 161 | top: 0px; 162 | width: 354px; 163 | height: 55px; 164 | ` 165 | -------------------------------------------------------------------------------- /src/components/molecules/MainNav/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import NavLink from '@/atoms/NavLink' 3 | import ValorantGameLink from '@/atoms/ValorantGameLink' 4 | import GearConfig from '@/svg/gear-config.svg' 5 | import SwrFetchHook from '@/hooks/SwrFetchHook' 6 | import ClockIconSvg from '@/svg/clock-icon.svg' 7 | import MainNavCenterSvg from '@/svg/main-nav-center.svg' 8 | import ValorantPointsSvg from '@/svg/valorant-points.svg' 9 | import RadiantPointsSvg from '@/svg/radiant-points.svg' 10 | import { Container, SvgPlay } from './Styles' 11 | import { useModalContext } from '@/context/Modal' 12 | import ConfigDialog from '@/molecules/ConfigDialog' 13 | import PlaceholderTag from '@/atoms/PlaceholderTag' 14 | 15 | interface INavItem { 16 | id: string 17 | url: string 18 | title: string 19 | } 20 | 21 | const MainNav: React.FC = () => { 22 | const { data } = SwrFetchHook('/api/categories') 23 | const { openModal }: any = useModalContext() 24 | 25 | if (!data) { 26 | return 27 | } 28 | 29 | return ( 30 | 31 |
    32 |
  • 33 | 34 |
    • 35 | 36 |
  • 37 | 38 | 1/2 39 |
    • 40 | 41 | {data.map(category => { 42 | return ( 43 |
  • 44 | {category.title} 45 | 46 | {category.id === 'play' ? ( 47 | 48 | 49 | 50 | ) : ( 51 | '' 52 | )} 53 |
    • 54 | ) 55 | })} 56 | 57 |
  • 58 |
    59 | 60 | 135 61 |
    62 |
    63 | 64 | 60 65 |
    66 |
    • 67 | 68 |
  • openModal()}> 69 | 70 |
    • 71 |
72 | 73 | ) 74 | } 75 | export default MainNav 76 | -------------------------------------------------------------------------------- /src/components/molecules/Modal/Styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import { motion } from 'framer-motion' 3 | 4 | export const Container = styled(motion.div)` 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | position: fixed; 9 | top: 0; 10 | left: 0; 11 | width: 100vw; 12 | height: 100vh; 13 | background-color: rgba(0, 0, 0, 0.8); 14 | z-index: 999; 15 | ` 16 | export const Content = styled(motion.div)`` 17 | -------------------------------------------------------------------------------- /src/components/molecules/Modal/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Container, Content } from './Styles' 3 | import { AnimatePresence } from 'framer-motion' 4 | import { useModalContext } from '@/context/Modal' 5 | 6 | const backdrop = { 7 | visible: { opacity: 1 }, 8 | hidden: { opacity: 0 } 9 | } 10 | 11 | const contentModal = { 12 | hidden: { 13 | y: '-100vh', 14 | opacity: 0 15 | }, 16 | visible: { 17 | y: '0', 18 | opacity: 1, 19 | transition: { delay: 0.5 } 20 | } 21 | } 22 | 23 | const Modal: React.FC = () => { 24 | const { 25 | modalState: { message, visible } 26 | }: any = useModalContext() 27 | 28 | return ( 29 | 30 | {visible && ( 31 | 37 | {message} 38 | 39 | )} 40 | 41 | ) 42 | } 43 | 44 | export default Modal 45 | -------------------------------------------------------------------------------- /src/components/molecules/PlayMenu/Styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | interface IActiveOpt { 4 | ActiveOpt: number 5 | } 6 | 7 | export const Container = styled.div` 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | width: 100%; 12 | padding: 25px 0px; 13 | ` 14 | export const Menu = styled.ul` 15 | display: flex; 16 | width: auto; 17 | list-style: none; 18 | border-bottom: 2px solid rgba(255, 255, 255, 0.3); 19 | 20 | > li:nth-child(${props => props.ActiveOpt}) { 21 | background-color: rgba(255, 255, 255, 0.3); 22 | &:after { 23 | background-color: #eaeeb2; 24 | } 25 | &:before { 26 | background-color: #eaeeb2; 27 | } 28 | } 29 | ` 30 | 31 | export const MenuItem = styled.li` 32 | padding: 10px; 33 | margin: 0px 10px; 34 | color: #fff; 35 | cursor: pointer; 36 | position: relative; 37 | transition: all 0.3s; 38 | &:after { 39 | content: ''; 40 | display: block; 41 | width: 5px; 42 | height: 5px; 43 | transform: rotate(45deg) translateX(-50%); 44 | background-color: #fff; 45 | position: absolute; 46 | bottom: -5px; 47 | left: 50%; 48 | transition: all 0.3s; 49 | } 50 | 51 | &:before { 52 | content: ''; 53 | display: block; 54 | width: 100%; 55 | height: 2px; 56 | background-color: transparent; 57 | position: absolute; 58 | bottom: -2px; 59 | left: 0; 60 | transition: all 0.3s; 61 | } 62 | 63 | &:hover { 64 | background-color: rgba(255, 255, 255, 0.3); 65 | &:after { 66 | background-color: #eaeeb2; 67 | } 68 | &:before { 69 | background-color: #eaeeb2; 70 | } 71 | } 72 | ` 73 | -------------------------------------------------------------------------------- /src/components/molecules/PlayMenu/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { Container, Menu, MenuItem } from './Styles' 3 | 4 | const PLayMenu: React.FC = () => { 5 | const [selectedOption, setSelectedOption] = useState(1) 6 | 7 | return ( 8 | 9 | 10 | setSelectedOption(1)}> 11 | NO CLASSIFICATION 12 | 13 | setSelectedOption(2)}>COMPETITIVE 14 | setSelectedOption(3)}>SPIKE RUSH 15 | setSelectedOption(4)}>DEATHMATCH 16 | 17 | 18 | ) 19 | } 20 | 21 | export default PLayMenu 22 | -------------------------------------------------------------------------------- /src/components/molecules/ProfileCard/Styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | type ProfStatusPropTypes = { 4 | ProfStatus: string 5 | } 6 | 7 | type ProfileTypePropTypes = { 8 | ProfileType: string 9 | } 10 | 11 | export const Container = styled.div` 12 | width: 250px; 13 | box-sizing: border-box; 14 | padding: 5px; 15 | display: flex; 16 | justify-content: flex-start; 17 | align-items: center; 18 | background-color: rgba(158, 158, 158, 0.2); 19 | margin-bottom: 5px; 20 | ` 21 | 22 | export const ProfileStatus = styled.div` 23 | width: 45px; 24 | height: 45px; 25 | position: relative; 26 | &:after { 27 | content: ''; 28 | display: block; 29 | width: 10px; 30 | height: 10px; 31 | border-radius: 50%; 32 | background-color: ${props => props.ProfStatus}; 33 | position: absolute; 34 | right: -5px; 35 | bottom: 8px; 36 | box-shadow: 0px 0px 2px #000; 37 | } 38 | ` 39 | 40 | export const ProfileInfo = styled.div` 41 | padding-left: 10px; 42 | 43 | span { 44 | color: ${props => props.ProfStatus}; 45 | font-weight: 400; 46 | font-size: 13px; 47 | } 48 | 49 | > div { 50 | display: flex; 51 | } 52 | 53 | svg { 54 | margin-left: 10px; 55 | } 56 | ` 57 | 58 | export const ProfileName = styled.strong` 59 | color: ${props => (props.ProfileType === 'me' ? '#eaeeb2' : '#FFF')}; 60 | font-weight: 700; 61 | font-size: 16px; 62 | ` 63 | -------------------------------------------------------------------------------- /src/components/molecules/ProfileCard/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Image from 'next/image' 3 | import SwrFetchHook from '@/hooks/SwrFetchHook' 4 | import { Container, ProfileInfo, ProfileStatus, ProfileName } from './Styles' 5 | import SendMsgSVG from '@/svg/send-message.svg' 6 | 7 | interface IProfName { 8 | profName: string 9 | } 10 | 11 | interface IProfile { 12 | name: string 13 | activity: string 14 | status: string 15 | avatar: string 16 | } 17 | 18 | const profileCard: React.FC = ({ profName }) => { 19 | const { data } = SwrFetchHook('/api/friends') 20 | 21 | if (!data) { 22 | return

carregando...

23 | } 24 | 25 | const profile = data.find(p => p.name === profName) 26 | 27 | const setStatusColor = () => { 28 | const status = profile.status 29 | 30 | switch (status) { 31 | case 'me': 32 | return '#65ACA2' 33 | break 34 | case 'Online': 35 | return '#54A3DA' 36 | break 37 | default: 38 | return '#C2C2C2' 39 | break 40 | } 41 | } 42 | 43 | return ( 44 | 45 | 46 | 51 | 52 | 53 | {profile.name} 54 |
55 | {profile.activity} 56 | {profile.status !== 'me' ? : ''} 57 |
58 | 59 | 60 | ) 61 | } 62 | 63 | export default profileCard 64 | -------------------------------------------------------------------------------- /src/components/molecules/UpdateNotes/Styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | export const Container = styled.div` 4 | position: relative; 5 | width: 319px; 6 | height: 65px; 7 | box-sizing: border-box; 8 | padding: 2px; 9 | background-color: rgba(255, 255, 255, 0.2); 10 | margin: 20px 0px; 11 | 12 | .dot { 13 | width: 2px; 14 | height: 2px; 15 | background-color: #fff; 16 | position: absolute; 17 | 18 | &.topLeft { 19 | top: 0; 20 | left: 0; 21 | } 22 | &.TopRight { 23 | top: 0; 24 | right: 0; 25 | } 26 | &.BottomLeft { 27 | bottom: 0; 28 | left: 0; 29 | } 30 | &.BottomRight { 31 | bottom: 0; 32 | right: 0; 33 | } 34 | } 35 | ` 36 | 37 | export const Content = styled.div` 38 | background-color: rgba(255, 255, 255, 0.2); 39 | box-sizing: border-box; 40 | width: 100%; 41 | height: 100%; 42 | border: 1px solid #fff; 43 | 44 | > div { 45 | font-size: 23px; 46 | color: #fff; 47 | display: flex; 48 | justify-content: center; 49 | align-items: center; 50 | box-sizing: border-box; 51 | width: 100%; 52 | height: calc(100% - 16px); 53 | } 54 | 55 | > span { 56 | font-size: 13px; 57 | font-weight: 500; 58 | color: #676767; 59 | background-color: rgba(255, 255, 255, 0.2); 60 | display: flex; 61 | justify-content: center; 62 | align-items: center; 63 | box-sizing: border-box; 64 | width: 100%; 65 | height: 16px; 66 | } 67 | ` 68 | -------------------------------------------------------------------------------- /src/components/molecules/UpdateNotes/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Container, Content } from './Styles' 3 | 4 | const UpdateNotes: React.FC = () => { 5 | return ( 6 | 7 |
8 |
9 |
10 |
11 | 12 |
UPDATE NOTES
13 | 1.12 14 | 15 | 16 | ) 17 | } 18 | 19 | export default UpdateNotes 20 | -------------------------------------------------------------------------------- /src/components/organisms/AsideLeftHome/Styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import { motion } from 'framer-motion' 3 | 4 | export const Container = styled(motion.div)` 5 | margin-right: auto; 6 | left: 100px; 7 | position: absolute; 8 | z-index: 1; 9 | transition: all 0.5s; 10 | 11 | &[data-ishome='false'] { 12 | left: -300px; 13 | } 14 | ` 15 | -------------------------------------------------------------------------------- /src/components/organisms/AsideLeftHome/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react' 2 | import { useRouter } from 'next/router' 3 | import BannerNews from '@/molecules/BannerNews' 4 | import GameModes from '@/molecules/GameModes' 5 | import UpdateNotes from '@/molecules/UpdateNotes' 6 | import { Container } from './Styles' 7 | 8 | const AsideLeftHome: React.FC = () => { 9 | const [isHome, setIsHome] = useState(true) 10 | 11 | const router = useRouter() 12 | 13 | const handleRouteChange = url => { 14 | if (url !== '/') { 15 | setIsHome(!isHome) 16 | } else { 17 | setIsHome(isHome) 18 | } 19 | } 20 | 21 | useEffect(() => { 22 | handleRouteChange(router.pathname) 23 | return router.events.on('routeChangeComplete', handleRouteChange) 24 | }, []) 25 | 26 | return ( 27 | 28 | 29 | 30 | 31 | 32 | 33 | ) 34 | } 35 | 36 | export default AsideLeftHome 37 | -------------------------------------------------------------------------------- /src/components/organisms/FriendsList/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react' 2 | import { useRouter } from 'next/router' 3 | import { 4 | Container, 5 | ProfilesContent, 6 | OptionsContent, 7 | AccordionProfiles, 8 | ProfileMenu, 9 | ToggleMenu, 10 | Arrow, 11 | AddFriend, 12 | SearchFriend 13 | } from './Styles' 14 | import ProfileCard from '@/molecules/ProfileCard' 15 | import SwrFetchHook from '@/hooks/SwrFetchHook' 16 | import ArrowLeft from '@/svg/arrow-left.svg' 17 | import AddFriendSVG from '@/svg/add-friend.svg' 18 | import SearchSVG from '@/svg/search.svg' 19 | import CloseSVG from '@/svg/close.svg' 20 | import PlusButtonSVG from '@/svg/plus-button.svg' 21 | 22 | interface IProfile { 23 | name: string 24 | activity: string 25 | status: string 26 | avatar: string 27 | } 28 | 29 | const FriendsList: React.FC = () => { 30 | const [friendList, setFriendList] = useState(true) 31 | const [onlinePanel, setOnlinePanel] = useState(false) 32 | const [offlinePanel, setOfflinePanel] = useState(true) 33 | const [addFriend, setAddFriend] = useState(false) 34 | const [searchFriend, setSearchFriend] = useState(false) 35 | const [isHome, setIsHome] = useState(true) 36 | 37 | const router = useRouter() 38 | 39 | const handleRouteChange = url => { 40 | if (url !== '/') { 41 | setFriendList(!friendList) 42 | setIsHome(!isHome) 43 | } else { 44 | setFriendList(friendList) 45 | setIsHome(isHome) 46 | } 47 | } 48 | 49 | useEffect(() => { 50 | handleRouteChange(router.pathname) 51 | return router.events.on('routeChangeComplete', handleRouteChange) 52 | }, []) 53 | 54 | const { data } = SwrFetchHook('/api/friends') 55 | 56 | if (!data) { 57 | return

carregando...

58 | } 59 | 60 | const mainProfile = data.find(p => p.status === 'me') 61 | 62 | const onlineFriends = data.filter(friends => { 63 | return friends.status === 'Online' 64 | }) 65 | 66 | const offlineFriends = data.filter(friends => { 67 | return friends.status === 'Offline' 68 | }) 69 | 70 | const toggleSwitchOnline = () => { 71 | if (onlinePanel && !offlinePanel) { 72 | setOfflinePanel(!offlinePanel) 73 | } 74 | 75 | setOnlinePanel(!onlinePanel) 76 | } 77 | const toggleSwitchOffline = () => { 78 | if (!onlinePanel && offlinePanel) { 79 | setOnlinePanel(!onlinePanel) 80 | } 81 | setOfflinePanel(!offlinePanel) 82 | } 83 | 84 | const toggleFriendlist = () => { 85 | if (searchFriend) { 86 | setSearchFriend(!searchFriend) 87 | } 88 | 89 | if (addFriend) { 90 | setAddFriend(!addFriend) 91 | } 92 | 93 | return setFriendList(!friendList) 94 | } 95 | 96 | const toggleAddFriendBox = () => { 97 | if (searchFriend) { 98 | setSearchFriend(!searchFriend) 99 | } 100 | 101 | return setAddFriend(!addFriend) 102 | } 103 | 104 | const toggleSearchFriendBox = () => { 105 | if (addFriend) { 106 | setAddFriend(!addFriend) 107 | } 108 | 109 | return setSearchFriend(!searchFriend) 110 | } 111 | 112 | return ( 113 | 114 | 119 | 120 | 121 | 122 | 123 | 124 | 125 |
  • 126 | 127 |
    {onlineFriends.length}
    128 | ONLINE 129 | 130 |     131 |
      132 | {onlineFriends.map(online => ( 133 |
    • 134 | 135 |
      • 136 | ))} 137 |
    138 |
    • 139 | 140 |
  • 141 | 145 |
    {offlineFriends.length}
    146 | OFFLINE 147 | 148 |     149 |
      150 | {offlineFriends.map(offline => ( 151 |
    • 152 | 153 |
      • 154 | ))} 155 |
    156 |
    • 157 |     158 |     159 | 160 | 161 |
    162 | 163 |
    164 | 165 | # 166 | 167 | 168 |     169 | 170 | 171 |
    172 | 173 |
    174 | 175 |     176 | 177 | 178 |
    179 | 180 |
    181 |
    182 | 183 |
    184 |     185 |     186 | ) 187 | } 188 | 189 | export default FriendsList 190 | -------------------------------------------------------------------------------- /src/hooks/SwrFetchHook.ts: -------------------------------------------------------------------------------- 1 | import useSWR from 'swr' 2 | 3 | function SwrFetchHook(url: string) { 4 | const { data, error } = useSWR(url, async url => { 5 | const response = await fetch(url) 6 | const data = await response.json() 7 | return data 8 | }) 9 | 10 | return { data, error } 11 | } 12 | 13 | export default SwrFetchHook 14 | -------------------------------------------------------------------------------- /src/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Router from 'next/router' 3 | import NProgress from 'nprogress' 4 | import { AppProps } from 'next/dist/next-server/lib/router/router' 5 | import MainNav from '@/molecules/MainNav' 6 | import { ThemeProvider } from 'styled-components' 7 | import theme from '@/globalStyles/theme' 8 | import FriendsList from '@/organisms/FriendsList' 9 | import { ModalProvider } from '@/context/Modal' 10 | import Modal from '@/molecules/Modal' 11 | import { BGVideoProvider } from '@/context/BackgroundVideo' 12 | import { AnimatePresence } from 'framer-motion' 13 | import GlobalNormalize from '@/globalStyles/global/normalize' 14 | import Head from 'next/head' 15 | import GlobalStyles, { 16 | Main, 17 | BGImage, 18 | Wrapper 19 | } from '@/globalStyles/global/global' 20 | import '@/globalStyles/global/nprogress.css' 21 | 22 | Router.events.on('routeChangeStart', () => { 23 | NProgress.start() 24 | }) 25 | 26 | Router.events.on('routeChangeComplete', () => NProgress.done()) 27 | Router.events.on('routechangeError', () => NProgress.done()) 28 | 29 | export default function MyApp({ 30 | Component, 31 | pageProps, 32 | router 33 | }: AppProps): JSX.Element { 34 | const duration = 0.35 35 | const delay = 0 36 | 37 | const variants = { 38 | initial: { 39 | opacity: 0 40 | }, 41 | enter: { 42 | opacity: 1, 43 | transition: { 44 | duration: duration, 45 | delay: delay, 46 | when: 'beforeChildren' 47 | } 48 | }, 49 | exit: { 50 | opacity: 0, 51 | transition: { duration: duration } 52 | } 53 | } 54 | 55 | return ( 56 | 57 | 58 | Valorant Game Interface 59 | 60 | 64 | 65 | 66 | 67 | 68 |
    69 | 70 | 71 | 72 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 |
    88 | 89 |     90 |     91 |     92 | ) 93 | } 94 | -------------------------------------------------------------------------------- /src/pages/_document.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Document, { 3 | DocumentContext, 4 | DocumentInitialProps, 5 | Head, 6 | Html, 7 | Main, 8 | NextScript 9 | } from 'next/document' 10 | import { ServerStyleSheet } from 'styled-components' 11 | 12 | export default class MyDocument extends Document { 13 | static async getInitialProps( 14 | ctx: DocumentContext 15 | ): Promise { 16 | const sheet = new ServerStyleSheet() 17 | const originalRenderPage = ctx.renderPage 18 | 19 | try { 20 | ctx.renderPage = () => 21 | originalRenderPage({ 22 | enhanceApp: App => props => sheet.collectStyles() 23 | }) 24 | 25 | const initialProps = await Document.getInitialProps(ctx) 26 | return { 27 | ...initialProps, 28 | styles: ( 29 | <> 30 | {initialProps.styles} 31 | {sheet.getStyleElement()} 32 | 33 | ) 34 | } 35 | } finally { 36 | sheet.seal() 37 | } 38 | } 39 | 40 | render(): JSX.Element { 41 | return ( 42 | 43 | 44 | 45 |
    46 | 47 | 48 | 49 | ) 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/pages/agents/[slug].tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReturnButton from '@/atoms/ReturnButton' 3 | import { useRouter } from 'next/router' 4 | import AgentsMenu from '@/molecules/AgentsMenu' 5 | import AgentDescription from '@/molecules/AgentDescription' 6 | import AgentPhoto from '@/molecules/AgentPhoto' 7 | import AgentAbilities from '@/molecules/AgentAbilities' 8 | 9 | import { 10 | Container, 11 | ReturnBtContainer, 12 | Content 13 | } from '@/globalStyles/pages/agents' 14 | interface IRoles { 15 | name: string 16 | description: string 17 | } 18 | 19 | interface IAgents { 20 | id: number 21 | name: string 22 | role: string 23 | abilities: [ 24 | { 25 | id: number 26 | name: string 27 | description: string 28 | video: string 29 | } 30 | ] 31 | } 32 | 33 | const Agents: React.FC = (): JSX.Element => { 34 | const router = useRouter() 35 | const RouteAgent = String(router.query.slug) 36 | 37 | return ( 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | ) 52 | } 53 | 54 | export default Agents 55 | -------------------------------------------------------------------------------- /src/pages/api/[endpoint].ts: -------------------------------------------------------------------------------- 1 | import data from './data.json' 2 | 3 | export default function dataHandler(req, res) { 4 | const { endpoint } = req.query 5 | 6 | res.status(200).json(data[endpoint]) 7 | } 8 | -------------------------------------------------------------------------------- /src/pages/api/index.ts: -------------------------------------------------------------------------------- 1 | import data from './data.json' 2 | 3 | export default function handler(req, res) { 4 | res.status(200).json(data) 5 | } 6 | -------------------------------------------------------------------------------- /src/pages/career.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReturnButton from '@/atoms/ReturnButton' 3 | import { 4 | Container, 5 | ReturnBtContainer, 6 | Content 7 | } from '@/globalStyles/pages/career' 8 | 9 | import CareerMenu from '@/molecules/CareerMenu' 10 | import CareerRankType from '@/molecules/CareerRankType' 11 | import CareerRankList from '@/molecules/CareerRankList' 12 | 13 | const Career = () => { 14 | return ( 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | ) 29 | } 30 | export default Career 31 | -------------------------------------------------------------------------------- /src/pages/collection.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReturnButton from '@/atoms/ReturnButton' 3 | import CollectionPLayerInfo from '@/molecules/CollectionPLayerInfo' 4 | import CollectionGuns from '@/molecules/CollectionGuns' 5 | 6 | import { 7 | Container, 8 | ReturnBtContainer, 9 | Content 10 | } from '@/globalStyles/pages/colection' 11 | 12 | const Collection = () => { 13 | return ( 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | ) 25 | } 26 | 27 | export default Collection 28 | -------------------------------------------------------------------------------- /src/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import FrontLogo from '@/molecules/FrontLogo' 3 | import AsideLeftHome from '@/organisms/AsideLeftHome' 4 | import { Container } from '@/pageStyles/home' 5 | 6 | import BgVideo from '@/molecules/BackgroundVideo' 7 | 8 | const Home = () => { 9 | return ( 10 | <> 11 | 12 | 13 | 14 | 15 | 16 | 17 | ) 18 | } 19 | export default Home 20 | -------------------------------------------------------------------------------- /src/pages/store.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Store: React.FC = () => { 4 | return ( 5 | <> 6 |

    Store

    7 | 8 | ) 9 | } 10 | 11 | export default Store 12 | -------------------------------------------------------------------------------- /src/providers/BackgroundVideo.tsx: -------------------------------------------------------------------------------- 1 | import React, { createContext, useState, useContext } from 'react' 2 | 3 | const BGVideoContext = createContext({}) 4 | 5 | const BGVideoProvider = ({ children }) => { 6 | const [playVideo, setpLayVideo] = useState(true) 7 | 8 | return ( 9 | 15 | {children} 16 | 17 | ) 18 | } 19 | 20 | const useBGVideoContext = () => { 21 | const context = useContext(BGVideoContext) 22 | return context 23 | } 24 | 25 | export { useBGVideoContext, BGVideoProvider } 26 | -------------------------------------------------------------------------------- /src/providers/Modal.tsx: -------------------------------------------------------------------------------- 1 | import React, { createContext, useState, useContext } from 'react' 2 | 3 | const ModalContext = createContext({}) 4 | 5 | const ModalProvider = ({ children }) => { 6 | const [modalState, setModalState] = useState({ visible: false }) 7 | 8 | const createModal = payload => setModalState({ ...payload, visible: true }) 9 | const openModal = modalContent => createModal({ message: modalContent }) 10 | const closeModal = () => setModalState({ visible: false }) 11 | 12 | return ( 13 | 20 | {children} 21 | 22 | ) 23 | } 24 | 25 | const useModalContext = () => { 26 | const context = useContext(ModalContext) 27 | return context 28 | } 29 | 30 | export { useModalContext, ModalProvider } 31 | -------------------------------------------------------------------------------- /src/styles/global/device.ts: -------------------------------------------------------------------------------- 1 | const size = { 2 | mobileS: '320px', 3 | mobileM: '375px', 4 | mobileL: '425px', 5 | tablet: '768px', 6 | laptop: '1024px', 7 | laptopL: '1440px', 8 | desktop: '2560px' 9 | } 10 | 11 | export const minDevice = { 12 | mobileS: `(min-width: ${size.mobileS})`, 13 | mobileM: `(min-width: ${size.mobileM})`, 14 | mobileL: `(min-width: ${size.mobileL})`, 15 | tablet: `(min-width: ${size.tablet})`, 16 | laptop: `(min-width: ${size.laptop})`, 17 | laptopL: `(min-width: ${size.laptopL})`, 18 | desktop: `(min-width: ${size.desktop})`, 19 | desktopL: `(min-width: ${size.desktop})` 20 | } 21 | 22 | export const maxDevice = { 23 | mobileS: `(max-width: ${size.mobileS})`, 24 | mobileM: `(max-width: ${size.mobileM})`, 25 | mobileL: `(max-width: ${size.mobileL})`, 26 | tablet: `(max-width: ${size.tablet})`, 27 | laptop: `(max-width: ${size.laptop})`, 28 | laptopL: `(max-width: ${size.laptopL})`, 29 | desktop: `(max-width: ${size.desktop})`, 30 | desktopL: `(max-width: ${size.desktop})` 31 | } 32 | -------------------------------------------------------------------------------- /src/styles/global/fonts.ts: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components' 2 | 3 | const GlobalFonts = createGlobalStyle` 4 | //900 5 | @font-face { 6 | font-family: "Roboto"; 7 | src: url("/fonts/Roboto/Roboto-Black.ttf"); 8 | font-style: normal; 9 | font-weight: 900; 10 | font-display: swap; 11 | } 12 | @font-face { 13 | font-family: "Roboto"; 14 | src: url("/fonts/Roboto/Roboto-BlackItalic.ttf"); 15 | font-style: italic; 16 | font-weight: 900; 17 | font-display: swap; 18 | } 19 | //700 20 | @font-face { 21 | font-family: "Roboto"; 22 | src: url("/fonts/Roboto/Roboto-Bold.ttf"); 23 | font-style: normal; 24 | font-weight: 700; 25 | font-display: swap; 26 | } 27 | @font-face { 28 | font-family: "Roboto"; 29 | src: url("/fonts/Roboto/Roboto-BoldItalic.ttf"); 30 | font-style: italic; 31 | font-weight: 700; 32 | font-display: swap; 33 | } 34 | //500 35 | @font-face { 36 | font-family: "Roboto"; 37 | src: url("/fonts/Roboto/Roboto-Medium.ttf"); 38 | font-style: normal; 39 | font-weight: 500; 40 | font-display: swap; 41 | } 42 | @font-face { 43 | font-family: "Roboto"; 44 | src: url("/fonts/Roboto/Roboto-MediumItalic.ttf"); 45 | font-style: italic; 46 | font-weight: 500; 47 | font-display: swap; 48 | } 49 | //400 50 | @font-face { 51 | font-family: "Roboto"; 52 | src: url("/fonts/Roboto/Roboto-Regular.ttf"); 53 | font-style: normal; 54 | font-weight: 400; 55 | font-display: swap; 56 | } 57 | @font-face { 58 | font-family: "Roboto"; 59 | src: url("/fonts/Roboto/Roboto-Italic.ttf"); 60 | font-style: italic; 61 | font-weight: 400; 62 | font-display: swap; 63 | } 64 | //300 65 | @font-face { 66 | font-family: "Roboto"; 67 | src: url("/fonts/Roboto/Roboto-Light.ttf"); 68 | font-style: normal; 69 | font-weight: 300; 70 | font-display: swap; 71 | } 72 | @font-face { 73 | font-family: "Roboto"; 74 | src: url("/fonts/Roboto/Roboto-LightItalic.ttf"); 75 | font-style: italic; 76 | font-weight: 300; 77 | font-display: swap; 78 | } 79 | //100 80 | @font-face { 81 | font-family: "Roboto"; 82 | src: url("/fonts/Roboto/Roboto-Thin.ttf"); 83 | font-style: normal; 84 | font-weight: 100; 85 | font-display: swap; 86 | } 87 | @font-face { 88 | font-family: "Roboto"; 89 | src: url("/fonts/Roboto/Roboto-ThinItalic.ttf"); 90 | font-style: italic; 91 | font-weight: 100; 92 | font-display: swap; 93 | } 94 | ` 95 | 96 | export default GlobalFonts 97 | -------------------------------------------------------------------------------- /src/styles/global/global.ts: -------------------------------------------------------------------------------- 1 | import styled, { createGlobalStyle } from 'styled-components' 2 | import { motion } from 'framer-motion' 3 | import { minDevice, maxDevice } from './device' 4 | const GlobalStyle = createGlobalStyle` 5 | * { 6 | margin: 0; 7 | padding: 0; 8 | } 9 | 10 | body { 11 | font-family: 'Roboto', Arial, Helvetica, sans-serif; 12 | background-color: #000; 13 | } 14 | 15 | html, 16 | body, 17 | #__next{ 18 | width: 100%; 19 | height: 100%; 20 | overflow-y: auto; 21 | overflow-x: hidden; 22 | 23 | @media ${minDevice.tablet} { 24 | overflow: hidden; 25 | } 26 | } 27 | ` 28 | 29 | export const Main = styled.main` 30 | width: 100%; 31 | height: 100%; 32 | display: flex; 33 | flex-direction: column; 34 | ` 35 | export const Wrapper = styled(motion.div)` 36 | width: 100%; 37 | height: 100%; 38 | display: flex; 39 | flex-direction: column; 40 | ` 41 | 42 | export const BGImage = styled.div` 43 | position: fixed; 44 | width: 100vw; 45 | height: 100vh; 46 | top: 0; 47 | left: 0; 48 | background-image: url('/img/home_bg_2021.jpg'); 49 | background-repeat: no-repeat; 50 | background-size: cover; 51 | background-position: center; 52 | z-index: -1; 53 | filter: blur(10px); 54 | opacity: 1; 55 | transform: scale(1.5); 56 | transition: all 0.5s; 57 | 58 | &[data-route='/'] { 59 | filter: blur(0px); 60 | opacity: 0.4; 61 | transform: scale(1); 62 | } 63 | ` 64 | 65 | export default GlobalStyle 66 | -------------------------------------------------------------------------------- /src/styles/global/nprogress.css: -------------------------------------------------------------------------------- 1 | /* Make clicks pass-through */ 2 | #nprogress { 3 | pointer-events: none; 4 | } 5 | 6 | #nprogress .bar { 7 | background: #dd555c; 8 | 9 | position: fixed; 10 | z-index: 1031; 11 | top: 0; 12 | left: 0; 13 | 14 | width: 100%; 15 | height: 5px; 16 | } 17 | 18 | /* Fancy blur effect */ 19 | #nprogress .peg { 20 | display: block; 21 | position: absolute; 22 | right: 0px; 23 | width: 100px; 24 | height: 100%; 25 | box-shadow: 0 0 10px #dd555c, 0 0 5px #dd555c; 26 | opacity: 1; 27 | 28 | -webkit-transform: rotate(3deg) translate(0px, -4px); 29 | -ms-transform: rotate(3deg) translate(0px, -4px); 30 | transform: rotate(3deg) translate(0px, -4px); 31 | } 32 | 33 | /* Remove these to get rid of the spinner */ 34 | #nprogress .spinner { 35 | display: block; 36 | position: fixed; 37 | z-index: 1031; 38 | top: 15px; 39 | right: 15px; 40 | } 41 | 42 | #nprogress .spinner-icon { 43 | width: 18px; 44 | height: 18px; 45 | box-sizing: border-box; 46 | 47 | border: solid 2px transparent; 48 | border-top-color: #29d; 49 | border-left-color: #29d; 50 | border-radius: 50%; 51 | 52 | -webkit-animation: nprogress-spinner 400ms linear infinite; 53 | animation: nprogress-spinner 400ms linear infinite; 54 | } 55 | 56 | .nprogress-custom-parent { 57 | overflow: hidden; 58 | position: relative; 59 | } 60 | 61 | .nprogress-custom-parent #nprogress .spinner, 62 | .nprogress-custom-parent #nprogress .bar { 63 | position: absolute; 64 | } 65 | 66 | @-webkit-keyframes nprogress-spinner { 67 | 0% { 68 | -webkit-transform: rotate(0deg); 69 | } 70 | 100% { 71 | -webkit-transform: rotate(360deg); 72 | } 73 | } 74 | @keyframes nprogress-spinner { 75 | 0% { 76 | transform: rotate(0deg); 77 | } 78 | 100% { 79 | transform: rotate(360deg); 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /src/styles/pages/agents.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | export const Container = styled.div` 4 | background-color: rgba(0, 0, 0, 0.7); 5 | width: 100%; 6 | height: 100%; 7 | position: relative; 8 | ` 9 | 10 | export const ReturnBtContainer = styled.div` 11 | position: absolute; 12 | left: 35px; 13 | top: 35px; 14 | ` 15 | 16 | export const Content = styled.div` 17 | display: flex; 18 | justify-content: center; 19 | align-items: flex-start; 20 | width: calc(100vw - 150px); 21 | height: calc(100vh - 150px); 22 | position: absolute; 23 | bottom: 0; 24 | left: 30px; 25 | left: 50%; 26 | right: 50%; 27 | transform: translateX(-50%); 28 | 29 | > div { 30 | display: flex; 31 | } 32 | ` 33 | -------------------------------------------------------------------------------- /src/styles/pages/career.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | export const Container = styled.div` 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: flex-start; 7 | align-items: center; 8 | background-color: rgba(0, 0, 0, 0.7); 9 | width: 100%; 10 | height: 100%; 11 | position: relative; 12 | ` 13 | 14 | export const ReturnBtContainer = styled.div` 15 | position: absolute; 16 | left: 35px; 17 | top: 35px; 18 | ` 19 | 20 | export const Content = styled.div` 21 | display: flex; 22 | justify-content: center; 23 | align-items: center; 24 | flex-direction: column; 25 | box-sizing: border-box; 26 | width: 100%; 27 | max-width: 1250px; 28 | ` 29 | -------------------------------------------------------------------------------- /src/styles/pages/colection.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | export const Container = styled.div` 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: flex-start; 7 | align-items: center; 8 | background-color: rgba(0, 0, 0, 0.7); 9 | width: 100%; 10 | height: 100%; 11 | position: relative; 12 | ` 13 | 14 | export const ReturnBtContainer = styled.div` 15 | position: absolute; 16 | left: 35px; 17 | top: 35px; 18 | ` 19 | 20 | export const Content = styled.div` 21 | display: flex; 22 | justify-content: space-between; 23 | align-items: center; 24 | flex-direction: row; 25 | box-sizing: border-box; 26 | width: 100%; 27 | max-width: 1650px; 28 | margin-top: 100px; 29 | ` 30 | -------------------------------------------------------------------------------- /src/styles/pages/home.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | export const Container = styled.main` 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | width: 100%; 8 | height: 100%; 9 | ` 10 | -------------------------------------------------------------------------------- /src/styles/pages/play.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | export const Container = styled.div` 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: flex-start; 7 | align-items: center; 8 | background-color: rgba(0, 0, 0, 0.7); 9 | width: 100%; 10 | height: 100%; 11 | position: relative; 12 | ` 13 | 14 | export const ReturnBtContainer = styled.div` 15 | position: absolute; 16 | left: 35px; 17 | top: 35px; 18 | ` 19 | 20 | export const Content = styled.div` 21 | display: flex; 22 | justify-content: center; 23 | align-items: center; 24 | box-sizing: border-box; 25 | width: 100%; 26 | max-width: 1380px; 27 | ` 28 | 29 | export const ModalPlayers = styled.div`` 30 | 31 | export const PlayersContainer = styled.div` 32 | display: flex; 33 | box-sizing: border-box; 34 | flex-direction: column; 35 | width: 510px; 36 | padding: 20px 50px; 37 | background-color: rgba(25, 25, 25, 0.9); 38 | ` 39 | export const PlayersFilter = styled.div`` 40 | 41 | export const PlayersList = styled.div` 42 | ul { 43 | list-style: none; 44 | width: 100%; 45 | height: 100%; 46 | max-height: 510px; 47 | overflow-y: auto; 48 | margin: 30px 0px; 49 | padding-right: 20px; 50 | 51 | /* width */ 52 | ::-webkit-scrollbar { 53 | width: 3px; 54 | } 55 | 56 | /* Track */ 57 | ::-webkit-scrollbar-track { 58 | background-color: #000; 59 | } 60 | 61 | /* Handle */ 62 | ::-webkit-scrollbar-thumb { 63 | background-color: #ccc; 64 | border-radius: 3px; 65 | } 66 | 67 | /* Handle on hover */ 68 | ::-webkit-scrollbar-thumb:hover { 69 | background: #dd555c; 70 | } 71 | } 72 | li { 73 | display: flex; 74 | justify-content: flex-start; 75 | box-sizing: border-box; 76 | align-items: center; 77 | width: 100%; 78 | background-color: rgba(200, 200, 200, 0.1); 79 | padding: 15px; 80 | margin: 10px 0px; 81 | } 82 | span { 83 | font-size: 20px; 84 | color: #fff; 85 | margin-left: 20px; 86 | } 87 | ` 88 | 89 | export const AddFriendButton = styled.div` 90 | cursor: pointer; 91 | margin-left: auto; 92 | ` 93 | 94 | export const CloseModal = styled.div` 95 | cursor: pointer; 96 | display: flex; 97 | margin-left: auto; 98 | justify-content: center; 99 | align-items: center; 100 | box-sizing: border-box; 101 | background-color: rgba(25, 25, 25, 0.9); 102 | border: 2px solid transparent; 103 | width: 50px; 104 | height: 50px; 105 | transition: all 0.5s; 106 | 107 | svg { 108 | transition: all 0.5s; 109 | } 110 | 111 | &:hover { 112 | border-color: #dd555c; 113 | background-color: rgba(25, 25, 25, 0.5); 114 | svg { 115 | transform: scale(-0.5); 116 | } 117 | } 118 | ` 119 | 120 | export const RemovePlayer = styled.div` 121 | cursor: pointer; 122 | display: flex; 123 | justify-content: center; 124 | align-items: center; 125 | width: 40px; 126 | height: 40px; 127 | border-radius: 50%; 128 | background-color: rgba(221, 85, 92, 1); 129 | color: #fff; 130 | position: absolute; 131 | top: -10px; 132 | right: -10px; 133 | transition: all 0.3s; 134 | 135 | &:before { 136 | content: 'REMOVE'; 137 | padding: 5px; 138 | background-color: rgba(221, 85, 92, 1); 139 | border-radius: 3px; 140 | position: absolute; 141 | left: -120px; 142 | opacity: 0; 143 | transition: all 0.3s; 144 | } 145 | 146 | &:hover { 147 | transform: scale(1.2); 148 | &:before { 149 | left: -65px; 150 | opacity: 1; 151 | } 152 | } 153 | ` 154 | export const PlayButtonsContainer = styled.div` 155 | display: flex; 156 | justify-content: center; 157 | align-items: center; 158 | width: auto; 159 | position: relative; 160 | &:before { 161 | content: ''; 162 | width: 100%; 163 | height: 2px; 164 | background-color: #767a7e; 165 | position: absolute; 166 | } 167 | 168 | .PlayMainBt { 169 | width: 240px; 170 | height: 40px; 171 | svg { 172 | fill: #d7d9e8; 173 | margin-left: 10px; 174 | } 175 | } 176 | 177 | .PlayStartBt { 178 | font-size: 23px; 179 | color: #fff; 180 | width: 290px; 181 | height: 70px; 182 | margin: 0px 40px; 183 | background-color: #38776d; 184 | 185 | > div { 186 | background-color: #80c4b9; 187 | } 188 | 189 | &:hover { 190 | background-color: #80c4b9; 191 | > div { 192 | background-color: #38776d; 193 | } 194 | svg { 195 | fill: #80c4b9; 196 | } 197 | } 198 | 199 | span { 200 | position: absolute; 201 | z-index: 1; 202 | } 203 | 204 | svg { 205 | fill: #38776d; 206 | position: absolute; 207 | width: 60px; 208 | height: 60px; 209 | opacity: 0.2; 210 | } 211 | } 212 | 213 | &[data-active='false'] { 214 | .PlayStartBt { 215 | cursor: not-allowed; 216 | margin: 20px 10px; 217 | background-color: rgba(221, 85, 92, 0.9); 218 | & > div:last-of-type { 219 | background-color: rgba(180, 45, 72, 1); 220 | border-color: rgba(225, 105, 102, 0.9); 221 | } 222 | } 223 | } 224 | ` 225 | -------------------------------------------------------------------------------- /src/styles/styled.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint @typescript-eslint/no-empty-interface: "off" */ 2 | import 'styled-components' 3 | import theme from './theme' 4 | 5 | export type Theme = typeof theme 6 | 7 | declare module 'styled-components' { 8 | export interface DefaultTheme extends Theme {} 9 | } 10 | -------------------------------------------------------------------------------- /src/styles/theme.ts: -------------------------------------------------------------------------------- 1 | const theme = { 2 | colors: { 3 | text: '#FFF' 4 | } 5 | } 6 | 7 | export default theme 8 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "strict": false, 12 | "forceConsistentCasingInFileNames": true, 13 | "noEmit": true, 14 | "esModuleInterop": true, 15 | "module": "esnext", 16 | "moduleResolution": "node", 17 | "resolveJsonModule": true, 18 | "isolatedModules": true, 19 | "jsx": "preserve", 20 | "baseUrl": "./", 21 | "paths": { 22 | "@/fonts/*": ["./public/fonts/*"], 23 | "@/svg/*": ["./public/svg/*"], 24 | "@/img/*": ["./public/img/*"], 25 | "@/videos/*": ["./public/videos/*"], 26 | "@/context/*": ["./src/providers/*"], 27 | "@/atoms/*": ["./src/components/atoms/*"], 28 | "@/molecules/*": ["./src/components/molecules/*"], 29 | "@/organisms/*": ["./src/components/organisms/*"], 30 | "@/hooks/*": ["./src/hooks/*"], 31 | "@/pages/*": ["./src/pages/*"], 32 | "@/globalStyles/*": ["./src/styles/*"], 33 | "@/pageStyles/*": ["./src/styles/pages/*"], 34 | } 35 | }, 36 | "include": [ 37 | "next-env.d.ts", 38 | "**/*.ts", 39 | "**/*.tsx" 40 | ], 41 | "exclude": [ 42 | "node_modules" 43 | ], 44 | } 45 | --------------------------------------------------------------------------------