🐶Super Dogmons🧿

#devchallenge #pinatachallenge #webdev #api

This is a submission for the The Pinata Challenge

What I Built

Super Dogmons is a minimalist dog-themed game inspired by Pokémon! In this game, you can capture adorable "dogmons" and discover their unique breeds. All images are hosted on Pinata IPFS ♡, ensuring fast and reliable access. So, what are you waiting for? Dive in and capture your dogmon now!

Demo

Check out the live demo of Super Dogmons here:
https://super-dogmons.pages.dev/

My Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🐶</text></svg>">
  <title>Super Dogmons</title>
  <style>
    body {
      background: black;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      width: 100vw;
      padding: 30px;
      box-sizing: border-box;
    }
    .container {
      margin: auto;
      width: 100%;
      max-width: 600px;
      display: flex;
      justify-content: center;
    }
    #ball {
      transition: all 100ms ease-out;
      filter: drop-shadow(0 0 30px #646cffaa);
    }
    #button {
      border-radius: 100%;
      background: rgba(0,0,0,0.8);
      border: 5px solid #000;
      width: 40px;
      height: 40px;
      margin-left: 222px;
      margin-top: -284px;
      z-index: 2;
      position: absolute;
      font-size: 50px;
      color: white;
    }
    #button:hover {
      background: #646cffaa;
      border: 5px solid #fff;
      cursor: pointer;
    }
    #reload {
      font-weight: bold;
      font-size: 40px;
      position: relative;
      z-index: 2;
      padding: 16px;
      color: white;
      cursor: pointer;
      text-align: right;
      margin-bottom: -78px;
    }
    .anim-left {
      transform: rotate(10deg);
    }
    .anim-right {
      transform: rotate(-10deg);
    }
    .anim-open {
      transform: rotate3d(1, 1, 1, 120deg);
    }
    .hide {
      display: none;
    }
    #breed {
      font-size: 40px;
      color: white;
      text-align: center;
      margin: 0;
      max-width: 500px;
      width: 100%;
    }
    #sorted {
      filter: drop-shadow(0 0 30px #646cffaa);
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="content">
      <div id="reload" class="hide" onclick="location.reload()">⟳</div>
      <img id="ball" />
      <img id="sorted" class="hide" />
      <div id="button" class="hide" onclick="openBall(event)"></div>
      <p id="breed" class="hide"></p>
    </div>
  </div>

  <script>
    const BASE_NODE = 'https://azure-abstract-eel-618.mypinata.cloud/ipfs';
    const URL_FOLDER = `${BASE_NODE}/QmVPx9xZfvt9oDNNhDHQm1xmatJ1cw6j3xhaaodkPoY8Up`;
    const ballEl = document.querySelector('#ball');
    const buttonEl = document.querySelector('#button');
    const sortedEl = document.querySelector('#sorted');
    const reloadEl = document.querySelector('#reload');
    const breedEl = document.querySelector('#breed');
    const labelBreeds = [
      'French Bulldog', 'Labrador Retriever', 'Golden Retriever', 
      'German Shepherd', 'Poodle', 'Bulldog', 'Rottweiler', 
      'Beagle', 'Dachshund', 'German Shorthaired Pointer', 
      'Pembroke Welsh Corgi', 'Australian Shepherd', 
      'Yorkshire Terrier', 'Cavalier King Charles Spaniel', 
      'Doberman Pinscher', 'Boxer', 'Miniature Schnauzer', 
      'Cane Corso', 'Great Dane', 'Shih Tzu'
    ];

    function animateBall() {
      ballEl.src = `${BASE_NODE}/QmQTbzpMbw7xR9MBo9iztgNG6asZ74zN2WVwztHX1KeKem`;
      ballEl.onload = () => {
        buttonEl.classList.remove('hide');
      }
      let direction = false;
      setInterval(() => {
        ballEl.classList.toggle('anim-left', direction);
        ballEl.classList.toggle('anim-right', !direction);
        direction = !direction;
      }, 500);
    }

    function openBall(event) {
      event.target.classList.add('hide');
      const imgId = Math.floor(Math.random() * labelBreeds.length);
      sortedEl.src = `${URL_FOLDER}/${('' + (imgId + 1)).padStart(2, '0')}.png`;
      ballEl.classList.remove('anim-left', 'anim-right');
      ballEl.classList.add('anim-open');
      sortedEl.onload = () => {
        ballEl.classList.add('hide');
        breedEl.innerHTML = `<b>Super</b> ${labelBreeds[imgId]}`;
        sortedEl.classList.remove('hide');
        reloadEl.classList.remove('hide');
        breedEl.classList.remove('hide');
      }
    }

    animateBall();
  </script>
</body>
</html>

More Details

Pinata makes it incredibly easy to host images. If you not try yet, go to https://pinata.cloud/ and see how intuitive to use it is. I uploaded all images to a single folder, naming them sequentially from 01 to 20. This naming convention simplifies the process of retrieving a random image when you click the "capture" button. All the awesome images was generated by FLUX.1-schnell model.
If you have any questions, feel free to ask them in the comments. ♡