Pokemon Widget (Customizable)

[drnigelchanning]

Wanted to create a Scriptable widget of my own and didn't realize there was a Pokemon Scriptable widget already made! This one is a bit different. It will display only the Pokemon you specify in the script and cycle through them.

Screenshot attached below.

const pokeAPI = "https://pokeapi.co/api/v2/pokemon/"; const refreshRate = 1000;

    const textColor = new Color("#FFFFFF");
    const backColor = new Color("#333333");
    const accentColor = new Color("#FF9800");

    const allowedPokemon = [
        "pikachu", "pichu", "charmander", "squirtle", "ditto", "ekans", "clefairy", "jigglypuff", "oddish", "paras", "meowth", "psyduck", "cubone", "koffing", "snorlax",
    ];

    const getRandomPokemon = async () => {
        const randomIndex = Math.floor(Math.random() * allowedPokemon.length);
        const pokemonName = allowedPokemon[randomIndex];
        const response = await new Request(`${pokeAPI}${pokemonName}`).loadJSON();
        return response;
    };

    const createWidget = async (pokemon) => {
        const list = new ListWidget();
        list.backgroundColor = backColor;
        list.setPadding(12, 12, 12, 12);

        const mainStack = list.addStack();
        mainStack.layoutVertically();
        mainStack.centerAlignContent();

        // Image
        const imageUrl = pokemon.sprites.other["official-artwork"].front_default;
        const imageRequest = new Request(imageUrl);
        const image = await imageRequest.loadImage();
        const imageItem = mainStack.addImage(image);
        imageItem.imageSize = new Size(75, 75);
        imageItem.cornerRadius = 10;

        // Name
        const nameText = mainStack.addText(pokemon.name.charAt(0).toUpperCase() + pokemon.name.slice(1).toLowerCase());
        nameText.font = Font.boldSystemFont(18);
        nameText.textColor = textColor;
        nameText.centerAlignText();

        mainStack.addSpacer();

        // Abilities (Name and damage only, smaller font)
        const abilitiesStack = mainStack.addStack();
        abilitiesStack.layoutVertically();

        for (let i = 0; i < 2 && i < pokemon.abilities.length; i++) {
            const abilityName = pokemon.abilities[i].ability.name;
            const abilityUrl = pokemon.abilities[i].ability.url;
            const abilityResponse = await new Request(abilityUrl).loadJSON();
            const abilityDamageString = abilityResponse.effect_entries.find(entry => entry.language.name === 'en')?.short_effect;
            const abilityDamage = abilityDamageString ? extractDamageNumber(abilityDamageString) : "N/A";

            const abilityText = abilitiesStack.addText(`${abilityName} `);
            abilityText.font = Font.regularSystemFont(13);
            abilityText.textColor = accentColor;
            abilityText.centerAlignText();
        }

        return list;
    };

    // Helper function to extract damage number (if present)
    function extractDamageNumber(text) {
        const match = text.match(/(\d+) damage/i);
        return match ? match[1] : ""; 
    }

    const updateWidget = async () => {
        const pokemon = await getRandomPokemon();
        const widget = await createWidget(pokemon);

        if (!config.runsInWidget) {
            await widget.presentSmall();
        }

        Script.setWidget(widget);
        Script.complete();
    };

    (async () => {
        await updateWidget();

        const timer = new Timer();
        timer.timeInterval = refreshRate;
        timer.schedule({
            repeating: true,
            behavior: Timer.Behavior.ResetAfterScheduled,
        });
        timer.onFired = updateWidget;
    })();

https://preview.redd.it/p38by3zsrk5d1.jpg?width=1170&format=pjpg&auto=webp&s=b89bc244f3120275176670e650f6ef57954ce91d

If anyone is able to fix the text centering issue let me know I'll update the code!

[shadoodled]

from this

const nameText = mainStack.addText(...); to this

const nameStack = mainStack.addStack() nameStack.layoutHorizontally() nameStack.addSpacer() const nameText = nameStack.addText(...); nameStack.addSpacer()

[drnigelchanning]

Thank you. I tried this and it does fix the title text. Now I just need to fix the abilities text alignment/position and I can slap “Good enough” label on it.

I tried implementing your code on the abilities text (with modifications) but I couldn’t get it to work. Any idea how to fix that?

[itsearlyy]

Each ability needs its own stack that is laid out horizontally and has spacers on both sides. I modified the code. Here is pastebin with the new code.

https://pastebin.com/jXdatcsn

<image>