Pokedex with Neutron and Requests (from AHK)
Posted: 24 Mar 2024, 18:35
by ositoMalvado
An AHK-built Pokédex app. Features direct requests for Pokémon info, sprites, and GIFs. Feedback welcome!
Video example:
Main code (uploaded full code and exe in attachments):
[Mod action: Moved topic to the “Gaming” section.]
Video example:
Main code (uploaded full code and exe in attachments):
Spoiler
Code: Select all
#Requires AutoHotkey v2.0
#Include Neutron.ahk
#Include skeletor_requests.ahk
html := "
( ; html
<body>
<span style="font-size: 12px;">Left and Right keys to change Pokemon</span>
<div class="pokedex-container">
<button id="clickme" onclick="ahk.Clicked(event)">Random!</button>
<div class="pokemon-details">
<span id="pokemon-gif-container-l" class="gif-wrapper-l">
<img id="pokemon-gif-left" src="" alt="GIF Normal">
</span>
<span id="pokemon-gif-container-r" class="gif-wrapper-r">
<img id="pokemon-gif-left" src="" alt="GIF Normal">
</span>
<strong id="pokemon-actual"></strong>
</div>
<div>
<img class="pokemon-sprite" id="pokemon-sprite"alt="Normal" src="">
<img class="pokemon-sprite" id="pokemon-shiny" alt="Shiny" src="">
</div>
<div id="pokemon-info" class="pokemon-info">
</div>
</div>
</body>
)"
css := "
( ; css
body {
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f0f0;
}
button {
margin: 20px;
padding: 10px 20px;
font-size: 16px;
border: none;
background-color: #ff0000;
color: white;
cursor: pointer;
border-radius: 5px;
outline: none;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #cc0000;
}
.pokedex-container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
background-color: white;
padding: 5px;
border-radius: 10px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
.pokemon-details {
display: flex;
align-items: center;
margin-bottom: 20px;
position: relative;
}
.pokemon-sprite {
width: 200px;
height: 200px;
margin-bottom: 20px;
}
.gif-wrapper-l {
position: absolute;
top: 0;
left: -30vh;
top: -50px;
border-radius: 10%;
overflow: hidden;
background-color: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.gif-wrapper-r {
position: absolute;
top: 0;
left: 55vh;
top: -50px;
border-radius: 10%;
overflow: hidden;
background-color: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.gif-wrapper-r img,
.gif-wrapper-l img {
max-width: 80px;
height: auto;
}
#pokemon-actual {
font-size: 24px;
color: #333;
margin-left: 10px;
}
.pokemon-info {
text-align: center;
font-size: 18px;
width: 500px;
color: #333;
}
)"
js := "
( ; js
)"
title := "PokeAPI"
neutron := NeutronWindow(html, css, js, title)
.Opt("-Resize")
.OnEvent("Close", (neutron) => ExitApp())
.Show("w640 h480", "Pokedex AHK")
Persistent
global poke_index := 1
global max_pokemon := 1025
updateView()
return
updateView(){
global poke_index
; Get a random pokemon
pokemon := pokeapi().getPokemon(poke_index)
pokemon_info := pokeapi().getPokemonInfo(poke_index, "en")
pokemon_info := pokemon_info[Random(1,pokemon_info.Length)]
pokemon_info := StrReplace(pokemon_info, "`n", " ")
; Set the name
neutron.doc.getElementById("pokemon-actual").innerText := StrUpper(SubStr(pokemon["name"],1,1)) . SubStr(pokemon["name"],2) . " - " pokemon["id"]
; Set the sprite
neutron.doc.getElementById("pokemon-sprite").src := pokemon["sprites"]["other"]["dream_world"]["front_default"] ? pokemon["sprites"]["other"]["dream_world"]["front_default"] : pokemon["sprites"]["other"]["official-artwork"]["front_default"]
; Set the shiny sprite
neutron.doc.getElementById("pokemon-shiny").src := pokemon["sprites"]["other"]["official-artwork"]["front_shiny"]
; Set the GIF
neutron.doc.getElementById("pokemon-gif-container-l").innerHTML := "<img id='pokemon-gif' src='" . pokemon["sprites"]["other"]["showdown"]["front_default"] . "' alt='Pokemon GIF'>"
neutron.doc.getElementById("pokemon-gif-container-r").innerHTML := "<img id='pokemon-gif' src='" . pokemon["sprites"]["other"]["showdown"]["front_shiny"] . "' alt='Pokemon GIF'>"
; Set the info
neutron.doc.getElementById("pokemon-info").innerText := pokemon_info
}
Clicked(neutron, event) {
global poke_index, max_pokemon
poke_index := Random(1, max_pokemon)
updateView()
}
Right::{
If !WinActive("Pokedex AHK")
Return
global poke_index, max_pokemon
if poke_index < max_pokemon
poke_index++
Else
poke_index := 1
updateView()
}
Left::{
If !WinActive("Pokedex AHK")
Return
global poke_index, max_pokemon
if poke_index > 1
poke_index--
Else
poke_index := max_pokemon
updateView()
}
[Mod action: Moved topic to the “Gaming” section.]
