304 lines
15 KiB
HTML
304 lines
15 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" style="display: flex; align-items: center; gap: 10px;">
|
||
<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; border-radius: 4px; border: 1px solid #c8a44a;">⚡ Live Sync</button>
|
||
<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>
|
||
</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-not-building" onchange="window.renderTowns()"> 🏗️ Δεν χτίζει
|
||
</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" style="display: flex; flex-direction: column; gap: 15px;">
|
||
|
||
<!-- Segmented Control Row -->
|
||
<div class="segmented-control" id="cmd-type-buttons" style="display: flex; gap: 5px; background: #16213e; padding: 4px; border-radius: 8px; border: 1px solid #2a4a6a;">
|
||
<button class="seg-btn" id="seg-build" onclick="window.setCmdType('build', true)" style="flex: 1; padding: 10px; border: none; background: transparent; color: #888; border-radius: 6px; cursor: pointer; transition: 0.2s;">🏗️ Κατασκευές</button>
|
||
<button class="seg-btn" id="seg-recruit" onclick="window.setCmdType('recruit', true)" style="flex: 1; padding: 10px; border: none; background: transparent; color: #888; border-radius: 6px; cursor: pointer; transition: 0.2s;">⚔️ Στρατός</button>
|
||
<button class="seg-btn" id="seg-market" onclick="window.setCmdType('market_offer', true)" style="flex: 1; padding: 10px; border: none; background: transparent; color: #888; border-radius: 6px; cursor: pointer; transition: 0.2s;">🛒 Παζάρι</button>
|
||
<button class="seg-btn" id="seg-research" onclick="window.setCmdType('research', true)" style="flex: 1; padding: 10px; border: none; background: transparent; color: #888; border-radius: 6px; cursor: pointer; transition: 0.2s;">🦉 Έρευνα</button>
|
||
</div>
|
||
|
||
<!-- Dynamic Selection Area -->
|
||
<div id="selection-area" style="display:none; align-items: center; gap: 10px; flex-wrap: wrap;">
|
||
<button class="btn btn-gold" id="active-selection-display" onclick="window.reopenActiveModal()" style="min-width: 250px; padding: 10px 15px; border-radius: 6px; display: flex; justify-content: space-between; align-items: center; font-weight: bold;">
|
||
<span id="selection-label">-- Επιλέξτε --</span>
|
||
</button>
|
||
|
||
<div id="recruit-amount-wrap" style="display:none; align-items: center; gap: 5px; background: #16213e; padding: 8px 12px; border-radius: 6px; border: 1px solid #2a4a6a;">
|
||
<label style="font-size:0.85rem; color:#ccc; margin:0;">Ποσότητα:</label>
|
||
<input type="number" id="recruit-amount" value="1" min="1" max="9999" style="width: 70px; background: #0f3460; color: #fff; border: 1px solid #c8a44a; border-radius: 4px; padding: 4px 8px;">
|
||
</div>
|
||
|
||
<button id="btn-send" class="btn btn-gold" onclick="window.sendCommand()" style="margin-left: auto; padding: 10px 20px; font-size: 1rem;">Send ⚡</button>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div id="build-queue-preview"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bottom right: Build Queue / Command Log (tabbed) -->
|
||
<div id="log-panel">
|
||
<div style="display:flex; align-items:center; gap:8px; margin-bottom:12px; border-bottom:1px solid #2a3a5a; padding-bottom:10px;">
|
||
<h2 style="margin:0; flex:1;">Ουρά Κατασκευών</h2>
|
||
<button id="tab-queue" class="log-tab-btn tab-active" onclick="window.switchToQueueMode()">🏗️ Ουρά</button>
|
||
<button id="tab-log" class="log-tab-btn" onclick="window.switchToLogMode()">📋 Ιστορικό</button>
|
||
</div>
|
||
<div id="log-content">
|
||
<p style="color:#555;font-size:0.85rem;padding:12px 0;">← Επιλέξτε πόλη για να δείτε την ουρά.</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ====== Market Modal ====== -->
|
||
<div class="modal-overlay" id="market-modal-overlay" onclick="window.closeMarketModal(event)">
|
||
<div class="custom-modal" id="market-modal" style="max-width: 500px;">
|
||
<div class="modal-header">
|
||
<h3>🛒 Ρυθμίσεις Παζαριού</h3>
|
||
<button class="modal-close" onclick="window.closeMarketModal()">✕</button>
|
||
</div>
|
||
<div style="padding: 15px;">
|
||
<div style="display:flex; gap:10px; margin-bottom:10px;">
|
||
<div style="flex:1;">
|
||
<label style="color:#ccc; font-size:0.85rem;">Προσφορά</label>
|
||
<input type="number" id="market-offer-amount" value="1000" min="1" max="99999" style="width:100%; background:#0f3460; color:#fff; border:1px solid #2a4a6a; border-radius:4px; padding:6px;">
|
||
</div>
|
||
<div style="flex:1;">
|
||
<label style="color:#ccc; font-size:0.85rem;">Πόρος Προσφοράς</label>
|
||
<select id="market-offer-type" style="width:100%; background:#0f3460; color:#fff; border:1px solid #2a4a6a; border-radius:4px; padding:6px;">
|
||
<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 style="color:#ccc; font-size:0.85rem;">Ζήτηση</label>
|
||
<input type="number" id="market-demand-amount" value="1000" min="1" max="99999" style="width:100%; background:#0f3460; color:#fff; border:1px solid #2a4a6a; border-radius:4px; padding:6px;">
|
||
</div>
|
||
<div style="flex:1;">
|
||
<label style="color:#ccc; font-size:0.85rem;">Πόρος Ζήτησης</label>
|
||
<select id="market-demand-type" style="width:100%; background:#0f3460; color:#fff; border:1px solid #2a4a6a; border-radius:4px; padding:6px;">
|
||
<option value="iron">Ασήμι</option>
|
||
<option value="stone">Πέτρα</option>
|
||
<option value="wood">Ξύλο</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex; gap:10px; margin-bottom:20px;">
|
||
<div style="flex:1;">
|
||
<label style="color:#ccc; font-size:0.85rem;">Χρόνος (Ώρες)</label>
|
||
<select id="market-max-time" style="width:100%; background:#0f3460; color:#fff; border:1px solid #2a4a6a; border-radius:4px; padding:6px;">
|
||
<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 style="color:#ccc; font-size:0.85rem;">Ορατότητα</label>
|
||
<select id="market-visibility" style="width:100%; background:#0f3460; color:#fff; border:1px solid #2a4a6a; border-radius:4px; padding:6px;">
|
||
<option value="allies">Συμμαχία Μόνο</option>
|
||
<option value="all">Όλοι</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-gold" onclick="window.saveMarketModal()" style="width:100%; padding:10px; font-weight:bold;">✅ Αποθήκευση Προσφοράς</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ====== 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>
|
||
<!-- ====== Unit Picker Modal ====== -->
|
||
<div id="unit-modal-overlay" class="modal-overlay" onclick="window.closeUnitModal(event)">
|
||
<div id="unit-modal" class="custom-modal">
|
||
<div class="modal-header">
|
||
<h3>⚔️ Επιλογή Μονάδας</h3>
|
||
<button id="unit-modal-close" onclick="window.closeUnitModal()">✕</button>
|
||
</div>
|
||
<div id="unit-grid" style="display:flex; flex-wrap:wrap; gap:10px; max-height:70vh; overflow-y:auto; padding:10px 5px;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ====== Academy Picker Modal ====== -->
|
||
<div id="academy-modal-overlay" onclick="window.closeAcademyModal(event)">
|
||
<div id="academy-modal">
|
||
<div id="academy-modal-header">
|
||
<h3>🦉 Ακαδημία</h3>
|
||
<button id="academy-modal-close" onclick="window.closeAcademyModal()">✕</button>
|
||
</div>
|
||
<div id="academy-grid"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
/* Tab buttons for queue / log toggle */
|
||
.log-tab-btn {
|
||
background: transparent;
|
||
border: 1px solid #2a3a5a;
|
||
color: #666;
|
||
padding: 4px 10px;
|
||
border-radius: 6px;
|
||
font-size: 0.75rem;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
font-family: inherit;
|
||
}
|
||
.log-tab-btn:hover { border-color: #4a7aaa; color: #aaa; }
|
||
.log-tab-btn.tab-active { border-color: #c8a44a; color: #c8a44a; background: rgba(200,164,74,0.1); }
|
||
|
||
/* Draggable build queue row */
|
||
.bq-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 8px 10px;
|
||
border-radius: 8px;
|
||
border: 1px solid #1a2a3a;
|
||
margin-bottom: 5px;
|
||
background: #0d1e30;
|
||
cursor: default;
|
||
transition: background 0.15s, border-color 0.15s;
|
||
user-select: none;
|
||
}
|
||
.bq-row:hover { background: #112038; border-color: #2a4a6a; }
|
||
.bq-row.bq-drag-over { border-color: #c8a44a; background: rgba(200,164,74,0.08); }
|
||
.bq-handle {
|
||
cursor: grab;
|
||
font-size: 1.1rem;
|
||
color: #3a5a7a;
|
||
line-height: 1;
|
||
flex-shrink: 0;
|
||
padding: 0 2px;
|
||
}
|
||
.bq-handle:hover { color: #c8a44a; }
|
||
.bq-pos {
|
||
width: 18px;
|
||
text-align: right;
|
||
font-size: 0.72rem;
|
||
color: #3a5a7a;
|
||
font-weight: 700;
|
||
flex-shrink: 0;
|
||
}
|
||
.bq-icon { font-size: 1.1rem; flex-shrink: 0; }
|
||
.bq-name { flex: 1; font-size: 0.88rem; color: #d0d0d0; }
|
||
.bq-cancel-btn {
|
||
background: transparent;
|
||
border: 1px solid #3a2a2a;
|
||
color: #884444;
|
||
border-radius: 4px;
|
||
padding: 2px 6px;
|
||
font-size: 0.75rem;
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
flex-shrink: 0;
|
||
}
|
||
.bq-cancel-btn:hover { background: rgba(200,80,80,0.15); border-color: #cc4444; color: #ff6666; }
|
||
</style>
|
||
<script>
|
||
window.PLAYER_ID = "{{ player_id }}";
|
||
</script>
|
||
<script src="/static/js/state.js?v=6"></script>
|
||
<script src="/static/js/components/townViewer.js?v=6"></script>
|
||
<script src="/static/js/components/commandForm.js?v=6"></script>
|
||
<script src="/static/js/components/commandLog.js?v=6"></script>
|
||
<script src="/static/js/api.js?v=6"></script>
|
||
<script src="/static/js/app.js?v=6"></script>
|
||
</body>
|
||
</html>
|