DEV Community

Cover image for 🐶Super Dogmons🧿
Diego Cardoso
Diego Cardoso

Posted on

4 2 3 3 4

🐶Super Dogmons🧿

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>
Enter fullscreen mode Exit fullscreen mode

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. ♡

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (2)

Collapse
 
programordie profile image
programORdie

Nice idea!

Collapse
 
diegocardoso93 profile image
Diego Cardoso

Thanks bro! I appreciate that.

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay