392 lines
16 KiB
PHP
392 lines
16 KiB
PHP
<?php
|
|
require_once 'db/config.php';
|
|
$db = db();
|
|
|
|
$view = isset($_GET['view']) ? $_GET['view'] : 'sector';
|
|
$galaxy_id = isset($_GET['galaxy_id']) ? (int)$_GET['galaxy_id'] : 1;
|
|
$sector_id = isset($_GET['sector_id']) ? (int)$_GET['sector_id'] : 1;
|
|
|
|
// Grid size: 6x6 = 36 slots per sector
|
|
$grid_size = 36;
|
|
$grid_cols = 6;
|
|
$grid_rows = 6;
|
|
|
|
// Mock Resources (Following the screenshot's style)
|
|
$resources = [
|
|
'Metal' => ['val' => '136 053', 'max' => '1 210 000', 'prod' => '+1 980', 'icon' => 'fa-cube'],
|
|
'Crystal' => ['val' => '127 322', 'max' => '1 010 000', 'prod' => '+1 703', 'icon' => 'fa-gem'],
|
|
'Deuterium' => ['val' => '32 277', 'max' => '50 000', 'prod' => '+28', 'icon' => 'fa-flask'],
|
|
'Energy' => ['val' => '2 100', 'max' => '2 100', 'prod' => '', 'icon' => 'fa-bolt'],
|
|
'Dark Matter' => ['val' => '4 930', 'max' => '', 'prod' => '', 'icon' => 'fa-atom']
|
|
];
|
|
|
|
if ($view === 'sector') {
|
|
// Fetch Objects for the current sector (6x6 grid = 36 slots)
|
|
$stmt = $db->prepare("SELECT * FROM planets WHERE galaxy_id = ? AND sector_id = ? AND slot BETWEEN 1 AND ?");
|
|
$stmt->execute([$galaxy_id, $sector_id, $grid_size]);
|
|
$objects_raw = $stmt->fetchAll();
|
|
|
|
$grid = array_fill(1, $grid_size, null);
|
|
foreach ($objects_raw as $obj) {
|
|
if ($obj['slot'] >= 1 && $obj['slot'] <= $grid_size) {
|
|
$grid[$obj['slot']] = $obj;
|
|
}
|
|
}
|
|
$page_title = "Secteur $sector_id [G$galaxy_id]";
|
|
} else {
|
|
// Galaxy View: Fetch all planets in this galaxy to build mini-maps
|
|
$stmt = $db->prepare("SELECT sector_id, slot, status, type FROM planets WHERE galaxy_id = ? ORDER BY sector_id, slot ASC");
|
|
$stmt->execute([$galaxy_id]);
|
|
$all_planets = $stmt->fetchAll();
|
|
|
|
$sector_data = [];
|
|
$active_sectors = [];
|
|
foreach ($all_planets as $p) {
|
|
$sector_data[$p['sector_id']][$p['slot']] = [
|
|
'status' => $p['status'],
|
|
'type' => $p['type']
|
|
];
|
|
if (!in_array($p['sector_id'], $active_sectors)) {
|
|
$active_sectors[] = (int)$p['sector_id'];
|
|
}
|
|
}
|
|
$page_title = "Galaxie $galaxy_id";
|
|
}
|
|
|
|
function getStatusColor($status, $type = 'planet') {
|
|
if ($status == 'hostile') return '#ef4444'; // Rouge
|
|
if ($status == 'controlled' || $status == 'contested') return '#5e81ac'; // Bleu cassé
|
|
if ($status == 'allied' || $status == 'stable') return '#a3be8c'; // Vert cassé
|
|
if ($status == 'resource' || $type == 'asteroid') return '#f59e0b'; // Ressources / Orange
|
|
if ($status == 'pna') return '#d08770'; // PNA
|
|
if ($status == 'vortex' || $type == 'black_hole') return '#8b5cf6'; // Vortex / Violet
|
|
if ($status == 'empty' || $type == 'empty') return 'rgba(255,255,255,0.05)';
|
|
if ($status == 'inhabited') return '#eceff4'; // Planète inhabitée (Blanc cassé)
|
|
return 'rgba(255,255,255,0.05)'; // Fallback to empty
|
|
}
|
|
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title><?php echo $page_title; ?></title>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
<link href="assets/css/custom.css?v=<?php echo time(); ?>" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
background: #000;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: Arial, sans-serif;
|
|
color: #fff;
|
|
background-image: radial-gradient(circle at 50% 50%, #1a2a4a 0%, #000 70%);
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
#main-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
header#top-bar {
|
|
height: auto;
|
|
padding: 10px;
|
|
background: rgba(10, 15, 30, 0.95);
|
|
border-bottom: 2px solid #2d3545;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.resource-container {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.resource-box {
|
|
background: #0a0a0a;
|
|
border: 1px solid #3b4252;
|
|
padding: 5px 15px;
|
|
text-align: left;
|
|
min-width: 140px;
|
|
position: relative;
|
|
}
|
|
|
|
.resource-box i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); opacity: 0.3; font-size: 20px; }
|
|
.resource-name { font-size: 10px; color: #8c92a3; text-transform: uppercase; }
|
|
.resource-value { font-size: 13px; font-weight: bold; color: #fff; }
|
|
.resource-prod { font-size: 10px; color: #22c55e; }
|
|
|
|
#game-container {
|
|
flex-grow: 1;
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-panel {
|
|
background: rgba(20, 30, 50, 0.95);
|
|
border: 1px solid #4c566a;
|
|
padding: 15px;
|
|
width: 200px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 0 15px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.nav-panel h3 { margin: 0 0 10px 0; font-size: 14px; text-transform: uppercase; color: #88c0d0; border-bottom: 1px solid #4c566a; padding-bottom: 5px; }
|
|
.nav-panel div { margin-bottom: 8px; font-size: 12px; }
|
|
.nav-panel label { display: inline-block; width: 60px; color: #8c92a3; }
|
|
.nav-panel input { width: 60px; background: #000; border: 1px solid #4c566a; color: #fff; padding: 2px 5px; text-align: center; }
|
|
.nav-panel button { width: 100%; background: #4c566a; border: none; color: #fff; padding: 5px; margin-top: 10px; cursor: pointer; text-transform: uppercase; font-weight: bold; }
|
|
.nav-panel button:hover { background: #5e81ac; }
|
|
|
|
/* Main Sector Map (6x6 Grid) */
|
|
.galaxy-map {
|
|
background: rgba(0, 0, 0, 0.9);
|
|
border: 2px solid #2d3545;
|
|
padding: 1px;
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 120px);
|
|
grid-template-rows: repeat(6, 100px);
|
|
gap: 1px;
|
|
position: relative;
|
|
}
|
|
|
|
/* Galaxy View (Grid of Sectors - 6x6) */
|
|
.sector-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 160px);
|
|
grid-template-rows: repeat(6, 130px);
|
|
gap: 10px;
|
|
}
|
|
|
|
.sector-card {
|
|
background: rgba(10, 15, 30, 0.9);
|
|
border: 1px solid #3b4252;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
text-decoration: none;
|
|
color: #fff;
|
|
padding: 10px;
|
|
position: relative;
|
|
}
|
|
|
|
.sector-card:hover {
|
|
border-color: #88c0d0;
|
|
background: rgba(20, 30, 50, 0.95);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 0 15px rgba(136, 192, 208, 0.2);
|
|
}
|
|
|
|
.sector-card.empty { opacity: 0.7; }
|
|
|
|
/* Mini-map Grid (6x6) */
|
|
.mini-map {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 8px);
|
|
grid-template-rows: repeat(6, 8px);
|
|
gap: 2px;
|
|
margin-bottom: 12px;
|
|
background: rgba(0,0,0,0.7);
|
|
padding: 5px;
|
|
border: 1px solid #4c566a;
|
|
}
|
|
|
|
.mini-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: rgba(255,255,255,0.05);
|
|
border-radius: 1px;
|
|
}
|
|
|
|
.slot {
|
|
background: #050505;
|
|
border: 1px solid #1a1a1a;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.slot:hover {
|
|
background: #111;
|
|
border-color: #3b82f6;
|
|
z-index: 10;
|
|
}
|
|
|
|
.slot-id {
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 5px;
|
|
font-size: 9px;
|
|
color: #444;
|
|
}
|
|
|
|
.object-icon {
|
|
font-size: 24px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.object-name { font-size: 10px; font-weight: bold; color: #3b82f6; }
|
|
.object-status { font-size: 9px; color: #8c92a3; }
|
|
|
|
.legend {
|
|
margin-top: 20px;
|
|
background: rgba(10, 15, 30, 0.95);
|
|
border: 1px solid #2d3545;
|
|
padding: 10px 20px;
|
|
display: flex;
|
|
gap: 15px;
|
|
font-size: 10px;
|
|
flex-wrap: wrap;
|
|
max-width: 1000px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.legend-item { display: flex; align-items: center; gap: 5px; }
|
|
.dot { width: 8px; height: 8px; border-radius: 1px; border: 1px solid rgba(255,255,255,0.2); }
|
|
|
|
.breadcrumb {
|
|
margin-bottom: 20px;
|
|
font-size: 14px;
|
|
color: #88c0d0;
|
|
}
|
|
.breadcrumb a { color: #fff; text-decoration: none; }
|
|
.breadcrumb a:hover { text-decoration: underline; }
|
|
|
|
.admin-link { position: fixed; bottom: 10px; right: 10px; background: #bf616a; color: #fff; padding: 5px 10px; text-decoration: none; font-size: 10px; font-weight: bold; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="main-wrapper">
|
|
<header id="top-bar">
|
|
<div class="resource-container">
|
|
<?php foreach($resources as $name => $res): ?>
|
|
<div class="resource-box">
|
|
<div class="resource-name"><?php echo $name; ?></div>
|
|
<div class="resource-value"><?php echo $res['val']; ?></div>
|
|
<div class="resource-prod"><?php echo $res['prod']; ?></div>
|
|
<i class="fa-solid <?php echo $res['icon']; ?>"></i>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="game-container">
|
|
<div class="breadcrumb">
|
|
<a href="?view=galaxy&galaxy_id=<?php echo $galaxy_id; ?>">Galaxie <?php echo $galaxy_id; ?></a>
|
|
<?php if($view === 'sector'): ?>
|
|
> Secteur <?php echo $sector_id; ?>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 40px; align-items: flex-start; width: 100%; max-width: 1100px; justify-content: center;">
|
|
<!-- Navigation -->
|
|
<div class="nav-panel">
|
|
<h3>Univers</h3>
|
|
<form method="GET">
|
|
<input type="hidden" name="view" value="<?php echo $view; ?>">
|
|
<div>
|
|
<label>Galaxie</label>
|
|
<input type="number" name="galaxy_id" value="<?php echo $galaxy_id; ?>" min="1">
|
|
</div>
|
|
<?php if($view === 'sector'): ?>
|
|
<div>
|
|
<label>Secteur</label>
|
|
<input type="number" name="sector_id" value="<?php echo $sector_id; ?>" min="1">
|
|
</div>
|
|
<?php endif; ?>
|
|
<button type="submit">Localiser</button>
|
|
</form>
|
|
<?php if($view === 'sector'): ?>
|
|
<button onclick="location.href='?view=galaxy&galaxy_id=<?php echo $galaxy_id; ?>'" style="background: #3b4252; margin-top: 5px;">Vue Galaxie</button>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<?php if($view === 'sector'): ?>
|
|
<!-- Sector Map (6x6 Grid) -->
|
|
<div class="galaxy-map">
|
|
<?php for($i=1; $i<=$grid_size; $i++): ?>
|
|
<div class="slot">
|
|
<span class="slot-id"><?php echo $i; ?></span>
|
|
<?php if (isset($grid[$i])): $obj = $grid[$i]; ?>
|
|
<div class="object-icon">
|
|
<?php
|
|
$icon = 'fa-earth-europe';
|
|
$color = getStatusColor($obj['status'], $obj['type']);
|
|
if ($obj['type'] == 'asteroid') { $icon = 'fa-mountain'; }
|
|
if ($obj['type'] == 'black_hole') { $icon = 'fa-circle-dot'; }
|
|
if ($obj['type'] == 'star') { $icon = 'fa-sun'; }
|
|
?>
|
|
<i class="fa-solid <?php echo $icon; ?>" style="color: <?php echo $color; ?>;"></i>
|
|
</div>
|
|
<span class="object-name"><?php echo $obj['name']; ?></span>
|
|
<span class="object-status"><?php echo ucfirst($obj['status']); ?></span>
|
|
<?php else: ?>
|
|
<div style="opacity: 0.05;"><i class="fa-solid fa-circle fa-sm"></i></div>
|
|
<?php endif; ?>
|
|
</div>
|
|
<?php endfor; ?>
|
|
</div>
|
|
<?php else: ?>
|
|
<!-- Galaxy View (Grid of Sectors - 6x6) -->
|
|
<div class="sector-grid">
|
|
<?php for($s=1; $s<=$grid_size; $s++):
|
|
$isActive = in_array($s, $active_sectors);
|
|
?>
|
|
<a href="?view=sector&galaxy_id=<?php echo $galaxy_id; ?>§or_id=<?php echo $s; ?>" class="sector-card <?php echo $isActive ? '' : 'empty'; ?>">
|
|
<!-- Mini Map Preview (6x6 Grid) -->
|
|
<div class="mini-map">
|
|
<?php for($p=1; $p<=$grid_size; $p++):
|
|
$dotColor = 'rgba(255,255,255,0.05)';
|
|
if (isset($sector_data[$s][$p])) {
|
|
$dotColor = getStatusColor($sector_data[$s][$p]['status'], $sector_data[$s][$p]['type']);
|
|
}
|
|
?>
|
|
<div class="mini-dot" style="background-color: <?php echo $dotColor; ?>;"></div>
|
|
<?php endfor; ?>
|
|
</div>
|
|
|
|
<div style="font-size: 10px; color: #88c0d0;">SECTEUR</div>
|
|
<div style="font-size: 20px; font-weight: bold;"><?php echo $s; ?></div>
|
|
<?php if($isActive): ?>
|
|
<div style="font-size: 8px; color: #a3be8c; margin-top: 5px;"><i class="fa-solid fa-check"></i> Actif</div>
|
|
<?php else: ?>
|
|
<div style="font-size: 8px; color: #4c566a; margin-top: 5px;">Inexploré</div>
|
|
<?php endif; ?>
|
|
</a>
|
|
<?php endfor; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<!-- Legend -->
|
|
<div class="legend">
|
|
<div class="legend-item"><span class="dot" style="background: rgba(255,255,255,0.05);"></span> Système vide</div>
|
|
<div class="legend-item"><span class="dot" style="background: #eceff4;"></span> Planète inhabitée</div>
|
|
<div class="legend-item"><span class="dot" style="background: #ef4444;"></span> Planète hostile</div>
|
|
<div class="legend-item"><span class="dot" style="background: #f59e0b;"></span> Ressources</div>
|
|
<div class="legend-item"><span class="dot" style="background: #d08770;"></span> Planète en PNA</div>
|
|
<div class="legend-item"><span class="dot" style="background: #a3be8c;"></span> Planète alliée / stable</div>
|
|
<div class="legend-item"><span class="dot" style="background: #5e81ac;"></span> Planète contrôlée</div>
|
|
<div class="legend-item"><span class="dot" style="background: #8b5cf6;"></span> Vortex</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<a href="admin.php" class="admin-link">Console MJ</a>
|
|
</body>
|
|
</html>
|