Add GUI and point / list draw

docs/pages/strategy-2024/generateur-2024.md

@@ -4,9 +4,14 @@ title: Generateur de stratégies - 2024
 nav_order: 3
 ---
 
+# Générateur de stratégie - 2024
+
 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.1/p5.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/quicksettings@latest/quicksettings.min.js"></script>
 <script src="p5.gui.js"></script> 
 <link rel="stylesheet" type="text/css" href="style.css">
+
+<div id="ui-container"></div>
 <div id="p5-container"></div>
+
 <script src="sketch.js"></script>

docs/pages/strategy-2024/sketch.js

@@ -1,6 +1,28 @@
 let terrainImage;
 let ajustement = 90; // Pourcentage de la taille originale.
 
+// GUI
+let cb_POI;
+let afficherPOI = true;
+
+// Points
+let echelleX, echelleY; // Facteurs d'échelle pour les axes X et Y
+
+let pois = [
+    { x: 1500, y: 0, nom: "POI 1", couleur: "red" },
+    { x: 1500, y: 500, nom: "POI 2", couleur: "#00FF00" },
+    { x: 1500, y: 1000, nom: "POI 3", couleur: "rgb(0, 0, 255)" },
+    { x: 1500, y: 1500, nom: "POI 3", couleur: "rgb(0, 0, 255)" },
+    { x: 1500, y: 2000, nom: "POI 3", couleur: "rgb(0, 0, 255)" }
+  ];
+
+
+  function calculerEchelle() {
+    // Le canvas vise à représenter une surface de 3m x 2m (3000mm x 2000mm)
+    echelleX = height   / 3000;
+    echelleY = width    / 2000;
+  }
+
 
 function preload() {
     terrainImage = loadImage('vinyle2024.png');
@@ -22,15 +44,48 @@ function setup() {
 
     let canvas = createCanvas(width, height);
     canvas.parent('p5-container');
+    calculerEchelle();
 
+    setupUI();
 }
 
 function draw() {
     drawTerrain();
+    drawPOI();
+}
+
+function setupUI() {
+    cb_POI = createCheckbox("POI", afficherPOI);
+    cb_POI.parent('ui-container');
+    cb_POI.changed(majPOI);
+}
+
+function majPOI(){
+    afficherPOI = cb_POI.checked();
+}
+
+function drawPOI(){
+    if (afficherPOI) {
+        drawList(pois); // Dessinez tous les points d'intérêt
+    }
 }
 
 function windowResized() {
-    setup(); 
+    const container = select('#p5-container');
+    let height = (windowHeight * ajustement) / 100;
+    let width = (height * 2) / 3;
+
+    if (width > container.width) {
+        width = container.width;
+        height = (width * 3) / 2;
+    }
+
+    height = (height * ajustement) / 100; 
+    width  = (width * ajustement) / 100;
+
+    resizeCanvas(width, height);
+
+    calculerEchelle();
 }
 
 
@@ -59,3 +114,34 @@ function drawTerrain() {
 
     image(terrainImage, 0, 0, width, height); 
 }
+
+function drawPoint(point) {
+    // Inversion des axes
+    let canvasX = point.y * echelleY;
+    let canvasY = (3000-point.x) * echelleX;
+
+    let taillePoint = 10;
+
+    fill(point.couleur);
+    noStroke(); // Assurez-vous qu'il n'y a pas de contour sur le cercle
+    ellipse(canvasX, canvasY, taillePoint, taillePoint);
+
+    if (dist(mouseX, mouseY, canvasX, canvasY) < taillePoint / 2) { // Ajustez la détection de proximité selon la taille du point
+      let decalageTexte = 5; // Espacement entre le point et le texte
+      let tailleTexte = 14;
+      textSize(tailleTexte);
+      fill(255); // Texte blanc
+      stroke(0); // Contour noir
+      strokeWeight(1); // Épaisseur du contour
+      text(`${point.nom}: (${point.x}, ${point.y})`, canvasX + 10, canvasY + decalageTexte + taillePoint / 2);
+      noStroke(); // Réinitialisez le contour pour les autres éléments à dessiner
+    }
+  }
+
+
+function drawList(points) {
+    points.forEach(point => {
+      drawPoint(point);
+    });
+  }
+