|
|
@ -492,6 +492,32 @@ |
|
|
.pokemon-entry.hidden { |
|
|
.pokemon-entry.hidden { |
|
|
display: none; |
|
|
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> |
|
|
</style> |
|
|
</head> |
|
|
</head> |
|
|
<body> |
|
|
<body> |
|
|
@ -575,6 +601,8 @@ |
|
|
placeholder="Search Pokémon..." |
|
|
placeholder="Search Pokémon..." |
|
|
oninput="filterGamePokemon(this)"> |
|
|
oninput="filterGamePokemon(this)"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="game-sections"> |
|
|
|
|
|
<div class="active-section"> |
|
|
{% for pokemon in game.pokemon %} |
|
|
{% for pokemon in game.pokemon %} |
|
|
<div class="pokemon-entry" data-pfic="{{ pokemon.pfic }}"> |
|
|
<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 %}> |
|
|
<div class="pokemon-header" {% if (pokemon.evolve_to|length > 0) or (pokemon.breed_for|length > 0) %}onclick="togglePokemonDetails(this)"{% endif %}> |
|
|
@ -642,6 +670,13 @@ |
|
|
</div> |
|
|
</div> |
|
|
{% endfor %} |
|
|
{% endfor %} |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="completed-section"> |
|
|
|
|
|
<h3 class="section-title">Completed</h3> |
|
|
|
|
|
<div class="completed-pokemon"></div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
{% endfor %} |
|
|
{% endfor %} |
|
|
</div> |
|
|
</div> |
|
|
@ -802,18 +837,28 @@ |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
if (isCaught) { |
|
|
if (isCaught) { |
|
|
initialCount = -1; |
|
|
initialCount -= 1; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const pokemonImage = entry.querySelector('.pokemon-thumbnail'); |
|
|
|
|
|
pokemonImage.classList.toggle('grayscale', isCaught); |
|
|
|
|
|
|
|
|
|
|
|
totalNeeded = initialCount + breedCount + evolveCount; |
|
|
totalNeeded = initialCount + breedCount + evolveCount; |
|
|
|
|
|
|
|
|
// Update the catch count display |
|
|
// Update the catch count display |
|
|
catchCount.textContent = Math.max(0, totalNeeded); |
|
|
catchCount.textContent = Math.max(0, totalNeeded); |
|
|
|
|
|
|
|
|
// Update game total if count changed |
|
|
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); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
updateGameTotal(entry, isCaught); |
|
|
updateGameTotal(entry, isCaught); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|