|
|
|
@ -492,6 +492,32 @@ |
|
|
|
.pokemon-entry.hidden { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
|
|
|
|
.game-sections { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
gap: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.completed-section { |
|
|
|
border-top: 2px solid #eee; |
|
|
|
margin-top: 20px; |
|
|
|
padding-top: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.section-title { |
|
|
|
color: #4CAF50; |
|
|
|
margin: 0 0 15px 0; |
|
|
|
font-size: 1.2em; |
|
|
|
} |
|
|
|
|
|
|
|
.completed-pokemon { |
|
|
|
opacity: 0.7; |
|
|
|
} |
|
|
|
|
|
|
|
.completed-pokemon .pokemon-entry { |
|
|
|
background-color: #f9f9f9; |
|
|
|
} |
|
|
|
</style> |
|
|
|
</head> |
|
|
|
<body> |
|
|
|
@ -575,72 +601,81 @@ |
|
|
|
placeholder="Search Pokémon..." |
|
|
|
oninput="filterGamePokemon(this)"> |
|
|
|
</div> |
|
|
|
{% for pokemon in game.pokemon %} |
|
|
|
<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 data-src="{{ url_for('static', filename='images/pokemon/' + pokemon.pfic + '.png') }}" |
|
|
|
alt="{{ pokemon.name }}" |
|
|
|
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 %} |
|
|
|
</h3> |
|
|
|
<div class="pokemon-header-right"> |
|
|
|
<div class="catch-count-container"> |
|
|
|
<img src="{{ url_for('static', filename='images/pokeball_color.png') }}" |
|
|
|
alt="Catch count" |
|
|
|
class="catch-count-pokeball" |
|
|
|
data-pfic="{{ pokemon.pfic }}"> |
|
|
|
<span class="catch-count">{{ pokemon.catch_count }}</span> |
|
|
|
</div> |
|
|
|
{% if (pokemon.evolve_to|length > 0) or (pokemon.breed_for|length > 0) %} |
|
|
|
<span class="toggle-icon">▼</span> |
|
|
|
{% endif %} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="pokemon-details"> |
|
|
|
{% if pokemon.evolve_to or pokemon.breed_for %} |
|
|
|
<div class="pokemon-targets-grid"> |
|
|
|
{% if pokemon.evolve_to %} |
|
|
|
{% for evolution in pokemon.evolve_to %} |
|
|
|
<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 data-src="{{ url_for('static', filename='images/pokemon/' + evolution.pfic + '.png') }}" |
|
|
|
alt="{{ evolution.name }}" |
|
|
|
class="target-image lazy-load" |
|
|
|
<div class="game-sections"> |
|
|
|
<div class="active-section"> |
|
|
|
{% for pokemon in game.pokemon %} |
|
|
|
<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 data-src="{{ url_for('static', filename='images/pokemon/' + pokemon.pfic + '.png') }}" |
|
|
|
alt="{{ pokemon.name }}" |
|
|
|
class="pokemon-thumbnail 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 class="pokemon-header-content"> |
|
|
|
<h3 style="margin: 0;"> |
|
|
|
{{ pokemon.name }}{% if pokemon.form_name %} ({{ pokemon.form_name }}){% endif %} |
|
|
|
</h3> |
|
|
|
<div class="pokemon-header-right"> |
|
|
|
<div class="catch-count-container"> |
|
|
|
<img src="{{ url_for('static', filename='images/pokeball_color.png') }}" |
|
|
|
alt="Catch count" |
|
|
|
class="catch-count-pokeball" |
|
|
|
data-pfic="{{ pokemon.pfic }}"> |
|
|
|
<span class="catch-count">{{ pokemon.catch_count }}</span> |
|
|
|
</div> |
|
|
|
{% if (pokemon.evolve_to|length > 0) or (pokemon.breed_for|length > 0) %} |
|
|
|
<span class="toggle-icon">▼</span> |
|
|
|
{% endif %} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
{% endfor %} |
|
|
|
{% endif %} |
|
|
|
|
|
|
|
{% if pokemon.breed_for %} |
|
|
|
{% for breeding in pokemon.breed_for %} |
|
|
|
<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 class="pokemon-details"> |
|
|
|
{% if pokemon.evolve_to or pokemon.breed_for %} |
|
|
|
<div class="pokemon-targets-grid"> |
|
|
|
{% if pokemon.evolve_to %} |
|
|
|
{% for evolution in pokemon.evolve_to %} |
|
|
|
<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 data-src="{{ url_for('static', filename='images/pokemon/' + evolution.pfic + '.png') }}" |
|
|
|
alt="{{ evolution.name }}" |
|
|
|
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> |
|
|
|
{% endfor %} |
|
|
|
{% endif %} |
|
|
|
|
|
|
|
{% if pokemon.breed_for %} |
|
|
|
{% for breeding in pokemon.breed_for %} |
|
|
|
<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 data-src="{{ url_for('static', filename='images/pokemon/' + breeding.pfic + '.png') }}" |
|
|
|
alt="{{ breeding.name }}" |
|
|
|
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> |
|
|
|
{% endfor %} |
|
|
|
{% endif %} |
|
|
|
</div> |
|
|
|
<img data-src="{{ url_for('static', filename='images/pokemon/' + breeding.pfic + '.png') }}" |
|
|
|
alt="{{ breeding.name }}" |
|
|
|
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> |
|
|
|
{% endif %} |
|
|
|
</div> |
|
|
|
{% endfor %} |
|
|
|
{% endif %} |
|
|
|
</div> |
|
|
|
{% endif %} |
|
|
|
</div> |
|
|
|
{% endfor %} |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="completed-section"> |
|
|
|
<h3 class="section-title">Completed</h3> |
|
|
|
<div class="completed-pokemon"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
{% endfor %} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
{% endfor %} |
|
|
|
@ -802,18 +837,28 @@ |
|
|
|
}); |
|
|
|
|
|
|
|
if (isCaught) { |
|
|
|
initialCount = -1; |
|
|
|
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); |
|
|
|
|
|
|
|
const pokemonImage = entry.querySelector('.pokemon-thumbnail'); |
|
|
|
pokemonImage.classList.toggle('grayscale', totalNeeded == 0); |
|
|
|
|
|
|
|
// Move to completed section if count is 0 |
|
|
|
const gameContent = entry.closest('.game-content'); |
|
|
|
const completedSection = gameContent.querySelector('.completed-pokemon'); |
|
|
|
const activeSection = gameContent.querySelector('.active-section'); |
|
|
|
|
|
|
|
if (parseInt(catchCount.textContent) === 0) { |
|
|
|
completedSection.appendChild(entry); |
|
|
|
} else if (entry.parentElement === completedSection) { |
|
|
|
activeSection.appendChild(entry); |
|
|
|
} |
|
|
|
|
|
|
|
// Update game total if count changed |
|
|
|
updateGameTotal(entry, isCaught); |
|
|
|
} |
|
|
|
|
|
|
|
|