import React, { useState, useEffect } from 'react';
const App = () => {
const [wave, setWave] = useState(0);
// Список данных о сотрудниках
const players = [
{
id: 1,
name: 'Азамат',
nickname: 'Player1',
hoursPlayed: 500,
role: 'Sniper',
elo: 1500,
},
{
id: 2,
name: 'Олжас',
nickname: 'Player2',
hoursPlayed: 450,
role: 'Riffle',
elo: 1400,
},
{
id: 3,
name: 'Темер',
nickname: 'Player3',
hoursPlayed: 600,
role: 'Riffle',
elo: 1600,
},
{
id: 4,
name: 'Нурбек',
nickname: 'Player4',
hoursPlayed: 550,
role: 'Riffle',
elo: 1550,
},
// Добавьте больше игроков по желанию
];
// Эффект для изменения волнообразной анимации
useEffect(() => {
const interval = setInterval(() => {
setWave((prevWave) => prevWave + 1);
}, 200); // Интервал в 200 мс
return () => clearInterval(interval);
}, []);
// Стили для таблицы
const styles = {
table: {
borderCollapse: 'collapse',
width: '80%',
margin: '20px auto',
border: '1px solid #ddd',
fontFamily: 'Arial, sans-serif',
},
th: {
padding: '12px',
textAlign: 'left',
backgroundColor: '#f2f2f2',
border: '1px solid #ddd',
},
td: {
padding: '12px',
border: '1px solid #ddd',
},
wavyTitle: {
textAlign: 'center', // Центрируем текст заголовка
},
waveEffect: {
display: 'inline-block',
transition: 'transform 0.2s ease-in-out',
},
};
// Функция для рендеринга волнообразного заголовка
const renderWavyTitle = () => {
const title = 'Таблица офисных игроков CS 1.6';
return (
<h1 style={styles.wavyTitle}>
{title.split('').map((char, index) => (
<span
key={index}
style={{
...styles.waveEffect,
transform: `translateY(${Math.sin((index + wave) * 0.3) * 10}px)`,
}}
>
{char}
</span>
))}
</h1>
);
};
return (
<div>
{renderWavyTitle()}
<table style={styles.table}>
<thead>
<tr>
<th style={styles.th}>ID</th>
<th style={styles.th}>Имя</th>
<th style={styles.th}>Никнейм</th>
<th style={styles.th}>Часов сыграно</th>
<th style={styles.th}>Роль в игре</th>
<th style={styles.th}>ELO</th>
</tr>
</thead>
<tbody>
{players.map((player) => (
<tr key={player.id}>
<td style={styles.td}>{player.id}</td>
<td style={styles.td}>{player.name}</td>
<td style={styles.td}>{player.nickname}</td>
<td style={styles.td}>{player.hoursPlayed}</td>
<td style={styles.td}>{player.role}</td>
<td style={styles.td}>{player.elo}</td>
</tr>
))}
</tbody>
</table>
</div>
);
};
export default App;
