305 lines
20 KiB
PHP
305 lines
20 KiB
PHP
<?php
|
|
require_once 'db/config.php';
|
|
session_start();
|
|
$db = db();
|
|
|
|
$user_role = 'user';
|
|
if (isset($_SESSION['user_id'])) {
|
|
$stmt = $db->prepare("SELECT role FROM users WHERE id = ?");
|
|
$stmt->execute([$_SESSION['user_id']]);
|
|
$u_data = $stmt->fetch();
|
|
$user_role = $u_data['role'] ?? 'user';
|
|
}
|
|
|
|
$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;
|
|
|
|
// Fetch Dynamic Types and Statuses
|
|
$object_types_db = $db->query("SELECT * FROM celestial_object_types")->fetchAll(PDO::FETCH_ASSOC);
|
|
$statuses_db = $db->query("SELECT * FROM celestial_object_statuses")->fetchAll(PDO::FETCH_ASSOC);
|
|
|
|
$object_types_map = [];
|
|
foreach($object_types_db as $ot) {
|
|
// Get modifiers for this type
|
|
$stmt = $db->prepare("SELECT m.* FROM modifiers m JOIN celestial_object_type_modifiers cotm ON m.id = cotm.modifier_id WHERE cotm.celestial_object_type_id = ?");
|
|
$stmt->execute([$ot['id']]);
|
|
$ot['modifiers'] = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
|
$object_types_map[$ot['slug']] = $ot;
|
|
}
|
|
|
|
$statuses_map = []; foreach($statuses_db as $s) $statuses_map[$s['slug']] = $s;
|
|
|
|
// Grid size: 6x6 = 36 slots per sector
|
|
$grid_size = 36;
|
|
|
|
// Mock Resources
|
|
$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') {
|
|
$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);
|
|
$planet_ids = [];
|
|
foreach ($objects_raw as $obj) {
|
|
$grid[$obj['slot']] = $obj;
|
|
$planet_ids[] = $obj['id'];
|
|
$grid[$obj['slot']]['cities'] = [];
|
|
}
|
|
|
|
if (!empty($planet_ids)) {
|
|
$placeholders = implode(',', array_fill(0, count($planet_ids), '?'));
|
|
$stmt = $db->prepare("SELECT c.*, st.name as type_name
|
|
FROM cities c
|
|
LEFT JOIN settlement_types st ON c.settlement_type_id = st.id
|
|
WHERE c.planet_id IN ($placeholders)");
|
|
$stmt->execute($planet_ids);
|
|
$all_cities = $stmt->fetchAll();
|
|
foreach ($all_cities as $city) {
|
|
foreach ($grid as &$slot_data) {
|
|
if ($slot_data && $slot_data['id'] == $city['planet_id']) {
|
|
$slot_data['cities'][] = $city;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
$stmt = $db->prepare("SELECT name FROM sectors WHERE id = ?");
|
|
$stmt->execute([$sector_id]);
|
|
$sector_info = $stmt->fetch();
|
|
$sector_display_name = $sector_info['name'] ?? "Secteur $sector_id";
|
|
$page_title = "$sector_display_name [G$galaxy_id]";
|
|
} else {
|
|
$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, $statuses_map) {
|
|
return $statuses_map[$status]['color'] ?? 'rgba(255,255,255,0.05)';
|
|
}
|
|
?>
|
|
<!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 { padding: 10px; background: rgba(10, 15, 30, 0.95); border-bottom: 2px solid #2d3545; display: flex; flex-direction: column; align-items: center; gap: 10px; }
|
|
.resource-container { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
|
|
.user-auth-bar { width: 100%; display: flex; justify-content: flex-end; padding: 0 20px; box-sizing: border-box; font-size: 12px; margin-bottom: 5px; }
|
|
.user-auth-bar a { color: #88c0d0; text-decoration: none; margin-left: 15px; display: flex; align-items: center; gap: 5px; }
|
|
.user-auth-bar a:hover { text-decoration: underline; color: #fff; }
|
|
.user-auth-bar .username { color: #ebcb8b; font-weight: bold; }
|
|
.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; }
|
|
.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; }
|
|
.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 { display: grid; grid-template-columns: 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); }
|
|
.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: 100; }
|
|
.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; text-align: center; }
|
|
.object-status { font-size: 9px; color: #8c92a3; }
|
|
.city-label { font-size: 8px; color: #ebcb8b; margin-top: 2px; display: block; width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
|
/* Tooltip Styles */
|
|
.tooltip-box { display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #1e293b; border: 1px solid #3b82f6; padding: 10px; width: 180px; z-index: 1000; box-shadow: 0 10px 25px rgba(0,0,0,0.8); pointer-events: none; }
|
|
.slot:hover .tooltip-box { display: block; }
|
|
.tooltip-title { font-size: 12px; font-weight: bold; color: #88c0d0; border-bottom: 1px solid #334155; margin-bottom: 5px; padding-bottom: 3px; }
|
|
.tooltip-desc { font-size: 10px; color: #8c92a3; margin-bottom: 8px; line-height: 1.3; }
|
|
.mod-list { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
|
|
.mod-item { font-size: 9px; padding: 2px 5px; border-radius: 2px; display: flex; align-items: center; gap: 4px; }
|
|
.mod-bonus { background: rgba(163, 190, 140, 0.2); color: #a3be8c; border: 1px solid rgba(163, 190, 140, 0.4); }
|
|
.mod-malus { background: rgba(191, 97, 106, 0.2); color: #bf616a; border: 1px solid rgba(191, 97, 106, 0.4); }
|
|
|
|
.settlement-title { font-size: 10px; color: #ebcb8b; font-weight: bold; border-top: 1px solid #334155; margin-top: 8px; padding-top: 5px; }
|
|
.settlement-item-tool { font-size: 9px; color: #fff; margin-bottom: 3px; }
|
|
|
|
.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; }
|
|
.breadcrumb { margin-bottom: 20px; font-size: 14px; color: #88c0d0; }
|
|
.breadcrumb a { color: #fff; text-decoration: none; }
|
|
.breadcrumb a:hover { text-decoration: underline; }
|
|
.admin-footer { position: fixed; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.8); padding: 5px 20px; display: flex; justify-content: flex-end; gap: 15px; border-top: 1px solid #2d3545; }
|
|
.admin-footer a { color: #fff; text-decoration: none; font-size: 11px; font-weight: bold; padding: 5px 10px; border-radius: 3px; }
|
|
.btn-mj { background: #ebcb8b; color: #000 !important; }
|
|
.btn-adm { background: #bf616a; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="main-wrapper">
|
|
<header id="top-bar">
|
|
<div class="user-auth-bar">
|
|
<?php if (isset($_SESSION['user_id'])): ?>
|
|
<span>Bienvenue, <span class="username">@<?php echo htmlspecialchars($_SESSION['username']); ?></span></span>
|
|
<a href="profile.php"><i class="fa-solid fa-user-gear"></i> Profil</a>
|
|
<a href="auth.php?logout=1" style="color: #bf616a;"><i class="fa-solid fa-right-from-bracket"></i> Déconnexion</a>
|
|
<?php else: ?>
|
|
<a href="auth.php?page=login"><i class="fa-solid fa-right-to-bracket"></i> Connexion</a>
|
|
<a href="auth.php?page=register"><i class="fa-solid fa-user-plus"></i> S'inscrire</a>
|
|
<?php endif; ?>
|
|
</div>
|
|
<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'): ?> > <?php echo htmlspecialchars($sector_display_name); ?> <?php endif; ?>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 40px; align-items: flex-start; width: 100%; max-width: 1100px; justify-content: center;">
|
|
<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'): ?>
|
|
<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];
|
|
$type_info = $object_types_map[$obj['type']] ?? null;
|
|
?>
|
|
<div class="tooltip-box">
|
|
<div class="tooltip-title"><?php echo htmlspecialchars($obj['name']); ?></div>
|
|
<div class="tooltip-desc"><?php echo htmlspecialchars($type_info['description'] ?? ''); ?></div>
|
|
|
|
<?php if (!empty($obj['cities'])): ?>
|
|
<div class="settlement-title"><i class="fa-solid fa-city"></i> Établissements:</div>
|
|
<?php foreach ($obj['cities'] as $c): ?>
|
|
<div class="settlement-item-tool">
|
|
<strong><?php echo htmlspecialchars($c['name']); ?></strong>
|
|
<span style="color: #8c92a3; font-size: 8px;">(<?php echo htmlspecialchars($c['type_name']); ?>)</span>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
<?php endif; ?>
|
|
|
|
<?php if (!empty($type_info['modifiers'])): ?>
|
|
<div class="mod-list">
|
|
<?php foreach ($type_info['modifiers'] as $m): ?>
|
|
<div class="mod-item <?php echo $m['type'] === 'bonus' ? 'mod-bonus' : 'mod-malus'; ?>">
|
|
<i class="fa-solid <?php echo $m['type'] === 'bonus' ? 'fa-circle-up' : 'fa-circle-down'; ?>"></i>
|
|
<strong><?php echo htmlspecialchars($m['name']); ?>:</strong> <?php echo htmlspecialchars($m['description']); ?>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
<div class="object-icon">
|
|
<?php
|
|
$icon = $type_info['icon'] ?? 'fa-earth-europe';
|
|
$color = getStatusColor($obj['status'], $statuses_map);
|
|
?>
|
|
<i class="fa-solid <?php echo $icon; ?>" style="color: <?php echo $color; ?>;"></i>
|
|
</div>
|
|
<span class="object-name"><?php echo htmlspecialchars($obj['name']); ?></span>
|
|
<span class="object-status"><?php echo $statuses_map[$obj['status']]['name'] ?? ucfirst($obj['status']); ?></span>
|
|
<?php if (!empty($obj['cities'])): ?>
|
|
<span class="city-label"><i class="fa-solid fa-city"></i>
|
|
<?php
|
|
$c_names = array_map(function($c) { return $c['name']; }, $obj['cities']);
|
|
echo htmlspecialchars(implode(', ', $c_names));
|
|
?>
|
|
</span>
|
|
<?php endif; ?>
|
|
<?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: ?>
|
|
<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'; ?>">
|
|
<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'], $statuses_map); }
|
|
?>
|
|
<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>
|
|
|
|
<div class="legend">
|
|
<?php foreach($statuses_db as $s): ?>
|
|
<div class="legend-item"><span class="dot" style="background: <?php echo $s['color']; ?>;"></span> <?php echo $s['name']; ?></div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<?php if ($user_role === 'admin' || $user_role === 'gm'): ?>
|
|
<div class="admin-footer">
|
|
<a href="gm_console.php" target="_blank" class="btn-mj"><i class="fa-solid fa-headset"></i> CONSOLE MG</a>
|
|
<?php if ($user_role === 'admin'): ?>
|
|
<a href="admin.php" target="_blank" class="btn-adm"><i class="fa-solid fa-shield-halved"></i> CONSOLE ADMIN</a>
|
|
<?php endif; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
</body>
|
|
</html>
|