Forem: Alex Tana

A beautiful memory game built with Svelte and TypeScript

Alex Tana — Sat, 04 Jun 2022 13:13:04 +0000

Whilst building my portfolio website I thought it would be cool to add a little memory game for the user to play and decided it could be a great fun project to get some curious programmers to check out this wonderful compiler/framework called Svelte.

Preview of what we're about to build:

Preview

In this tutorial we're going to be use SvelteKit and Tailwind CSS - It's super simple to setup, two commands and you're good to go.

Open your terminal of choice and write this command:

npm init svelte your-app-name

Svelte is going to ask you a couple of questions, for the purpose of this tutorial you'll want to use TypeScript, ESLINT and Prettier for code formatting and we can skip PlayWright as we're not going do create any tests.

To install tailwind for your project you can just use this command:

npx svelte-add@latest tailwindcss

All Set!

Before starting coding it'll be helpful to write down every single thing we expect our program to do, let's sum it up:

let the player uncover the cards by clicking on them
only let a max of two cards to be uncovered at any time
if two cards are uncovered then perform a check
if the two cards have the same symbol then it's a pair
if not then cover them up again
if all the cards are uncovered the player wins

EDGE CASES

if a card is already uncovered don't cover it
if two cards are already uncovered and the user clicks again, do nothing

Writing things down might seem like an extra step but it really helps to visualise all the components you might need and find most of the gotchas that you could encounter.

I'm going to put all the game code in a "Game" component, so inside of the "src" folder I'll create a "lib" folder that will contain all my files, "lib" is useful in SvelteKit because it provides what we call an "alias", meaning that if you have a file that is stored in

"src/lib/components/game/Game.svelte"

you can import it by saying:

import Game from '$lib/components/game/Game.svelte'

Ok so now your "/src/routes/index.svelte" file should look something like this:

<script lang="ts">
    import Game from '$lib/components/Game.svelte';
</script>

<Game />

<style>
    :global(body) {
        background-color: rgb(15, 23, 42);
    }
</style>

the :global(body) tag is just telling svelte that the current rule applied to "body" is going to be applied to every file in the project -- so for every page the background is going to be
"rgb(15, 23, 42)"

Now let's create a "Game.svelte" file in "/src/lib/components"

By looking at the list of things our program needs to do we can see all the variables we're going to need to implement a basic version of the game so let's create them:

shouldShow -> helps us with an initial animation on first load
currentlyUncovered -> helps tracking which entries are uncovered
isWon -> lets us know if the game is finished or not
pairedCards -> keeps track of which entries are paired
cards -> all the cards with their state

translated in code:

<script lang="ts">
    let shouldShow: boolean = false;
    let currentlyUncovered: Array<Card> = [];
    let isWon: boolean = false;

    $: pairedCards = cards.filter((f) => f.paired);

    interface Card {
        symbol: string;
        paired: boolean;
        covered: boolean;
        id: number;
    }

    let cards: Array<Card> = [
        { symbol: '👻', paired: false, covered: true, id: Math.random() },
        { symbol: '💩', paired: false, covered: true, id: Math.random() },
        { symbol: '🐊', paired: false, covered: true, id: Math.random() },
        { symbol: '🐳', paired: false, covered: true, id: Math.random() },
        { symbol: '🦥', paired: false, covered: true, id: Math.random() },
        { symbol: '🍄', paired: false, covered: true, id: Math.random() },

        { symbol: '👻', paired: false, covered: true, id: Math.random() },
        { symbol: '💩', paired: false, covered: true, id: Math.random() },
        { symbol: '🐊', paired: false, covered: true, id: Math.random() },
        { symbol: '🐳', paired: false, covered: true, id: Math.random() },
        { symbol: '🦥', paired: false, covered: true, id: Math.random() },
        { symbol: '🍄', paired: false, covered: true, id: Math.random() }
    ];
</script>

Let's break this down - if you're unfamiliar with TypeScript just like I am, this is very simple

let currentlyUncovered: Array<Card> = [];

"Array" is basically saying that currentlyUncovered is going to be an Array and it's going to contain elements of type "Card", type "Card" does not exist in javascript, it's not a typical type - but it's a type that we created ourselves a couple of lines below:

    interface Card {
        symbol: string;
        paired: boolean;
        covered: boolean;
        id: number;
    }

this is saying that our card is an Object and it contains the following keys: "symbol" (which is a string), "paired" (which is a boolean), "covered" and so on..

it's pretty much only declaring the types for every entry in our Card object.

$: pairedCards = cards.filter((f) => f.paired);

this line can be quite tricky to understand if you're not familiar with Svelte, "$:" is what we call a "reactive statement"

it's a declaration of a variable (if it's not already declared) which basically says: Everytime anything changes in this expression I'm going to react to it

so in this case everytime the result of

cards.filter((f) => f.paired)

is going to change, the value of pairedCards will reflect the result.

This is incredibly powerful and can be a double edged sword as you can imagine how hard it can become to debug reactive statements in a big application if they're abused.

Quick note on "Math.random()" for our id - for the purpose of this tutorial it's going to work, we only have 16 cards in our array and the likelyhood of an ID to be duplicate is really low.. but if you want to be absolutely sure it's not going to happen you can use a library like uuid to generate a unique ID.

