|
|
| (같은 사용자의 중간 판 3개는 보이지 않습니다) |
| 30번째 줄: |
30번째 줄: |
| <div class="form-group hero-display"> | | <div class="form-group hero-display"> |
| <label for="hero1Select">🛡️ 현재 사용 중인 영웅:</label> | | <label for="hero1Select">🛡️ 현재 사용 중인 영웅:</label> |
| <select id="hero1Select" onchange="updateHero1Selection()"></select> | | <select id="hero1Select"></select> |
| <img id="hero1Image" src="https://via.placeholder.com/80/333333/ffffff?text=Hero+1" alt="Your Hero" class="hero-image"> | | <img id="hero1Image" src="" alt="Your Hero" class="hero-image"> |
| </div> | | </div> |
|
| |
|
| <div class="form-group hero-display"> | | <div class="form-group hero-display"> |
| <label for="hero2Select">⚔️ 교체 후보 영웅:</label> | | <label for="hero2Select">⚔️ 교체 후보 영웅:</label> |
| <select id="hero2Select" onchange="updateHeroImage('hero2')"></select> | | <select id="hero2Select"></select> |
| <img id="hero2Image" src="https://via.placeholder.com/80/333333/ffffff?text=Hero+2" alt="Compare Hero" class="hero-image"> | | <img id="hero2Image" src="" alt="Compare Hero" class="hero-image"> |
| </div> | | </div> |
| </div> | | </div> |
|
| |
|
| <button class="calc-btn" onclick="compareHeroes()">영웅 교체 효율 분석하기</button> | | <button id="runCalcBtn" class="calc-btn">영웅 교체 효율 분석하기</button> |
| <p id="message">위 스탯은 기본 위력을 기준으로 하며, 위젯이나 장비는 별도 계산입니다.</p> | | <p id="message">위 스탯은 영웅의 기본 스탯을 기준으로 하며, 위젯이나 전용 장비 수치는 포함되지 않습니다.</p> |
| <div id="results"></div> | | <div id="results"></div> |
| </div> | | </div> |
|
| |
| <script>
| |
| // 1. 레벨(성급/티어) 목록 정의
| |
| const levelNames = [
| |
| '0-Star (T0)', '1-Star (T0)', '2-Star (T0)', '3-Star (T0)', '4-Star (T0)',
| |
| '1-Star (T1)', '2-Star (T1)', '3-Star (T1)', '4-Star (T1)',
| |
| '1-Star (T2)', '2-Star (T2)', '3-Star (T2)', '4-Star (T2)',
| |
| '1-Star (T3)', '2-Star (T3)', '3-Star (T3)', '4-Star (T3)',
| |
| '1-Star (T4)', '2-Star (T4)', '3-Star (T4)', '4-Star (T4)',
| |
| '1-Star (T5)', '2-Star (T5)', '3-Star (T5)', '4-Star (T5)', '5-Star (T5)'
| |
| ];
| |
|
| |
| // 2. 영웅 데이터베이스 (암호화 해제됨 - 천화님이 원하시는 수치를 직접 기입하시면 됩니다)
| |
| // stats 배열의 순서는 위 levelNames의 순서와 1:1로 일치합니다.
| |
| const heroes = [
| |
| {
| |
| name: "1세대: 로사 (Rosa)",
| |
| type: "Infantry",
| |
| stats: [1000, 1200, 1500, 1800, 2200, 2500, 3000, 3500, 4000, 4500, 5000, 5500, 6000, 6500, 7000, 7500, 8000, 8500, 9000, 9500, 10000, 11000, 12000, 13000, 14000, 15000],
| |
| image: "https://via.placeholder.com/80/ff5e00/ffffff?text=Rosa"
| |
| },
| |
| {
| |
| name: "2세대: 헬가 (Helga)",
| |
| type: "Infantry",
| |
| stats: [1500, 1800, 2250, 2700, 3300, 3750, 4500, 5250, 6000, 6750, 7500, 8250, 9000, 9750, 10500, 11250, 12000, 12750, 13500, 14250, 15000, 16500, 18000, 19500, 21000, 22500],
| |
| image: "https://via.placeholder.com/80/0073aa/ffffff?text=Helga"
| |
| },
| |
| {
| |
| name: "3세대: 아마네 (Amane)",
| |
| type: "Cavalry",
| |
| stats: [2250, 2700, 3375, 4050, 4950, 5625, 6750, 7875, 9000, 10125, 11250, 12375, 13500, 14625, 15750, 16875, 18000, 19125, 20250, 21375, 22500, 24750, 27000, 29250, 31500, 33750],
| |
| image: "https://via.placeholder.com/80/28a745/ffffff?text=Amane"
| |
| }
| |
| ];
| |
|
| |
| // 3. 드롭다운 메뉴 초기화 세팅
| |
| function populateDropdowns() {
| |
| const levelSelect = document.getElementById('levelSelect');
| |
| const hero1Select = document.getElementById('hero1Select');
| |
|
| |
| // 레벨 추가
| |
| levelNames.forEach((name, index) => {
| |
| levelSelect.innerHTML += `<option value="${index}">${name}</option>`;
| |
| });
| |
| // 기본으로 4-Star (T5) 정도를 선택 상태로 두기
| |
| levelSelect.selectedIndex = 24;
| |
|
| |
| // 내 영웅 추가
| |
| heroes.forEach((hero, index) => {
| |
| hero1Select.innerHTML += `<option value="${index}">${hero.name}</option>`;
| |
| });
| |
|
| |
| updateHero1Selection(); // 비교 영웅 드롭다운 연동
| |
| }
| |
|
| |
| // 4. 내 영웅 선택 시, 비교 영웅 목록 업데이트 및 이미지 변경
| |
| function updateHero1Selection() {
| |
| const hero1Index = document.getElementById('hero1Select').value;
| |
| const hero2Select = document.getElementById('hero2Select');
| |
| const selectedHero = heroes[hero1Index];
| |
|
| |
| // 내 영웅 이미지 업데이트
| |
| document.getElementById('hero1Image').src = selectedHero.image;
| |
|
| |
| // 비교 영웅 드롭다운 초기화
| |
| hero2Select.innerHTML = '';
| |
|
| |
| // 내 영웅과 같은 타입(보병, 기병 등)이면서 세대가 더 높은 영웅만 필터링해서 보여줌
| |
| heroes.forEach((hero, index) => {
| |
| if(hero.type === selectedHero.type && index > hero1Index) {
| |
| hero2Select.innerHTML += `<option value="${index}">${hero.name}</option>`;
| |
| }
| |
| });
| |
|
| |
| if(hero2Select.options.length === 0) {
| |
| hero2Select.innerHTML = `<option value="">상위 영웅 없음</option>`;
| |
| document.getElementById('hero2Image').src = "https://via.placeholder.com/80/333333/ffffff?text=None";
| |
| } else {
| |
| updateHeroImage('hero2');
| |
| }
| |
| }
| |
|
| |
| // 5. 교체 영웅 이미지 업데이트
| |
| function updateHeroImage(type) {
| |
| if(type === 'hero2') {
| |
| const h2Index = document.getElementById('hero2Select').value;
| |
| if(h2Index !== "") {
| |
| document.getElementById('hero2Image').src = heroes[h2Index].image;
| |
| }
| |
| }
| |
| }
| |
|
| |
| // 6. 🚀 대망의 비교 로직
| |
| function compareHeroes() {
| |
| const levelIdx = document.getElementById('levelSelect').value;
| |
| const h1Idx = document.getElementById('hero1Select').value;
| |
| const h2Idx = document.getElementById('hero2Select').value;
| |
| const resBox = document.getElementById('results');
| |
|
| |
| if(h2Idx === "") {
| |
| resBox.style.display = "block";
| |
| resBox.style.color = "#ff4444";
| |
| resBox.style.borderColor = "#ff4444";
| |
| resBox.innerHTML = "❌ 비교할 상위 영웅이 없습니다.";
| |
| return;
| |
| }
| |
|
| |
| const stat1 = heroes[h1Idx].stats[levelIdx];
| |
| const stat2 = heroes[h2Idx].stats[levelIdx];
| |
|
| |
| resBox.style.display = "block";
| |
|
| |
| if(stat2 > stat1) {
| |
| const diff = Math.round((stat2 / stat1 - 1) * 100);
| |
| resBox.style.color = "#00ff00";
| |
| resBox.style.borderColor = "#00ff00";
| |
| resBox.innerHTML = `✅ 교체를 강력히 추천합니다! <br> (효율 ${diff}% 상승)<br><span style='font-size:13px; color:#aaa;'>현재: ${stat1} vs 교체: ${stat2}</span>`;
| |
| } else {
| |
| resBox.style.color = "#ff4444";
| |
| resBox.style.borderColor = "#ff4444";
| |
| resBox.innerHTML = `❌ 아직 교체할 타이밍이 아닙니다. <br><span style='font-size:13px; color:#aaa;'>현재: ${stat1} vs 교체: ${stat2}</span>`;
| |
| }
| |
| }
| |
|
| |
| // 스크립트 실행
| |
| window.onload = populateDropdowns;
| |
| </script>
| |
| </html> | | </html> |
