Forem: Gambhir Sharma

Building Jardinains using Amazon-q

Gambhir Sharma — Sat, 12 Jul 2025 02:03:28 +0000

This is my submition for Amazon Q Build Games Challenge

The Spark of Nostalgia

Imagine this: It’s 2008, and I’m sitting next to my father at his new Acer Aspire laptop. The room echoes with the satisfying sounds of bouncing balls and shattering bricks as we take turns playing Jardinains!, each of us determined to beat the other’s high score. Those moments of friendly rivalry and shared laughter became some of my most treasured childhood memories.

Now, as an engineering student competing in the Amazon Q Build Games Challenge, I knew exactly what I wanted to bring to life. Not just any game, but that game, the one that brought my father and me closer, and showed me how the simplest ideas can create the most unforgettable experiences.

Why Jardinains? The Perfect Retro Choice

There's something beautifully pure about Jardinains! - just a ball, paddle, and colorful bricks, yet endlessly captivating. It's the kind of game anyone can learn in seconds but takes forever to master.

For this AI challenge, it was the ideal canvas - complex enough to showcase Q Developer CLI's capabilities, yet simple enough to focus on what really matters: recreating those magical gaming moments that made us fall in love with games in the first place.

v1.0.0 with Amazon Q

I kicked off this project by installing Amazon Q Developer CLI using brew install --cask amazon-q and following the setup instructions. Once everything was ready, I integrated Amazon Q with my Alacritty terminal. For my first experiment, I simply typed q chat and gave it a straightforward prompt:
"Build a CLI game using pygame like Jardinains."

To my surprise, Amazon Q delivered an impressive first draft!

The initial version already included most of the features I wanted, and I was genuinely excited by how quickly things came together. Of course, there were a few areas I wanted to tweak and improve. Let’s take a closer look at the code and the enhancements I made.

Mouse/Trackpad Control

In the first iteration, the game only supported keyboard controls. I wanted to add mouse and trackpad support for a more intuitive experience. I went back to Amazon Q, requested this feature, and it generated the correct implementation right away:

def update(self):
    if self.mouse_control:
        # Mouse/trackpad control
        mouse_x = pygame.mouse.get_pos()[0]
        self.x = mouse_x - self.width // 2
        self.x = max(0, min(self.x, SCREEN_WIDTH - self.width))
    else:
        # Keyboard control
        keys = pygame.key.get_pressed()
        if keys[pygame.K_LEFT] and self.x > 0:
            self.x -= self.speed
        if keys[pygame.K_RIGHT] and self.x < SCREEN_WIDTH - self.width:
            self.x += self.speed

Bringing Back the Nostalgic Sound

A huge part of Jardinains’ charm is its classic sound effects—the satisfying clink of breaking bricks and the iconic start and end jingles. To capture that nostalgia, I downloaded the original soundtracks from this website and placed them in my project’s assets/sound/ folder.

With Amazon Q’s help, I integrated these sounds using Pygame’s mixer module and a simple SoundManager class. Now, the game plays the authentic sounds at just the right moments:

Game Start: Plays the classic start jingle.
Brick Break: Plays the original brick-breaking sound.
Win or Game Over: Plays the corresponding victory or end tune.

And that’s how we completed the whole project!

References

Official challenge page Build Classics with Amazon Q Developer CLI
Source Code gambhirsharma/jardinains-cli

One Byte Explainer: IndexedDB

Gambhir Sharma — Sat, 30 Mar 2024 03:42:11 +0000

This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature.

Explainer

IndexedDB Browser API is a powerful tool for managing client-side databases in web browsers. It allows you to store and retrieve data locally, making it faster and more efficient than traditional storage methods like cookies. With features like transactions and indexes, developers can create robust offline applications with ease.

Additional Context

Check out idb. A JS/TS library that improves the performance of traditional browser IndexedDB with promises.

Ending

Thanks for reading my article.Don't forget to like and share this article with others. Bye until next time..👋

Dev Coffee

Gambhir Sharma — Sat, 30 Mar 2024 03:32:10 +0000

This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.

Inspiration

