Inspiration

Penalty Clash was inspired by the excitement of penalty shootouts and the social nature of Reddit communities. We wanted to create a simple game that anyone could understand immediately, while still giving players a reason to return every day and compare their performance with others.

The goal was to combine quick gameplay, national team selection, daily competition, and Reddit identity into one accessible experience for both desktop and mobile users.

What it does

Penalty Clash is a daily penalty shootout game built directly for Reddit.

Players choose one of six national teams and take five penalty shots using mouse or touch controls. They can aim freely inside the goal while the goalkeeper reacts to different areas of the shot.

The first authenticated result submitted each day is recorded in a daily Top 10 leaderboard. Additional games are treated as practice sessions, allowing players to continue improving without replacing their original daily score.

Players can also:

Choose between Portugal, Argentina, Brazil, Spain, France, and Germany.
Play exactly five penalty shots per match.
Use touch controls on mobile or mouse controls on desktop.
View the daily Top 10 leaderboard.
Replay while keeping the selected country.
Copy their result and share it in Reddit comments.
Play as a guest without saving a score.

How we built it

Penalty Clash was built with:

Reddit Devvit Web for the Reddit integration.
Phaser for the game scenes, animations, input, and responsive rendering.
TypeScript for strict typing across the client, server, and shared contracts.
Vite for the frontend build process.
Hono for the server routes.
Devvit Redis for daily attempts, usernames, scores, and leaderboard positions.

The application is organized into three main areas:

src/client contains the Phaser game, splash screen, scenes, assets, and client services.
src/server contains the HTTP endpoints and Devvit integration.
src/shared contains shared TypeScript contracts.

The main Phaser scenes are:

Boot
Preloader
MainMenu
Game
GameOver

The first daily result is stored atomically using Redis transactions. Daily leaderboard and attempt keys expire automatically after approximately 30 days.

Challenges we ran into

One of the main challenges was creating a game that worked consistently inside Reddit on both desktop and mobile devices.

We had to solve several responsive rendering issues, including incorrect canvas scaling, low-resolution text, cropped layouts, and mobile displays showing only part of the game. We fixed this by using a stable logical resolution with Phaser Scale FIT and responsive portrait and landscape layouts.

Another challenge was handling the daily result safely. The server needed to guarantee that only the first valid result of the day was accepted, even when multiple requests happened close together. We used Redis watch, multi, and exec transactions with retry handling.

We also had to make sure that Reddit identity was handled only on the server. The client never sends or receives internal Reddit user IDs, and usernames are obtained from the Reddit context instead of trusting client input.

Accomplishments that we're proud of

We are proud that Penalty Clash works as a complete Reddit-native game rather than a separate external website.

The project includes:

A custom interactive Reddit post.
A professional inline splash screen.
Responsive mouse and touch gameplay.
Six selectable national teams.
Free aiming inside the goal.
Goalkeeper reactions across high, middle, and low zones.
A persistent daily Top 10 leaderboard.
First-attempt-only daily scoring.
Practice mode after the daily result.
Guest support without persistence.
Shareable result text for Reddit comments.
A data retention policy using expiring Redis keys.

We are also proud that the project passes TypeScript type checking, ESLint validation, and the production build process.

What we learned

We learned how to create and deploy an interactive Devvit Web application inside Reddit.

We also learned how to:

Connect Phaser gameplay with Reddit server endpoints.
Use Devvit Redis transactions safely.
Design responsive game scenes for desktop and mobile.
Separate client, server, and shared TypeScript contracts.
Protect user identity by resolving it on the server.
Create a daily competition system without allowing later attempts to overwrite the first result.
Build a game experience that can be opened directly from a Reddit post.

What's next for Penalty Clash

The next step is to expand Penalty Clash with more replay value and community features.

Future ideas include:

More national teams.
Daily goalkeeper difficulty variations.
Special tournament events.
Weekly and monthly leaderboards.
Community competitions between subreddits.
Unlockable visual themes.
Improved goalkeeper animations.
Sound effects and optional audio controls.
Additional result-sharing formats.
More accessibility and localization options.

Our long-term goal is to make Penalty Clash a lightweight daily Reddit sports challenge that communities can return to, discuss, and compete in together.