Fit Game

Dress to Impress, but with your real closet. Snap your outfits, AI pixelates each piece onto your avatar, and friends vote on your look in a retro runway showdown.

Comment

Inspiration

We love Dress to Impress, but every outfit in it is made-up clothing you'll never own. We kept wondering: what if the closet was yours? What if you could style your real clothes for a ridiculous theme, then have your friends judge the look? We also wanted it to feel cozy and nostalgic, so the whole game lives inside a pastel pink, Windows 98-style desktop.

What it does

Fit Game is a multiplayer dress-up game built around your actual wardrobe.

  1. Lobby: Build a chibi pixel avatar (name, skin tone, hair color, hairstyle) and upload photos of your outfits. Copy the invite link, drop it in the group chat, and press Ready. Click your friends' names to preview their avatars.
  2. Outfit builder (60 seconds): Everyone gets the same random theme from a list of 200, like Y2K Pop Star, Cottagecore Picnic, or Dress Like Your Group Chat. Your clothes are sorted into Tops, Bottoms, Dresses, and Accessories, and your avatar wears each piece live as you click. Lock in early, or the timer saves your outfit at 0:00.
  3. Runway: Players walk out one at a time. Everyone else gets 10 seconds to rate the look from 1 to 5 stars.
  4. Podium: Players are ranked by total stars, and the top three take gold, silver, and bronze, wearing their winning fits.

How we built it

  • Frontend: Plain HTML, CSS, and JavaScript with a custom retro UI kit (beveled windows, title bars, tabs, scrollbars, a taskbar) in the Pixelify Sans font. No framework, so it loads instantly.
  • Avatars: A canvas renderer that draws every avatar pixel by pixel on a 64×96 grid, with a layered back hair → body → clothes → face → front hair → accessories stack and automatic outlines. Avatars only scale by whole numbers so pixels stay crisp.
  • Clothing extraction: Uploaded photos go to the server, where OpenAI's vision and image models pick out each garment and turn it into a transparent sprite that fits the avatar. The sprite is then pixelized to match the art style.
  • Multiplayer: A Node.js + Express server in TypeScript with WebSockets. The server runs each room as a state machine: lobby → building → runway → podium. It picks the theme, owns every timer, collects outfits and votes, and computes the ranking, so every player sees the same thing at the same moment.
  • Storage: SQLite for game data, and Sharp for image processing.
  • We used Claude Code as a pair programmer throughout the build.

Challenges we ran into

  • Keeping timers in sync across computers. Different laptops' clocks can be seconds apart, so a shared end time disagreed between players. We fixed it by sending the server's current time with every timed message, so each browser corrects for its own clock.
  • Not losing players between pages. Moving from the lobby to the builder to the runway drops the connection each time. The server holds each player's spot for 20 seconds so they reconnect as the same person.
  • Turning messy photos into clean pixel clothes. Real outfit photos have backgrounds, folds, and odd angles. Getting garments to sit on one shared avatar shape took a lot of iteration on the avatar spec.
  • Deploying. Our first deploy on Vercel failed, because serverless functions can't keep the always-open WebSocket connections the game needs. We moved to a long-running Node server instead.
  • Building in parallel. Two of us worked on the same branch at once and restructured the codebase midway (vanilla JS server → TypeScript backend), so we got a lot of practice merging.

Accomplishments that we're proud of

  • A full round works end to end with friends on different devices: lobby, themed styling, timed runway voting, and the podium.
  • The retro desktop look holds together across every screen, down to the beveled scrollbars and the "howto.txt" Notepad window.
  • 200 hand-written themes. Your Ex's Wedding is a crowd favorite.

What we learned

  • How to design real-time multiplayer: make the server the single source of truth, and treat browsers as displays.
  • Pixel art has rules: integer scaling, consistent outlines, and limited palettes matter more than detail.
  • Scoping for a hackathon: build the core loop first (dress up → vote → win), then polish.

What's next for Fit Game

  • Coins and a marketplace: podium winners earn coins to spend on pixel accessories, plus surprise boxes.
  • Accounts: email login so your closet and coins carry between sessions.
  • Smarter styling: auto-matching tops and bottoms, and color-theory hints.
  • Bigger rooms and a global leaderboard.o
Share this project:

Updates

Submission history