|
|
|
@ -287,6 +287,7 @@ |
|
|
|
display: none; |
|
|
|
padding: 20px; |
|
|
|
background-color: white; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.game-content.show { |
|
|
|
@ -352,6 +353,7 @@ |
|
|
|
width: 48px; |
|
|
|
height: 48px; |
|
|
|
object-fit: contain; |
|
|
|
margin-right: 15px; |
|
|
|
} |
|
|
|
|
|
|
|
.evolution-list, .breeding-list { |
|
|
|
@ -459,6 +461,37 @@ |
|
|
|
.target-image.grayscale { |
|
|
|
filter: grayscale(100%); |
|
|
|
} |
|
|
|
|
|
|
|
.pokemon-thumbnail.grayscale { |
|
|
|
filter: grayscale(100%); |
|
|
|
} |
|
|
|
|
|
|
|
/* Optional: Add a placeholder background color */ |
|
|
|
.lazy-load { |
|
|
|
background-color: #f0f0f0; |
|
|
|
} |
|
|
|
|
|
|
|
.search-container { |
|
|
|
padding: 10px 0; |
|
|
|
margin-bottom: 10px; |
|
|
|
border-bottom: 1px solid #eee; |
|
|
|
width: 100%; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.game-search { |
|
|
|
width: 100%; |
|
|
|
padding: 8px 12px; |
|
|
|
border: 1px solid #ddd; |
|
|
|
border-radius: 4px; |
|
|
|
font-size: 14px; |
|
|
|
box-sizing: border-box; |
|
|
|
max-width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.pokemon-entry.hidden { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
</style> |
|
|
|
</head> |
|
|
|
<body> |
|
|
|
@ -490,7 +523,7 @@ |
|
|
|
<div class="pokemon-grid"> |
|
|
|
{% for pokemon in group %} |
|
|
|
{% if pokemon %} |
|
|
|
<div class="pokemon-cell" onclick="showDetails('{{ pokemon.ID }}', '{{ pokemon.Form }}', '{{ pokemon.pfic }}', event)" data-dex-number="{{ pokemon.ID }}"> |
|
|
|
<div class="pokemon-cell" onclick="showDetails('{{ pokemon.ID }}', '{{ pokemon.Form }}', '{{ pokemon.pfic }}', event)" data-dex-number="{{ pokemon.ID }}" data-pfic="{{ pokemon.pfic }}"> |
|
|
|
<div class="pokemon-name">{{ pokemon.Name }}</div> |
|
|
|
<img data-src="{{ url_for('static', filename=pokemon.Image) }}" alt="{{ pokemon.Name }} {{ pokemon.Form }}" class="pokemon-image lazy-load" src="{{ url_for('static', filename='images/placeholder.png') }}"> |
|
|
|
<div class="pokemon-form"> |
|
|
|
@ -536,12 +569,19 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="game-content"> |
|
|
|
<div class="search-container"> |
|
|
|
<input type="text" |
|
|
|
class="game-search" |
|
|
|
placeholder="Search Pokémon..." |
|
|
|
oninput="filterGamePokemon(this)"> |
|
|
|
</div> |
|
|
|
{% for pokemon in game.pokemon %} |
|
|
|
<div class="pokemon-entry"> |
|
|
|
<div class="pokemon-entry" data-pfic="{{ pokemon.pfic }}"> |
|
|
|
<div class="pokemon-header" {% if (pokemon.evolve_to|length > 0) or (pokemon.breed_for|length > 0) %}onclick="togglePokemonDetails(this)"{% endif %}> |
|
|
|
<img src="{{ url_for('static', filename='images/pokemon/' + pokemon.pfic + '.png') }}" |
|
|
|
<img data-src="{{ url_for('static', filename='images/pokemon/' + pokemon.pfic + '.png') }}" |
|
|
|
alt="{{ pokemon.name }}" |
|
|
|
class="pokemon-thumbnail"> |
|
|
|
class="pokemon-thumbnail lazy-load" |
|
|
|
src="{{ url_for('static', filename='images/placeholder.png') }}"> |
|
|
|
<div class="pokemon-header-content"> |
|
|
|
<h3 style="margin: 0;"> |
|
|
|
{{ pokemon.name }}{% if pokemon.form_name %} ({{ pokemon.form_name }}){% endif %} |
|
|
|
@ -565,14 +605,15 @@ |
|
|
|
<div class="pokemon-targets-grid"> |
|
|
|
{% if pokemon.evolve_to %} |
|
|
|
{% for evolution in pokemon.evolve_to %} |
|
|
|
<div class="target-card" data-pfic="{{ evolution.pfic }}"> |
|
|
|
<div class="target-card" data-pfic="{{ evolution.pfic }}" data-evolve="true"> |
|
|
|
<div class="target-name"> |
|
|
|
{{ evolution.name }} |
|
|
|
{% if evolution.form_name %}({{ evolution.form_name }}){% endif %} |
|
|
|
</div> |
|
|
|
<img src="{{ url_for('static', filename='images/pokemon/' + evolution.pfic + '.png') }}" |
|
|
|
<img data-src="{{ url_for('static', filename='images/pokemon/' + evolution.pfic + '.png') }}" |
|
|
|
alt="{{ evolution.name }}" |
|
|
|
class="target-image"> |
|
|
|
class="target-image lazy-load" |
|
|
|
src="{{ url_for('static', filename='images/placeholder.png') }}"> |
|
|
|
<span class="target-method">{{ evolution.method }}</span> |
|
|
|
<span class="target-count">Need: {{ evolution.count }}</span> |
|
|
|
</div> |
|
|
|
@ -581,14 +622,15 @@ |
|
|
|
|
|
|
|
{% if pokemon.breed_for %} |
|
|
|
{% for breeding in pokemon.breed_for %} |
|
|
|
<div class="target-card" data-pfic="{{ breeding.pfic }}"> |
|
|
|
<div class="target-card" data-pfic="{{ breeding.pfic }}" data-breed="true"> |
|
|
|
<div class="target-name"> |
|
|
|
{{ breeding.name }} |
|
|
|
{% if breeding.form_name %}({{ breeding.form_name }}){% endif %} |
|
|
|
</div> |
|
|
|
<img src="{{ url_for('static', filename='images/pokemon/' + breeding.pfic + '.png') }}" |
|
|
|
<img data-src="{{ url_for('static', filename='images/pokemon/' + breeding.pfic + '.png') }}" |
|
|
|
alt="{{ breeding.name }}" |
|
|
|
class="target-image"> |
|
|
|
class="target-image lazy-load" |
|
|
|
src="{{ url_for('static', filename='images/placeholder.png') }}"> |
|
|
|
<span class="target-method">Breed</span> |
|
|
|
<span class="target-count">Need: {{ breeding.count }}</span> |
|
|
|
</div> |
|
|
|
@ -722,33 +764,63 @@ |
|
|
|
function updateEfficiencyPlan(pfic, isCaught) { |
|
|
|
const planTab = document.getElementById('efficiency-tab'); |
|
|
|
planTab.querySelectorAll('.pokemon-entry').forEach(entry => { |
|
|
|
// Update for direct matches |
|
|
|
if (entry.dataset.pfic === pfic) { |
|
|
|
updateEntryDisplay(entry, isCaught); |
|
|
|
} |
|
|
|
|
|
|
|
// Update for evolution targets |
|
|
|
entry.querySelectorAll('.target-card').forEach(card => { |
|
|
|
if (card.dataset.pfic === pfic) { |
|
|
|
updateTargetDisplay(card, entry, isCaught); |
|
|
|
} |
|
|
|
}); |
|
|
|
// Update for direct matches |
|
|
|
if (entry.dataset.pfic === pfic) { |
|
|
|
updateEntryDisplay(entry, isCaught); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
function updateEntryDisplay(entry, isCaught) { |
|
|
|
const catchCount = entry.querySelector('.catch-count'); |
|
|
|
let count = parseInt(catchCount.textContent); |
|
|
|
count += isCaught ? -1 : 1; |
|
|
|
catchCount.textContent = count; |
|
|
|
const targetCards = entry.querySelectorAll('.target-card'); |
|
|
|
let totalNeeded = 0; |
|
|
|
let breedCount = 0; |
|
|
|
let evolveCount = 0; |
|
|
|
let initialCount = 1; |
|
|
|
|
|
|
|
// Calculate total needed from all target cards |
|
|
|
targetCards.forEach(card => { |
|
|
|
const targetImage = card.querySelector('.target-image'); |
|
|
|
// Only count targets that aren't caught (don't have grayscale class) |
|
|
|
if (!targetImage.classList.contains('grayscale')) { |
|
|
|
if (card.dataset.breed) { |
|
|
|
// It doesn't matter how many pokemon we breed, we only need one |
|
|
|
if (breedCount == 0) { |
|
|
|
breedCount = 1; |
|
|
|
} |
|
|
|
} else if (card.dataset.evolve) { |
|
|
|
evolveCount += 1; |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
if (isCaught) { |
|
|
|
initialCount = -1; |
|
|
|
} |
|
|
|
|
|
|
|
const pokemonImage = entry.querySelector('.pokemon-thumbnail'); |
|
|
|
pokemonImage.classList.toggle('grayscale', isCaught); |
|
|
|
|
|
|
|
totalNeeded = initialCount + breedCount + evolveCount; |
|
|
|
|
|
|
|
// Update the catch count display |
|
|
|
catchCount.textContent = Math.max(0, totalNeeded); |
|
|
|
|
|
|
|
// Update game total if count changed |
|
|
|
updateGameTotal(entry, isCaught); |
|
|
|
} |
|
|
|
|
|
|
|
function updateTargetDisplay(card, parentEntry, isCaught) { |
|
|
|
const targetImage = card.querySelector('.target-image'); |
|
|
|
targetImage.classList.toggle('grayscale', isCaught); |
|
|
|
updateEntryDisplay(parentEntry, true); // Always decrease parent count |
|
|
|
updateEntryDisplay(parentEntry, isCaught); |
|
|
|
} |
|
|
|
|
|
|
|
function updateGameTotal(entry, isCaught) { |
|
|
|
@ -869,29 +941,67 @@ |
|
|
|
.then(response => response.json()) |
|
|
|
.then(caught => { |
|
|
|
caught.forEach(pfic => { |
|
|
|
const storageTab = document.getElementById('storage-tab'); |
|
|
|
storageTab.querySelectorAll('.pokemon-cell').forEach(cell => { |
|
|
|
if (cell.dataset.pfic === pfic) { |
|
|
|
cell.querySelector('.pokeball-icon').classList.remove('grayscale'); |
|
|
|
} |
|
|
|
}); |
|
|
|
updateEfficiencyPlan(pfic, true); |
|
|
|
|
|
|
|
// Update efficiency plan counts for caught Pokemon |
|
|
|
const planTab = document.getElementById('efficiency-tab'); |
|
|
|
planTab.querySelectorAll('.pokemon-entry').forEach(entry => { |
|
|
|
//const planTab = document.getElementById('efficiency-tab'); |
|
|
|
//planTab.querySelectorAll('.pokemon-entry').forEach(entry => { |
|
|
|
// const targetCards = entry.querySelectorAll('.target-card'); |
|
|
|
// targetCards.forEach(card => { |
|
|
|
// updateEntryDisplay(entry, card.dataset.pfic === pfic); |
|
|
|
// }); |
|
|
|
// Check if this Pokemon is part of any evolution/breeding group |
|
|
|
const targetCards = entry.querySelectorAll('.target-card'); |
|
|
|
targetCards.forEach(card => { |
|
|
|
if (card.dataset.pfic === pfic) { |
|
|
|
// Found as an evolution/breeding target - update parent's catch count |
|
|
|
const catchCount = entry.querySelector('.catch-count'); |
|
|
|
let count = parseInt(catchCount.textContent); |
|
|
|
if (count > 0) { |
|
|
|
count -= 1; |
|
|
|
catchCount.textContent = count; |
|
|
|
} |
|
|
|
//const targetCards = entry.querySelectorAll('.target-card'); |
|
|
|
//targetCards.forEach(card => { |
|
|
|
//if (card.dataset.pfic === pfic) { |
|
|
|
// // Found as an evolution/breeding target - update parent's catch count |
|
|
|
// const catchCount = entry.querySelector('.catch-count'); |
|
|
|
// let count = parseInt(catchCount.textContent); |
|
|
|
// if (count > 0) { |
|
|
|
// count -= 1; |
|
|
|
// catchCount.textContent = count; |
|
|
|
// } |
|
|
|
|
|
|
|
// Update game total |
|
|
|
updateGameTotal(entry, true); |
|
|
|
} |
|
|
|
}); |
|
|
|
// // Update game total |
|
|
|
// updateGameTotal(entry, true); |
|
|
|
// } |
|
|
|
//}); |
|
|
|
}); |
|
|
|
}); |
|
|
|
}); |
|
|
|
}); |
|
|
|
//}); |
|
|
|
|
|
|
|
function filterGamePokemon(input) { |
|
|
|
const searchTerm = input.value.toLowerCase(); |
|
|
|
const gameContent = input.closest('.game-content'); |
|
|
|
|
|
|
|
gameContent.querySelectorAll('.pokemon-entry').forEach(entry => { |
|
|
|
const pokemonName = entry.querySelector('h3').textContent.toLowerCase(); |
|
|
|
let matchFound = pokemonName.includes(searchTerm); |
|
|
|
|
|
|
|
// Search in evolution targets |
|
|
|
if (!matchFound) { |
|
|
|
const evolutionTargets = entry.querySelectorAll('.target-card .target-name'); |
|
|
|
evolutionTargets.forEach(target => { |
|
|
|
if (target.textContent.toLowerCase().includes(searchTerm)) { |
|
|
|
matchFound = true; |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
if (matchFound) { |
|
|
|
entry.classList.remove('hidden'); |
|
|
|
} else { |
|
|
|
entry.classList.add('hidden'); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
</script> |
|
|
|
</body> |
|
|
|
</html> |
|
|
|
|