├── app
    ├── components
    │   ├── agent
    │   │   ├── agent.module.css
    │   │   └── Agent.jsx
    │   ├── compBtns
    │   │   ├── CompBtns.jsx
    │   │   └── compBtns.module.css
    │   ├── imageLoading
    │   │   ├── imageLoading.module.css
    │   │   └── ImageLoading.jsx
    │   ├── header
    │   │   ├── header.module.css
    │   │   └── Header.jsx
    │   ├── popUp
    │   │   ├── PopUp.jsx
    │   │   └── pop.up.module.css
    │   ├── footer
    │   │   ├── footer.module.css
    │   │   └── Footer.jsx
    │   └── nameEachAgent
    │   │   ├── nameEachAgent.module.css
    │   │   └── Name.jsx
    ├── eachAgent
    │   └── [name]
    │   │   ├── name.module.css
    │   │   └── page.jsx
    ├── teste
    │   └── page.jsx
    ├── pageTest
    │   └── page.jsx
    ├── rotaTeste
    │   └── page.jsx
    ├── globals.css
    ├── layout.jsx
    ├── page.module.css
    └── page.jsx
├── diagramaaaaa.png
├── diagramansei.png
├── diagramslaa.png
├── public
    ├── over.png
    ├── paris-map.jpg
    ├── background-mapa.jpg
    ├── overwatchlogo.png
    ├── mapa-paris-overwatch.jpg
    ├── background-mapa-overwatch.jpeg
    └── steamuserimages-a.akamaihd.gif
├── diagramateste.png
├── diagramaOverWatch.png
├── diagramadesisto.png
├── jsconfig.json
├── next.config.js
├── models
    ├── Agents.js
    └── listAgente.js
├── package.json
├── .gitignore
├── data
    └── overwatchClass.js
├── README.md
└── diagrama.drawio


/app/components/agent/agent.module.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/app/eachAgent/[name]/name.module.css:
--------------------------------------------------------------------------------
1 | .iconsRoles {
2 |     width: 30px;
3 | }


--------------------------------------------------------------------------------
/diagramaaaaa.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thiago-rferreira/api-overwatch/HEAD/diagramaaaaa.png


--------------------------------------------------------------------------------
/diagramansei.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thiago-rferreira/api-overwatch/HEAD/diagramansei.png


--------------------------------------------------------------------------------
/diagramslaa.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thiago-rferreira/api-overwatch/HEAD/diagramslaa.png


--------------------------------------------------------------------------------
/public/over.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thiago-rferreira/api-overwatch/HEAD/public/over.png


--------------------------------------------------------------------------------
/diagramateste.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thiago-rferreira/api-overwatch/HEAD/diagramateste.png


--------------------------------------------------------------------------------
/diagramaOverWatch.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thiago-rferreira/api-overwatch/HEAD/diagramaOverWatch.png


--------------------------------------------------------------------------------
/diagramadesisto.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thiago-rferreira/api-overwatch/HEAD/diagramadesisto.png


--------------------------------------------------------------------------------
/public/paris-map.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thiago-rferreira/api-overwatch/HEAD/public/paris-map.jpg


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "paths": {
4 |       "@/*": ["./*"]
5 |     }
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/public/background-mapa.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thiago-rferreira/api-overwatch/HEAD/public/background-mapa.jpg


--------------------------------------------------------------------------------
/public/overwatchlogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thiago-rferreira/api-overwatch/HEAD/public/overwatchlogo.png


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {}
3 | 
4 | module.exports = nextConfig
5 | 


--------------------------------------------------------------------------------
/public/mapa-paris-overwatch.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thiago-rferreira/api-overwatch/HEAD/public/mapa-paris-overwatch.jpg


--------------------------------------------------------------------------------
/public/background-mapa-overwatch.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thiago-rferreira/api-overwatch/HEAD/public/background-mapa-overwatch.jpeg


--------------------------------------------------------------------------------
/public/steamuserimages-a.akamaihd.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thiago-rferreira/api-overwatch/HEAD/public/steamuserimages-a.akamaihd.gif


--------------------------------------------------------------------------------
/app/teste/page.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Footer from '../components/footer/Footer'
 3 | function page() {
 4 |   return (
 5 |     <>
 6 |       <Footer />
 7 |       
 8 |     </>
 9 |   )
10 | }
11 | 
12 | export default page


--------------------------------------------------------------------------------
/app/pageTest/page.jsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import Form from "../components/register/register";
 3 | function Home() {
 4 |     return (
 5 |         <>
 6 |             <p>home</p>
 7 |             <Form/>
 8 |         </> 
 9 |     )
10 | }
11 | export default Home;


--------------------------------------------------------------------------------
/app/rotaTeste/page.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Header from '../components/header/Header'
 3 | import Footer from '../components/footer/Footer'
 4 | 
 5 | function page() {
 6 |   return (
 7 |     <div>
 8 |         <Header />
 9 |         <Footer/>
10 |     </div>
11 |   )
12 | }
13 | 
14 | export default page


--------------------------------------------------------------------------------
/app/components/compBtns/CompBtns.jsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import styles from './compBtns.module.css'
 4 | 
 5 | const CompButton = ({ text, fn }) => {
 6 |   return (
 7 |     <button
 8 |       className={styles.btnRE}
 9 |       onClick={fn}>
10 |       {text}
11 |     </button>
12 |   )
13 | }
14 | 
15 | export default CompButton


--------------------------------------------------------------------------------
/models/Agents.js:
--------------------------------------------------------------------------------
 1 | class Agent {
 2 |     constructor(name, portrait, role) {
 3 |         this.name = name;
 4 |         this.portrait = portrait;
 5 |         this.role = role;
 6 |         this.id = this.generateId()
 7 |     }
 8 | 
 9 |     generateId = () => {
10 |         return Math.floor(Math.random() * 10000);
11 |     }
12 | }
13 | export default Agent;


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,300;1,400&display=swap');
 2 | /* Reset CSS */
 3 | 
 4 | * {
 5 |     font-family: 'Poppins', sans-serif;
 6 |     margin: 0;
 7 |     padding: 0;
 8 |     box-sizing: border-box;
 9 |     font-weight: 400 lighter;
10 |     text-decoration: none;
11 | }


--------------------------------------------------------------------------------
/app/components/imageLoading/imageLoading.module.css:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | #containerImgLoading {
 4 |     background-color: #010000;
 5 |     text-align: center;
 6 |     font-family: 'Ubuntu Mono', monospace;
 7 |     font-size: 20px;
 8 |     height: 100vh;
 9 | }
10 | 
11 | #image {
12 |     padding: 1rem;
13 |     width: 400px;
14 |     margin: 0 auto;
15 |     margin-top: 17%;
16 | }
17 | 


--------------------------------------------------------------------------------
/app/components/header/header.module.css:
--------------------------------------------------------------------------------
 1 | .principal{
 2 |     background-color: #202020;
 3 |     display: flex;
 4 |     flex-direction: column-reverse;
 5 |     align-content: center;
 6 |     justify-content: center;
 7 |     align-items: center;
 8 | }
 9 | .logo{
10 |     width: 9rem;
11 |     margin-top: -20px;
12 | }
13 | .imagem{
14 |     margin-top: 15px;
15 |     width: 5rem;
16 | }


--------------------------------------------------------------------------------
/app/components/imageLoading/ImageLoading.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styles from './imageLoading.module.css'
 3 | 
 4 | function ImageLoading() {
 5 |     return (
 6 |         <div id={styles.containerImgLoading}>
 7 |                 <img id={styles.image} src='/steamuserimages-a.akamaihd.gif' alt="Loading Image" />
 8 |         </div>
 9 |     )
10 | }
11 | 
12 | export default ImageLoading


