From 8d5ec6c26e76fb8c3bf42796554d2b50c7781991 Mon Sep 17 00:00:00 2001
From: Stef <stephane.savona@gmail.com>
Date: Thu, 20 Jun 2024 17:17:42 +0200
Subject: [PATCH] =?UTF-8?q?Fix=20position=20des=20secteurs.=20Recalcul=20d?=
 =?UTF-8?q?u=20centre=20d'un=20polygon=20et=20ajout=20en=20SVG=20le=20sect?=
 =?UTF-8?q?eur=20plut=C3=B4t=20qu'en=20HTML?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/js/main.desktop.js                     | 12 +++++-
 assets/less/component/map.less                | 37 ++-----------------
 .../Gaia/Galaxy/GalaxyConfigurationV6.php     | 29 +++++++++++++++
 .../zeus/registration/place_choice.html.twig  | 28 ++++++--------
 4 files changed, 53 insertions(+), 53 deletions(-)

diff --git a/assets/js/main.desktop.js b/assets/js/main.desktop.js
index 79bdc08d7..e2b4bf684 100755
--- a/assets/js/main.desktop.js
+++ b/assets/js/main.desktop.js
@@ -1047,9 +1047,17 @@ jQuery(document).ready(function($) {
 		e.preventDefault();
 
 		var id = $(this).data('id');
+		const allGroupsSectors = document.querySelectorAll('.tactical-map svg g')
+		let countGroupsSectors = 0
+
+		allGroupsSectors.forEach(el => {
+			el.classList.remove('active')
+			countGroupsSectors++
+			if (allGroupsSectors.length === countGroupsSectors) {
+				e.target.closest("g").classList.add('active')
+			}
+		})
 
-		$('.tactical-map .number span').removeClass('active');
-		$('#sector' + id).addClass('active');
 		$('#input-sector-id').val(id);
 	});
 
diff --git a/assets/less/component/map.less b/assets/less/component/map.less
index 1efcf396a..dddedecd3 100755
--- a/assets/less/component/map.less
+++ b/assets/less/component/map.less
@@ -470,40 +470,9 @@
 		&.ally12 { fill: @medium-12; }
 	}
 
-	.number {
-		position: absolute;
-		z-index: 800;
-		top: 0; left: 0;
-
-		span {
-			position: absolute;
-			color: rgba(255, 255, 255, .8);
-			font-size: 12px;
-			line-height: 22px; width: 22px;
-			text-align: center;
-			border-radius: 100%;
-			box-shadow: 0 0 1px white;
-
-			&.ally0 { background: #0A0A0A; }
-			&.ally1 { background: @dark-1; }
-			&.ally2 { background: @dark-2; }
-			&.ally3 { background: @dark-3; }
-			&.ally4 { background: @dark-4; }
-			&.ally5 { background: @dark-5; }
-			&.ally6 { background: @dark-6; }
-			&.ally7 { background: @dark-7; }
-			&.ally8 { background: @dark-8; }
-			&.ally9 { background: @dark-9; }
-			&.ally10 { background: @dark-10; }
-			&.ally11 { background: @dark-11; }
-			&.ally12 { background: @dark-12; }
-
-			&.active {
-				background: white;
-				color: black;
-				box-shadow: 0 0 10px black;
-			}
-		}
+	g.active polygon, g.active polygon:hover {
+		fill: #1b9448 !important;
+		stroke: #34bf68 !important;
 	}
 }
 
diff --git a/src/Modules/Gaia/Galaxy/GalaxyConfigurationV6.php b/src/Modules/Gaia/Galaxy/GalaxyConfigurationV6.php
index 23ec28f0d..46f2978a0 100644
--- a/src/Modules/Gaia/Galaxy/GalaxyConfigurationV6.php
+++ b/src/Modules/Gaia/Galaxy/GalaxyConfigurationV6.php
@@ -652,4 +652,33 @@ public function fillSectorsData()
 
 	// display params
 	public $scale = 20;
+
+	public function getPolygonCentroidFromString($vertices_string): array
+	{
+		// Convert string to array of integers
+		$vertices = array_map('intval', explode(',', $vertices_string));
+
+		$num_points = count($vertices) / 2;
+		$cx = 0;
+		$cy = 0;
+		$area = 0;
+
+		for ($i = 0; $i < $num_points; ++$i) {
+			$x1 = $vertices[2 * $i];
+			$y1 = $vertices[2 * $i + 1];
+			$x2 = $vertices[2 * (($i + 1) % $num_points)];
+			$y2 = $vertices[2 * (($i + 1) % $num_points) + 1];
+
+			$factor = ($x1 * $y2 - $x2 * $y1);
+			$cx += ($x1 + $x2) * $factor;
+			$cy += ($y1 + $y2) * $factor;
+			$area += $factor;
+		}
+
+		$area *= 0.5;
+		$cx /= (6 * $area);
+		$cy /= (6 * $area);
+
+		return ['left' => $cx, 'top' => $cy];
+	}
 }
diff --git a/templates/pages/zeus/registration/place_choice.html.twig b/templates/pages/zeus/registration/place_choice.html.twig
index 0ef5197ef..429e53fd4 100644
--- a/templates/pages/zeus/registration/place_choice.html.twig
+++ b/templates/pages/zeus/registration/place_choice.html.twig
@@ -36,29 +36,23 @@
 							<svg class="sectors" viewBox="0, 0, 750, 750" xmlns="http://www.w3.org/2000/svg" style="width: 580px; height: 580px;">
 								{% for sector in sectors %}
 									{% set faction_identifier = sector.faction|default({identifier: 0}).identifier %}
-									<polygon data-id="{{ sector.id }}"
-										class="ally{{ faction_identifier }} {{ faction_identifier == app.session.get('inscription').get('ally') ? 'enabled' : 'disabled' }}"
-										points="{{ galaxy_configuration.getSectorCoord(sector.identifier, rate, 0) }}"
-									/>
+									{% set sectorCoord = galaxy_configuration.getSectorCoord(sector.identifier, rate, 0) %}
+									{% set centroid = galaxy_configuration.getPolygonCentroidFromString(sectorCoord) %}
+									<g class="ally{{ faction_identifier }}" data-sector="{{ sector.identifier }}">
+										<polygon data-id="{{ sector.id }}"
+												 class="ally{{ faction_identifier }} {{ faction_identifier == app.session.get('inscription').get('ally') ? 'enabled' : 'disabled' }}"
+												 points="{{ galaxy_configuration.getSectorCoord(sector.identifier, rate, 0) }}"
+										>
+										</polygon>
+										<text x="{{ centroid.left }}" y="{{ centroid.top }}" text-anchor="middle" fill="white" font-size="14">{{ sector.identifier }}</text>
+									</g>
 								{% endfor %}
 
 							</svg>
-							<div class="number">
-								{% for sector in sectors %}
-									{% set positionX = galaxy_configuration.sectors[loop.index - 1]['display'][0] * rate / 1.35 %}
-									{% set positionY = galaxy_configuration.sectors[loop.index - 1]['display'][1] * rate / 1.35 %}
-
-									<span id="sector{{ sector.identifier }}"
-										  class="ally{{ sector.faction and sector.faction.identifier == app.session.get('inscription').get('ally') ? sector.faction.identifier : 0 }}"
-										  style="top: {{ positionY }}px; left: {{ positionX }}px;">
-										{{- sector.identifier -}}
-									</span>
-								{% endfor %}
-								</div>
-							</div>
 						</div>
 					</div>
 				</div>
+			</div>
 
 			<div class="component inscription color{{ app.session.get('inscription').get('ally') }}">
 				<div class="head">