map-generator/app/Views/home.php

<?php
/**
 * Vue de la page d'accueil
 */
include __DIR__ . '/partials/header.php';
?>

<main class="main-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <!-- Zone de travail principale -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-pencil-square me-2"></i>
                            Éditeur de carte
                        </h5>
                    </div>
                                        <div class="card-body">
                        <?php 
                        $loaded_map = $loaded_map ?? ($GLOBALS['view_data']['loaded_map'] ?? null);
                        $map_data = $map_data ?? ($GLOBALS['view_data']['map_data'] ?? null);
                        $load_error = $load_error ?? ($GLOBALS['view_data']['load_error'] ?? null);
                        ?>
                        
                        <?php if (isset($load_error) && $load_error): ?>
                            <!-- Message d'erreur de chargement -->
                            <div class="alert alert-danger">
                                <i class="bi bi-exclamation-triangle me-2"></i><?php echo htmlspecialchars($load_error); ?>
                            </div>
                            <div class="text-center mt-3">
                                <a href="/projects" class="btn btn-primary">Voir toutes les cartes disponibles</a>
                            </div>
                        <?php elseif (isset($loaded_map) && $loaded_map): ?>
                            <!-- Interface de la carte chargée -->
                            <div class="alert alert-success">Carte chargée avec succès !</div>
                            <!-- Interface de la carte chargée -->
                            <div class="map-editor-container">
                                <!-- Barre d'outils de la carte -->
                                <div class="map-toolbar d-flex justify-content-between align-items-center mb-3">
                                    <div class="d-flex align-items-center gap-2">
                                        <h6 class="mb-0">
                                            <i class="bi bi-map me-2"></i><?php echo htmlspecialchars($map_data['name']); ?>
                                        </h6>
                                        <span class="badge bg-info">
                                            <?php echo $map_data['width']; ?> × <?php echo $map_data['height']; ?>
                                        </span>
                                    </div>
                                    <div class="d-flex align-items-center gap-2">
                                        <small class="text-muted">
                                            Zoom: <span id="zoomLevel">100</span>%
                                        </small>
                                        <div class="btn-group btn-group-sm">
                                            <button class="btn btn-outline-secondary" id="zoomOut" title="Zoom arrière">
                                                <i class="bi bi-zoom-out"></i>
                                            </button>
                                            <button class="btn btn-outline-secondary" id="zoomIn" title="Zoom avant">
                                                <i class="bi bi-zoom-in"></i>
                                            </button>
                                            <button class="btn btn-outline-secondary" id="fitToScreen" title="Adapter à l'écran">
                                                <i class="bi bi-arrows-fullscreen"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <!-- Zone de la carte interactive -->
                                <div class="map-canvas-container border" style="position: relative; overflow: hidden; height: 600px; background-color: #f8f9fa;">
                                    <div id="mapCanvas" style="position: absolute; top: 0; left: 0; cursor: grab; z-index: 1;">
                                        <!-- La carte sera rendue ici via JavaScript -->
                                    </div>
                                    
                                    <!-- Indicateur de chargement -->
                                    <div id="mapLoading" class="d-flex align-items-center justify-content-center" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,0.8); z-index: 10;">
                                        <div class="text-center">
                                            <div class="spinner-border text-primary mb-2" role="status">
                                                <span class="visually-hidden">Chargement...</span>
                                            </div>
                                            <p class="mb-0">Chargement de la carte...</p>
                                        </div>
                                    </div>
                                </div>

                                <!-- Informations de la tuile sélectionnée -->
                                <div id="tileInfo" class="mt-3 p-3 bg-light rounded" style="display: none;">
                                    <h6 class="mb-2">
                                        <i class="bi bi-info-circle me-1"></i>Propriétés de la parcelle
                                    </h6>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <small class="text-muted">Position</small>
                                            <p class="mb-1" id="tilePosition">Q: 0, R: 0</p>
                                        </div>
                                        <div class="col-md-6">
                                            <small class="text-muted">Type</small>
                                            <p class="mb-1" id="tileType">Vide</p>
                                        </div>
                                    </div>
                                    <div id="tileProperties" class="mt-2">
                                        <!-- Les propriétés de la tuile seront affichées ici -->
                                    </div>
                                </div>
                            </div>
                        <?php else: ?>
                            <!-- Zone indiquant qu'aucun projet n'est chargé -->
                            <div class="alert alert-info">Aucune carte chargée</div>
                            <div class="editor-empty border d-flex align-items-center justify-content-center" style="width:100%; height:600px; background-color:#e9ecef;">
                                <div class="text-center">
                                    <!-- Illustration SVG représentant une carte vide -->
                                    <svg role="img" aria-label="Illustration : cadriage avec point d'attention" width="200" height="140" viewBox="0 0 200 140" xmlns="http://www.w3.org/2000/svg" class="mx-auto d-block">
                                        <defs>
                                            <linearGradient id="g" x1="0" x2="1">
                                                <stop offset="0" stop-color="#f8f9fa"/>
                                                <stop offset="1" stop-color="#e9ecef"/>
                                            </linearGradient>
                                        </defs>
                                        <rect x="8" y="12" width="184" height="116" rx="8" fill="url(#g)" stroke="#ced4da" />
                                        <!-- Grid lines -->
                                        <g stroke="#adb5bd" stroke-width="1">
                                            <line x1="20" y1="20" x2="180" y2="20"/>
                                            <line x1="20" y1="40" x2="180" y2="40"/>
                                            <line x1="20" y1="60" x2="180" y2="60"/>
                                            <line x1="20" y1="80" x2="180" y2="80"/>
                                            <line x1="20" y1="100" x2="180" y2="100"/>
                                            <line x1="20" y1="120" x2="180" y2="120"/>
                                            <line x1="20" y1="20" x2="20" y2="120"/>
                                            <line x1="60" y1="20" x2="60" y2="120"/>
                                            <line x1="100" y1="20" x2="100" y2="120"/>
                                            <line x1="140" y1="20" x2="140" y2="120"/>
                                            <line x1="180" y1="20" x2="180" y2="120"/>
                                        </g>
                                        <!-- Point d'attention -->
                                        <rect x="95" y="55" width="10" height="10" fill="#dc3545" stroke="#b02a37" rx="2"/>
                                        <text x="100" y="50" text-anchor="middle" font-size="8" fill="#dc3545" font-weight="bold">!</text>
                                    </svg>

                                    <!-- Texte principal -->
                                    <h5 class="mt-3 mb-1">Aucun projet chargé</h5>

                                    <!-- Explication -->
                                    <p class="text-muted small mb-3">Créez un nouveau projet ou chargez-en un existant pour commencer à éditer une carte.</p>

                                    <!-- Actions rapides -->
                                    <div class="d-flex justify-content-center gap-2">
                                        <a href="/projects/new" class="btn btn-primary btn-sm">Nouveau projet</a>
                                        <a href="/projects" class="btn btn-outline-secondary btn-sm">Charger un projet</a>
                                    </div>
                                    
                                    <!-- Guide de chargement -->
                                    <div class="mt-4 p-3 bg-light rounded">
                                        <h6 class="mb-2">
                                            <i class="bi bi-lightbulb me-1"></i>Comment charger une carte ?
                                        </h6>
                                        <ol class="small mb-0 text-muted">
                                            <li>Allez dans <a href="/projects">Mes projets</a> pour voir vos cartes</li>
                                            <li>Notez l'ID de la carte (affiché à côté du nom)</li>
                                            <li>Ajoutez <code>?load=ID</code> à l'URL (ex: <code>https://map-generator/?load=5</code>)</li>
                                        </ol>
                                    </div>
                                </div>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>

                <?php include __DIR__ . '/partials/project-info.php'; ?>
            </div>
        </div>
    </div>
</main>

<?php
include __DIR__ . '/partials/footer.php';
?>

<?php if ($loaded_map): ?>
<script>
// Données de la carte
const mapData = <?php echo json_encode($map_data); ?>;
const mapWidth = mapData.width;
const mapHeight = mapData.height;
</script>
<script src="/assets/js/editor/map-editor.js"></script>
<?php endif; ?>