Who Is the wolf

Of course! I can definitely help you draft those sections for your hackathon submission. Based on the information you've provided, here is a detailed write-up for each section.

Inspiration

Our inspiration came from classic social deduction games like "Werewolf" and "Among Us." We love how these games create moments of suspense, deception, and hilarious debate. We wanted to bring that same engaging, community-driven experience directly to Reddit, a platform built around discussion and interaction. The idea was to create a game that could be played right inside a Reddit post, turning a simple thread into an interactive game board and allowing users to have a shared, dynamic experience.

What it does

"Who Is the Wolf?" is a single-player social deduction game built entirely on Devvit. When a user launches the game from a Reddit post, they are secretly assigned a role: either a "Sheep" or the "Wolf."

The game works like this:

• Secret Words: All Sheep are given the same secret word (e.g., "Apple"), while the Wolf is given a slightly different but related word (e.g., "Orange").
• Give Clues: Each player, including the user and several AI opponents, provides three one-word clues about their secret word. The user must give honest clues as a Sheep or deceptive clues as a Wolf to blend in.
• Accuse & Vote: After seeing all the clues, players discuss and vote to eliminate the player they believe is the Wolf.
• Win Conditions: The Sheep win if they successfully vote out the Wolf. The Wolf wins if they survive long enough to outnumber the Sheep.

The game features a retro pixel-art aesthetic, round-based scoring, and at the end of the game, it automatically posts a detailed comment in the Reddit thread with a full history of the game—including the words, clues, and who was eliminated each round.

How we built it

This project was built on Devvit, using the Bolt framework to leverage its powerful webview capabilities.

Our development process was iterative:

1. Foundation: Instead of a starter template, we chose the Pixelary repository as our foundation. This gave us a massive head start with a beautiful pixel-art design system and a proven webview architecture.
2. Prototyping: We began by building a simple, standalone React app to rapidly prototype the game's UI and user flow. This allowed us to solidify the game mechanics and visual design before diving into the Devvit-specific implementation.
3. Webview Architecture: The app's core is a hybrid model. The Devvit app (written in TypeScript with Devvit's API) handles creating the Reddit post and posting the final summary comment. The main game client is a webview (built with vanilla HTML, CSS, and JavaScript) that runs the entire interactive experience.
4. Message-Based Communication: We connected the two parts using a message-passing system. The webview client sends messages like gameOver with the full game history to the Devvit app, which then uses the Reddit API to post the summary comment.

Challenges we ran into

1. Live Multiplayer Complexity: Our initial vision was a fully live multiplayer game. However, we quickly discovered that testing and coordinating with multiple real-time users was impractical for a hackathon. Debugging was slow and difficult, so we made the strategic decision to pivot to an AI-driven single-player experience.
2. Image Loading Lag: We initially noticed a jarring delay as background images loaded when switching between game screens. To fix this, we implemented a robust preloading strategy using both HTML <link rel="preload"> tags and a JavaScript-based preloader to ensure all visual assets were ready before the game starts, creating a much smoother experience.
3. Responsive Pixel Art: Making a pixel-art UI responsive is inherently challenging. We created a custom GameTitlePixelText component in Devvit that dynamically calculates its scale based on the screen width, ensuring our title looked crisp and legible on any device without breaking the aesthetic.

Accomplishments that we're proud of

We are incredibly proud of building a complete, polished game from start to finish within the hackathon's timeframe. The final product has a full game loop, a scoring system, and a unique, retro feel.

We're particularly proud of the seamless integration between the webview front-end and the Devvit back-end. The ability to automatically post a detailed game summary as a comment is a fantastic feature that creates a lasting record of each playthrough right on Reddit. Finally, our successful pivot from a complex multiplayer concept to a polished single-player game with AI opponents was a key accomplishment that allowed us to deliver a fun and complete experience.

What we learned

This project was a fantastic learning experience. We gained a deep understanding of Devvit's webview architecture and how to effectively manage communication between the Devvit context and a client-side application. We also learned the importance of rapid prototyping; building a simple React app first saved us a huge amount of time. Most importantly, we learned to be pragmatic and adaptable—recognizing the technical challenges of live multiplayer and pivoting to a more achievable goal was crucial to our success.

What's next for Who Is the Wolf

The future is bright for "Who Is the Wolf?" Our next major goal is to implement our original vision for live multiplayer. We plan to use Devvit's real-time features and Redis to manage a shared game state, allowing multiple Reddit users to join and play together in the same post. We also plan to expand the game's content by adding more word pairs, customizable game settings, and potentially even new roles with unique abilities to make each game even more unpredictable and fun.

Built With

• bolt
• devvit