DEV Community: Diego Cardoso

🐶Super Dogmons🧿

Diego Cardoso — Sun, 13 Oct 2024 05:13:35 +0000

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

300LOC space life protect

Diego Cardoso — Fri, 27 Sep 2024 23:39:36 +0000

This is a submission for the Web Game Challenge, Build a Game: Alien Edition

What I Built

you are a black hole and your mission is eat alien-shotted comets and stars, to protect planets, satellites and rockets
A 300 Lines of Code game

Demo

to play:

click on Result tab
use ⓌⒶⓈⒹ keys

Journey

I like to craft things from scratch

Copyleft ɔ

Stellar Pinball 🪐

Diego Cardoso — Fri, 16 Aug 2024 13:00:07 +0000

This is a submission for the Build Better on Stellar: Smart Contract Challenge : Build a dApp

What I Built 🔨

A serverless pinball game to play in the browser.
The Scoreboard is stored inside an smart contract on Stellar Network. 🌌
Cloudflare Pages was used to serve page assets to the client.

Demo 🎮

How to play

Use the keys [spacebar] [A] [D].
To save your progress, at the end of the game use the Freighter Wallet on the Testnet.
Follow the next link to give it a try.

stellar-pinball.pages.dev

My Code 📄

The full code can be found on the public repository here: https://github.com/diegocardoso93/stellar-pinball

The Soroban smart contract of this application is simple yet powerful. It explores the built-in SDK datastructures Map and Vec to store data. This allows the Scoreboard to run without needing server-side backend.

#![no_std]
use soroban_sdk::{
    contract, contractimpl, 
    contracttype, Env, vec,
    Vec, Address, Map, map
};

#[contract]
pub struct ScoreboardContract;

#[derive(Clone)]
#[contracttype]
pub enum DataKey {
    Scores
}

#[contractimpl]
impl ScoreboardContract {
    pub fn save_score(env: Env, player: Address, score: u32) -> bool {
        add_score(&env, player, score);
        true
    }
    pub fn show(env: Env) -> Map<Address, Vec<u32>> {
        let scores: Map<Address, Vec<u32>> = env.storage()
            .persistent()
            .get(&DataKey::Scores)
            .unwrap_or(map![&env]);
        scores
    }
}

fn add_score(env: &Env, player: Address, score: u32) {
    let mut scores: Map<Address, Vec<u32>> = env.storage()
        .persistent()
        .get(&DataKey::Scores)
        .unwrap_or(map![&env, (player.clone(), vec![&env])]);
    let mut player_scores = scores.get(player.clone()).unwrap_or(vec![&env]);
    player_scores.push_back(score);
    scores.set(player, player_scores);
    env.storage().persistent().set(&DataKey::Scores, &scores);
}

Journey 🚎

At the beginning of the process of development it was necessary to open several browser tabs, looking for documentation mainly on how to use the SDK.
The official documentation links was used, in particular:

They are written in a very easy to follow way, which makes the learning process smoother.
To find out how to interact with the wallet, the User Guide > Using Freighter in a web app was used, which was also very helpful. Everyone who is starting out (like me) should check it out, huh? 📖
Furthermore, the Okashi development environment made the mission of learning Soroban Smart Contract enjoyable and interactive.

For the next steps, the aim is to

add mobile-friendly controls
improve the game, making it more "money-driven-way" — perhaps charging "coins" like a machine — and distributing the value periodically among the players
review the contract from a security perspective, to avoid bad actors manipulating data writing
replay features for scoreboard plays
continue learning more about the Stellar ecosystem to build more complex dApps in the future 🚀

Additional Prize Categories: Glorious Game

Thanks for your time!

300LOC Frogger

Diego Cardoso — Thu, 25 Jul 2024 19:45:14 +0000

This is a submission for Frontend Challenge v24.07.24, CSS Art: Recreation.

Inspiration

Atari 3600 Frogger game. prototype in just 300 lines of code

Demo

