|
|
@@ -0,0 +1,241 @@
|
|
|
+(function(){
|
|
|
+ var domReady = (window.MG && window.MG.domReady) || window.__MG_domReady || function(cb){ if (document.readyState==='loading') document.addEventListener('DOMContentLoaded', cb); else cb(); };
|
|
|
+
|
|
|
+ domReady(function(){
|
|
|
+ // On attend que la variable mapData soit définie dans la vue (home.php injecte mapData)
|
|
|
+ if (typeof window.mapData === 'undefined' && typeof mapData !== 'undefined') {
|
|
|
+ window.mapData = mapData;
|
|
|
+ }
|
|
|
+
|
|
|
+ // --- Début du code de MapEditor (copié depuis l'ancien fichier non-modulaire) ---
|
|
|
+ class MapEditor {
|
|
|
+ constructor() {
|
|
|
+ this.canvas = document.getElementById('mapCanvas');
|
|
|
+ this.container = document.querySelector('.map-canvas-container');
|
|
|
+ this.zoomLevel = 1;
|
|
|
+ this.panOffset = { x: 0, y: 0 };
|
|
|
+ this.isDragging = false;
|
|
|
+ this.lastMousePos = { x: 0, y: 0 };
|
|
|
+ this.selectedTile = null;
|
|
|
+ this.tileSize = 50; // Rayon de l'hexagone (du centre au sommet)
|
|
|
+
|
|
|
+ this.init();
|
|
|
+ }
|
|
|
+
|
|
|
+ init() {
|
|
|
+ if (!this.canvas) {
|
|
|
+ console.error('MapEditor: Élément canvas non trouvé!');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!this.container) {
|
|
|
+ console.error('MapEditor: Conteneur non trouvé!');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.setupCanvas();
|
|
|
+ this.renderMap();
|
|
|
+ this.setupEventListeners();
|
|
|
+ this.hideLoading();
|
|
|
+ this.fitToScreen();
|
|
|
+ }
|
|
|
+
|
|
|
+ setupCanvas() {
|
|
|
+ this.canvas.style.transformOrigin = '0 0';
|
|
|
+ }
|
|
|
+
|
|
|
+ axialToPixel(q, r) {
|
|
|
+ if (window.MG && window.MG.geom && typeof window.MG.geom.axialToPixel === 'function') {
|
|
|
+ return window.MG.geom.axialToPixel(this.tileSize, q, r);
|
|
|
+ }
|
|
|
+ // fallback local implementation
|
|
|
+ const size = this.tileSize;
|
|
|
+ const x = size * Math.sqrt(3) * (q + r / 2);
|
|
|
+ const y = size * 1.5 * r;
|
|
|
+ return { x, y };
|
|
|
+ }
|
|
|
+
|
|
|
+ renderMap() {
|
|
|
+ this.canvas.innerHTML = '';
|
|
|
+
|
|
|
+ const hexWidth = this.tileSize * Math.sqrt(3);
|
|
|
+ const hexHeight = this.tileSize * 2;
|
|
|
+
|
|
|
+ const mapWidth = (window.mapData && window.mapData.width) || 5;
|
|
|
+ const mapHeight = (window.mapData && window.mapData.height) || 5;
|
|
|
+ const radius = Math.floor((Math.min(mapWidth, mapHeight) - 1) / 2);
|
|
|
+ if (radius < 0) return;
|
|
|
+
|
|
|
+ const positions = [];
|
|
|
+ let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
|
|
|
+
|
|
|
+ for (let q = -radius; q <= radius; q++) {
|
|
|
+ const rMin = Math.max(-radius, -q - radius);
|
|
|
+ const rMax = Math.min(radius, -q + radius);
|
|
|
+ for (let r = rMin; r <= rMax; r++) {
|
|
|
+ const { x, y } = this.axialToPixel(q, r);
|
|
|
+ positions.push({ q, r, x, y });
|
|
|
+ const halfW = hexWidth / 2;
|
|
|
+ const halfH = hexHeight / 2;
|
|
|
+ if (x - halfW < minX) minX = x - halfW;
|
|
|
+ if (y - halfH < minY) minY = y - halfH;
|
|
|
+ if (x + halfW > maxX) maxX = x + halfW;
|
|
|
+ if (y + halfH > maxY) maxY = y + halfH;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const padding = 20;
|
|
|
+ const canvasWidth = (maxX - minX) + hexWidth + padding;
|
|
|
+ const canvasHeight = (maxY - minY) + hexHeight + padding;
|
|
|
+ this.canvas.style.width = canvasWidth + 'px';
|
|
|
+ this.canvas.style.height = canvasHeight + 'px';
|
|
|
+
|
|
|
+ const offsetX = -minX + padding / 2;
|
|
|
+ const offsetY = -minY + padding / 2;
|
|
|
+ for (const pos of positions) {
|
|
|
+ this.renderHexagon(pos.q, pos.r, pos.x + offsetX, pos.y + offsetY, hexWidth, hexHeight);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ renderHexagon(q, r, x, y, hexWidth, hexHeight) {
|
|
|
+ const hex = document.createElement('div');
|
|
|
+ hex.className = 'hexagon';
|
|
|
+ hex.dataset.q = q;
|
|
|
+ hex.dataset.r = r;
|
|
|
+
|
|
|
+ const expansion = Math.round(hexWidth * 0.004 * 1000) / 1000;
|
|
|
+ const adjWidth = hexWidth + expansion;
|
|
|
+ const adjHeight = hexHeight + expansion;
|
|
|
+
|
|
|
+ const halfW = adjWidth / 2;
|
|
|
+ const halfH = adjHeight / 2;
|
|
|
+
|
|
|
+ hex.style.width = adjWidth + 'px';
|
|
|
+ hex.style.height = adjHeight + 'px';
|
|
|
+ hex.style.left = (Math.round((x - halfW) * 1000) / 1000) + 'px';
|
|
|
+ hex.style.top = (Math.round((y - halfH) * 1000) / 1000) + 'px';
|
|
|
+
|
|
|
+ hex.style.position = 'absolute';
|
|
|
+ hex.style.cursor = 'pointer';
|
|
|
+ hex.style.transition = 'background-color 0.2s';
|
|
|
+ hex.style.backgroundColor = '#ffffff';
|
|
|
+ hex.style.clipPath = 'polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)';
|
|
|
+
|
|
|
+ hex.addEventListener('click', (e) => {
|
|
|
+ e.stopPropagation();
|
|
|
+ this.selectTile(q, r);
|
|
|
+ });
|
|
|
+
|
|
|
+ hex.addEventListener('mouseenter', () => {
|
|
|
+ if (!this.selectedTile || this.selectedTile.q !== q || this.selectedTile.r !== r) {
|
|
|
+ hex.style.backgroundColor = '#e3f2fd';
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ hex.addEventListener('mouseleave', () => {
|
|
|
+ if (!this.selectedTile || this.selectedTile.q !== q || this.selectedTile.r !== r) {
|
|
|
+ hex.style.backgroundColor = '#ffffff';
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ this.canvas.appendChild(hex);
|
|
|
+ }
|
|
|
+
|
|
|
+ selectTile(q, r) {
|
|
|
+ if (this.selectedTile) {
|
|
|
+ const prevHex = this.canvas.querySelector(`[data-q="${this.selectedTile.q}"][data-r="${this.selectedTile.r}"]`);
|
|
|
+ if (prevHex) {
|
|
|
+ prevHex.style.backgroundColor = '#ffffff';
|
|
|
+ prevHex.style.borderColor = '#666';
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ this.selectedTile = { q, r };
|
|
|
+ const hex = this.canvas.querySelector(`[data-q="${q}"][data-r="${r}"]`);
|
|
|
+ if (hex) {
|
|
|
+ hex.style.backgroundColor = '#2196f3';
|
|
|
+ hex.style.borderColor = '#1976d2';
|
|
|
+ }
|
|
|
+
|
|
|
+ this.showTileInfo(q, r);
|
|
|
+ }
|
|
|
+
|
|
|
+ showTileInfo(q, r) {
|
|
|
+ const tileInfo = document.getElementById('tileInfo');
|
|
|
+ const tilePosition = document.getElementById('tilePosition');
|
|
|
+ const tileType = document.getElementById('tileType');
|
|
|
+ const tileProperties = document.getElementById('tileProperties');
|
|
|
+
|
|
|
+ tilePosition.textContent = `Q: ${q}, R: ${r}`;
|
|
|
+ tileType.textContent = 'Vide';
|
|
|
+
|
|
|
+ tileProperties.innerHTML = `...`;
|
|
|
+ tileInfo.style.display = 'block';
|
|
|
+ }
|
|
|
+
|
|
|
+ setupEventListeners() {
|
|
|
+ document.getElementById('zoomIn').addEventListener('click', (e) => { e.preventDefault(); this.zoom(1.2); });
|
|
|
+ document.getElementById('zoomOut').addEventListener('click', (e) => { e.preventDefault(); this.zoom(0.8); });
|
|
|
+ document.getElementById('fitToScreen').addEventListener('click', (e) => { e.preventDefault(); this.fitToScreen(); });
|
|
|
+
|
|
|
+ this.container.addEventListener('mousedown', (e) => {
|
|
|
+ if (e.target === this.container) {
|
|
|
+ this.isDragging = true;
|
|
|
+ this.lastMousePos = { x: e.clientX, y: e.clientY };
|
|
|
+ this.canvas.style.cursor = 'grabbing';
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ document.addEventListener('mousemove', (e) => {
|
|
|
+ if (this.isDragging) {
|
|
|
+ const deltaX = e.clientX - this.lastMousePos.x;
|
|
|
+ const deltaY = e.clientY - this.lastMousePos.y;
|
|
|
+ this.panOffset.x += deltaX;
|
|
|
+ this.panOffset.y += deltaY;
|
|
|
+ this.updateTransform();
|
|
|
+ this.lastMousePos = { x: e.clientX, y: e.clientY };
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ document.addEventListener('mouseup', () => { this.isDragging = false; this.canvas.style.cursor = 'grab'; });
|
|
|
+
|
|
|
+ this.container.addEventListener('click', () => {
|
|
|
+ if (this.selectedTile) { this.selectTile(null, null); document.getElementById('tileInfo').style.display = 'none'; }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ zoom(factor) {
|
|
|
+ if (window.MG && window.MG.geom && typeof window.MG.geom.computeZoom === 'function') {
|
|
|
+ this.zoomLevel = window.MG.geom.computeZoom(this.zoomLevel, factor);
|
|
|
+ } else {
|
|
|
+ this.zoomLevel *= factor;
|
|
|
+ this.zoomLevel = Math.max(0.1, Math.min(5, this.zoomLevel));
|
|
|
+ }
|
|
|
+ this.updateTransform();
|
|
|
+ const el = document.getElementById('zoomLevel'); if (el) el.textContent = Math.round(this.zoomLevel * 100);
|
|
|
+ }
|
|
|
+
|
|
|
+ fitToScreen() { const containerRect = this.container.getBoundingClientRect(); const canvasRect = this.canvas.getBoundingClientRect(); const scaleX = containerRect.width / canvasRect.width; const scaleY = containerRect.height / canvasRect.height; const scale = Math.min(scaleX, scaleY) * 0.9; this.zoomLevel = scale; this.panOffset = { x: 0, y: 0 }; this.updateTransform(); document.getElementById('zoomLevel').textContent = Math.round(this.zoomLevel * 100); }
|
|
|
+
|
|
|
+ updateTransform() { const tx = Math.round(this.panOffset.x); const ty = Math.round(this.panOffset.y); this.canvas.style.transform = `translate(${tx}px, ${ty}px) scale(${this.zoomLevel})`; }
|
|
|
+
|
|
|
+ hideLoading() { const loading = document.getElementById('mapLoading'); if (loading) { loading.classList.remove('d-flex'); loading.style.display = 'none'; } }
|
|
|
+ }
|
|
|
+
|
|
|
+ // Initialiser l'éditeur
|
|
|
+ (function() {
|
|
|
+ function initMapEditor() {
|
|
|
+ try { new MapEditor(); } catch (error) { console.error('Erreur lors de la création de MapEditor:', error); }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (document.readyState === 'loading') {
|
|
|
+ document.addEventListener('DOMContentLoaded', initMapEditor);
|
|
|
+ } else {
|
|
|
+ initMapEditor();
|
|
|
+ }
|
|
|
+ })();
|
|
|
+
|
|
|
+ // --- Fin du code MapEditor ---
|
|
|
+ });
|
|
|
+})();
|
|
|
+
|
Ynats