Markup

All is set for our basic setup and we can move on with creating the basic HTML structure

Pre requirements

I'm using a library called Confetti Explosion to have a nice visual effect when the game is won, it makes the whole experience a little bit more fun. Here is how you install it:

npm install svelte-confetti-explosion

and this is how to use it:

                    <ConfettiExplosion
                        particleCount={200}
                        force={0.7}
                    />

Now that Confetti Explosion is installed and ready we can move on to creating the markup for the game.

This is what it looks like: (don't worry I'm going to break it down below)


{#if shouldShow}
    <div
        transition:scale={{ duration: 400 }}
        class="game absolute w-max z-50 p-8 bg-gray-900 shadow-3xl rounded-3xl text-white top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
    >
        <h2 class="text-center font-extrabold mb-8 text-3xl text-gray-200 tracking-tighter">Memory</h2>
        <div class="game-grid relative grid grid-cols-3 gap-1">
            {#if isWon}
                <div class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                    <ConfettiExplosion particleCount={200} force={0.7} />
                </div>
                <div
                    class="absolute w-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2  confetti-explosion mx-auto text-center py-16"
                >
                    <div class="win-message flex flex-wrap justify-center">
                        <p class="text-2xl w-full font-light tracking-tighter italic mb-0">congratulations</p>
                        <h2 class="text-6xl w-full font-black tracking-tighter mb-4">YOU WON!</h2>
                        <div class="flex gap-3">
                            <button
                                class="text-white bg-transparent border border-white hover:bg-white hover:text-black transition-all py-1 px-4 rounded-md cursor-pointer w-max"
                                on:click={playAgain}>Play Again</button
                            >
                        </div>
                    </div>
                </div>
            {/if}

            {#each cards as card}
                <div
                    class:uncovered={!card.covered}
                    class:covered={card.covered}
                    class="card text-gray-600 cursor-pointer w-32 h-32 {isWon
                        ? 'opacity-0 pointer-events-none'
                        : ''} {card.covered
                        ? 'bg-gray-800 hover:bg-blue-800 hover:text-white'
                        : 'bg-white'} rounded-3xl p-4 relative"
                    on:click={() => handleUncovering(card)}
                >
                    <div
                        class="absolute symbol top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-6xl"
                    >
                        {#if card.covered}
                            <span
                                in:fade={{ duration: 500, delay: 200 }}
                                out:fade={{ duration: 0, delay: 0 }}
                                class="text-6xl font-black"
                            >
                                ?
                            </span>
                        {:else}
                            <div
                                in:fade={{ duration: 500, delay: 200 }}
                                out:fade={{ duration: 0, delay: 0 }}
                                class="symbol"
                            >
                                {card.symbol}
                            </div>
                        {/if}
                    </div>
                </div>
            {/each}
        </div>
    </div>
{/if}

<style>
    .uncovered {
        transform: rotateY(180deg);
    }
    .card {
        transition: 0.8s all ease;
    }
    .covered {
        transform: rotateY(0deg);
    }
</style>

as you can see the whole block is wrapped in an if statement

{#if shouldShow}{/if}

this is done so we can have a transition when the component is mounted.

right under it the first div that contains the whole game has a transition scale set to it. This is going to execute when we change "shouldShow" from false to true.

Let's focus on the "each" block now

We are looping through our cards and we need to make sure they have two different states, a covered state and an uncovered one.

We can do this by using CSS transforms and rotate them on the Y axis.

as you can see we have these conditional classes applied to the div

class:uncovered={!card.covered}
class:covered={card.covered}

these are "conditional classes" meaning the class "uncovered" will be added to the div if the current card is not covered, and "covered" will be added if the card is covered.

if you're unfamiliar with loops this is where "card" is coming from: when we opened the each block {#each cards as card} -> "cards" is our object with 16 cards and "card" is the instance we're currently looping through inside of the "each" loop.

it's worth paying attention to this as well:

class="card text-gray-600 cursor-pointer w-32 h-32 {isWon
                        ? 'opacity-0 pointer-events-none'
                        : ''} {card.covered
                        ? 'bg-gray-800 hover:bg-blue-800 hover:text-white'
                        : 'bg-white'} rounded-3xl p-4 relative"

if the game is won we are changing the opacity of the cards to 0 and removing any pointer events so the user can't click on them -- this is because we want to keep the game at the same height and the "YOU WON" message at the centre of it (to avoid the container becoming smaller and bouncy); This could have also been done by setting a specific height to the game div but it's just a matter of preference, I found this easier to deal with, especially if the game has to be responsive.

on:click={() => handleUncovering(card)}

is just a function that we're going to write soon and it's passing the current card as an argument

note that on events we use an arrow function to pass an argument, if we did

on:click={handleUncovering(card)}

the function would have been called straight away and that's not what we want in this occasion.

Other notes on the markup are:

                                in:fade={{ duration: 500, delay: 200 }}
                                out:fade={{ duration: 0, delay: 0 }}

both the covering and uncovering states have an out transition set to 0 with 0 delay, that's because we want the next animation to start straight away.

Other than that all we're doing is showing the card's symbol if it's uncovered and a question mark if it's covered.

Game logic

It's finally time to build the game logic - our handleUncovering function will be doing most of the heavy lifting, but before we start we need a way to shuffle our cards like if it was a deck of cards.

I've found a nice algorithm that does exactly that.

    // helper function to shuffle array
    function shuffleArray(array: Array<any>) {
        for (let i = array.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [array[i], array[j]] = [array[j], array[i]];
        }
        // reassign entries to trigger an update
        cards = cards;
    }

You can read more about it here

So now all we need to do when the component mounts is to shuffle the array and set shouldShow to true, so our component can show, like so

    onMount(() => {
        shouldShow = true;
        shuffleArray(cards);
    });

Don't forget to import onMount:

import { onMount } from 'svelte'

onMount is a Svelte hook, essentially a function that runs when the component is mounted, if you come from react it's equivalent to the old componentDidMount or the new way of doing that with useEffect

Before we start with the big uncovering function we can build two helper functions to:

Uncover a card
Reset the currentlyUncovered array

They're not necessary but they'll help reducing repetition in our code

  // resets the currently uncovered array
  // and reassign cards to itself so svelte knows
  // it needs to re-render
  function reset() {
    currentlyUncovered = [];
    cards = cards;
  }

  // uncovers an card and reassigns cards to let svelte
  // know to re-render
  function uncover(card: Card) {
    if (card?.covered) {
      card.covered = false;
    }
    cards = cards;
  }

Don't worry too much about these at the moment, we've just declared them but we haven't used (called) them yet, we will in a minute

Now here's the fun part, let's build our handleUncovering function

first let's declare it

function handleUncovering(card: Card) {
  // logic here
}

Our function will take a card as a parameter with the previously declared type of Card

Now let's have a look at our list we created earlier. Remember, this function runs everytime the user clicks on any card, because we've set the on:click handler on the entry - so let's start doing some checks

  // if the card is already uncovered, do nothing
  if (pairedCards.find((f) => f === card)) {
    return;     
  }

this checks our pairedCards array, the reactive one, to check if the card we're trying to uncover is already in there, if it is we can stop executing (return)

returning means stopping the execution of the function, so none of the code inside of the brackets of our function will be executed

let's add another check to deal with an edge case, we want to prevent the user from clicking very quickly to uncover a third card if two of them are already uncovered, so here's how we do it:

        // if you've already uncovered two entries do nothing
        if (currentlyUncovered.length === 2) {
            return;
        }

Now, if no cards are currently uncovered OR we only uncovered one card we can do some other checks:

        // if there is already an uncovered card and the user clicks on the same one again
        // do nothing
        if (!currentlyUncovered.length || currentlyUncovered.length === 1) {
            if (card === currentlyUncovered[0]) {
                return;
            }
            // find the card the user has clicked on
            const cardToPush: any = cards.find((f) => f.id === card.id);
            // uncover the card and push it to the currently uncovered array
            uncover(cardToPush);
            currentlyUncovered.push(card);
        }

This is where we perform the uncovering of cards, if there are 0 or 1 currentlyUncovered cards then we proceed with the uncovering

as you can see we find the one we need to push by using cards.find(), which is an Array method that lets you find elements that match the expression you pass in

so

const cardToPush: any = cards.find((f) => f.id === card.id)

will find the element inside of the cards array that has the same id of the one we clicked on, after that's found we use our helper function we created earlier to uncover it

uncover(cardToPush);

and we also push the uncovered card to the 'currentlyUncovered' array so we can track the uncovered ones:

currentlyUncovered.push(card);

All the uncovering is now sorted, we can now deal with mistakes and winning conditions

The possible outcomes at this point are two:

the cards are matching, in which case we can mark them as "paired"
the cards don't match, in which case we cover them again

here's the logic:

// if the user uncovers two entries then start doing checks
  if (currentlyUncovered.length === 2) {
  // if the two entries have the same symbol then they're a match
    if (currentlyUncovered[0].symbol === currentlyUncovered[1].symbol) {
    // loop through them and change their state to 'paired'
      currentlyUncovered.forEach((f) => {
        f.paired = true;
      });

      reset();
    } else {
      // if it's not a match then loop through the uncovered
      // entries and cover them back again
      // timeout to not make it instant, let the user
      // realise they made a mistake
      setTimeout(() => {
        currentlyUncovered.forEach((f) => {
        f.covered = true;
      });

        reset();
      }, 800);
     }
    }

The comments on this pretty much explain every step, the only thing I'd like to comment on is the timeout of 800ms, that's there just to artificially delay turning over the cards, only to make it clear that a mistake was made and the cards are getting turned over again.

Only thing that is left is to set a winning condition:

    // determine if the game is won by checking
    // if the user has paired all the entries
    $: if (pairedCards.length === cards.length) {
        setTimeout(() => {
            isWon = true;
        }, 800);
    }

This is a reactive statement that checks the length of our pairedCards array, if the amount of paired cards is the same as the number of total cards then the game is finished, so we can proceed with showing the winning screen by turning isWon to true.

THAT'S IT! 🥳

Your game is now complete, here's what the code should look like:

Script tag

<script lang="ts">
    // import { v4 as uuidv4 } from 'uuid';
    import { onMount } from 'svelte';
    import { fade, scale } from 'svelte/transition';
    import { ConfettiExplosion } from 'svelte-confetti-explosion';

    let currentlyUncovered: Array<Card> = [];
    let isWon: boolean = false;
    let shouldShow: boolean = false;

    // reactive statement to determine how many
    // entries the user has paid
    $: pairedCards = cards.filter((f) => f.paired);

    // determine if the game is won by checking
    // if the user has paired all the entries
    $: if (pairedCards.length === cards.length) {
        setTimeout(() => {
            isWon = true;
        }, 800);
    }

    interface Card {
        symbol: string;
        paired: boolean;
        covered: boolean;
        id: number;
    }

    let cards: Array<Card> = [
        { symbol: '👻', paired: false, covered: true, id: Math.random() },
        { symbol: '💩', paired: false, covered: true, id: Math.random() },
        { symbol: '🐊', paired: false, covered: true, id: Math.random() },
        { symbol: '🐳', paired: false, covered: true, id: Math.random() },
        { symbol: '🦥', paired: false, covered: true, id: Math.random() },
        { symbol: '🍄', paired: false, covered: true, id: Math.random() },

        { symbol: '👻', paired: false, covered: true, id: Math.random() },
        { symbol: '💩', paired: false, covered: true, id: Math.random() },
        { symbol: '🐊', paired: false, covered: true, id: Math.random() },
        { symbol: '🐳', paired: false, covered: true, id: Math.random() },
        { symbol: '🦥', paired: false, covered: true, id: Math.random() },
        { symbol: '🍄', paired: false, covered: true, id: Math.random() }
    ];

    // helper function to shuffle array
    function shuffleArray(array: Array<any>) {
        for (let i = array.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [array[i], array[j]] = [array[j], array[i]];
        }
        // reassign entries to trigger an update
        cards = cards;
    }

    function handleUncovering(card: Card) {
        // if the card is already uncovered, do nothing
        if (pairedCards.find((f) => f === card)) {
            return;
        }
        // if you've already uncovered two entries do nothing
        if (currentlyUncovered.length === 2) {
            return;
        }
        // if there is already an uncovered card and the user clicks on the same one again
        // do nothing
        if (!currentlyUncovered.length || currentlyUncovered.length === 1) {
            if (card === currentlyUncovered[0]) {
                return;
            }
            // find the card the user has clicked on
            const cardToPush: any = cards.find((f) => f.id === card.id);
            // uncover the card and push it to the currently uncovered array
            uncover(cardToPush);
            currentlyUncovered.push(card);
        }

        // if the user uncovers two entries then start doing checks
        if (currentlyUncovered.length === 2) {
            // if the two entries have the same symbol then they're a match
            if (currentlyUncovered[0].symbol === currentlyUncovered[1].symbol) {
                // loop through them and change their state to 'paired'
                currentlyUncovered.forEach((f) => {
                    f.paired = true;
                });

                reset();
            } else {
                // if it's not a match then loop through the uncovered
                // entries and cover them back again
                // timeout to not make it instant, let the user
                // realise they made a mistake
                setTimeout(() => {
                    currentlyUncovered.forEach((f) => {
                        f.covered = true;
                    });

                    reset();
                }, 800);
            }
        }
    }
    // resets the currently uncovered array
    // and reassign entries to itself so svelte knows
    // it needs to re-render
    function reset() {
        currentlyUncovered = [];
        cards = cards;
    }

    // uncovers an card and reassigns entries to let svelte
    // know to re-render
    function uncover(card: Card) {
        if (card?.covered) {
            card.covered = false;
        }
        cards = cards;
    }

    onMount(() => {
        shouldShow = true;
        shuffleArray(cards);
    });

    function playAgain() {
        cards.forEach((f) => {
            f.paired = false;
            f.covered = true;
        });
        pairedCards = [];
        isWon = false;
        cards = cards;
    }
</script>

Markup + Style

{#if shouldShow}
    <div
        transition:scale={{ duration: 400 }}
        class="game absolute w-max z-50 p-8 bg-gray-900 shadow-3xl rounded-3xl text-white top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
    >
        <h2 class="text-center font-extrabold mb-8 text-3xl text-gray-200 tracking-tighter">Memory</h2>
        <div class="game-grid relative grid grid-cols-3 gap-1">
            {#if isWon}
                <div class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                    <ConfettiExplosion particleCount={200} force={0.7} />
                </div>
                <div
                    class="absolute w-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2  confetti-explosion mx-auto text-center py-16"
                >
                    <div class="win-message flex flex-wrap justify-center">
                        <p class="text-2xl w-full font-light tracking-tighter italic mb-0">congratulations</p>
                        <h2 class="text-6xl w-full font-black tracking-tighter mb-4">YOU WON!</h2>
                        <div class="flex gap-3">
                            <button
                                class="text-white bg-transparent border border-white hover:bg-white hover:text-black transition-all py-1 px-4 rounded-md cursor-pointer w-max"
                                on:click={playAgain}>Play Again</button
                            >
                        </div>
                    </div>
                </div>
            {/if}

            {#each cards as card}
                <div
                    class:uncovered={!card.covered}
                    class:covered={card.covered}
                    class="card text-gray-600 cursor-pointer w-32 h-32 {isWon
                        ? 'opacity-0 pointer-events-none'
                        : ''} {card.covered
                        ? 'bg-gray-800 hover:bg-blue-800 hover:text-white'
                        : 'bg-white'} rounded-3xl p-4 relative"
                    on:click={() => handleUncovering(card)}
                >
                    <div
                        class="absolute symbol top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-6xl"
                    >
                        {#if card.covered}
                            <span
                                in:fade={{ duration: 500, delay: 200 }}
                                out:fade={{ duration: 0, delay: 0 }}
                                class="text-6xl font-black"
                            >
                                ?
                            </span>
                        {:else}
                            <div
                                in:fade={{ duration: 500, delay: 200 }}
                                out:fade={{ duration: 0, delay: 0 }}
                                class="symbol"
                            >
                                {card.symbol}
                            </div>
                        {/if}
                    </div>
                </div>
            {/each}
        </div>
    </div>
{/if}

<style>
    .uncovered {
        transform: rotateY(180deg);
    }
    .card {
        transition: 0.8s all ease;
    }
    .covered {
        transform: rotateY(0deg);
    }
</style>

Thanks for checking this tutorial out!

I hope this helped getting you used to Svelte and Tailwind, I will be doing more SvelteKit tutorials in the form of articles and videos in the coming months so stay tuned for updates!

Let's create a nice button component with Loading, Done and Error states using Svelte and Tailwind 🎉

Alex Tana — Mon, 18 Oct 2021 19:29:15 +0000

Perceived performance is the illusion of speed we experience when a website is really good at letting us know exactly what's happening at all times.

Today I'm going to show you how to create a button component that you can re-use and is able to give the user meaningful information whilst being nicely animated; we will then use this button to fetch Pokemon using the poke API.

This is the end result:

Code + Preview

Preview

Before we start 👨‍💻

I'm going to be assuming you've already set up your environment with Svelte and Tailwind CSS, if you haven't you can follow this guide by swyx to help you out.

Let's start 🎉

We're going to create a Button component in src/components/ui/buttons/Button.svelte or whatever directory you prefer.

Now let's import the button component where we want it to be displayed - example here

<script>
    import Button from '../components/ui/buttons/Button.svelte';
</script>

<Button>My button</Button>

Let's now set up the states for our button in our Button.svelte and our index page, the four states we are going to have are the default, loading, error and done state.

index.svelte (or wherever your button is displayed)

Our index file is where we render the Button component, here we're going to handle the click event and control its appearance - to do this we use component props. They look like custom HTML attributes and we use them to send data from the parent index.svelte to the child Button.svelte

Let's now add all of our possible button states and initialise them as false. Initialising variables is always recommended as it gives you an idea of what kind of value they hold, in this case they're booleans

<script>
    // button states
    let isLoading = false;
    let isError = false;
    let isDone = false;
</script>
<Button
    loading={isLoading}
    error={isError}
    done={isDone}
>
    Catch Pokemon
</Button>

And let's create three props to control its appearance

<Button
    loading={isLoading}
    error={isError}
    done={isDone}
    loadingClass="bg-yellow-600 scale-110 active:bg-yellow-600"
    errorClass="bg-red-600 scale-110 shake active:bg-red-600"
    doneClass="bg-green-600 scale-110 active:bg-green-600"
>
    Catch Pokemon
</Button>

Don't worry too much about the shake class for now, we're going to create the CSS for it later.

If you're not familiar with it, all of these classes except for shake are tailwindcss classes - more info on them here.

Button.svelte

In our Button component we're then going to use svelte's own export let yourVariable to read what the parent component is sending to us - note they're also initialised with a value so when our component is mounted we know what they are, they can be manipulated from index.svelte.

Initialising these class variables with an empty string '' prevents rendering class names of undefined in our HTML on mount.

Let's now add these state initialisation variables and a default base class for our button:

<script>
    // class variables
    export let loadingClass = '';
    export let errorClass = '';
    export let doneClass = '';
    // state variables
    export let loading = false;
    export let error = false;
    export let done = false;
</script>

<button
    class="transition-all overflow-hidden transform relative text-white px-4 py-3 rounded-lg shadow-lg"
>
    <slot/>
</button>

Now using ternary operators we can conditionally set a class based on which of the three states we're in

If you're not familiar with ternary operators here's how they work:

{
    loading ? loadingClass : '';
}

this means if loading is true use loadingClass else use an empty string ''

Let's add these in! 👏

<button
    class="transition-all overflow-hidden transform relative text-white px-4 py-3 rounded-lg shadow-lg {loading
        ? loadingClass
        : ''} {error ? errorClass : ''} {done ? doneClass : ''} {loading || error || done
        ? 'pr-8 pl-4'
        : 'bg-blue-400 hover:bg-blue-600'}
  "
    on:click|preventDefault
>
    <slot />
</button>

Notice I've added an on:click|preventDefault attribute on it, this means we can now use on:click events directly on our Button component in index.svelte

{loading || error || done ? 'pr-8 pl-4' : 'bg-blue-400 hover:bg-blue-600'}

This line sets the default background + hover and changes the padding if any of the states is true (the right padding change will be needed for our icon)

Let's add our icons to Button.svelte!

Source: Heroicons

I've picked three icons from the web for this - Don't exactly remember the sources for all of them so please let me know in the comments if you know who made these!

We're going to want these icons to be animated and to appear/disappear based on our loading/error/done states so let's add our code with transitions right after our slot

Let's import fly from svelte transitions and quintInOut from svelte easing to animate them

import { fly } from 'svelte/transition';
import { quintInOut } from 'svelte/easing';

and let's create a default class for all the icons to position them correctly

<script>
  import {fly} from 'svelte/transition';
  import {quintInOut} from 'svelte/easing';
  // class variables
  export let loadingClass = '';
  export let errorClass = '';
  export let doneClass = '';
  // state variables
  export let loading = false;
  export let error = false;
  export let done = false;
  let iconClass = 'absolute right-2 top-2/4 transform -translate-y-2/4 ';
</script>

Our icon will have position absolute, relative to its button parent and vertically aligned in the middle thanks to the utility classes top-2/4 transform -translate-y-2/4

Creating our icons!

Let's now add our icons to our Button.svelte component right after our slot tag

We are going to need an If block for our different states

{#if loading}
  <span class={iconClass}>
    loading icon here
  </span>
{:else if error}
  <span class={iconClass}>
    error icon here
  </span>
{:else if done}
  <span class={iconClass}>
    done icon here
  </span>
{/if}

We're wrapping them in a span tag so we can use a svelte transition attribute on them.

This is the code for all the icons with the styles:


<button
    class="transition-all overflow-hidden transform relative text-white px-4 py-3 rounded-lg shadow-lg {loading
        ? loadingClass
        : ''} {error ? errorClass : ''} {done ? doneClass : ''} {loading || error || done
        ? 'pr-8 pl-4'
        : 'bg-blue-400 hover:bg-blue-600'}
  "
    on:click|preventDefault
>
    <slot />

    {#if loading}
        <span
            in:fly|local={{ duration: 600, y: 30, easing: quintInOut }}
            out:fly|local={{ duration: 300, y: 30 }}
            class={iconClass}
        >
            <svg class="spinner" viewBox="0 0 50 50">
                <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5" />
            </svg>
        </span>
    {:else if error}
        <span
            in:fly|local={{ duration: 600, x: 30, easing: quintInOut }}
            out:fly|local={{ duration: 300, x: 30 }}
            class={iconClass}
        >
            <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-5 w-5 fill-current"
                viewBox="0 0 20 20"
                fill="currentColor"
            >
                <path
                    fill-rule="evenodd"
                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
                    clip-rule="evenodd"
                />
            </svg>
        </span>
    {:else if done}
        <span
            in:fly|local={{ duration: 600, x: 30, easing: quintInOut }}
            out:fly|local={{ duration: 300, x: 30 }}
            class={iconClass}
        >
            <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-5 w-5"
                viewBox="0 0 20 20"
                fill="currentColor"
            >
                <path
                    fill-rule="evenodd"
                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                    clip-rule="evenodd"
                />
            </svg>
        </span>
    {/if}
</button>

<style>
    .spinner {
        animation: rotate 2s linear infinite;
        z-index: 2;
        width: 20px;
        height: 20px;
        z-index: 15;
    }
    .path {
        stroke: white;
        stroke-linecap: round;
        animation: dash 1.5s ease-in-out infinite;
    }
    @keyframes rotate {
        100% {
            transform: rotate(360deg);
        }
    }
    @keyframes dash {
        0% {
            stroke-dasharray: 1, 150;
            stroke-dashoffset: 0;
        }
        50% {
            stroke-dasharray: 90, 150;
            stroke-dashoffset: -35;
        }
        100% {
            stroke-dasharray: 90, 150;
            stroke-dashoffset: -124;
        }
    }
    .shake {
        animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97);
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        perspective: 1000px;
    }
    @keyframes shake {
        10%,
        90% {
            transform: translate3d(-2px, 0, 0);
        }

        20%,
        80% {
            transform: translate3d(4px, 0, 0);
        }

        30%,
        50%,
        70% {
            transform: translate3d(-6px, 0, 0);
        }

        40%,
        60% {
            transform: translate3d(6px, 0, 0);
        }
    }
</style>

We're using different duration values for in and out because we want the animation to leave quicker than it comes in to leave room for the next icon to take the spotlight.

the shake and spinner classes are for the error animation and the spinner respectively, you can use any other icon here, this is just as an example.

NICE 🥳

Our button component is now finished and it should look like this:

<script>
    import { fly } from 'svelte/transition';
    import { quintInOut } from 'svelte/easing';
    // class variables
    export let loadingClass = '';
    export let errorClass = '';
    export let doneClass = '';
    // state variables
    export let loading = false;
    export let error = false;
    export let done = false;

    let iconClass = 'absolute right-2 top-2/4   transform -translate-y-2/4 ';
</script>

<button
    class="transition-all overflow-hidden transform relative text-white px-4 py-3 rounded-lg shadow-lg {loading
        ? loadingClass
        : ''} {error ? errorClass : ''} {done ? doneClass : ''} {loading || error || done
        ? 'pr-8 pl-4'
        : 'bg-blue-400 hover:bg-blue-600'}
  "
    on:click|preventDefault
>
    <slot />

    {#if loading}
        <span
            in:fly|local={{ duration: 600, y: 30, easing: quintInOut }}
            out:fly|local={{ duration: 300, y: 30 }}
            class={iconClass}
        >
            <svg class="spinner" viewBox="0 0 50 50">
                <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5" />
            </svg>
        </span>
    {:else if error}
        <span
            in:fly|local={{ duration: 600, x: 30, easing: quintInOut }}
            out:fly|local={{ duration: 300, x: 30 }}
            class={iconClass}
        >
            <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-5 w-5 fill-current"
                viewBox="0 0 20 20"
                fill="currentColor"
            >
                <path
                    fill-rule="evenodd"
                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
                    clip-rule="evenodd"
                />
            </svg>
        </span>
    {:else if done}
        <span
            in:fly|local={{ duration: 600, x: 30, easing: quintInOut }}
            out:fly|local={{ duration: 300, x: 30 }}
            class={iconClass}
        >
            <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-5 w-5"
                viewBox="0 0 20 20"
                fill="currentColor"
            >
                <path
                    fill-rule="evenodd"
                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                    clip-rule="evenodd"
                />
            </svg>
        </span>
    {/if}
</button>

<style>
    .spinner {
        animation: rotate 2s linear infinite;
        z-index: 2;
        width: 20px;
        height: 20px;
        z-index: 15;
    }
    .path {
        stroke: white;
        stroke-linecap: round;
        animation: dash 1.5s ease-in-out infinite;
    }
    @keyframes rotate {
        100% {
            transform: rotate(360deg);
        }
    }
    @keyframes dash {
        0% {
            stroke-dasharray: 1, 150;
            stroke-dashoffset: 0;
        }
        50% {
            stroke-dasharray: 90, 150;
            stroke-dashoffset: -35;
        }
        100% {
            stroke-dasharray: 90, 150;
            stroke-dashoffset: -124;
        }
    }
    .shake {
        animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97);
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        perspective: 1000px;
    }
    @keyframes shake {
        10%,
        90% {
            transform: translate3d(-2px, 0, 0);
        }

        20%,
        80% {
            transform: translate3d(4px, 0, 0);
        }

        30%,
        50%,
        70% {
            transform: translate3d(-6px, 0, 0);
        }

        40%,
        60% {
            transform: translate3d(6px, 0, 0);
        }
    }
</style>

it's now time to go back to our index.svelte file to fetch our Pokemons!

Use pokeAPI to get our Pokemons 🐛

Consuming APIs in Svelte is really easy, we are going to use the fetch API and svelte's await blocks to do the job.

your index file should look something like this at this point

<script>
    import Button from '../components/ui/buttons/Button.svelte';

    // button states
    let isLoading = false;
    let isError = false;
    let isDone = false;
</script>

<div class="flex my-8 justify-center">
    <Button
        loading={isLoading}
        error={isError}
        done={isDone}
        loadingClass="bg-yellow-600 scale-110 active:bg-yellow-600"
        errorClass="bg-red-600 scale-110 shake active:bg-red-600"
        doneClass="bg-green-600 scale-110 active:bg-green-600"
    >
  Catch Pokemon
    </Button>
</div>

First of all, let's add some initial state to hold our pokemons

let pokemons = null;

this pokemons variable will be populated with the response from our API call, let's now browse to the pokeAPI website to check how to query for what we want.

For the purpose of this tutorial we will only fetch 20 pokemons but you'll be able to adjust the limit to your liking.

Here's our endpoint with our query
https://pokeapi.co/api/v2/pokemon?limit=20

let's create a variable for the limit and let's also add a delay one we're going to use for our state changes

let pokemons = null;
let limit = 20;
let delay = 2000;

now that our variables are set we can proceed with creating a function that will fetch our data, since fetch returns a promise, we can use async/await to get our pokemons

async function fetchPokemon() {
    const response = await fetch(`https://pokeapi.co/api/v2/pokemon?limit=${limit}`);   return response.json();
}

note that we're using our limit variable to set how many pokemons we want to fetch; meaning we're probably never going to have to touch this function again.

Nothing is happening yet, we still have to call our function, let's call it when we click on our Button component and let's also move it to the centre of the page.

To move it to the centre we'll just wrap it in a flex div and justify its content to the centre, like so

<div class="flex my-8 justify-center">
    <Button
        loading="{isLoading}"
        error="{isError}"
        done="{isDone}"
        loadingClass="bg-yellow-600 scale-110 active:bg-yellow-600"
        errorClass="bg-red-600 scale-110 shake active:bg-red-600"
        doneClass="bg-green-600 scale-110 active:bg-green-600"
    >
        Catch Pokemon
    </Button>
</div>

and add an on click event to it, with a function that we still have to write called handleButton

<Button
  on:click={handleButton}
  ...

before we write the function we can add different text based on the state, like so:

<Button
        on:click={handleButton}
        loading={isLoading}
        error={isError}
        done={isDone}
        loadingClass="bg-yellow-600 scale-110 active:bg-yellow-600"
        errorClass="bg-red-600 scale-110 shake active:bg-red-600"
        doneClass="bg-green-600 scale-110 active:bg-green-600"
    >
        {#if isLoading}
            Catching Pokemons...
        {:else if isError}
            You've already caught 'em all
        {:else if isDone}
            Got 'em!
        {:else}
            Catch Pokemon
        {/if}
</Button>

the handleButton function

this function is what is going to control what happens when you press the Button component, I'm going to use setTimeouts to artificially delay the loading state, this is because our 20 pokemon request is usually super quick and you wouldn't be able to see the state at all othwerwise - ideally the loading state should change to "done" right after the response comes from the API.

Let's write the function

function handleButton() {
    // we only fetch once on this demo
    // this is so we can display "error"
    // if someone tries to fetch twice
    if (!pokemons) {
        // this sets our pokemons variable
        // to the API response
        pokemons = fetchPokemon();
        // set loading state
        isLoading = true;
        // reset loading state
        setTimeout(() => {
            isLoading = false;
            isDone = true;
            // return to default
            setTimeout(() => {
                isDone = false;
            }, delay);
        }, delay);
    } else {
        // if I've already fetched then
        // switch to error state
        isError = true;
        setTimeout(() => {
            isError = false;
        }, delay);
    }
}

Another way of doing this without the artificial delay would be adding the loading state to the fetchPokemon function and using a reactive state, just as a quick example:

$: if (pokemons?.length) {
    isLoading = false;
}

async function fetchPokemon() {
    isLoading = true;
    const response = await fetch(`https://pokeapi.co/api/v2/pokemon?limit=${limit}`);
    return response.json();
}

Display our pokemons

There are several ways to do this but a nice and simple way is to use svelte's await blocks

{#await promise}
  Loading message...
{:then result}
  Use your {result}
{:catch error}
  Handle the error {error}
{/await}

I'm going to be use grid to display the pokemons and a fade transition for the safety check, first let's check if the pokemons variable is populated

{#if pokemons}
  <div
        transition:fade={{ duration: 800, easing: quintInOut }}
        class="grid grid-cols-2 lg:grid-cols-5 gap-8 my-8"
    >
  {#await pokemons}
    Loading...
  {:then result}
    Use your {result}
  {:catch error}
    Handle the error {error}
  {/await}
  </div>
{/if}

the fade transition will happen when the condition is met so when pokemons is not a falsy value

All we need to do now is to create an each loop using svelte's each blocks to loop through our results and render each individual pokemon, let's get inside {:then result}

  {#await pokemons}
            Loading...
    {:then result}
        {#each result.results as pokemon, i}
      <div
        class="border border-gray-600 p-8 rounded-xl text-white bg-gray-800 hover:bg-gray-900 shadow-lg capitalize"
        transition:fly={{ duration: 200, y: 30, delay: i * 100 }}
      >
        <h3 class="text-2xl font-extrabold">{pokemon.name}</h3>
        <h5 class="text-base">Pokemon #{i + 1}</h5>
      </div>
    {/each}
    {:catch error}
        An error has occurred {error}
    {/await}

let's break this down:

result will be our response object, as you can see from here

what we want from this object is the key results which holds all our 20 pokemons, so this is how we loop through them:

{#each result.results as pokemon, i}
  individual pokemon here {pokemon.name}
{#each}

i would be our index, but we can also use this to identify the pokemon number, which will be useful to grab the relative image for each one of them, we just need to make a simple change.

Indexes start at 0 in javascript but our first pokemon would be 1, all we need to do is add 1 to our index to find out our Pokemon number.

to fetch the images I've had a look at a sample pokemon response from here and found that the image URLs follow this pattern:

https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/{pokemonNumber}.png

where pokemonNumber woud be our i + 1 in our loop.

All together should look like this:

{#if pokemons}
    <div
        transition:fade={{ duration: 800, easing: quintInOut }}
        class="grid grid-cols-2 lg:grid-cols-5 gap-8 my-8"
    >
        {#await pokemons}
            Loading...
        {:then result}
            {#each result.results as pokemon, i}
                <div
                    class="border border-gray-600 p-8 rounded-xl text-white bg-gray-800 hover:bg-gray-900 shadow-lg capitalize"
                    transition:fly={{ duration: 200, y: 30, delay: i * 100 }}
                >
                    <img
                        src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/{i +
                            1}.png"
                        alt={pokemon.name}
                    />
                    <h3 class="text-2xl font-extrabold">{pokemon.name}</h3>
                    <h5 class="text-base">Pokemon #{i + 1}</h5>
                </div>
            {/each}
        {:catch error}
            An error has occurred {error}
        {/await}
    </div>
{/if}

ALL DONE! 👏👏

Our very simple button state application is now finished, the end result is here if you need any help referencing the code.

Hope this guide will help you get more familiar with Svelte, thanks for checking it out and let me know in the comments if you have any ideas to improve it further!