👑 VIP 1
[JHR] Johor
Raja Lvl 83 ⚡ Power: 999,999,999,999,999
đŸȘ” 0
đŸŒŸ 0
⛏ 0
đŸȘ™ 0
đŸšȘ Logout
Notifikasi memuat...
Lvl 1🏰KASTIL UTAMA
Lvl 1đŸ—ĄïžAULA PANGLIMA
Lvl 1đŸ›ĄïžBARAK PASUKAN
Lvl 1đŸ§±BENTENG KOTA
Lvl 1⛓PENJARA
đŸȘ”
Lvl 1đŸȘ”SAWMILL
đŸŒŸ
Lvl 1đŸŒŸFARM
⛏
Lvl 1⛏TAMBANG BESI
đŸȘ™
Lvl 1đŸȘ™GOLD VAULT
đŸš© Antrean Marching (0/5)
🔍 X: 280 Y: 1118
// ========================================================================== // RENDER TILE PETA UTAMA (CLASH OF KINGS STYLE & FITUR LENGKAP) // ========================================================================== function renderMapTile(tileData) { const tileContainer = document.createElement('div'); tileContainer.className = 'map-tile'; tileContainer.style.position = 'absolute'; tileContainer.style.left = `${tileData.x * 64}px`; tileContainer.style.top = `${tileData.y * 64}px`; tileContainer.style.zIndex = Math.floor(tileData.y * 10); // 1. RENDER KOTA / KASTIL PEMAIN / BOT / CAPITAL / RAJA if (tileData.type === 'city' || tileData.is_bot === true || tileData.owner_type === 'bot') { const cityWrapper = document.createElement('div'); cityWrapper.className = 'city-node-container majestic-castle-wrapper'; // --- EFEK ANIMASI NAGA KUNO ORBIT (Khusus Raja / Capital / Castle dengan Naga) --- if (tileData.is_king || tileData.is_capital || tileData.has_dragon) { const dragonContainer = document.createElement('div'); dragonContainer.className = 'golden-dragon-orbit'; const dragonEntity = document.createElement('div'); dragonEntity.className = 'golden-dragon-entity'; dragonContainer.appendChild(dragonEntity); cityWrapper.appendChild(dragonContainer); } // --- BADGE ALIANSI & LEVEL KASTIL --- if (tileData.alliance || tileData.castle_level) { const topBadge = document.createElement('div'); topBadge.className = 'city-top-badge'; let badgeText = ''; if (tileData.alliance) badgeText += `[${tileData.alliance}] `; if (tileData.castle_level) badgeText += `Lv.${tileData.castle_level}`; topBadge.innerHTML = badgeText; cityWrapper.appendChild(topBadge); } // --- VISUAL KASTIL UTAMA --- const castleFrame = document.createElement('div'); castleFrame.className = 'castle-icon-frame'; let castleImgSrc = tileData.custom_icon; if (!castleImgSrc) { if (tileData.is_king || tileData.is_capital) { castleImgSrc = 'assets/images/real_royal_castle.png'; } else if (tileData.owner_type === 'bot') { castleImgSrc = 'assets/images/real_bandit_castle.png'; } else { castleImgSrc = 'assets/images/real_player_castle.png'; } } const cityIcon = document.createElement('img'); cityIcon.src = castleImgSrc; cityIcon.className = 'city-castle-icon majestic-icon'; cityIcon.alt = tileData.name || 'Kastil'; if (tileData.is_player === true) { castleFrame.classList.add('player-own-city-glow'); } else if (tileData.is_king || tileData.is_capital) { castleFrame.classList.add('capital-king-glow'); } castleFrame.appendChild(cityIcon); cityWrapper.appendChild(castleFrame); // --- NAMA PEMANDU / PEMILIK KOTA --- const nameLabel = document.createElement('div'); nameLabel.className = 'city-owner-name premium-label'; if (tileData.is_king) { nameLabel.innerHTML = `👑 ${tileData.name}`; } else { nameLabel.innerText = tileData.name; } cityWrapper.appendChild(nameLabel); tileContainer.appendChild(cityWrapper); } // 2. RENDER BANGUNAN SUMBER DAYA DI PETA (Farm, Lumber, Mine, Iron) else if (tileData.type === 'resource') { const resWrapper = document.createElement('div'); resWrapper.className = 'resource-node-wrapper'; const resIcon = document.createElement('img'); resIcon.src = tileData.icon || 'assets/images/resource_real.png'; resIcon.className = 'resource-icon-real'; const resLabel = document.createElement('div'); resLabel.className = 'res-label-clean'; resLabel.innerText = `${tileData.name} Lvl ${tileData.level || 1}`; resWrapper.appendChild(resIcon); resWrapper.appendChild(resLabel); tileContainer.appendChild(resWrapper); } // 3. RENDER MENARA PERTAHANAN ALIANSI (Alliance Tower / Watchtower) else if (tileData.type === 'alliance_tower') { const towerWrapper = document.createElement('div'); towerWrapper.className = 'alliance-tower-wrapper'; const towerIcon = document.createElement('img'); towerIcon.src = tileData.icon || 'assets/images/alliance_tower.png'; towerIcon.className = 'tower-icon-real'; const towerLabel = document.createElement('div'); towerLabel.className = 'tower-label'; towerLabel.innerHTML = `[${tileData.alliance}] Tower`; towerWrapper.appendChild(towerIcon); towerWrapper.appendChild(towerLabel); tileContainer.appendChild(towerWrapper); } return tileContainer; } // ========================================================================== // EFEK ANIMASI PASUKAN BERJALAN DI PETA (MARCHING TROOPS) // ========================================================================== function renderMarchingTroop(marchData) { const mapContainer = document.getElementById('map-grid-container'); if (!mapContainer) return; const troopEl = document.createElement('div'); troopEl.className = 'marching-troop-entity'; // Tentukan ikon jenis pasukan (Infanteri, Kavaleri, Archer) let troopImg = 'assets/images/troops_march.png'; if (marchData.type === 'cavalry') troopImg = 'assets/images/cavalry_march.png'; if (marchData.type === 'archer') troopImg = 'assets/images/archer_march.png'; troopEl.innerHTML = `
[${marchData.alliance || 'ARMY'}] ${marchData.username}
Pasukan Berjalan
`; // Kalkulasi Koordinat Awal ke Tujuan const startX = marchData.from_x * 64; const startY = marchData.from_y * 64; const endX = marchData.to_x * 64; const endY = marchData.to_y * 64; troopEl.style.left = `${startX}px`; troopEl.style.top = `${startY}px`; mapContainer.appendChild(troopEl); // Jalankan Animasi Transisi CSS Smooth setTimeout(() => { troopEl.style.transition = `left ${marchData.duration_seconds || 10}s linear, top ${marchData.duration_seconds || 10}s linear`; troopEl.style.left = `${endX}px`; troopEl.style.top = `${endY}px`; }, 100); // Hapus elemen setelah sampai tujuan setTimeout(() => { troopEl.remove(); }, (marchData.duration_seconds || 10) * 1000); }