first version of MVP

README.md

@@ -41,7 +41,7 @@ We will switch static API to use dynamic ID to retrieve more specific data.
 ## Roles
 
 Benorto : Product Owner, CTO
-DigitalDanteCrypto : Senior Lead Dev
+DigitalDanteCrypto : Lead Dev
 
 
 ## PO's expectation

TODO.md

@@ -36,3 +36,9 @@ I want tot challenge the data structure.
 
 - Enlever le isLoading dans le PlaneContext.
 - Change Option Planes by DataList.
+
+
+# Update from 20.02.2024
+
+- Added the basics for a tips logic, used context to feed data to EnnemiesDisplay. 
+- play around with the array and userPlane data in userTipsLogic.js -> then i exported the function to use it inside the component. 

backend/.gitignore

@@ -1,6 +1,6 @@
-HELP.md
+planes/HELP.md
 target/
-!.mvn/wrapper/maven-wrapper.jar
+!../.mvn/wrapper/maven-wrapper.jar
 !**/src/main/**/target/
 !**/src/test/**/target/
 

backend/HELP.md

@@ -0,0 +1,20 @@
+# Getting Started
+
+### Reference Documentation
+For further reference, please consider the following sections:
+
+* [Official Apache Maven documentation](https://maven.apache.org/guides/index.html)
+* [Spring Boot Maven Plugin Reference Guide](https://docs.spring.io/spring-boot/docs/3.2.2/maven-plugin/reference/html/)
+* [Create an OCI image](https://docs.spring.io/spring-boot/docs/3.2.2/maven-plugin/reference/html/#build-image)
+* [Spring Web](https://docs.spring.io/spring-boot/docs/3.2.2/reference/htmlsingle/index.html#web)
+* [Spring Data MongoDB](https://docs.spring.io/spring-boot/docs/3.2.2/reference/htmlsingle/index.html#data.nosql.mongodb)
+* [Spring Boot DevTools](https://docs.spring.io/spring-boot/docs/3.2.2/reference/htmlsingle/index.html#using.devtools)
+
+### Guides
+The following guides illustrate how to use some features concretely:
+
+* [Building a RESTful Web Service](https://spring.io/guides/gs/rest-service/)
+* [Serving Web Content with Spring MVC](https://spring.io/guides/gs/serving-web-content/)
+* [Building REST services with Spring](https://spring.io/guides/tutorials/rest/)
+* [Accessing Data with MongoDB](https://spring.io/guides/gs/accessing-data-mongodb/)
+

frontend/package.json

@@ -10,8 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.15.11",
+    "@mui/x-charts": "^6.19.5",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.55",

frontend/src/App.jsx

@@ -1,21 +1,29 @@
 import './App.css'
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import Ruban from './Components/Ruban'
 import EnnemiesDisplay from './Components/Ennemies/EnnemiesDisplay'
 import UserPlane from './Components/User/UserPlane'
 import {PlanesProvider} from './Service/PlaneContext';
-import UserTips from './Components/User/UserTips'
+import Footer from './Components/Footer';
+import About from './Components/About/About';
+
+
 
 function App() {
 
 
     return (
         <>
+        <Router>
             <PlanesProvider>
-                <Ruban/>
-                <EnnemiesDisplay/>
-                <UserPlane/>
-                <UserTips/>
+                <Routes>
+                    <Route path="/" element={<><Ruban/><EnnemiesDisplay/><UserPlane/><Footer/></>} />
+                    <Route path="/about" element={<About />} />
+                </Routes>
+
             </PlanesProvider>
+        </Router>
         </>
     )
 }

frontend/src/Components/About/About.jsx

@@ -0,0 +1,95 @@
+import React, { Component } from "react";
+import Ruban from "../Ruban";
+import github_logo from '../../assets/github.png'
+import linkedin_logo from '../../assets/linkedin.png'
+export class About extends Component {
+  render() {
+    const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+    let projectName = "WARTHUNDER_HELPER";
+    let repeat = 0;
+
+    const handleMouseOver = (event) => {
+      if (repeat > 5) {
+        event.target.innerText = "Stop it >.<'"; // This updates the text displayed by the element.
+        return; // Exits the function.
+      }
+
+      let interval = null;
+
+      let originalText = event.target.innerText; // Save the original text
+      let iteration = 0;
+
+      clearInterval(interval);
+
+      interval = setInterval(() => {
+        event.target.innerText = event.target.innerText
+          .split("")
+          .map((letter, index) =>
+            index < iteration
+              ? originalText[index]
+              : letters[Math.floor(Math.random() * 26)]
+          )
+          .join("");
+
+        iteration += 1 / 3;
+      }, 30);
+
+      setTimeout(() => {
+        clearInterval(interval);
+        event.target.innerText = originalText; // Reset to original text
+      }, 2000);
+      repeat++;
+      console.log(repeat);
+
+      return projectName;
+    };
+
+    return (
+      <>
+        <Ruban />
+        <div id="about-container">
+          <div id="presentation">
+            <h4>Hi there 👋</h4>
+            <h1>I am Florian Dante</h1>
+            <h3 id="job-title">Junior Fullstack Engineer and Entrepreneur</h3>
+            <p>
+              I work creating software that solve problems in a simple way and
+              sharing what I learn along the way. <br /> I like minimalism,
+              Open-Source and good music. You can find me mostly on Twitter.
+            </p>
+          </div>
+          <div id="connect-btn">
+            <a className="btn">Let's connect</a>
+            <a className="btn">Contact</a>
+          </div>
+          <div id="socials">
+            <a href="">
+                <img src={github_logo} alt="" />
+            </a>
+            <a href="">
+                <img src={linkedin_logo} alt="" />
+            </a>
+          </div>
+          <div id="about-project">
+            <h2 id="project-name" onMouseOver={handleMouseOver}>
+              {projectName}
+            </h2>
+            <p>
+              The project is a web application aimed at War Thunder players,
+              providing detailed information on aircraft. <br /> It uses MongoDB
+              for data storage and Spring Boot for the backend API, ensuring
+              efficient data management and retrieval. <br /> The frontend is
+              developed with React, focusing on user interaction and interface.{" "}
+              <br />
+              This application demonstrates the integration of these
+              technologies for an enhanced user experience in the gaming
+              community.
+            </p>
+          </div>
+        </div>
+      </>
+    );
+  }
+}
+
+export default About;

frontend/src/Components/Ennemies/EnnemiesDisplay.jsx

@@ -1,18 +1,129 @@
-import React, { Component } from 'react'
-import EnnemyBox from './EnnemyBox'
+import React, { useState } from "react";
+import EnemyBox from "../Ennemies/EnnemyBox";
+import { usePlanes } from "../../Service/PlaneContext";
+import { BarChart } from "@mui/x-charts/BarChart";
 
-export class EnnemiesDisplay extends Component {
-  render() {
-    return (
+function EnemiesDisplay() {
+  const { userPlane } = usePlanes();
+  const [maxSpeeds, setMaxSpeeds] = useState(new Array(5).fill(0));
+  const [turnTimes, setTurnTimes] = useState(new Array(5).fill(0));
+  const [planeNames, setPlaneNames] = useState(new Array(5).fill(''));
+
+  const handleSelectPlane = (newMaxSpeed, newTurnTimeUpgraded, newPlaneName, index) => {
+    setMaxSpeeds((prevMaxSpeeds) => {
+      const updatedMaxSpeeds = [...prevMaxSpeeds];
+      updatedMaxSpeeds[index] = newMaxSpeed;
+      return updatedMaxSpeeds;
+    });
+    // Assuming you have a setState function for turn times as well
+    setTurnTimes(prevTurnTimes => {
+      const updatedTurnTimes = [...prevTurnTimes];
+      updatedTurnTimes[index] = newTurnTimeUpgraded;
+      return updatedTurnTimes;
+    });
+
+    setPlaneNames(prevPlaneNames => {
+      const updatedPlaneNames = [...prevPlaneNames];
+      updatedPlaneNames[index] = newPlaneName;
+      return updatedPlaneNames;
+    });
+  };
+
+const colorPalet = [
+  "#6A687A", 
+  "#2D728F",
+  "#F49E4C",
+  "#AB3428",
+  "#5D2E8C",
+  "#FF6666"
+
+]
+
+
+  let myUserPlaneName;
+  if (userPlane) {
+    myUserPlaneName= userPlane.name;
+  } else {
+    myUserPlaneName = "";
+  }
+
+  let myUserPlaneSpeed;
+  if (userPlane) {
+    myUserPlaneSpeed = userPlane.maxSpeed;
+  } else {
+    myUserPlaneSpeed = 0;
+  }
+
+  let myUserTurnTime;
+  if (userPlane && userPlane.turnTime) {
+    myUserTurnTime = userPlane.turnTime.upgraded;
+  } else {
+    myUserTurnTime = 0;
+  }
+
+  console.log(turnTimes);
+  console.log(planeNames);
+
+  return (
+    <div id="ennemies-container">
       <div id="ennemies-display">
-        <EnnemyBox />
-        <EnnemyBox />
-        <EnnemyBox />
-        <EnnemyBox />
-        <EnnemyBox />
+        <EnemyBox
+          onSelectPlane={(planeName,maxSpeed, turnTimeUpgraded) =>
+            handleSelectPlane(planeName ,maxSpeed, turnTimeUpgraded, 0)
+          }
+        />
+         <EnemyBox
+          onSelectPlane={(planeName, maxSpeed, turnTimeUpgraded) =>
+            handleSelectPlane(planeName, maxSpeed, turnTimeUpgraded, 1)
+          }
+        />
+         <EnemyBox
+          onSelectPlane={(planeName, maxSpeed, turnTimeUpgraded) =>
+            handleSelectPlane(planeName, maxSpeed, turnTimeUpgraded, 2)
+          }
+        />
+         <EnemyBox
+          onSelectPlane={(planeName, maxSpeed, turnTimeUpgraded) =>
+            handleSelectPlane(planeName, maxSpeed, turnTimeUpgraded, 3)
+          }
+        />
+         <EnemyBox
+          onSelectPlane={(planeName, maxSpeed, turnTimeUpgraded) =>
+            handleSelectPlane(planeName, maxSpeed, turnTimeUpgraded, 4)
+          }
+        />
       </div>
-    )
-  }
+
+      <div id="bar-chart">
+        <BarChart
+        style={{
+          color: '#fdb462',
+          fontSize: '16px',
+          fontWeight: 'bold',
+        }}
+          colors={["#fdb462"]}
+          series={[
+            { data: [myUserPlaneSpeed], label: myUserPlaneName, color: "#8bff47" }, // Assign color to myUserPlaneSpeed
+            ...maxSpeeds.map((speed, num) => (num+= 0,{ data: [speed], color: colorPalet[num], label: planeNames[num]})), // Would be great if i could pass ennemy plane names;
+          ]}
+          height={290}
+          xAxis={[{ data: ["Your Max Speed vs enemy planes"], scaleType: "band", categoryGapRatio: 0.7, barGapRatio: 0.4 }]}
+          margin={{ top: 60, bottom: 30, left: 40, right: 10 }}
+        />
+
+         <BarChart
+          colors={["#fdb462"]}
+          series={[
+            { data: [myUserTurnTime], color: "#8bff47", label: myUserPlaneName }, // Assign color to myUserPlaneSpeed
+            ...turnTimes.map((turntime, num) => (num+=0, { data: [turntime], color: colorPalet[num], label: planeNames[num] })), // Map each maxSpeed to its own series
+          ]}
+          height={290}
+          xAxis={[{ data: ["user plane turntime vs enemy planes"], scaleType: "band", categoryGapRatio: 0.7, barGapRatio: 0.4 }]}
+          margin={{ top: 60, bottom: 30, left: 40, right: 10 }}
+        />
+      </div>
+    </div>
+  );
 }
 
-export default EnnemiesDisplay
+export default EnemiesDisplay;