ui revamp
This commit is contained in:
@@ -83,106 +83,30 @@
|
||||
</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 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>
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>Μονάδα</label>
|
||||
<button class="btn btn-gold" id="open-unit-modal" onclick="window.openUnitModal()" style="text-align:left; min-width:200px; padding: 10px; border-radius: 6px; display: flex; justify-content: space-between; align-items: center;">
|
||||
<span id="selected-unit-label">-- Επιλέξτε Μονάδα --</span>
|
||||
<span>▼</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Market options -->
|
||||
<!-- 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="allies">Συμμαχία Μόνο</option>
|
||||
<option value="all">Όλοι</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 id="btn-send" class="btn btn-gold" onclick="window.sendCommand()">Send ⚡</button>
|
||||
</div>
|
||||
|
||||
<div id="build-queue-preview"></div>
|
||||
@@ -203,6 +127,69 @@
|
||||
|
||||
</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">
|
||||
|
||||
Reference in New Issue
Block a user