DEV Community

Cover image for Weekend Challenge: Dog Days Edition
John
John

Posted on Edited on

Weekend Challenge: Dog Days Edition

#devchallenge #weekendchallenge #googleaichallenge #gamedev

DEV Weekend Challenge: Dog Days Edition Submission 🐕

This is a submission for Weekend Challenge: Dog Days Edition

IMPORTANT EDIT / Update 18/08/2026 16.30 (after deadline)

Summary:

I had to update the Bark Gallery code because the original implementation was unintentionally broken.
The game itself, the mechanics, the prompts, and the challenge rules did not change.
Only the data sync layer was fixed so that uploads and votes are actually visible to everyone.
Without this fix the project was totally broken.

🐕 What was broken
The original Bark Gallery stored all drawings and votes only in localStorage:
Every visitor had their own private gallery
Votes were not shared
Uploads were not visible to anyone else
Leaderboard always reset to the 10 default SVGs
Clearing cache or using another device wiped everything
This meant the challenge appeared inactive even wen/if people were uploading and voting — because nobody could see each other’s entries.

🔧 What I changed
I updated the sync system so the gallery uses a real backend instead of localStorage.
I added a new table (bark_gallery) to my existing Supabase project (the same one used for Duckmon)

The game logic did not change - only the storage layer.

📦 What did NOT change
The gameplay
The drawing prompts
The rules
The UI
The challenge format
The submission flow
The scoring system

Only the sync method changed - from localStorage to Supabase.

Lesson Learned.

What I Built 🐶

Bark Gallery: Speed Sketch Challenge is an arcade-style, browser-based community drawing and voting game built to celebrate International Dog Day!

Players receive a randomized, humorous canine scenario generated using Google AI Studio's Gemini 3.7 Flash model, such as:

  • 🍕 A dog caught stealing a slice of pizza
  • 🩺 A dog doctor checking a heartbeat with a stethoscope
  • 🍝 A dog chef cooking spaghetti in a chaotic kitchen
  • 🔍 A dog detective inspecting clues with a magnifying glass
  • 🏖️ A dog and a duck playing on the beach (Duckmon crossover!)

🎮 The Core Loop

  1. 90-Second Sprint: You get 90 seconds to sketch your masterpiece using our MS Paint-style spray tool, custom color palette, undo stack, and canvas controls.

  2. Arcade Dog Tag: When the timer ends, sign your artwork with a custom arcade dog tag.

  3. Community Voting: Your sketch uploads instantly to the live Community Bark Gallery, where visitors can vote in real time:

    • ❤️ Like → +1 point
    • 🦴 Treat / Super Like → +3 points

  4. Top 10 Leaderboard: Scores recalculate on the fly and feed into the dynamic leaderboard!

Demo 🎮

Code 💻

The complete game is architected as a lightweight, single-file client application featuring an HTML5 <canvas> engine, custom particle spray physics, real-time client-side JPEG compression, voting state persistence, and dynamic leaderboard sorting.

EDIT - Removed the massive code block - it is visible in my github repo.

How I Built It 🛠️

🏗️ Architecture & Hosting Transparency

I chose to host this project on my existing studio domain (Quackwork Studios) and custom backend infrastructure because it was the fastest, most reliable way to deliver a friction-free demo.

  • Pre-Existing Infrastructure: My website already had a working deployment pipeline, SSL certificates, edge caching, and a clean base template ready to go.

  • Built 100% from Scratch for this Challenge: The Bark Gallery game itself (doggame.html), its canvas engine, voting logic, and Gemini-generated assets did not exist before this hackathon.

  • Zero Friction for Judges: Deploying on my own infrastructure let me skip third-party sandbox restrictions and ensure judges and players could jump right in with instant load times and zero configuration.

🤖 Solo Dev Pairing Workflow with Google AI Studio

All development, prototyping, prompt generation, debugging, and code creation was done inside Google AI Studio using the Gemini 3.7 Flash model from the Featured tab. Gemini acted as a real-time technical co-pilot throughout the build:

  1. Ideation & Prototyping: We brainstormed dog-themed concepts tailored to the 48-hour hackathon timeframe, taking the idea from initial concept to a playable browser prototype in under an hour.

  2. Full-Stack Frontend Generation: Gemini generated the single-file architecture (doggame.html), including the touch/mouse event listeners, undo state history, and particle-based MS Paint spray effects.

  3. Asset Generation in Code: Gemini generated 10 hand-drawn SVG dog illustrations directly in code to pre-populate the community gallery with starter doodles.

  4. Live Debugging & Refactoring: Diagnosed server 404s, resolved edge caching issues, and refactored the canvas engine during development.

🎨 Creative Features & Toolkit

  • 🖌️ Drawing Suite:
    • 💨 MS Paint-Style Spray Can: Realistic particle dispersion physics.
    • ✏️ Pen & Eraser: 3 stroke thicknesses (Thin, Med, Thick).
    • 🎨 18-Color Swatch Palette: From vibrant neon accents to natural fur tones.
    • ↩️ 15-Step Undo Stack: Fast state restoration to undo misclicks.
  • 🕹️ Canvas Controls:
    • 🎲 Skip: Pulls a fresh prompt and resets the 90s countdown.
    • 🔄 Reset: Clears canvas and restarts the timer for the same prompt.
    • 🗑️ Clear: Wipes the current sketch immediately.

🛑 Roadblocks, Errors & Solutions

  1. The Linux Case Sensitivity 404:

    • Bug: Deploying to GitHub Pages gave a 404 Not Found.
    • Cause: The file was committed as Doggame.html (capital D) while the link targeted /doggame.html.
    • Fix: Renamed to all-lowercase doggame.html and redeployed.

  2. Aggressive Edge Caching:

    • Bug: Fresh commits weren't showing up immediately for players.
    • Fix: Added cache-busting version query parameters (?v=2, ?v=3) and purged edge caches.

  3. Client-Side API Deprecation & Key Friction:

    • Bug: Querying external models client-side required exposing or asking users for API keys.
    • Fix: Pivoted to a 100% frictionless Community Speed-Sketch Showcase: client-side JPEG compression (~15KB) paired with instantaneous real-time voting and leaderboard ranking. Zero backend latency, zero friction, and 100% uptime.

Prize Categories 🏆

I am submitting this project for:

🌟 Best Use of Google AI

Bark Gallery was developed end-to-end with Google AI Studio (Gemini 3.7 Flash):

  • Generating all humorous, chaotic prompt scenarios
  • Generating the core HTML5 canvas engine and particle spray physics
  • Generating the embedded starter SVG illustrations
  • Debugging deployment, caching, and state management logic

🐾 About the Developer

I'm John, a self-taught, solo indie game developer building games at Quackwork Studios (currently developing the multiverse card battler Duckmon).

Grab your digital spray can, post your dog sketch, don't forget to vote and enter, and let's celebrate International Dog Day! 🐕🎨

Edit - Adjusted Title
Edit #2 - Removed the massive code block - it is visible in my github repo.
Edit #3 IMPORTANT EDIT / Update 18/08/2026 16.30 - Changed from local to supabase for data

Top comments (0)