--------------------------------------------------------------------------------
/app/components/agent/Agent.jsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | import styles from './agent.module.css';
 3 | 
 4 | const Agent = ({ key, name, portrait, role}) => {
 5 | 
 6 |     return (
 7 |         <div key={key} className={styles.containerAgent}>
 8 |             <img src={portrait} alt={name} width={256} height={256}/>
 9 |             <p><strong>{name}</strong></p>
10 |             <p>{role}</p>
11 |         </div>
12 |     )
13 | }
14 | 
15 | export default Agent;


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "over-project",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "axios": "^1.6.0",
13 |     "next": "13.5.5",
14 |     "react": "^18",
15 |     "react-dom": "^18",
16 |     "react-icons": "^4.11.0",
17 |     "react-parallax": "^3.5.1"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/app/components/popUp/PopUp.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import styles from './pop.up.module.css';
 3 | 
 4 | const Popup = ({icon1, message, icon2, type}) => { 
 5 |     var color = (type === 'success') ? styles.success : styles.error;
 6 |     var mainDiv = styles.mainDiv + ' ' + color;
 7 |   return (
 8 |     <div className={mainDiv}>
 9 |       <p>{icon1}<span id={styles.message}>{message}</span>{icon2}</p>
10 |     </div>
11 |   );
12 | };
13 | 
14 | export default Popup;
15 | 


--------------------------------------------------------------------------------
/.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 | 
30 | # vercel
31 | .vercel
32 | 
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 | 


--------------------------------------------------------------------------------
/app/components/header/Header.jsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import style from './header.module.css'
 3 | 
 4 | const Header = () => {
 5 |     return (
 6 |         <div className={style.principal}>
 7 |               <div>
 8 |                 
 9 |               <a href="../"><img src='/overwatchlogo.png' className={style.logo}/></a>
10 |             </div>
11 |             <div >
12 |             <a href="../"><img src='/over.png' className={style.imagem}></img></a>
13 |             </div>
14 |         </div>
15 | 
16 |     )
17 | }
18 | 
19 | export default Header
20 | 


--------------------------------------------------------------------------------
/app/layout.jsx:
--------------------------------------------------------------------------------
 1 | import { Inter } from 'next/font/google'
 2 | import './globals.css'
 3 | 
 4 | const inter = Inter({ subsets: ['latin'] })
 5 | 
 6 | export const metadata = {
 7 |   title: 'Overwatch API',
 8 |   description: 'Generated by create next app',
 9 | }
10 | 
11 | export default function RootLayout({ children }) {
12 |   return (
13 |     <html lang="pt-br">
14 |       <head>
15 |         <link rel="icon" href="over.png" type="image/png" />
16 |       </head>
17 |       <body className={inter.className}>{children}</body>
18 |     </html>
19 |   )
20 | }
21 | 


--------------------------------------------------------------------------------
/app/components/compBtns/compBtns.module.css:
--------------------------------------------------------------------------------
 1 | .btnRE {
 2 |     border-radius: 3px;
 3 |     border: none;
 4 |     padding: 0.7rem;
 5 |     margin: 0.4rem;
 6 |     background-color: #313037;
 7 |     color: white;
 8 |     font-weight: 100;
 9 |     transition: 0.3s;
10 |     margin-top: 1rem;
11 | }
12 | 
13 | .btnRE:hover {
14 |     border-radius: 3px;
15 |     border: none;
16 |     padding: 0.7rem;
17 |     margin: 0.4rem;
18 |     background-color: #313037;
19 |     color: #f99914;
20 |     cursor: pointer;
21 |     font-weight: 100;
22 |     transition: 0.3s;
23 | }


--------------------------------------------------------------------------------
/app/components/footer/footer.module.css:
--------------------------------------------------------------------------------
 1 | .principal {
 2 |     background-color: #202020;
 3 |     color: #fff;
 4 |     padding: 10px;
 5 |     text-align: center;
 6 |     font-size: 12px;
 7 |     font-weight: bold;
 8 |     min-height: 150px;
 9 |     max-height: 170px;
10 |     position: relative;
11 |     bottom: 0;
12 |     width: 100%;
13 | }
14 | .img {
15 |     width: 160px;
16 |     height: 110px;
17 |     margin: 0 auto;
18 |     display: block;
19 | }
20 | .text{
21 |     color: #c0c0c0;
22 | }
23 | 
24 | #adjustFooter {
25 |     background-color: #202020;
26 | }


--------------------------------------------------------------------------------
/app/components/footer/Footer.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import style from "./footer.module.css";
 3 | const Footer = () => {
 4 |     return (
 5 |         <div id={style.adjustFooter}>
 6 |             <div className={style.principal}>
 7 |                 <img src='/overwatchlogo.png' className={style.img}></img>
 8 |                 <p className={style.text}>© 2021 Blizzard Entertainment, Inc. Todos os direitos reservados. Todas as marcas comerciais aqui mencionadas são de propriedade de seus respectivos donos.</p>
 9 |             </div>
10 |         </div>
11 |     );
12 | };
13 | export default Footer;


--------------------------------------------------------------------------------
/models/listAgente.js:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | class ListAgente {
 4 |     constructor() {
 5 |         this.listAgents = []
 6 |     }
 7 |     addAgente(agent) {
 8 |         this.listAgents.push(agent)
 9 |         console.log('lista de agentes' + this.listAgents);
10 |     }
11 | 
12 |     getList() {
13 |         return this.listAgents
14 |     }
15 | 
16 |     removeAgente(agente) {
17 |         this.listAgents = this.listAgents.filter(item => item.id !== agente.id)
18 |     }
19 | 
20 |     getAgentPorId(id) {
21 |         console.log('id', id);
22 |         const agent = this.listAgents.find((agent) => agent.id == id);
23 |         console.log('editar Class', agent);
24 | 
25 |         return agent;
26 |     }
27 | 
28 |     updateAgent(id, name, role, portrait) {
29 |         const agent = this.getAgentPorId(id);
30 | 
31 |         if(agent) {
32 |             agent.name = name;
33 |             agent.role = role;
34 |             agent.portrait = portrait;
35 |         }
36 | 
37 |         return agent;
38 |     }
39 | }
40 | export default ListAgente;


--------------------------------------------------------------------------------
/app/components/popUp/pop.up.module.css:
--------------------------------------------------------------------------------
 1 | @keyframes falling {
 2 |     0% {
 3 |       transform: translateY(-100%);
 4 |       opacity: 0;
 5 |     }
 6 |     100% {
 7 |       transform: translateY(0);
 8 |       opacity: 1;
 9 |     }
10 |   }
11 | 
12 | .mainDiv {
13 |     position: fixed;
14 |     left: 36%;
15 |     margin-bottom: 2rem;
16 |     bottom: 1;
17 |     transform: translate(-50%, -50%);
18 |     padding: 16px;
19 |     -webkit-box-shadow: 9px 6px 27px -4px rgba(0, 0, 2, 1);
20 |     -moz-box-shadow: 9px 6px 27px -4px rgba(0, 0, 2, 1);
21 |     box-shadow: 9px 6px 27px -4px rgba(0, 0, 2, 1);
22 |     text-align: center;
23 |     width: 30%;
24 |     border-radius: 10px;
25 |     height: 55px;
26 |     animation-name: falling;
27 |     animation-duration: 1s;
28 |     animation-timing-function: ease-in-out;
29 |     animation-fill-mode: both;
30 | }
31 | 
32 | .error {
33 |     background-color: #202020e2;
34 |     color: #f99914;
35 |     font-weight: 700;
36 |     border: 1px solid #f99914;
37 | }
38 | 
39 | .success{
40 |     background-color: rgb(26, 213, 45);
41 |     color: black !important;
42 | }
43 | 
44 | #message {
45 |     margin-left: 0.5rem;
46 |     margin-right: 0.5rem;
47 | }


