Skip to content

Commit

Permalink
Make the top blocs and latest spy reports disctinc components
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jbaukens
Jbaukens committed Dec 13, 2024
1 parent f290924 commit ee02d47
Show file tree
Hide file tree
Showing 8 changed files with 283 additions and 195 deletions.
6 changes: 4 additions & 2 deletions src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,8 @@ html, body {
margin: 0;
padding: 0;
font-family: var(--font-family);
background: url('/public/assets/ogame_background.jpg') no-repeat center center fixed;
/*background: url('/public/assets/ogame_background.jpg') no-repeat center center fixed;*/
background-color: #0a0a0a;
background-size: cover;
color: #f1f1f1;
display: flex;
Expand Down Expand Up @@ -93,7 +94,8 @@ html, body {
flex: 1;
padding-top: var(--header-height);
width: 100%;
background: url('/public/assets/ogame_background.jpg') no-repeat center center fixed;
/* background: url('/public/assets/ogame_background.jpg') no-repeat center center fixed; */
background-color: #0a0a0a;
background-size: cover;
padding-bottom: 120px;
}
Expand Down
12 changes: 10 additions & 2 deletions src/components/Header/Header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,15 +53,23 @@ const Header = ({ toggleModal }) => {
}
};

const menuItems = [
const baseMenuItems = [
{ name: 'Home', url: '/' },
{ name: 'Galaxy Event Explorer', url: '/?page=galaxy_event_explorer' },
{ name: 'Position Finder', url: '/?page=position_8_finder' },
{ name: 'SS Finder', url: '/?page=empty_system_finder' },
{ name: 'Techs', url: '/?page=lifeforms_researchs' },
{ name: 'Public Reports', url: '/?page=public_spy_reports' }
{ name: 'Public Reports', url: '/?page=public_spy_reports' },
];

const additionalMenuItems = teamData
? [
{ name: 'Target list', url: '/?page=players_list' },
]
: [];

const menuItems = [...baseMenuItems, ...additionalMenuItems];

useEffect(() => {
const handleWrapperClick = (event) => {
if (
Expand Down
88 changes: 0 additions & 88 deletions src/components/Team/Home/Home.css
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,3 @@
.top-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
align-items: stretch;
}

.top-container .box_1,
.events-container .box_1 {
display: flex;
justify-content: flex-start;
Expand All @@ -18,54 +10,6 @@
overflow-x: auto;
}

.top-container .box_1 img {
/* width: 60%; */
height: 50px;
margin-top: 5px;
}

.top-container .text-with-lines {
display: flex;
align-items: center;
justify-content: center;
margin-top: 10px;
width: 100%;
color: gray;
font-size: 10px;
}

.top-container .text-with-lines::before,
.top-container .text-with-lines::after {
content: "";
flex: 1;
border-top: 1px solid var(--primary-color);
margin: 0 10px;
}

.top-container .text-with-lines span {
font-weight: bold;
text-transform: uppercase;
}

.top-container .box_1 .player-row-data {
display: flex;
align-items: center;
color: gray;
font-size: 14px;
margin-top: 2px;
}

.top-container .box_1 .player-row-data.first-player-row-data {
margin-top: 10px;
}

.top-container .player-row-data img.player-icon {
width: 15px;
height: 15px;
margin-right: 5px;
margin-top: 0;
}

.events-container {
display: flex;
justify-content: space-between;
Expand Down Expand Up @@ -151,38 +95,6 @@
}

@media (max-width: 768px) {
.top-container {
grid-template-columns: 1fr;
}

.top-container .box_1,
.events-container .box_1 {
flex: 1 1 100%;
}

.top-container .box_1 img {
height: 60px;
/* width: 45%; */
}

.top-container .text-with-lines {
font-size: 12px;
}

.top-container .player-row-data {
font-size: 12px;
}

.top-container .player-row-data img.player-icon {
width: 20px;
height: 20px;
margin-right: 8px;
}

.top-container .text-with-lines span {
font-size: 12px;
}

.events-container {
flex-direction: column;
}
Expand Down
108 changes: 7 additions & 101 deletions src/components/Team/Home/Home.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';

import LatestPlayers from './../../../shared/LatestPlayers/LatestPlayers';
import LatestSpyReports from './../../../shared/LatestSpyReports/LatestSpyReports';
import ErrorComponent from './../../../shared/ErrorComponent/ErrorComponent'
import api from './../../../utils/api';
import { mapTopBoxPlayerData, PlayerRow, GalaxyEventRow, SpyEventRow } from './../../../utils/ptre';
import { GalaxyEventRow, SpyEventRow } from './../../../utils/ptre';
import { useCurrentTeam, useUniverseMenuData } from '../../../context/PtreContext';


Expand All @@ -14,11 +15,6 @@ const Home = () => {
const teamData = useCurrentTeam();
const universeData = useUniverseMenuData();

const [topBoxData, setTopBoxData] = useState({
topx_last_fleets: [],
topx_top_fleets: [],
topx_last_bunkers: [],
});
const [eventBoxData, setEventBoxData] = useState({
last_galaxy_events: [],
last_spy_events: [],
Expand All @@ -34,18 +30,6 @@ const Home = () => {

const controller = new AbortController();

const fetchTopBoxData = async () => {
const teamKeydWithoutDash = teamData.teamKey.replace(/-/g, '');

return api.post(
`/api.php?view=topx_box&country=${universeData.community}&univers=${universeData.server}`,
{
team_key: teamKeydWithoutDash,
},
{ signal: controller.signal }
);
};

const fetchEventBoxData = async () => {
const teamKeydWithoutDash = teamData.teamKey.replace(/-/g, '');

Expand All @@ -61,16 +45,8 @@ const Home = () => {
const fetchData = async () => {
try {
setLoading(true);
const [topBoxResponse, eventBoxResponse] = await Promise.all([
fetchTopBoxData(),
fetchEventBoxData(),
]);

setTopBoxData({
topx_last_fleets: mapTopBoxPlayerData(topBoxResponse.data.topx_last_fleets.content),
topx_top_fleets: mapTopBoxPlayerData(topBoxResponse.data.topx_top_fleets.content),
topx_last_bunkers: mapTopBoxPlayerData(topBoxResponse.data.topx_last_bunkers.content),
});
const eventBoxResponse = await fetchEventBoxData();

setEventBoxData({
last_galaxy_events: eventBoxResponse.data.bloc_last_galaxy_events.content,
Expand All @@ -94,85 +70,15 @@ const Home = () => {
return () => controller.abort();
}, [teamData?.teamKey, universeData?.community, universeData?.server]);


if (error) {
return <ErrorComponent message={error} />;
}

return (
<>
<div className="container top-container">
{/* New Section */}
<div className="box_1">
<img src={`/assets/titles/ptre_new_trans.png`} alt="Fleets Title" />
<div className="text-with-lines">
<span>Private</span>
</div>
{loading ? (
<div className="player-row-data first-player-row-data">Loading...</div>
) : topBoxData.topx_last_fleets.length > 0 ? (
topBoxData.topx_last_fleets.map((item, index) => (
<PlayerRow
key={index}
iid={item.iid}
icon={item.icon}
playerName={item.playerName}
fleetPoints={item.fleetPoints}
isFirst={index === 0}
/>
))
) : (
<div className="player-row-data first-player-row-data">No data available</div>
)}
</div>

{/* Top Fleets Section */}
<div className="box_1">
<img src={`/assets/titles/ptre_fleets_trans.png`} alt="Top Fleets Title" />
<div className="text-with-lines">
<span>Private</span>
</div>
{loading ? (
<div className="player-row-data first-player-row-data">Loading...</div>
) : topBoxData.topx_top_fleets.length > 0 ? (
topBoxData.topx_top_fleets.map((item, index) => (
<PlayerRow
key={index}
iid={item.iid}
icon={item.icon}
playerName={item.playerName}
fleetPoints={item.fleetPoints}
isFirst={index === 0}
/>
))
) : (
<div className="player-row-data first-player-row-data">No data available</div>
)}
</div>

{/* Top Bunkers Section */}
<div className="box_1">
<img src={`/assets/titles/ptre_bunkers_trans.png`} alt="Bunkers Title" />
<div className="text-with-lines">
<span>Private</span>
</div>
{loading ? (
<div className="player-row-data first-player-row-data">Loading...</div>
) : topBoxData.topx_last_bunkers.length > 0 ? (
topBoxData.topx_last_bunkers.map((item, index) => (
<PlayerRow
key={index}
iid={item.iid}
icon={item.icon}
playerName={item.playerName}
days={item.days}
isFirst={index === 0}
/>
))
) : (
<div className="player-row-data first-player-row-data">No data available</div>
)}
</div>
</div>
{/* Top block */}
<LatestPlayers />
<div className="container events-container">
{/* Latest Galaxy Events */}
<div className="box_1">
Expand Down Expand Up @@ -264,7 +170,7 @@ const Home = () => {
</div>
</div>
{/* Latest Spy Reports */}
<LatestSpyReports spyReports={eventBoxData.last_spy_reports} />;
<LatestSpyReports spyReports={eventBoxData.last_spy_reports} />
</>
);
};
Expand Down
Loading

0 comments on commit ee02d47

Please sign in to comment.