Mining view

package.json

@@ -13,13 +13,14 @@
     "fuzzy-search": "^3.2.1",
     "lodash": "^4.17.15",
     "node-sass": "^4.13.1",
-    "ogamejs": "^2.0.0",
+    "ogamejs": "^2.1.3",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
-    "react-bootstrap": "^1.0.0-beta.17",
+    "react-bootstrap": "^1.0.0",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "^3.4.0"
+    "react-scripts": "^3.4.1",
+    "xml2js": "^0.4.23"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -13,58 +13,50 @@ import {
 import Home from './components/Home';
 import Trader from './Trader/Trader';
 import Players from './Players/Players';
-import Universe from './Universe/Universe';
+import Mining from './Mining/Mining';
 
 function App() {
 	return (
 		<>
 			<Router basename={process.env.PUBLIC_URL}>
 				<Navbar bg="dark" variant="dark">
 					<Nav className="mr-auto">
-						<Link className="ml-3" to="/">Home</Link>
-						<Link className="ml-3" to="trades">Trades</Link>
-						<Link className="ml-3" to="players">Players</Link>
-						<Link className="ml-3" to="market">Market</Link>
-						<Link className="ml-3" to="mining">Mining</Link>
-						<Link className="ml-3" to="universes">Universes</Link>
-						<Link className="ml-3" to="score">Scores</Link>
-						<Link className="ml-3" to="alliances">Alliances</Link>
+						<Link className="ml-3 text-white" to="/">Home</Link>
+						<Link className="ml-3 text-white" to="trades">Trades</Link>
+						<Link className="ml-3 text-white" to="players">Players</Link>
+						<Link className="ml-3 text-white" to="market">Market</Link>
+						<Link className="ml-3 text-white" to="mining">Mining</Link>
 					</Nav>
 				</Navbar>
 
 				<Container fluid className="full-height">
-					<Container>
-						<Row>
-							<Col>
-								<Switch>
-									<Route path="/trades">
+					<Row>
+						<Col>
+							<Switch>
+								<Route path="/trades">
+									<Container>
 										<Trader />
-									</Route>
-									<Route path="/players">
+									</Container>
+								</Route>
+								<Route path="/players">
+									<Container>
 										<Players />
-									</Route>
-									<Route path="/market">
+									</Container>
+								</Route>
+								<Route path="/market">
+									<Home />
+								</Route>
+								<Route path="/mining">
+									<Mining />
+								</Route>
+								<Router path="/">
+									<Container>
 										<Home />
-									</Route>
-									<Route path="/mining">
-										<Home />
-									</Route>
-									<Route path="/universes">
-										<Universe />
-									</Route>
-									<Route path="/score">
-										<Home />
-									</Route>
-									<Route path="/alliances">
-										<Home />
-									</Route>
-									<Router path="/">
-										<Home />
-									</Router>
-								</Switch>
-							</Col>
-						</Row>
-					</Container>
+									</Container>
+								</Router>
+							</Switch>
+						</Col>
+					</Row>
 				</Container>
 			</Router>
 		</>

src/Mining/Mining.js

@@ -0,0 +1,117 @@
+import { faCog, faEdit } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import Button from 'react-bootstrap/Button';
+import Col from 'react-bootstrap/Col';
+import Form from 'react-bootstrap/Form';
+import Modal from 'react-bootstrap/Modal';
+import Ogame from 'ogamejs';
+import React, { useState, useEffect } from 'react';
+import Row from 'react-bootstrap/Row';
+import Table from 'react-bootstrap/Table';
+
+import { getUniverseData } from './universeData';
+import { MINES } from '../components/constants';
+import CrystalMine from './components/CrystalMine';
+import DeutSynth from './components/DeutSynth';
+import MetalMine from './components/MetalMine';
+
+function Mining() {
+	const [show, setShow] = useState(false);
+	const [edit, setEdit] = useState(false);
+	const [infocompte, setInfocompte] = useState({});
+	const [universeData, setUniverseData] = useState({});
+
+	async function handleSubmit(event) {
+		event.preventDefault();
+		event.stopPropagation();
+
+		const data = event.currentTarget.infocompte.value;
+		const parsedData = Ogame.Building.parseInfoCompteData(data);
+		const universeData = await getUniverseData(parsedData.universe, parsedData.lang);
+
+		setInfocompte(parsedData);
+		setUniverseData(universeData);
+		localStorage.setItem('og_ui_infocompte', JSON.stringify(parsedData));
+		localStorage.setItem('og_ui_universeData', JSON.stringify(universeData));
+	}
+
+	useEffect(function persistInfocompte() {
+		const data = localStorage.getItem('og_ui_infocompte');
+		if (data) {
+			setInfocompte(JSON.parse(data));
+		}
+	}, [])
+
+	useEffect(function persistInfocompte() {
+		const data = localStorage.getItem('og_ui_universeData');
+		if (data) {
+			console.log(JSON.parse(data));
+			setUniverseData(JSON.parse(data));
+		}
+	}, [])
+
+	return (
+		<>
+			<FontAwesomeIcon icon={faCog} className="text-white float-right m-2" onClick={() => setShow(true)} />
+			<FontAwesomeIcon icon={faEdit} className="text-white float-right m-2" onClick={() => setEdit(!edit)} />
+			<Table responsive striped bordered hover variant="dark">
+				<thead>
+					<tr>
+						<th></th>
+						{MINES.map((mine, index) => (
+							<th key={index}>
+								<img src={mine.img} alt={mine.name} width="60" height="60" />
+							</th>
+						))}
+						<th>Energy total</th>
+					</tr>
+				</thead>
+				<tbody>
+					{infocompte && infocompte.planets && infocompte.planets.map((planet, index) => (
+						<tr key={index}>
+							<th>
+								<p>{planet.planet}</p>
+							</th>
+							<th>
+								<MetalMine universeData={universeData} planet={planet} />
+							</th>
+							<th>
+								<CrystalMine universeData={universeData} planet={planet} />
+							</th>
+							<th>
+								<DeutSynth universeData={universeData} planet={planet} />
+							</th>
+							<th>{edit ? 'edit' : 'Pas edit'}</th>
+							<th>{edit ? 'edit' : 'Pas edit'}</th>
+							<th>{edit ? 'edit' : 'Pas edit'}</th>
+							<th>Total</th>
+						</tr>
+					))}
+				</tbody>
+			</Table>
+
+			<Modal show={show} onHide={() => setShow(false)} animation={false}>
+				<Modal.Header closeButton>
+					<Modal.Title>Import des données infocompte</Modal.Title>
+				</Modal.Header>
+
+				<Modal.Body>
+					<Form onSubmit={(e) => handleSubmit(e)}>
+						<Row className="mt-2">
+							<Col>
+								<Form.Group controlId="infocompte">
+									<Form.Label>Donnée infocompte sans le bb-code</Form.Label>
+									<Form.Control as="textarea" name="infocompte" rows="3" />
+								</Form.Group>
+								<Button variant="primary" type="submit">Submit</Button>
+							</Col>
+						</Row>
+					</Form>
+				</Modal.Body>
+			</Modal>
+		</>
+	);
+}
+
+
+export default Mining;

src/Mining/components/CrystalMine.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import Ogame from 'ogamejs';
+
+function CrystalMine(props) {
+	const { planet, universeData } = props;
+	const mine = Ogame.models.Buildings[2].base;
+	const crystal = Ogame.Building.getCrystalMine(mine, Number(planet.crystal), 15, Number(universeData.speed));
+
+	function prettify(x) {
+		return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+	}
+
+	return (
+		<div>
+			Niveau: {planet.crystal} <br />
+			production: {prettify(crystal.production)}<br />
+			énergie: {prettify(crystal.energy)}
+		</div>
+	);
+}
+
+export default CrystalMine;

src/Mining/components/DeutSynth.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import Ogame from 'ogamejs';
+
+function DeutSynth(props) {
+	const { planet, universeData } = props;
+	const mine = Ogame.models.Buildings[3].base;
+	const deut = Ogame.Building.getDeutSynth(mine, Number(planet.deut), planet.temperature, Number(universeData.speed));
+
+	function prettify(x) {
+		return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+	}
+
+	return (
+		<div>
+			Niveau: {planet.deut} <br />
+			production: {prettify(deut.production)} <br />
+			énergie: {prettify(deut.energy)}
+		</div>
+	);
+}
+
+export default DeutSynth;

src/Mining/components/MetalMine.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import Ogame from 'ogamejs';
+
+function MetalMine(props) {
+	const { planet, universeData } = props;
+	const mine = Ogame.models.Buildings[1].base;
+	const metal = Ogame.Building.getMetalMine(mine, Number(planet.metal), Number(universeData.speed));
+
+	function prettify(x) {
+		return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+	}
+
+	return (
+		<div>
+			Niveau: {planet.metal} <br />
+			production: {prettify(metal.production)} <br />
+			énergie: {prettify(metal.energy)}
+		</div>
+	);
+}
+
+export default MetalMine;

src/Mining/universeData.js

@@ -0,0 +1,19 @@
+import { CORSPROXY } from '../components/constants';
+import parser from 'xml2js';
+
+export async function getUniverseData(universe, lang) {
+	const url = `https://s${universe}-${lang}.ogame.gameforge.com/api/serverData.xml`;
+	const response = await fetch(CORSPROXY + url);
+	const text = await response.text();
+	const result = await parser.parseStringPromise(text);
+	console.log(result);
+
+	const finalObj = {};
+
+	for (const key of Object.keys(result.serverData)) {
+		if (key !== '$') {
+			finalObj[key] = result.serverData[key][0];
+		}
+	}
+	return finalObj;
+}

src/Players/components/PlayerDetails.js

@@ -5,8 +5,8 @@ import Col from 'react-bootstrap/Col';
 import Image from 'react-bootstrap/Image';
 import unionBy from 'lodash/unionBy';
 
-import Planet from './planet.png';
-import Moon from './moon.gif';
+import Planet from '../../images/planet.png';
+import Moon from '../../images/moon.gif';
 import { CORSPROXY, POSITIONS } from '../../components/constants';
 
 class PlayersDetails extends React.Component {
@@ -18,6 +18,7 @@ class PlayersDetails extends React.Component {
 		};
 
 		this.getPlayerData();
+		this.link = this.link.bind(this);
 	}
 
 	async getPlayerData() {
@@ -79,8 +80,9 @@ class PlayersDetails extends React.Component {
 	}
 
 	link(coords) {
+		const { universe, lang } = this.props;
 		const [galaxy, system, position] = coords.split(':');
-		return `https://s165-fr.ogame.gameforge.com/game/index.php?page=ingame&component=galaxy&galaxy=${galaxy}&system=${system}&position=${position}`;
+		return `https://s${universe}-${lang}.ogame.gameforge.com/game/index.php?page=ingame&component=galaxy&galaxy=${galaxy}&system=${system}&position=${position}`;
 	}
 
 	render() {

src/components/Home.js

@@ -15,7 +15,7 @@ class Home extends React.Component {
 			<Row>
 				{ROUTES.map((route, index) => (
 					<Col key={index}>
-						<Card bg='dark' text='white' style={{ width: '18rem', height: '10rem' }} className="m-3" key={route.route}>
+						<Card bg='dark' text='white' style={{ width: '18rem', height: '10rem' }} className="m-3">
 							<Card.Body>
 								<span className="float-right">
 									{route.available ?