Use ⓌⒶⓈⒹ keys

Journey

I coded it today's afternoon just 4fun

FunnyQuotes

Diego Cardoso — Thu, 20 Jun 2024 20:16:58 +0000

This is a submission for the Twilio Challenge

What I Built

FunnyQuotes is a site hosted on Cloudflare. Every day, five quotes and five images are generated by AI on the edge by Cloudflare Workers. The AI models used is @cf/meta/llama-3-8b-instruct to generate the text and @cf/stabilityai/stable-diffusion-xl-base-1.0 to generate the images.

Demo

https://funnyquotes.pages.dev/

Twilio and AI

FunnyQuotes uses Twilio API to send SMS message to subscribed phones directly from Cloudflare Worker. The user phones, generated images and quotes are saved on Cloudflare KV storage.

Additional Prize Categories

Entertaining Endeavors category.

Team Submissions:
Diego Cardoso (diegocardoso93)

Take a look at the full project code _worker.js:

import { Buffer } from 'node:buffer';

var CLOUDFLARE_ACCOUNT_ID;
var CLOUDFLARE_BEARER_TOKEN;
var TWILIO_ACCOUNT_SID;
var TWILIO_AUTH_TOKEN;
var TWILIO_PHONE_NUMBER;

export default {
  async fetch(request, env) {
    CLOUDFLARE_ACCOUNT_ID = env.CLOUDFLARE_ACCOUNT_ID;
    CLOUDFLARE_BEARER_TOKEN = env.CLOUDFLARE_BEARER_TOKEN;
    TWILIO_ACCOUNT_SID = env.TWILIO_ACCOUNT_SID;
    TWILIO_AUTH_TOKEN = env.TWILIO_AUTH_TOKEN;
    TWILIO_PHONE_NUMBER = env.TWILIO_PHONE_NUMBER;

    const url = new URL(request.url);

    if (url.pathname.startsWith('/generate')) {
      const phrases = (await generatePhrases()).split('\n').filter(s => s[0]>0 && s[0]<10);
      for (const i in phrases) {
        await env.FUNNYQUOTES.put(`IMG${i}`, `data:image/png;base64,${new Buffer(await generateImage(phrases[i])).toString('base64')}`);
        await env.FUNNYQUOTES.put(`QUOTE${i}`, phrases[i]);
      }

      return new Response('OK');
    }

    if (url.pathname.startsWith('/notify')) {
      const phones = JSON.parse(await env.FUNNYQUOTES.get(`PHONES`) || '[]');
      let ret = [];
      for (const phone of phones) {
        ret.push(await sendSMS(`Funny Quotes: daily feed. https://funnyquotes.pages.dev`, phone));
      }
      return new Response(JSON.stringify(ret));
    }

    if (url.pathname.startsWith('/subscribe')) {
      const phone = url.searchParams.get('phone') || '';
      if (phone.length < 6) { return; }
      const phones = JSON.parse(await env.FUNNYQUOTES.get(`PHONES`) || '[]');
      if (!phones.includes(phone)) {
        phones.push(phone);
      }
      await env.FUNNYQUOTES.put(`PHONES`, JSON.stringify(phones));
      return new Response(JSON.stringify({success: 1}));
    }

    const img = url.searchParams.get('img') || '';
    if (img) {
      return new Response(JSON.stringify({
        img: await env.FUNNYQUOTES.get(`IMG${img}`),
        quote: await env.FUNNYQUOTES.get(`QUOTE${img}`)
      }), { headers: { 'Content-Type': 'text/json' } });
    }

    return new Response(getTemplate(), { headers: { 'Content-Type': 'text/html' } });
  },
}

async function sendSMS(message, phone) {
  const url = `https://api.twilio.com/2010-04-01/Accounts/${TWILIO_ACCOUNT_SID}/Messages.json`;
  const params = new URLSearchParams({
    To: phone,
    From: TWILIO_PHONE_NUMBER,
    Body: message,
  });

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      Authorization: `Basic ${Buffer.from(`${TWILIO_ACCOUNT_SID}:${TWILIO_AUTH_TOKEN}`).toString('base64')}`,
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: params,
  });

  return response.json();
}

