265 lines
12 KiB
HTML
265 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Grepolis Remote</title>
|
||
<link rel="stylesheet" href="/static/css/styles.css">
|
||
</head>
|
||
<body>
|
||
|
||
<header>
|
||
<h1><a href="/" style="text-decoration: none; margin-right: 15px; cursor: pointer;" title="Back to Players">⬅️</a> ⚔️ Grepolis Remote</h1>
|
||
<div class="status-indicator">
|
||
<div id="server-status" class="conn-badge">Server…</div>
|
||
<div id="client-status" class="conn-badge">Client…</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Captcha alert banner (hidden until captcha detected) -->
|
||
<div id="captcha-banner" style="display:none">
|
||
<span>⚠️</span>
|
||
<span>CAPTCHA εντοπίστηκε στο παιχνίδι — το script έχει παγώσει αυτόματα. Επίλυσε το captcha για να συνεχίσεις.</span>
|
||
<button id="captcha-dismiss" onclick="window.dismissCaptchaBanner()">Κλείσιμο</button>
|
||
</div>
|
||
|
||
<div class="layout">
|
||
|
||
<!-- Left: Town list -->
|
||
<div id="town-panel">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
||
<h2 style="margin: 0;">Towns</h2>
|
||
<button class="btn btn-gold btn-sm" id="live-btn" onclick="window.requestLiveSync()" title="Request immediate data update from game" style="padding: 4px 8px; font-size: 0.72rem;">⚡ Live Sync</button>
|
||
</div>
|
||
|
||
<div id="town-filters" style="margin-bottom: 15px; padding: 10px; background: #0f3460; border-radius: 6px; border: 1px solid #2a4a6a;">
|
||
<input type="text" id="town-search" placeholder="Αναζήτηση Πόλης..." style="width: 100%; box-sizing: border-box; margin-bottom: 10px; padding: 6px; border-radius: 4px; border: 1px solid #3a5a7a; background: #1a1a24; color: white;" onkeyup="window.renderTowns()">
|
||
|
||
<div style="display: flex; gap: 8px; flex-wrap: wrap;">
|
||
<label style="font-size: 0.8rem; cursor: pointer; display: flex; align-items: center; gap: 4px; background: rgba(0,0,0,0.2); padding: 4px 8px; border-radius: 12px; border: 1px solid #2a4a6a;">
|
||
<input type="checkbox" id="filter-full-wh" onchange="window.renderTowns()"> ⚠️ Γεμάτη Αποθήκη (>95%)
|
||
</label>
|
||
|
||
<label style="font-size: 0.8rem; cursor: pointer; display: flex; align-items: center; gap: 4px; background: rgba(0,0,0,0.2); padding: 4px 8px; border-radius: 12px; border: 1px solid #2a4a6a;">
|
||
<input type="checkbox" id="filter-festival" onchange="window.renderTowns()"> 🎭 Ελεύθεροι Πόροι
|
||
</label>
|
||
|
||
<label style="font-size: 0.8rem; cursor: pointer; display: flex; align-items: center; gap: 4px; background: rgba(0,0,0,0.2); padding: 4px 8px; border-radius: 12px; border: 1px solid #2a4a6a;">
|
||
<input type="checkbox" id="filter-points" onchange="window.renderTowns()"> 📈 10k+ Πόντοι
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="town-list"><p style="color:#444;font-size:0.8rem;">Waiting for data from home PC…</p></div>
|
||
</div>
|
||
|
||
<!-- Top right: Command panel -->
|
||
<div id="command-panel">
|
||
<h2>Send Command</h2>
|
||
<div id="no-town-selected">← Select a town first</div>
|
||
|
||
<!-- New dynamic town details panel -->
|
||
<div id="town-details-panel" style="display:none; margin-bottom: 20px; padding: 12px; background: #0f3460; border-radius: 6px; border: 1px solid #2a4a6a;">
|
||
<h3 id="td-name" style="color: #c8a44a; margin-bottom: 8px; font-size: 1rem; border-bottom: 1px solid #2a4a6a; padding-bottom: 4px;">Town Name</h3>
|
||
|
||
<div style="display: flex; gap: 20px; flex-wrap: wrap;">
|
||
<div style="flex: 1; min-width: 130px;">
|
||
<strong style="font-size: 0.75rem; color: #888; text-transform: uppercase;">Ποροι</strong>
|
||
<div id="td-resources" style="font-size: 0.85rem; margin-top: 4px; line-height: 1.5;"></div>
|
||
<div id="td-market" style="font-size: 0.75rem; color: #6fcfcf; margin-top: 6px; border-top: 1px solid #2a4a6a; padding-top: 4px;"></div>
|
||
</div>
|
||
|
||
<div style="flex: 1; min-width: 130px;">
|
||
<strong style="font-size: 0.75rem; color: #888; text-transform: uppercase;">Γενικα</strong>
|
||
<div id="td-general" style="font-size: 0.85rem; margin-top: 4px; line-height: 1.5;"></div>
|
||
</div>
|
||
|
||
<div style="flex: 1; min-width: 130px;">
|
||
<strong style="font-size: 0.75rem; color: #888; text-transform: uppercase;">Στρατος</strong>
|
||
<div id="td-units" style="font-size: 0.85rem; margin-top: 4px; line-height: 1.5; color: #a4c84a;"></div>
|
||
</div>
|
||
|
||
<div style="flex: 1; min-width: 130px;">
|
||
<strong style="font-size: 0.75rem; color: #888; text-transform: uppercase;">Ερευνες</strong>
|
||
<div id="td-researches" style="font-size: 0.8rem; margin-top: 4px; line-height: 1.5; color: #c8a44a;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="command-form-wrap" style="display:none">
|
||
<div class="command-form">
|
||
|
||
<div class="form-group">
|
||
<label>Command Type</label>
|
||
<select id="cmd-type" onchange="onCmdTypeChange()">
|
||
<option value="" disabled selected>-- Επιλέξτε --</option>
|
||
<option value="build">Build / Upgrade</option>
|
||
<option value="recruit">Recruit Troops</option>
|
||
<option value="market_offer">Παζάρι - Προσφορά</option>
|
||
<option value="research">Ακαδημία - Έρευνες</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Build options - now a button that opens the visual picker -->
|
||
<div class="form-group" id="build-options" style="display:none">
|
||
<label>Building</label>
|
||
<button class="btn btn-gold" id="open-building-modal" onclick="window.openBuildingModal()" style="text-align:left; min-width:200px;">
|
||
<span id="selected-building-label">-- Επιλέξτε Κατασκευή --</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Research options -->
|
||
<div class="form-group" id="research-options" style="display:none">
|
||
<label>Έρευνα</label>
|
||
<button class="btn btn-gold" id="open-academy-modal" onclick="window.openAcademyModal()" style="text-align:left; min-width:200px;">
|
||
<span id="selected-research-label">-- Επιλέξτε Έρευνα --</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Recruit options -->
|
||
<div class="form-group" id="recruit-options" style="display:none">
|
||
<label>Unit</label>
|
||
<select id="unit-select">
|
||
<optgroup label="Ξηρά">
|
||
<option value="sword">Ξιφομάχος</option>
|
||
<option value="slinger">Σφενδονήτης</option>
|
||
<option value="archer">Τοξότης</option>
|
||
<option value="hoplite">Οπλίτης</option>
|
||
<option value="rider">Ιππέας</option>
|
||
<option value="chariot">Άρμα</option>
|
||
<option value="catapult">Καταπέλτης</option>
|
||
</optgroup>
|
||
<optgroup label="Ναυτικές">
|
||
<option value="big_transporter">Μεταφορικό Πλοίο</option>
|
||
<option value="small_transporter">Γρήγορο Μεταφορικό Πλοίο</option>
|
||
<option value="bireme">Διήρης</option>
|
||
<option value="attack_ship">Πλοίο Φάρος</option>
|
||
<option value="trireme">Τριήρης</option>
|
||
<option value="colonize_ship">Αποικιακό Πλοίο</option>
|
||
</optgroup>
|
||
<optgroup label="Μυθικές">
|
||
<option value="medusa">Μέδουσα</option>
|
||
<option value="zyklop">Κύκλωπας</option>
|
||
<option value="harpy">Άρπυια</option>
|
||
<option value="pegasus">Πήγασος</option>
|
||
<option value="minotaur">Μινώταυρος</option>
|
||
<option value="manticore">Μαντιχώρας</option>
|
||
<option value="cerberus">Κέρβερος</option>
|
||
<option value="hydra">Ύδρα</option>
|
||
<option value="sea_monster">Τέρας της Θάλασσας</option>
|
||
</optgroup>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Market options -->
|
||
<div class="form-group" id="market-options" style="display:none">
|
||
<div style="display:flex; gap:10px; margin-bottom:10px;">
|
||
<div style="flex:1;">
|
||
<label>Προσφορά</label>
|
||
<input type="number" id="market-offer-amount" value="1000" min="1" max="99999" style="width:100%;">
|
||
</div>
|
||
<div style="flex:1;">
|
||
<label>Πόρος Προσφοράς</label>
|
||
<select id="market-offer-type">
|
||
<option value="wood">Ξύλο</option>
|
||
<option value="stone">Πέτρα</option>
|
||
<option value="iron">Ασήμι</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex; gap:10px; margin-bottom:10px;">
|
||
<div style="flex:1;">
|
||
<label>Ζήτηση</label>
|
||
<input type="number" id="market-demand-amount" value="1000" min="1" max="99999" style="width:100%;">
|
||
</div>
|
||
<div style="flex:1;">
|
||
<label>Πόρος Ζήτησης</label>
|
||
<select id="market-demand-type">
|
||
<option value="iron">Ασήμι</option>
|
||
<option value="stone">Πέτρα</option>
|
||
<option value="wood">Ξύλο</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex; gap:10px;">
|
||
<div style="flex:1;">
|
||
<label>Χρόνος (Ώρες)</label>
|
||
<select id="market-max-time">
|
||
<option value="1800">0.5</option>
|
||
<option value="3600">1</option>
|
||
<option value="7200">2</option>
|
||
<option value="14400">4</option>
|
||
<option value="28800">8</option>
|
||
<option value="43200">12</option>
|
||
<option value="86400">24</option>
|
||
<option value="172800">48</option>
|
||
</select>
|
||
</div>
|
||
<div style="flex:1;">
|
||
<label>Ορατότητα</label>
|
||
<select id="market-visibility">
|
||
<option value="all">Όλοι</option>
|
||
<option value="alliance">Συμμαχία</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group" id="amount-group" style="display:none">
|
||
<label>Amount</label>
|
||
<input type="number" id="recruit-amount" value="1" min="1" max="9999" style="width:80px;">
|
||
</div>
|
||
|
||
<button class="btn btn-gold" onclick="sendCommand()">Send ⚡</button>
|
||
</div>
|
||
|
||
<div id="build-queue-preview"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bottom right: Command log -->
|
||
<div id="log-panel">
|
||
<h2>Command Log</h2>
|
||
<div id="log-content">
|
||
<p id="empty-log">No commands sent yet.</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
window.PLAYER_ID = "{{ player_id }}";
|
||
</script>
|
||
<script src="/static/js/state.js"></script>
|
||
<script src="/static/js/components/townViewer.js"></script>
|
||
<script src="/static/js/components/commandForm.js"></script>
|
||
<script src="/static/js/components/commandLog.js"></script>
|
||
<script src="/static/js/api.js"></script>
|
||
<script src="/static/js/app.js"></script>
|
||
<!-- ====== Building Picker Modal ====== -->
|
||
<div id="building-modal-overlay" onclick="window.closeBuildingModal(event)">
|
||
<div id="building-modal">
|
||
<div id="building-modal-header">
|
||
<h3>🏛️ Επιλογή Κατασκευής</h3>
|
||
<button id="building-modal-close" onclick="window.closeBuildingModal()">✕</button>
|
||
</div>
|
||
<div id="building-grid"></div>
|
||
<div id="building-modal-queue">
|
||
<div id="building-modal-queue-title">Σειρά Κατασκευών</div>
|
||
<div id="building-modal-queue-items"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- ====== Academy Picker Modal ====== -->
|
||
<div id="academy-modal-overlay" onclick="window.closeAcademyModal(event)">
|
||
<div id="academy-modal">
|
||
<div id="building-modal-header">
|
||
<h3>🦉 Ακαδημία</h3>
|
||
<button id="building-modal-close" onclick="window.closeAcademyModal()">✕</button>
|
||
</div>
|
||
<div id="academy-grid"></div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|