--------------------------------------------------------------------------------
/data/overwatchClass.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios';
 2 | 
 3 | const URL_API_Heroes = 'https://overfast-api.tekrop.fr/heroes';
 4 | const URL_API_Roles = 'https://overfast-api.tekrop.fr/roles';
 5 | const URL_API_GameModes = 'https://overfast-api.tekrop.fr/gamemodes';
 6 | 
 7 | const overwatch = async () => {
 8 |     try {
 9 |         const result = await axios.get(URL_API_Heroes + '?locale=pt-br');
10 |         return result.data;
11 |     } catch (error) {
12 |         throw error;
13 |     }
14 | }
15 | 
16 | export const roles = async () => {
17 |     try {
18 |         const result = await axios.get(URL_API_Roles + '?locale=pt-br');
19 |         return result.data;
20 |     } catch (error) {
21 |         throw error;
22 |     }
23 | }
24 | 
25 | export const gamemodes = async () => {
26 |     try {
27 |         const result = await axios.get(URL_API_GameModes + '?locale=pt-br');
28 |         return result.data;
29 |     } catch (error) {
30 |         throw error;
31 |     }
32 | }
33 | 
34 | export const agent = async (nome) => {
35 |     try {
36 |         const result = await axios.get(URL_API_Heroes + '/' + nome + '?locale=pt-br');
37 |         console.log(result.data)
38 |         return result.data;
39 |     } catch (error) {
40 |         throw error;
41 |     }
42 | }
43 | 
44 | export default overwatch;


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | # or
14 | bun dev
15 | ```
16 | 
17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18 | 
19 | You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
20 | 
21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
22 | 
23 | ## Learn More
24 | 
25 | To learn more about Next.js, take a look at the following resources:
26 | 
27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29 | 
30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
31 | 
32 | ## Deploy on Vercel
33 | 
34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35 | 
36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
37 | 


--------------------------------------------------------------------------------
/app/eachAgent/[name]/page.jsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | import { agent } from '@/data/overwatchClass';
 3 | import { useEffect, useState } from 'react';
 4 | import styles from './name.module.css';
 5 | import Name from '@/app/components/nameEachAgent/Name';
 6 | import ImageLoading from '../../components/imageLoading/ImageLoading'
 7 | import Header from '@/app/components/header/Header';
 8 | import Footer from '@/app/components/footer/Footer';
 9 | 
10 | export default function Home({ params }) {
11 | 
12 |     const [apiData, setApiData] = useState(null);
13 | 
14 |     useEffect(() => {
15 |         const overwatchFletch = async () => {
16 |             const datas = await agent(params.name);
17 |             setApiData(datas);
18 |         };
19 |         overwatchFletch();
20 |     }, [])
21 | 
22 |     return (
23 |         <div className={styles.divMain}>
24 |             <div>
25 |                 {
26 |                     apiData ? (
27 |                         <div>
28 |                             <Header />
29 |                             <Name key={apiData.id}
30 |                                 name={apiData.name}
31 |                                 icon={apiData.role === 'support' ? <div className={styles.containerIcon}><div className={styles.styleIcons}><img className={styles.iconsRoles} src='https://blz-contentstack-images.akamaized.net/v3/assets/blt9c12f249ac15c7ec/blt66cec9a29cd34e3d/62ea8957c87999116c02c674/Support.svg' /></div></div>
32 |                                 : apiData.role === 'tank' ? <div className={styles.containerIcon}><div className={styles.styleIcons}><img className={styles.iconsRoles} src='https://blz-contentstack-images.akamaized.net/v3/assets/blt9c12f249ac15c7ec/blt0f8b4fa502f0ea53/62ea8957ed429710b3d9b0b0/Tank.svg' /></div></div>
33 |                                     : <div className={styles.containerIcon}><div className={styles.styleIcons}><img className={styles.iconsRoles} src='https://blz-contentstack-images.akamaized.net/v3/assets/blt9c12f249ac15c7ec/bltc1d840ba007f88a8/62ea89572fdd1011027e605d/Damage.svg' /></div></div>}
34 |                                 shields={apiData.hitpoints.shields}
35 |                                 health={apiData.hitpoints.health}
36 |                                 armor={apiData.hitpoints.armor}
37 |                                 total={apiData.hitpoints.total}
38 |                                 description={apiData.description}
39 |                                 abilities={apiData.abilities}
40 |                                 story={apiData.story}
41 |                             />
42 |                             <Footer />
43 |                         </div>
44 | 
45 |                     ) : (
46 |                         <ImageLoading/>
47 |                     )
48 |                 }
49 |             </div>
50 | 
51 |         </div>
52 |     )
53 | }


--------------------------------------------------------------------------------
/app/components/nameEachAgent/nameEachAgent.module.css:
--------------------------------------------------------------------------------
  1 | .divIconRole {
  2 |     margin-top: 0.3rem;
  3 | }
  4 | 
  5 | .textTitle {
  6 |     margin-left: 0.5rem;
  7 | }
  8 | 
  9 | .text {
 10 |     color: white;
 11 | }
 12 | 
 13 | .iconRole, .textTitle {
 14 |     color: white;
 15 |     padding: 0.2rem;
 16 | }
 17 | 
 18 | .textTitle {
 19 |     display: flex;
 20 |     align-items: center;
 21 |     justify-content: center;
 22 | }
 23 | 
 24 | .textContent {
 25 |     color: white;
 26 |     text-align: justify;
 27 | }
 28 | 
 29 | .title {
 30 |     color: #f99b14;
 31 |     font-size: 2rem;
 32 |     margin-bottom: 0.5rem;
 33 | }
 34 | 
 35 | .titleStory {
 36 |     color: #f99b14;
 37 |     font-size: 1.5rem;
 38 |     margin-bottom: 0.5rem;
 39 |     text-align: center;
 40 | }
 41 | 
 42 | .containerEachAgent2 {
 43 |     display: flex;
 44 |     flex-direction: column;
 45 |     align-items: center;
 46 |     justify-content: center;
 47 |     margin: 0%;
 48 |     padding: 0%;
 49 |     box-sizing: border-box;
 50 |     background-attachment: fixed;
 51 |     background-position: right;
 52 |     background-repeat: no-repeat;
 53 | }
 54 | 
 55 | .containerEachAgent {
 56 |     margin: 2rem;
 57 |     width: 90%;
 58 | }
 59 | 
 60 | .containerCard {
 61 |     background-color: #202020d4;
 62 |     border: 20px ridge #f99b14;
 63 |     border-radius: 5px;
 64 |     text-align: center;
 65 |     padding: 0.8rem;
 66 |     margin: 2.5rem;
 67 |     gap: 2rem;
 68 | }
 69 | 
 70 | .containerIcon2 {
 71 |     display: flex;
 72 |     align-items: center;
 73 |     justify-content: center;
 74 | }
 75 | 
 76 | .divHitpointsDescription {
 77 |     display: flex;
 78 |     flex-direction: column;
 79 |     align-items: center;
 80 |     justify-content: center;
 81 |     gap: 2rem;
 82 |     margin: 0.5rem;
 83 | }
 84 | 
 85 | .divHitpoints {
 86 |     display: flex;
 87 |     align-items: center;
 88 |     justify-content: center;
 89 |     gap: 2rem;
 90 |     margin: 0.2rem;
 91 | }
 92 | 
 93 | .divDescription {
 94 |     display: flex;
 95 |     align-items: center;
 96 |     justify-content: center;
 97 | }
 98 | 
 99 | #pName {
100 |     text-decoration: none;
101 |     font-size: 2rem;
102 |     margin-bottom: 0.5rem;
103 | }
104 | 
105 | .divIcons {
106 |     display: flex;
107 |     margin: 0;
108 |     padding: 0;
109 | }
110 | 
111 | .divGun {
112 |     margin: 0;
113 |     padding: 0;
114 | }
115 | 
116 | .divGunDescription {
117 |     display: flex;
118 | }
119 | 
120 | /* .divGunDescription::after {
121 |     display: flex;
122 |     flex-direction: column;
123 |     align-items: center;
124 |     justify-content: center;
125 |     position: absolute;
126 |     content: "";
127 |     width: 80%;
128 |     height: 1px;
129 |     border-radius: 3px;
130 |     background-color: #f99b14;
131 |     margin-top: 9.5rem;
132 | } */
133 | 
134 | .divGunDescription2 {
135 |     width: 70%;
136 |     background-color: rgba(0, 0, 0, 0.536);
137 |     border: 10px outset #f99b14;
138 |     border-radius: 3px;
139 |     text-align: center;
140 |     padding: 0.8rem;
141 |     margin: 1.5rem;
142 |     display: flex;
143 |     text-align: center;
144 |     align-items: center;
145 |     justify-content: center;
146 | }
147 | 
148 | .divContentPic {
149 |     display: flex;
150 |     align-items: center;
151 | }
152 | 
153 | .divContent {
154 |     width: 50%;
155 |     background-color: rgba(0, 0, 0, 0.536);
156 |     border: 6px double #f99b14;
157 |     border-radius: 3px;
158 |     text-align: center;
159 |     padding: 0.8rem;
160 |     margin: 1.5rem;
161 | }
162 | 
163 | .divPic {
164 |     display: flex;
165 |     flex-wrap: wrap;
166 |     align-items: center;
167 |     justify-content: center;
168 |     width: 50%;
169 |     height: 50vh;
170 |     border-radius: 5px;
171 |     display: flex;
172 |     align-items: center;
173 |     justify-content: center;
174 | }
175 | 
176 | .divPic2 {
177 |     width: 100%;
178 |     display: flex;
179 |     flex-direction: column;
180 |     align-items: center;
181 |     justify-content: center;
182 |     background-color: rgba(0, 0, 0, 0.536);
183 |     border: 2px outset #f99b14;
184 |     padding: 2rem;
185 |     border-radius: 3px;
186 | }
187 | 
188 | .divVideo {
189 |     margin: 0.5rem;
190 | }
191 | 
192 | .icons {
193 |     padding: 2rem;
194 | }
195 | 
196 | .containerIcon {
197 |     display: flex;
198 | }
199 | 
200 | .divSummary {
201 |     background-color: rgba(0, 0, 0, 0.536);
202 |     border: 6px double #f99b14;
203 |     border-radius: 3px;
204 |     padding: 1rem;
205 | }


--------------------------------------------------------------------------------
/app/page.module.css:
--------------------------------------------------------------------------------
  1 | .divBody {
  2 |     margin: 0%;
  3 |     padding: 0%;
  4 |     box-sizing: border-box;
  5 |     background-attachment: fixed;
  6 |     background-position: right;
  7 |     background-repeat: no-repeat;
  8 | }
  9 | 
 10 | .fade-in {
 11 |     opacity: 1;
 12 |     transition: opacity 1s ease-in-out;
 13 |   }
 14 |   
 15 |   .fade-out {
 16 |     opacity: 0;
 17 |   }
 18 | 
 19 | .smallCard {
 20 |     display: flex;
 21 |     justify-content: center;
 22 |     align-items: center;
 23 | }
 24 | 
 25 | .card1 {
 26 |     margin-top: 2rem;
 27 |     display: flex;
 28 |     flex-wrap: wrap;
 29 |     align-items: center;
 30 |     justify-content: center;
 31 |     background-color: #313037ab;
 32 |     width: 80%;
 33 |     border-radius: 5px;
 34 | }
 35 | 
 36 | .card2 {
 37 |     margin: 1.5rem;
 38 |     border-radius: 2px;
 39 |     text-align: center;
 40 |     background-color: whitesmoke;
 41 |     color: black;
 42 |     transition: 1s;
 43 |     border: 2px #f9991400 solid;
 44 | }
 45 | 
 46 | .card2:hover {
 47 |     margin: 1.5rem;
 48 |     border-radius: 2px;
 49 |     text-align: center;
 50 |     background-color: whitesmoke;
 51 |     color: black;
 52 |     cursor: pointer;
 53 |     transition: 1s;
 54 |     border: 2px #f99914 solid;
 55 | }
 56 | 
 57 | .containerIcon {
 58 |     margin-top: 6px;
 59 |     display: flex;
 60 |     align-items: center;
 61 |     justify-content: center;
 62 | }
 63 | 
 64 | .styleIconsSupport {
 65 |     background-color: #313037;
 66 |     border-radius: 100px;
 67 |     padding: 0.5rem;
 68 |     width: 50px;
 69 |     height: 50px;
 70 |     transition: 1s;
 71 | }
 72 | 
 73 | .styleIconsSupport:hover {
 74 |     background-color: green;
 75 |     border-radius: 100px;
 76 |     padding: 0.5rem;
 77 |     width: 50px;
 78 |     height: 50px;
 79 |     transition: 1s;
 80 |     cursor:none;
 81 | }
 82 | 
 83 | .styleIconsTank {
 84 |     background-color: #313037;
 85 |     border-radius: 100px;
 86 |     padding: 0.5rem;
 87 |     width: 50px;
 88 |     height: 50px;
 89 |     transition: 1s;
 90 | }
 91 | 
 92 | .styleIconsTank:hover {
 93 |     background-color: rgb(0, 149, 255);
 94 |     border-radius: 100px;
 95 |     padding: 0.5rem;
 96 |     width: 50px;
 97 |     height: 50px;
 98 |     transition: 1s;
 99 |     cursor:none;
100 | }
101 | 
102 | .styleIconsDamage {
103 |     background-color: #313037;
104 |     border-radius: 100px;
105 |     padding: 0.5rem;
106 |     width: 50px;
107 |     height: 50px;
108 |     transition: 1s;
109 | }
110 | 
111 | .styleIconsDamage:hover {
112 |     background-color: orangered;
113 |     border-radius: 100px;
114 |     padding: 0.5rem;
115 |     width: 50px;
116 |     height: 50px;
117 |     transition: 1s;
118 |     cursor:none;
119 | }
120 | 
121 | .iconsRoles {
122 |     width: 20px;
123 |     margin-top: 7px;
124 | }
125 | 
126 | .btns {
127 |     border-radius: 3px;
128 |     border: none;
129 |     padding: 0.5rem;
130 |     margin: 0.3rem;
131 |     background-color: #313037;
132 |     color: white;
133 |     font-weight: 600;
134 |     border: 1px  solid #202020;
135 |     transition: 0.5s;
136 | }
137 | 
138 | .btns:hover {
139 |     border-radius: 3px;
140 |     border: none;
141 |     padding: 0.5rem;
142 |     margin: 0.3rem;
143 |     background-color: #313037;
144 |     color: #f99914;
145 |     cursor: grab;
146 |     font-weight: 600;
147 |     transition: 0.5s;
148 |     border: 1px  solid #f99914;
149 | }
150 | 
151 | #containerBtnTop {
152 |     display: flex;
153 |     align-items: center;
154 |     justify-content: center;
155 | }
156 | 
157 | .btnTop {
158 |     border-radius: 3px;
159 |     border: none;
160 |     padding: 1rem;
161 |     margin: 0.3rem;
162 |     background-color: #313037;
163 |     color: white;
164 |     font-weight: 600;
165 |     border: 1px  solid #20202000;
166 |     transition: 0.5s;   
167 | }
168 | 
169 | .btnTop:hover {
170 |     border-radius: 3px;
171 |     border: none;
172 |     padding: 1rem;
173 |     margin: 0.3rem;
174 |     background-color: #313037;
175 |     color: #f99914;
176 |     cursor: pointer;
177 |     transition: 0.5s;
178 |     border: 1px  solid #f99914;
179 | }
180 | 
181 | #formCreateAgent1 {
182 |     margin-top: 2rem;
183 |     display: flex;
184 |     flex-direction: column;
185 |     flex-wrap: wrap;
186 |     align-items: center;
187 |     justify-content: center;
188 | }
189 | 
190 | #formCreateAgent2 {
191 |     background-color: #202020;
192 |     width: 40%;
193 |     border-radius: 2px;
194 |     text-align: center;
195 | }
196 | 
197 | .inputs {
198 |     margin: 0.3rem;
199 |     outline: none;
200 |     color: white;
201 |     background-color: #313037;
202 |     border: 1px white solid;
203 |     padding: 0.4rem;
204 |     margin-bottom: 1.5rem;
205 |     border-radius: 8px;
206 | }
207 | 
208 | .titlesForm {
209 |     color: rgb(255, 255, 255);
210 |     background-color: #f99914;
211 |     margin-bottom: 0.3rem;
212 |     border-radius: 2px;
213 |     font-size: 30px;
214 | }
215 | 
216 | .divBtnAddClear {
217 |     display: flex;
218 |     align-items: center;
219 |     justify-content: center;
220 | }
221 | 


--------------------------------------------------------------------------------
/app/components/nameEachAgent/Name.jsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | import styles from './nameEachAgent.module.css';
  3 | import { useEffect, useState } from 'react';
  4 | 
  5 | const Name = ({ key, name, icon, shields, health, armor, total, description, abilities, story }) => {
  6 | 
  7 |     const [backgroundImage, setBackgroundImage] = useState('https://bnetcmsus-a.akamaihd.net/cms/gallery/W94XAGJVK4871649353625265.jpg');
  8 |     const images = [
  9 |         'https://bnetcmsus-a.akamaihd.net/cms/gallery/1BJ1QA72FCN61649353624113.jpg',
 10 |         'https://images6.alphacoders.com/553/553471.jpg',
 11 |         'https://www.pockettactics.com/wp-content/sites/pockettactics/2022/10/overwatch-2-maps-2.jpg',
 12 |         'https://assets-prd.ignimgs.com/2022/09/27/esperanca-portugal-003-1080-1664272798292.jpg'
 13 |     ];
 14 | 
 15 | 
 16 |     useEffect(() => {
 17 |         const intervalId = setInterval(() => {
 18 |             setBackgroundImage(images[Math.floor(Math.random() * images.length)]);
 19 |         }, 3000);
 20 | 
 21 |         return () => clearInterval(intervalId);
 22 |     }, []);
 23 |     return (
 24 |         <div key={key} className={styles.containerEachAgent2} style={{ backgroundImage: `url(${backgroundImage})` }}>
 25 |             <div className={styles.containerEachAgent}>
 26 | 
 27 |                 <div className={styles.containerCard}>
 28 |                     <div className={styles.containerIcon2}>
 29 |                         <div className={styles.containerIcon}>
 30 |                             <div className={styles.divIconRole}>
 31 |                                 <p className={styles.iconRole}>{icon}</p>
 32 |                             </div>
 33 |                             <div className={styles.divTextTitle}>
 34 |                                 <p className={styles.textTitle} id={styles.pName}>{name}</p>
 35 |                             </div>
 36 |                         </div>
 37 |                     </div>
 38 |                     <div className={styles.divPaiVideo}>
 39 |                         <div className={styles.divVideo}>
 40 |                             <video width="850" controls muted autoPlay loop>
 41 |                                 <source src={abilities[0].video.link.mp4} type="video/mp4" />
 42 |                             </video>
 43 |                         </div>
 44 |                     </div>
 45 | 
 46 | 
 47 |                     <div className={styles.divHitpointsDescription}>
 48 |                         <div className={styles.divHitpoints}>
 49 |                             <p className={styles.text}><strong>Escudo:</strong><br></br> {shields}</p>
 50 |                             <p className={styles.text}><strong>Vida:</strong><br></br> {health}</p>
 51 |                             <p className={styles.text}><strong>Armadura:</strong><br></br> {armor}</p>
 52 |                             <p className={styles.text}><strong>Total de vida:</strong><br></br> {total}</p>
 53 |                         </div>
 54 | 
 55 |                         <div className={styles.divIcons}>
 56 |                             <img className={styles.icons} src={abilities[1].icon} width={120} />
 57 |                             <img className={styles.icons} src={abilities[2].icon} width={120} />
 58 |                             <img className={styles.icons} src={abilities[3].icon} width={120} />
 59 |                         </div>
 60 | 
 61 | 
 62 |                         <div className={styles.divGunDescription2}>
 63 |                             <div className={styles.divGunDescription}>
 64 |                                 <div className={styles.divGun}>
 65 |                                     <img className={styles.icons} src={abilities[0].icon} width={250} />
 66 |                                 </div>
 67 | 
 68 |                                 <div className={styles.divDescription}>
 69 |                                     <div className={styles.divDescription2}>
 70 |                                         <p className={styles.text}><strong>{description}</strong></p>
 71 |                                     </div>
 72 |                                 </div>
 73 |                             </div>
 74 |                         </div>
 75 | 
 76 | 
 77 |                         <div className={styles.divStory}>
 78 |                             <div className={styles.divSummary}>
 79 |                                 <p className={styles.text}>{story.summary}</p>
 80 |                             </div>
 81 |                             {
 82 |                                 story.chapters.map((story) => (
 83 |                                     <div key={story.title}>
 84 |                                         <div className={styles.divContentPic}>
 85 |                                             <div className={styles.divContent}>
 86 |                                                 <p className={styles.textContent}>{story.content}</p>
 87 |                                             </div>
 88 |                                             <div className={styles.divPic}>
 89 |                                                 <div className={styles.divPic2}>
 90 |                                                     <p className={styles.titleStory}>{story.title}</p>
 91 |                                                     <img src={story.picture} width={350} />
 92 |                                                 </div>
 93 |                                             </div>
 94 | 
 95 |                                         </div>
 96 |                                     </div>
 97 |                                 ))
 98 |                             }
 99 |                         </div>
100 |                     </div>
101 |                 </div>
102 |             </div>
103 | 
104 |         </div>
105 |     )
106 | }
107 | 
108 | export default Name;


--------------------------------------------------------------------------------
/diagrama.drawio:
--------------------------------------------------------------------------------
 1 | <mxfile host="65bd71144e">
 2 |     <diagram id="vynT9HWdWMFqWBxSG6Y0" name="Página-1">
 3 |         <mxGraphModel dx="548" dy="350" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" background="#ffffff" math="0" shadow="0">
 4 |             <root>
 5 |                 <mxCell id="0"/>
 6 |                 <mxCell id="1" parent="0"/>
 7 |                 <mxCell id="2" value="" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
 8 |                     <mxGeometry x="20" y="30" width="290" height="350" as="geometry"/>
 9 |                 </mxCell>
10 |                 <mxCell id="3" value="" style="endArrow=none;html=1;exitX=0;exitY=0.094;exitDx=0;exitDy=0;exitPerimeter=0;" parent="1" source="2" edge="1">
11 |                     <mxGeometry width="50" height="50" relative="1" as="geometry">
12 |                         <mxPoint x="260" y="110" as="sourcePoint"/>
13 |                         <mxPoint x="310" y="63" as="targetPoint"/>
14 |                     </mxGeometry>
15 |                 </mxCell>
16 |                 <mxCell id="5" value="-nome:String;&lt;br&gt;-descricao:String&lt;br&gt;-armadura:String&lt;br&gt;-vida: Number&lt;br&gt;-escudo:Number&lt;br&gt;-especialidades:String&lt;br&gt;-habilidade1:String&lt;br&gt;-habilidade2:String&lt;br&gt;-habilidade3:String" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
17 |                     <mxGeometry x="90" y="90" width="150" height="120" as="geometry"/>
18 |                 </mxCell>
19 |                 <mxCell id="6" value="" style="endArrow=none;html=1;exitX=0;exitY=0.094;exitDx=0;exitDy=0;exitPerimeter=0;" parent="1" edge="1">
20 |                     <mxGeometry width="50" height="50" relative="1" as="geometry">
21 |                         <mxPoint x="15" y="229.99999999999997" as="sourcePoint"/>
22 |                         <mxPoint x="305" y="230.1" as="targetPoint"/>
23 |                     </mxGeometry>
24 |                 </mxCell>
25 |                 <mxCell id="7" value="+generateId():Number" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
26 |                     <mxGeometry x="95" y="250" width="140" height="80" as="geometry"/>
27 |                 </mxCell>
28 |                 <mxCell id="8" value="" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
29 |                     <mxGeometry x="410" y="30" width="250" height="200" as="geometry"/>
30 |                 </mxCell>
31 |                 <mxCell id="10" value="listAgent" style="text;strokeColor=none;fillColor=none;html=1;fontSize=24;fontStyle=1;verticalAlign=middle;align=center;" parent="1" vertex="1">
32 |                     <mxGeometry x="485" y="30" width="100" height="40" as="geometry"/>
33 |                 </mxCell>
34 |                 <mxCell id="11" value="" style="endArrow=none;html=1;exitX=0;exitY=0.195;exitDx=0;exitDy=0;exitPerimeter=0;" parent="1" source="8" edge="1">
35 |                     <mxGeometry width="50" height="50" relative="1" as="geometry">
36 |                         <mxPoint x="430" y="80" as="sourcePoint"/>
37 |                         <mxPoint x="660" y="70" as="targetPoint"/>
38 |                     </mxGeometry>
39 |                 </mxCell>
40 |                 <mxCell id="12" value="+listAgentes=[]&lt;br&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
41 |                     <mxGeometry x="470" y="70" width="146.25" height="50" as="geometry"/>
42 |                 </mxCell>
43 |                 <mxCell id="13" value="" style="endArrow=none;html=1;exitX=0;exitY=0.195;exitDx=0;exitDy=0;exitPerimeter=0;" parent="1" edge="1">
44 |                     <mxGeometry width="50" height="50" relative="1" as="geometry">
45 |                         <mxPoint x="410" y="122" as="sourcePoint"/>
46 |                         <mxPoint x="660" y="122" as="targetPoint"/>
47 |                     </mxGeometry>
48 |                 </mxCell>
49 |                 <mxCell id="15" value="&lt;span style=&quot;color: rgba(0, 0, 0, 0); font-family: monospace; font-size: 0px; text-align: start;&quot;&gt;%3CmxGraphModel%3E%3Croot%3E%3CmxCell%20id%3D%220%22%2F%3E%3CmxCell%20id%3D%221%22%20parent%3D%220%22%2F%3E%3CmxCell%20id%3D%222%22%20value%3D%22%22%20style%3D%22endArrow%3Dnone%3Bhtml%3D1%3BentryX%3D1.005%3BentryY%3D0.185%3BentryDx%3D0%3BentryDy%3D0%3BentryPerimeter%3D0%3BexitX%3D0%3BexitY%3D0.195%3BexitDx%3D0%3BexitDy%3D0%3BexitPerimeter%3D0%3B%22%20edge%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20width%3D%2250%22%20height%3D%2250%22%20relative%3D%221%22%20as%3D%22geometry%22%3E%3CmxPoint%20x%3D%22410%22%20y%3D%2269%22%20as%3D%22sourcePoint%22%2F%3E%3CmxPoint%20x%3D%22661.25%22%20y%3D%2267%22%20as%3D%22targetPoint%22%2F%3E%3C%2FmxGeometry%3E%3C%2FmxCell%3E%3C%2Froot%3E%3C%2FmxGraphModel%3E&lt;/span&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
50 |                     <mxGeometry x="470" y="135" width="160" height="65" as="geometry"/>
51 |                 </mxCell>
52 |                 <mxCell id="17" value="&lt;span style=&quot;color: rgba(0, 0, 0, 0); font-family: monospace; font-size: 0px; text-align: start;&quot;&gt;%3CmxGraphModel%3E%3Croot%3E%3CmxCell%20id%3D%220%22%2F%3E%3CmxCell%20id%3D%221%22%20parent%3D%220%22%2F%3E%3CmxCell%20id%3D%222%22%20value%3D%22%22%20style%3D%22endArrow%3Dnone%3Bhtml%3D1%3BentryX%3D1.005%3BentryY%3D0.185%3BentryDx%3D0%3BentryDy%3D0%3BentryPerimeter%3D0%3BexitX%3D0%3BexitY%3D0.195%3BexitDx%3D0%3BexitDy%3D0%3BexitPerimeter%3D0%3B%22%20edge%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20width%3D%2250%22%20height%3D%2250%22%20relative%3D%221%22%20as%3D%22geometry%22%3E%3CmxPoint%20x%3D%22410%22%20y%3D%2269%22%20as%3D%22sourcePoint%22%2F%3E%3CmxPoint%20x%3D%22661.25%22%20y%3D%2267%22%20as%3D%22targetPoint%22%2F%3E%3C%2FmxGeometry%3E%3C%2FmxCell%3E%3C%2Froot%3E%3C%2FmxGraphModel%3E&lt;/span&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
53 |                     <mxGeometry x="490" y="135" width="60" height="30" as="geometry"/>
54 |                 </mxCell>
55 |                 <mxCell id="19" value="&lt;font color=&quot;#000000&quot;&gt;+addAgente(Agent):String&lt;br&gt;+getList():String&lt;br&gt;+removeAgente(Agent):String&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontColor=#FFFFFF;" parent="1" vertex="1">
56 |                     <mxGeometry x="455" y="135" width="160" height="70" as="geometry"/>
57 |                 </mxCell>
58 |                 <mxCell id="21" value="&lt;font color=&quot;#000000&quot;&gt;Agent&lt;/font&gt;" style="text;strokeColor=none;fillColor=none;html=1;fontSize=24;fontStyle=1;verticalAlign=middle;align=center;fontColor=#FFFFFF;" parent="1" vertex="1">
59 |                     <mxGeometry x="115" y="30" width="100" height="40" as="geometry"/>
60 |                 </mxCell>
61 |                 <mxCell id="22" value="" style="endArrow=diamond;html=1;fontColor=#FFFFFF;endFill=1;exitX=1.009;exitY=0.715;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0;entryY=1;entryDx=0;entryDy=0;strokeColor=#000000;" parent="1" source="2" target="8" edge="1">
62 |                     <mxGeometry width="50" height="50" relative="1" as="geometry">
63 |                         <mxPoint x="300" y="160" as="sourcePoint"/>
64 |                         <mxPoint x="360" y="120" as="targetPoint"/>
65 |                     </mxGeometry>
66 |                 </mxCell>
67 |                 <mxCell id="23" value="&lt;font color=&quot;#000000&quot;&gt;(0,*)&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontColor=#FFFFFF;" parent="1" vertex="1">
68 |                     <mxGeometry x="310" y="290" width="40" height="20" as="geometry"/>
69 |                 </mxCell>
70 |                 <mxCell id="24" value="&lt;font color=&quot;#000000&quot;&gt;(1)&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontColor=#FFFFFF;" parent="1" vertex="1">
71 |                     <mxGeometry x="395" y="230" width="60" height="30" as="geometry"/>
72 |                 </mxCell>
73 |             </root>
74 |         </mxGraphModel>
75 |     </diagram>
76 | </mxfile>


--------------------------------------------------------------------------------
/app/page.jsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | import React from 'react';
  3 | import { useEffect, useState } from 'react';
  4 | import styles from './page.module.css';
  5 | import Header from './components/header/Header'
  6 | import Footer from './components/footer/Footer'
  7 | import ImageLoading from './components/imageLoading/ImageLoading';
  8 | import AgentModel from "@/models/Agents";
  9 | import ListAgente from "@/models/listAgente";
 10 | import overwatch, { agent } from "@/data/overwatchClass"
 11 | import Agent from './components/agent/Agent';
 12 | import { BsTrash3Fill } from 'react-icons/bs';
 13 | import { FaPencilAlt } from 'react-icons/fa';
 14 | import { AiFillWarning } from 'react-icons/ai'
 15 | import { BsUiChecks } from 'react-icons/bs'
 16 | import { BsFillBookmarkCheckFill } from 'react-icons/bs'
 17 | import { BiSolidErrorAlt } from 'react-icons/bi'
 18 | import { BsFillPersonPlusFill } from 'react-icons/bs'
 19 | import { BsFillPersonDashFill } from 'react-icons/bs'
 20 | import { GoMoveToTop } from 'react-icons/go'
 21 | import { BiSolidBook } from 'react-icons/bi'
 22 | import Popup from './components/popUp/PopUp';
 23 | import CompButton from './components/compBtns/CompBtns';
 24 | import Link from 'next/link';
 25 | 
 26 | const instanciaListaAgentes = new ListAgente()
 27 | 
 28 | const useImageValidator = (url) => {
 29 |   const [isValid, setIsValid] = useState(false);
 30 | 
 31 |   useEffect(() => {
 32 |     setIsValid(url.match(/\.(jpeg|jpg|gif|png)$/) != null);
 33 |   }, [url]);
 34 | 
 35 |   return isValid;
 36 | }
 37 | 
 38 | export default function Home() {
 39 | 
 40 |   const [apiData, setApiData] = useState(null);
 41 | 
 42 |   const [listaAgentes, setListaAgentes] = useState([]);
 43 |   console.log(listaAgentes);
 44 | 
 45 |   const [name, setname] = useState(null);
 46 |   const [portraitAgent, setPortraitAgent] = useState("");
 47 |   const isValid = useImageValidator(portraitAgent);
 48 |   //const [descricao, setDescricao] = useState("");
 49 |   //const [armadura, setArmadura] = useState("");
 50 |   //const [vida, setVida] = useState("");
 51 |   //const [escudo, setEscudo] = useState("");
 52 |   const [role, setrole] = useState("");
 53 |   //const [habilidade1, setHabilidade1] = useState("");
 54 |   //const [habilidade2, setHabilidade2] = useState("");
 55 |   //const [habilidade3, setHabilidade3] = useState("");
 56 |   const [showPopup, setShowPopup] = useState(false);
 57 |   const [popupIcon1, setPopupIcon1] = useState(null);
 58 |   const [popupIcon2, setPopupIcon2] = useState(null);
 59 |   const [popupMessage, setPopupMessage] = useState('');
 60 |   const [popupType, setPopupType] = useState('');
 61 |   const [flag, setFlag] = useState(0);
 62 |   const [editButton, setEditButton] = useState(false);
 63 |   const [backgroundImage, setBackgroundImage] = useState('https://bnetcmsus-a.akamaihd.net/cms/gallery/W94XAGJVK4871649353625265.jpg');
 64 |   const images = [
 65 |     'https://bnetcmsus-a.akamaihd.net/cms/gallery/1BJ1QA72FCN61649353624113.jpg',
 66 |     'https://images6.alphacoders.com/553/553471.jpg',
 67 |     'https://www.pockettactics.com/wp-content/sites/pockettactics/2022/10/overwatch-2-maps-2.jpg',
 68 |     'https://assets-prd.ignimgs.com/2022/09/27/esperanca-portugal-003-1080-1664272798292.jpg'
 69 |   ];
 70 | 
 71 | 
 72 |   const handleShowPopup = (icon1, message, icon2, type, time) => {
 73 |     setPopupMessage(message)
 74 |     setPopupIcon1(icon1)
 75 |     setPopupIcon2(icon2)
 76 |     setPopupType(type)
 77 |     setShowPopup(true)
 78 |     setTimeout(() => {
 79 |       setShowPopup(false)
 80 |     }, time)
 81 |   }
 82 | 
 83 |   const scrollToTop = () => {
 84 |     window.scrollTo({
 85 |       top: 0,
 86 |       behavior: "smooth"
 87 |     });
 88 |   }
 89 | 
 90 |   const convertNameToLowercase = (word) => {
 91 | 
 92 |     let wordComplete = word.toLowerCase().replace('.', '');
 93 | 
 94 |     return wordComplete;
 95 |   }
 96 | 
 97 |   const addAgent = () => {
 98 |     if (!name || !portraitAgent || !role) {
 99 |       handleShowPopup(<AiFillWarning />, 'Preencha todos os campos', <AiFillWarning />, 'error', 2000);
100 |     } else {
101 | 
102 |       if (!isValid) {
103 |         handleShowPopup(<BiSolidErrorAlt />, 'Imagem não encontrada', <BiSolidErrorAlt />, 'error', 2000);
104 |       } else {
105 |         handleShowPopup(null, 'Agente cadastrado', <BsUiChecks />, 'sucess', 3000)
106 |         const novoAgente = new AgentModel(name, portraitAgent, role);
107 | 
108 |         if (!listaAgentes.some(agente => agente.name === name)) {
109 |           const novosAgentes = [...listaAgentes, novoAgente];
110 |           console.log(listaAgentes);
111 |           setListaAgentes(novosAgentes);
112 |           console.log(listaAgentes);
113 |         }
114 | 
115 |         instanciaListaAgentes.addAgente(novoAgente);
116 | 
117 |         setname("");
118 |         setrole("");
119 |         setPortraitAgent("");
120 |       }
121 |     }
122 |   };
123 | 
124 |   const clearInputs = () => {
125 |     setname("");
126 |     setrole("");
127 |     setPortraitAgent("");
128 |   }
129 | 
130 |   const removeAgent = (agente) => {
131 |     instanciaListaAgentes.removeAgente(agente)
132 |     setListaAgentes(instanciaListaAgentes.getList())
133 |   }
134 | 
135 |   const edit = (id) => {
136 |     console.log('edit', id);
137 |     const agent = instanciaListaAgentes.getAgentPorId(id);
138 |     setname(agent.name);
139 |     setrole(agent.role);
140 |     setPortraitAgent(agent.portrait);
141 |     setEditButton(true);
142 |     setFlag(id);
143 |   }
144 | 
145 |   const update = () => {
146 |     if (!name || !portraitAgent || !role) {
147 |       handleShowPopup(<AiFillWarning />, 'Preencha todos os campos', <AiFillWarning />, 'error', 3000);
148 |     } else {
149 |       if (!isValid) {
150 |         handleShowPopup(<BiSolidErrorAlt />, 'Imagem não encontrada', <BiSolidErrorAlt />, 'error', 2000);
151 |       } else {
152 |         handleShowPopup(null, 'Agente Editado', < BsFillBookmarkCheckFill />, 'sucess', 1000)
153 | 
154 |         instanciaListaAgentes.updateAgent(flag, name, role, portraitAgent);
155 | 
156 |         setEditButton(false);
157 |         setFlag(0);
158 |         setname("");
159 |         setrole("");
160 |         setPortraitAgent("");
161 |       }
162 |     }
163 |   }
164 | 
165 |   useEffect(() => {
166 |     let ignore = false;
167 |     const fetchData = async () => {
168 |       try {
169 |         const data = await overwatch();
170 |         if (!ignore) {
171 |           setApiData(data);
172 |         }
173 |       } catch (error) {
174 | 
175 |       }
176 |     };
177 |     fetchData();
178 | 
179 |     return () => {
180 |       ignore = true;
181 |     };
182 |   }, []);
183 | 
184 |   useEffect(() => {
185 |     if (apiData) {
186 |       apiData.forEach((agenteData) => {
187 | 
188 |         const novoAgente = new AgentModel(
189 |           agenteData.name,
190 |           agenteData.portrait,
191 |           agenteData.role,
192 |         );
193 |         instanciaListaAgentes.addAgente(novoAgente);
194 |       });
195 | 
196 |       const atualizarAgentes = [...listaAgentes, ...instanciaListaAgentes.getList()];
197 |       setListaAgentes(atualizarAgentes);
198 |       console.log(listaAgentes);
199 |     }
200 |   }, [apiData]);
201 | 
202 |   useEffect(() => {
203 |     const intervalId = setInterval(() => {
204 |       setBackgroundImage(images[Math.floor(Math.random() * images.length)]);
205 |     }, 5000);
206 | 
207 |     return () => clearInterval(intervalId);
208 |   }, []);
209 | 
210 |   return (
211 |     apiData ? (
212 |       <div className={styles.divBody} style={{ backgroundImage: `url(${backgroundImage})` }}>
213 |         <Header />
214 |         <div id={styles.formCreateAgent1}>
215 |           <div id={styles.formCreateAgent2}>
216 |             <h2 className={styles.titlesForm}>Crie seu próprio agente</h2>
217 |             <input
218 |               className={styles.inputs}
219 |               type="text"
220 |               placeholder="Nome do agente"
221 |               value={name}
222 |               onChange={(e) => setname(e.target.value)}
223 |             />
224 | 
225 |             <select className={styles.inputs}
226 |               type="text"
227 |               placeholder="role do agente"
228 |               onChange={(e) => setrole(e.target.value)}
229 |               value={role}>
230 |               <option></option>
231 |               <option>damage</option>
232 |               <option>support</option>
233 |               <option>tank</option>
234 |             </select>
235 | 
236 |             <input
237 |               className={styles.inputs}
238 |               type="text"
239 |               placeholder="URL da imagem"
240 |               value={portraitAgent}
241 |               onChange={(e) => setPortraitAgent(e.target.value)}
242 |             />
243 | 
244 |             {/*<input
245 |               className={styles.inputs}
246 |               type="text"
247 |               placeholder="descrição do Agente"
248 |               value={descricao}
249 |               onChange={(e) => setDescricao(e.target.value)}
250 |     />
251 | 
252 |             <h3 className={styles.titlesForm}>Habilidades</h3>
253 | 
254 |             <input
255 |               className={styles.inputs}
256 |               type="text"
257 |               placeholder="name da habilidade 1"
258 |               value={habilidade1}
259 |               onChange={(e) => setHabilidade1(e.target.value)}
260 |             />
261 | 
262 |             <input
263 |               className={styles.inputs}
264 |               type="text"
265 |               placeholder="name da habilidade 2"
266 |               value={habilidade2}
267 |               onChange={(e) => setHabilidade2(e.target.value)}
268 |             />
269 | 
270 |             <input
271 |               className={styles.inputs}
272 |               type="text"
273 |               placeholder="name da habilidade 3"
274 |               value={habilidade3}
275 |               onChange={(e) => setHabilidade3(e.target.value)}
276 |             />
277 | 
278 |             <h3 className={styles.titlesForm}>Informações de vida</h3>
279 | 
280 |             <input
281 |               className={styles.inputs}
282 |               type="number"
283 |               placeholder="quantidade de vida"
284 |               value={vida}
285 |               onChange={(e) => setVida(e.target.value)}
286 |             />
287 | 
288 |             <input
289 |               className={styles.inputs}
290 |               type="number"
291 |               placeholder="quantidade de armadura"
292 |               value={armadura}
293 |               onChange={(e) => setArmadura(e.target.value)}
294 |             />
295 | 
296 |             <input
297 |               className={styles.inputs}
298 |               type="number"
299 |               placeholder="quantidade de escudo"
300 |               value={escudo}
301 |               onChange={(e) => setEscudo(e.target.value)}
302 |             />*/}
303 |             <div id={styles.divBtn}>
304 |               {editButton ? (
305 |                 <button className={styles.btns} onClick={update}>Editar</button>
306 |               ) : (
307 |                 <div className={styles.divBtnAddClear}>
308 |                   <button className={styles.btns} onClick={addAgent}><BsFillPersonPlusFill /></button>
309 |                   <button className={styles.btns} onClick={clearInputs}><BsTrash3Fill /></button>
310 |                 </div>
311 |               )
312 |               }
313 |             </div>
314 |           </div>
315 |           <div id={styles.warnings} className={styles.hidden}>
316 |             <div id={styles.errorMensage}>
317 |               {showPopup ? (
318 |                 <Popup
319 |                   icon1={popupIcon1}
320 |                   message={popupMessage}
321 |                   icon2={popupIcon2}
322 |                   type={popupType}
323 |                 />
324 |               ) : (
325 |                 null
326 |               )}
327 |             </div>
328 |           </div>
329 |         </div>
330 |         <div>
331 |           <button>todos</button>
332 |           <button>Dano</button>
333 |           <button>Suporte</button>
334 |           <button>Tanque</button>
335 |         </div>
336 |         <div className={styles.smallCard}>
337 |           <div className={styles.card1}>
338 |             {listaAgentes.map((agent) => (
339 |               <div className={styles.card2}>
340 |                 <Agent
341 |                   key={agent.id}
342 |                   name={agent.name}
343 |                   portrait={agent.portrait}
344 |                   role={
345 |                     agent.role === 'support' ? (
346 |                       <div className={styles.containerIcon}>
347 |                         <div className={styles.styleIconsSupport}>
348 |                           <img className={styles.iconsRoles} src='https://blz-contentstack-images.akamaized.net/v3/assets/blt9c12f249ac15c7ec/blt66cec9a29cd34e3d/62ea8957c87999116c02c674/Support.svg' />
349 |                         </div>
350 |                       </div>
351 |                     ) : agent.role === 'tank' ? (
352 |                       <div className={styles.containerIcon}>
353 |                         <div className={styles.styleIconsTank}>
354 |                           <img className={styles.iconsRoles} src='https://blz-contentstack-images.akamaized.net/v3/assets/blt9c12f249ac15c7ec/blt0f8b4fa502f0ea53/62ea8957ed429710b3d9b0b0/Tank.svg' />
355 |                         </div>
356 |                       </div>
357 |                     ) : agent.role === 'damage' ? (
358 |                       <div className={styles.containerIcon}>
359 |                         <div className={styles.styleIconsDamage}>
360 |                           <img className={styles.iconsRoles} src='https://blz-contentstack-images.akamaized.net/v3/assets/blt9c12f249ac15c7ec/bltc1d840ba007f88a8/62ea89572fdd1011027e605d/Damage.svg' />
361 |                         </div>
362 |                       </div>
363 |                     ) : (
364 |                       <div className={styles.containerIcon}>
365 |                         <div className={styles.styleIcons}>
366 |                           Role desconhecido
367 |                         </div>
368 |                       </div>
369 |                     )
370 |                   }
371 |                 />
372 |                 <CompButton text={<BsFillPersonDashFill size={16} />} fn={() => removeAgent(agent)} />
373 |                 <CompButton text={<FaPencilAlt size={16} />} fn={() => edit(agent.id)} />
374 |                 <Link href={`eachAgent/${convertNameToLowercase(agent.name)}`}><CompButton text={<BiSolidBook size={16} />} /></Link>
375 |               </div>
376 |             ))}
377 |           </div>
378 |         </div>
379 |         <div id={styles.containerBtnTop}>
380 |           <button className={styles.btnTop} onClick={scrollToTop}><GoMoveToTop /></button>
381 |         </div>
382 |         <Footer />
383 |       </div>
384 |     ) : (
385 |       <ImageLoading />
386 |     )
387 |   );
388 | };


--------------------------------------------------------------------------------