async function generatePhrases(q) {
  const { result } = await run("@cf/meta/llama-3-8b-instruct", {
    messages: [
      { role: "system", content: "language: en-us" },
      {
        role: "user",
        content: q || `generate 5 funny motivational phrases for life`,
      },
    ],
  });
  return result.response;
}

async function generateImage(q) {
  return await run("@cf/stabilityai/stable-diffusion-xl-base-1.0", {
    prompt: `no text. oil painted style. "${q || 'random'}"`
  }, 'arrayBuffer');
}

async function run(model, input, returnType) {
  const response = await fetch(
    `https://api.cloudflare.com/client/v4/accounts/${CLOUDFLARE_ACCOUNT_ID}/ai/run/${model}`,
    {
      headers: { Authorization: `Bearer ${CLOUDFLARE_BEARER_TOKEN}` },
      method: "POST",
      body: JSON.stringify(input),
    }
  );
  let result;
  if (returnType == 'arrayBuffer') {
    result = await response.arrayBuffer();
  } else {
    result = await response.json();
  }
  return result;
}


function getTemplate() {
  const TEMPLATE = `<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Funny Quotes</title>
      <style>
        html, body, * {
          margin: 0;
          box-sizing: content-box;
        }
        .top-fixed {
          position: fixed;
          background: white;
          padding: 16px 0;
          width: 100%;
          margin: auto;
          text-align: center;
          border-bottom: 1px solid #ccc;
        }
        .top-fixed h1 {
          font-size: 26px;
        }
        .bottom-fixed {
          position: fixed;
          bottom: 0;
          width: 100%;
          margin: auto;
          text-align: center;
          background: white;
          padding: 6px 0 10px 0;
          border-top: 1px solid #ccc;
        }
        .bottom-fixed p {
          padding-bottom: 4px;
        }
        .bottom-fixed input, .bottom-fixed button {
          height: 26px;
        }
        .container {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 70px 0;
        }
        .card {
          border-radius: 3px;
          border: 1px solid #ccc;
          margin: auto;
          max-width: 512px;
          padding: 10px;
          margin: 10px;
        }
        .card img {
          width: 100%;
        }
        .card p {
          padding-top: 10px;
          font-size: 24px;
          text-align: center;
        }
      </style>
    </head>
    <body>
      <div class="top-fixed">
        <h1 id="title"></h1>
      </div>
      <div class="container">
        <div id="card0" class="card">Loading...</div>
        <div id="card1" class="card">Loading...</div>
        <div id="card2" class="card">Loading...</div>
        <div id="card3" class="card">Loading...</div>
        <div id="card4" class="card">Loading...</div>
      </div>

      <div class="bottom-fixed">
        <p>Subscribe to our daily news quotes notification</p>
        <input id="phone" type="text" placeholder="Enter your phone number..."></input>
        <button onclick="subscribe()">subscribe</button>
      </div>

      <script>
        window.addEventListener('load', async function (event) {
          document.querySelector('#title').innerText = 'Funny Quotes - ' + new Date().toLocaleDateString('en-US');

          for (let i=0;i<5;i++){
            const response = await fetch('?img='+i);
            const json = await response.json();
            document.querySelector('#card'+i).innerHTML = '<img src="'+json.img+'" /><p>'+json.quote+'</p>';
          }
        });

        async function subscribe() {
          const phone = document.querySelector('#phone');
          if (!phone.value || phone.value.length < 6) {
            alert('please enter your phone number');
            return;
          }
          const response = await fetch('/subscribe/?phone='+encodeURIComponent(phone.value));
          const json = await response.json();
          if (json.success) {
            alert('You are now subscribed.');
            phone.value = '';
          }
        }
      </script>
    </body>
  </html>
  `;
  return TEMPLATE;
}