Skip to content

Commit 969d04d

Browse files
pedrohpsantospedrohpsantos
committed
fix: refactor dashboards components and WebSocket hook
1 parent 325ca1b commit 969d04d

File tree

7 files changed

+947
-704
lines changed

7 files changed

+947
-704
lines changed

‎eslint.config.mjs

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,16 @@ const eslintConfig = [
2222
"no-unreachable": "error",
2323
"no-console": "error",
2424
"prefer-const": "warn",
25-
"yoda": "warn"
26-
}
25+
"yoda": "warn",
26+
'@typescript-eslint/no-unused-vars': [
27+
'warn',
28+
{
29+
argsIgnorePattern: '^_',
30+
varsIgnorePattern: '^_',
31+
caughtErrorsIgnorePattern: '^_',
32+
},
33+
],
34+
},
2735
},
2836
...compat.extends("next/core-web-vitals", "next/typescript"),
2937
];

‎src/app/create-campaign/page.tsx

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -197,28 +197,26 @@ export default function CreateCampaignPage() {
197197
style={{ cursor: dragging ? 'grabbing' : 'grab' }}>
198198
<div className={styles.mapPreview}>
199199
{mapPreview ? (
200-
<img
201-
ref={imgRef}
200+
// Substituir <img> por <Image />
201+
<Image
202+
ref={imgRef as React.RefObject<HTMLImageElement>} // Adicionar type assertion se necessário
202203
src={mapPreview}
203204
alt='Mapa Preview'
205+
fill // Usar fill para cobrir o container
204206
style={{
205-
position: 'absolute',
206-
top: 0,
207-
left: 0,
208-
userSelect: 'none',
209-
pointerEvents: 'none',
207+
objectFit: 'cover', // ou 'contain' dependendo do comportamento desejado
210208
transform: `translate(${translate.x}px, ${translate.y}px) scale(${zoom})`,
211209
transition: dragging ? 'none' : 'transform 0.2s ease',
212-
borderRadius: '4px',
213-
width: 'auto',
214-
height: 'auto',
215-
maxWidth: 'none',
216-
maxHeight: 'none',
210+
userSelect: 'none',
211+
pointerEvents: 'none',
212+
transformOrigin: '0 0', // Aplicar transform a partir do canto superior esquerdo
217213
}}
218214
draggable={false}
219215
/>
220216
) : (
221-
<span style={{ fontSize: '48px' }}>🗺️</span>
217+
<div className={styles.placeholder}>
218+
<span style={{ fontSize: '48px' }}>🗺️</span>
219+
</div>
222220
)}
223221
</div>
224222
<div className={styles.sideIcons}>

‎src/app/dashboard-master/MainContent.tsx

Lines changed: 52 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,68 @@
11
import React from 'react'
2-
import './MainContent.css'
3-
import './CustomScrollbar.css'
2+
import styles from './dashboard.module.css'
3+
import Image from 'next/image'
44

5-
const MainContent: React.FC = () => {
6-
return (
7-
<div className='main-content'>
8-
<div className='content-card'>
9-
<div className='cards-container'>
10-
{/* FIRST CARD */}
11-
<div className='inner-card'>
12-
<div className='card-header'>
13-
<img src='images/rocket.png' alt='Ícone de foguete' className='header-icon' />
14-
<h3 className='header-title'>Uma Odisseia no Espaço</h3>
15-
</div>
16-
17-
<div className='dashboard-card-content'>
18-
<div className='user-section'>
19-
<h4>Mestre</h4>
20-
<img src='images/circle.png' alt='Mestre' className='user-avatar' />
21-
22-
<h4>Jogadores</h4>
23-
<div className='players'>
24-
<img src='images/circle.png' alt='Jogador 1' className='user-avatar' />
25-
<img src='images/circle.png' alt='Jogador 2' className='user-avatar' />
26-
<img src='images/circle.png' alt='Jogador 3' className='user-avatar' />
27-
<img src='images/circle.png' alt='Jogador 4' className='user-avatar' />
28-
</div>
29-
</div>
5+
const Box = () => {
6+
const campaigns = [
7+
{ logo: '/images/rocket.png', title: 'UMA ODISSÉIA NO ESPAÇO' },
8+
{ logo: '/images/spider.png', title: 'A FLOREsta RADIOATIVA' },
9+
]
3010

31-
<div className='divider' />
32-
33-
<div className='info-section'>
34-
<div className='map-info'>
35-
<img src='images/image.png' alt='Mapa' className='map-icon' />
36-
<span className='map-name'>Andromeda</span>
37-
</div>
38-
39-
<div className='stats'>
40-
<div className='stat-item'>
41-
<span className='stat-icon'>🕒</span>
42-
<span>1:54:45</span>
43-
</div>
44-
<div className='stat-item'>
45-
<span className='stat-icon'>📘</span>
46-
<span>3 sessões realizadas</span>
47-
</div>
48-
<div className='stat-item'>
49-
<span className='stat-icon'>👥</span>
50-
<span>2 usuários conectados</span>
51-
</div>
52-
</div>
53-
</div>
54-
</div>
11+
return (
12+
<div className={styles.boxContainer}>
13+
{campaigns.map(({ logo, title }, idx) => (
14+
<div key={idx} className={styles.card}>
15+
<div className={styles.cardHeader}>
16+
<Image src={logo} alt={`Logo ${idx + 1}`} width={40} height={40} />
17+
<span className={styles.cardTitle}>{title}</span>
5518
</div>
5619

57-
{/* SECOND CARD */}
58-
<div className='inner-card'>
59-
<div className='card-header'>
60-
<img src='images/spider.png' alt='Ícone de aranha' className='header-icon' />
61-
<h3 className='header-title'>Exploração Galáctica</h3>
20+
<div className={styles.cardContent}>
21+
<div className={styles.cardColumn}>
22+
<div className={styles.sectionTitle}>MESTRE</div>
23+
<div className={styles.sectionTitle}>JOGADORES</div>
24+
<div className={styles.playersGrid}>
25+
{[1, 2, 3, 4].map((i) => (
26+
<Image key={i} src='/images/circle.png' alt={`Jogador ${i}`} width={50} height={50} />
27+
))}
28+
</div>
6229
</div>
6330

64-
<div className='dashboard-card-content'>
65-
<div className='user-section'>
66-
<h4>Mestre</h4>
67-
<img src='images/circle.png' alt='Mestre' className='user-avatar' />
31+
<div className={styles.cardColumn}>
32+
<div className={styles.sectionTitleRight}>MAPA</div>
33+
<Image src='/images/image.png' alt='Mapa' width={150} height={100} className={styles.mapImage} />
34+
<div className={styles.mapName}>NOME DO MAPA</div>
35+
<div className={styles.sectionTitle}>ESTATISTICAS</div>
6836

69-
<h4>Jogadores</h4>
70-
<div className='players'>
71-
<img src='images/circle.png' alt='Jogador 1' className='user-avatar' />
72-
<img src='images/circle.png' alt='Jogador 2' className='user-avatar' />
73-
<img src='images/circle.png' alt='Jogador 3' className='user-avatar' />
74-
<img src='images/circle.png' alt='Jogador 4' className='user-avatar' />
75-
</div>
37+
<div className={styles.statItem}>
38+
<Image src='/images/clock.png' alt='Tempo' width={25} height={25} />
39+
<span>00:00:00</span>
7640
</div>
77-
78-
<div className='divider' />
79-
80-
<div className='info-section'>
81-
<div className='map-info'>
82-
<img src='images/image.png' alt='Mapa' className='map-icon' />
83-
<span className='map-name'>Nebulosa X</span>
84-
</div>
85-
86-
<div className='stats'>
87-
<div className='stat-item'>
88-
<span className='stat-icon'>🕒</span>
89-
<span>2:36:10</span>
90-
</div>
91-
<div className='stat-item'>
92-
<span className='stat-icon'>📘</span>
93-
<span>5 sessões realizadas</span>
94-
</div>
95-
<div className='stat-item'>
96-
<span className='stat-icon'>👥</span>
97-
<span>4 usuários conectados</span>
98-
</div>
99-
</div>
41+
<div className={styles.divider}></div>
42+
<div className={styles.statItem}>
43+
<Image src='/images/check.png' alt='Check' width={25} height={25} />
44+
<span>SESSÕES REALIZADAS</span>
45+
</div>
46+
<div className={styles.divider}></div>
47+
<div className={styles.statItem}>
48+
<Image src='/images/calendar.png' alt='Calendário' width={25} height={25} />
49+
<span>00/00/0000</span>
10050
</div>
10151
</div>
10252
</div>
10353
</div>
54+
))}
55+
</div>
56+
)
57+
}
58+
59+
const MainContent: React.FC = () => {
60+
return (
61+
<div className='main-content'>
62+
<div className={styles.contentWrapper}>
63+
<div className={styles.boxContainer}>
64+
<Box />
65+
</div>
10466
</div>
10567
</div>
10668
)

0 commit comments

Comments
 (0)