Is it even relevant to ask whether or not you enjoy coffee or tea as a developer? This question offends me, in my opinion. I'm drinking my morning coffee even as I write this. My day begins with tea or coffee. Coffee lifts my spirits at both happy and sad moments. Although I am aware that my body cannot handle too much caffeine, I make an effort to limit my intake. I used to drink my coffee in enormous glasses, but I've switched to tiny cups lately. I drink three little cups of coffee a day. Saying that let's begin with this blog. Happy coffee happy coding. 😉

Demo

Journey

Step: 01

Make the Cup and Plate

<div class="container">
  <div class="plate"></div>
  <div class="cup">
    <div class="top">
      <div class="circle">
        <div class="tea"></div>
      </div>
    </div>
    <div class="handle"></div>
  </div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #607d8b;
}
.container {
  position: relative;
  top: 50px;
}
.cup {
  position: relative;
  width: 280px;
  height: 300px;
  background: linear-gradient(to right, #f9f9f9, #d9d9d9);
  border-bottom-left-radius: 45%;
  border-bottom-right-radius: 45%;
}
.top {
  position: absolute;
  top: -30px;
  left: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(to right, #f9f9f9, #d9d9d9);
  border-radius: 50%;
}
.circle {
  position: absolute;
  top: 5px;
  left: 10px;
  width: calc(100% - 20px);
  height: 50px;
  background: linear-gradient(to left, #f9f9f9, #d9d9d9);
  border-radius: 50%;
  box-sizing: border-box;
  overflow: hidden;
}
.tea {
  position: absolute;
  top: 20px;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#c57e65, #e28462);
  border-radius: 50%;
}
.handle {
  position: absolute;
  top: 40px;
  right: -70px;
  width: 160px;
  height: 180px;
  border: 25px solid #dcdcdc;
  border-left: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-radius: 50%;
  transform: rotate(42deg);
}
.plate {
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 200px;
  background: linear-gradient(to right, #f9f9f9, #e7e7e7);
  border-radius: 50%;
  box-shadow: 0 35px 35px rgba(0, 0, 0, 0.2); 
}

Step 02

Shadows and Details

...
  <div class="cup">
    <i class="devto">
      <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/logos/resized_logo_UQww2soKuUsjaOGNB38o.png" />
    </i>
    <div class="top">
...

.plate::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border-radius: 50%;
  background: linear-gradient(to left, #f9f9f9, #e7e7e7);
} 
.plate::after {
  content: "";
  position: absolute;
  top: 30px;
  left: 30px;
  right: 30px;
  bottom: 30px;
  border-radius: 50%;
  background: radial-gradient(
    rgba(0, 0, 0, 0.2),
    25%,
    transparent,
    transparent
  );
}
.devto {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 2rem;
  border-radius: 5px;
}

Step: 03

Adding vapour animation

    <div class="top">
      <div class="vapour">
        <span style="--i:1;"></span>
        <span style="--i:3;"></span>
        <span style="--i:16;"></span>
        <span style="--i:5;"></span>
        <span style="--i:13;"></span>
        <span style="--i:20;"></span>
        <span style="--i:6;"></span>
        <span style="--i:7;"></span>
        <span style="--i:10;"></span>
        <span style="--i:8;"></span>
        <span style="--i:17;"></span>
        <span style="--i:11;"></span>
        <span style="--i:12;"></span>
        <span style="--i:14;"></span>
        <span style="--i:2;"></span>
        <span style="--i:9;"></span>
        <span style="--i:15;"></span>
        <span style="--i:4;"></span>
        <span style="--i:19;"></span>

      </div>
      <div class="circle">
        <div class="tea"></div>
      </div>
    </div>
    <div class="handle"></div>

.vapour {
  position: relative;
  display: flex;
  z-index: 1;
  padding: 0 20px;
}
.vapour span {
  position: relative;
  bottom: 50px;
  display: block;
  margin: 0 2px 50px;
  min-width: 8px;
  height: 120px;
  background: #fff;
  border-radius: 50%;
  animation: animate 5s linear infinite;
  filter: blur(8px);
  animation-delay: calc(var(--i) * -0.5s);
}
@keyframes animate {
  0% {
    transform: translateY(0) scaleX(1);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  50% {
    transform: translateY(-150px) scaleX(5);
  }
  95% {
    opacity: 0;
  }
  100% {
    transform: translateY(-300px) scaleX(10);
  }
}

Ending

Thanks for reading my article. Also don't forget to like and share the CodePen. Bye until next time..👋