From ee02d47b9586dd64c9fb2a7f67b61057602105e5 Mon Sep 17 00:00:00 2001 From: Jeremy Baukens Date: Fri, 13 Dec 2024 23:46:01 +0100 Subject: [PATCH] Make the top blocs and latest spy reports disctinc components --- src/App.css | 6 +- src/components/Header/Header.js | 12 +- src/components/Team/Home/Home.css | 88 ----------- src/components/Team/Home/Home.js | 108 +------------ src/shared/LatestPlayers/LatestPlayers.css | 96 ++++++++++++ src/shared/LatestPlayers/LatestPlayers.js | 142 ++++++++++++++++++ .../LatestSpyReports/LatestSpyReports.css | 22 +++ .../LatestSpyReports/LatestSpyReports.js | 4 +- 8 files changed, 283 insertions(+), 195 deletions(-) create mode 100644 src/shared/LatestPlayers/LatestPlayers.css create mode 100644 src/shared/LatestPlayers/LatestPlayers.js diff --git a/src/App.css b/src/App.css index 7db4c58..3d31921 100644 --- a/src/App.css +++ b/src/App.css @@ -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; @@ -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; } diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index 8aa7af3..2fa18a2 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -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 ( diff --git a/src/components/Team/Home/Home.css b/src/components/Team/Home/Home.css index d9c8237..fd6b925 100644 --- a/src/components/Team/Home/Home.css +++ b/src/components/Team/Home/Home.css @@ -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; @@ -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; @@ -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; } diff --git a/src/components/Team/Home/Home.js b/src/components/Team/Home/Home.js index 25f6bc0..66f78b9 100644 --- a/src/components/Team/Home/Home.js +++ b/src/components/Team/Home/Home.js @@ -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'; @@ -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: [], @@ -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, ''); @@ -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, @@ -94,85 +70,15 @@ const Home = () => { return () => controller.abort(); }, [teamData?.teamKey, universeData?.community, universeData?.server]); + if (error) { return ; } return ( <> -
- {/* New Section */} -
- Fleets Title -
- Private -
- {loading ? ( -
Loading...
- ) : topBoxData.topx_last_fleets.length > 0 ? ( - topBoxData.topx_last_fleets.map((item, index) => ( - - )) - ) : ( -
No data available
- )} -
- - {/* Top Fleets Section */} -
- Top Fleets Title -
- Private -
- {loading ? ( -
Loading...
- ) : topBoxData.topx_top_fleets.length > 0 ? ( - topBoxData.topx_top_fleets.map((item, index) => ( - - )) - ) : ( -
No data available
- )} -
- - {/* Top Bunkers Section */} -
- Bunkers Title -
- Private -
- {loading ? ( -
Loading...
- ) : topBoxData.topx_last_bunkers.length > 0 ? ( - topBoxData.topx_last_bunkers.map((item, index) => ( - - )) - ) : ( -
No data available
- )} -
-
+ {/* Top block */} +
{/* Latest Galaxy Events */}
@@ -264,7 +170,7 @@ const Home = () => {
{/* Latest Spy Reports */} - ; + ); }; diff --git a/src/shared/LatestPlayers/LatestPlayers.css b/src/shared/LatestPlayers/LatestPlayers.css new file mode 100644 index 0000000..8cfac3a --- /dev/null +++ b/src/shared/LatestPlayers/LatestPlayers.css @@ -0,0 +1,96 @@ +.top-container { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 10px; + align-items: stretch; +} + +.top-container .box_1 { + display: flex; + justify-content: flex-start; + align-items: center; + flex-direction: column; + margin: 0; +} + +.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; +} + +@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; + } +} \ No newline at end of file diff --git a/src/shared/LatestPlayers/LatestPlayers.js b/src/shared/LatestPlayers/LatestPlayers.js new file mode 100644 index 0000000..af909eb --- /dev/null +++ b/src/shared/LatestPlayers/LatestPlayers.js @@ -0,0 +1,142 @@ +import React, { useEffect, useState } from 'react'; + +import api from './../../utils/api'; +import { PlayerRow, mapTopBoxPlayerData } from './../../utils/ptre'; + +import { useCurrentTeam, useUniverseMenuData } from '../../context/PtreContext'; + +import './LatestPlayers.css'; + +const LatestPlayers = ({ setError }) => { + const teamData = useCurrentTeam(); + const universeData = useUniverseMenuData(); + + const [topBoxData, setTopBoxData] = useState({ + latestFleets: [], + topFleets: [], + latestBunkers: [], + }); + + const [loading, setLoading] = useState(true); + + useEffect(() => { + if (!teamData?.teamKey) { + return; + } + + const controller = new AbortController(); + + const fetchTopBoxData = async () => { + const teamKeydWithoutDash = teamData.teamKey.replace(/-/g, ''); + + try { + setLoading(true); + const topBoxResponse = await api.post( + `/api.php?view=topx_box&country=${universeData.community}&univers=${universeData.server}`, + { + team_key: teamKeydWithoutDash, + }, + { signal: controller.signal } + ); + + setTopBoxData({ + latestFleets: mapTopBoxPlayerData(topBoxResponse.data.topx_last_fleets.content), + topFleets: mapTopBoxPlayerData(topBoxResponse.data.topx_top_fleets.content), + latestBunkers: mapTopBoxPlayerData(topBoxResponse.data.topx_last_bunkers.content), + }); + } catch (err) { + if (err.name === 'AbortError') { + console.log('Request canceled'); + } else { + console.error(err); + setError(err.message || 'Failed to fetch data'); + } + } finally { + setLoading(false); + } + }; + + fetchTopBoxData(); + + return () => controller.abort(); + }, [teamData?.teamKey, universeData?.community, universeData?.server, setError]); + + + return ( +
+ {/* New Section */} +
+ Fleets Title +
+ Private +
+ {loading ? ( +
Loading...
+ ) : topBoxData.latestFleets.length > 0 ? ( + topBoxData.latestFleets.map((item, index) => ( + + )) + ) : ( +
No data available
+ )} +
+ + {/* Top Fleets Section */} +
+ Top Fleets Title +
+ Private +
+ {loading ? ( +
Loading...
+ ) : topBoxData.topFleets.length > 0 ? ( + topBoxData.topFleets.map((item, index) => ( + + )) + ) : ( +
No data available
+ )} +
+ + {/* Top Bunkers Section */} +
+ Bunkers Title +
+ Private +
+ {loading ? ( +
Loading...
+ ) : topBoxData.latestBunkers.length > 0 ? ( + topBoxData.latestBunkers.map((item, index) => ( + + )) + ) : ( +
No data available
+ )} +
+
+ ); +}; + +export default LatestPlayers; \ No newline at end of file diff --git a/src/shared/LatestSpyReports/LatestSpyReports.css b/src/shared/LatestSpyReports/LatestSpyReports.css index 95bc740..65a3c65 100644 --- a/src/shared/LatestSpyReports/LatestSpyReports.css +++ b/src/shared/LatestSpyReports/LatestSpyReports.css @@ -30,6 +30,8 @@ justify-content: space-between; font-size: 0.8rem; margin-bottom: 1rem; + align-items: center; + text-transform: uppercase; } .report-data > div, @@ -105,6 +107,26 @@ text-align: center; } +.report-visibility { + font-weight: bold; + padding: 0.3rem 0.6rem; + border-radius: 12px; + text-transform: uppercase; + font-size: 0.8rem; + display: inline-block; + text-align: center; +} + +.report-visibility.public { + background-color: #28a745; + color: white; +} + +.report-visibility.private { + background-color: #dc3545; + color: white; +} + .btn-display-report { background-color: var(--primary-color); color: #fff; diff --git a/src/shared/LatestSpyReports/LatestSpyReports.js b/src/shared/LatestSpyReports/LatestSpyReports.js index 93fb2df..a58bb22 100644 --- a/src/shared/LatestSpyReports/LatestSpyReports.js +++ b/src/shared/LatestSpyReports/LatestSpyReports.js @@ -18,8 +18,8 @@ const LatestSpyReports = ({ spyReports }) => {
- - {report.public ? 'Public' : 'Private'} + + {report.private ? 'Private' : 'Public'} {formatDate(report.event_timestamp, 'long')}