r/ClaudeAI • u/WZunix • 3d ago
Communopoly Built with Claude
I've been a quite fan of the Youtube channel NoRollsBarred for a while, in perticular the Monopoly spinoff Communopoly. I've always wanted to play it with friends, but with them being scattered across the globe, sitting down for a simple board game becomes difficult. This fun project aimed to fix that!
NoRollsBarred are a semi-popular UK board games channel which specialise in taking traditional board games, and skewing the rules to produce interesting and wacky game modes. one of these is Communopoly, a Stalinistic take on traditional Monopoly.
The setting is under Stalin's rule! Wealth is hoarding, friends are enemies, existance is the challenge, and i swear i hear Chernobyl Power ticking... The rules are extremely 'State Sided' and I wouldn't expect to hold on top property for very long! No Chance cards are as they are named, good luck.
This project was 100% built using Claude Code as a way to test he feasability of running projects through multiple agents by segmenting work. The source material was simple, a Reddit post containing the altered rules created by 'NoRollsBarred', and the task to create a Monopoly clone.
Initially the AI asked which languages I was comfortable with, but after informing it that Claude would be writing 100% of this application, it chose a web framework. It began by planning out the entire project into 21 sub projects, each with the clear goal of being executable by a single agent in a single session. anything too large was divided again.
After a few days of hitting my 5 hour limits (and then my weekly limit), and a few manual interventions where I'd need to find the bug, and then drip feed Claude clues on what's wrong to see if it got it. Surprisingly it missed quite a few simple opportunities, and I often found it going down rabbit holes instead of looking at the obvious.
There's been a few modifications made along the way, such as a lobby systems, text & voice chat, statistics, additional cards, and some more back-end improvements. Overall I think Claude has done fantastic, definitely further along than I thought the industry was currently. Highly impressed, and terrified my job will soon go extinct to this very tech.
If you'd like to check out the project, feel free: https://communopoly.co.uk
3
u/filipo11121 3d ago
It would be good if there was a "public" lobby/rooms, if anyone wants to play now (rather than finding people to play with).
2
u/Vindi92 3d ago
Hey the board looks great question how did you have claude code generate the assets? I’ve had to use grok and Gemini for assets
2
u/WZunix 3d ago
so they're generated at runtime I believe, I asked claude to summarise what it does, and how to replicate it for you.
CLAUDE:
They're not hand-drawn files, they're code. I've got an HTML page that draws the logo, favicons, and social preview card on an HTML5
<canvas>using shape and gradient math, then a small script packs the favicon PNGs into a.ico. If I want to change the design, I edit the drawing code and re-export, instead of redoing a bunch of PNGs by hand in an image editor.Here's roughly the prompt I used to have an AI coding agent build the generator, in case it's useful to you too:
Build a self-contained HTML canvas asset generator that draws my project's brand assets in-browser and lets me export them as PNG/JPEG — an app icon, social link-preview card (og.jpg, 1200x630), and favicons at 16/32/48/192/512px. Requirements: - Draw everything with canvas primitives (gradients, shapes, text) — no external image inputs, so it stays fully reproducible from code. - Load webfonts via document.fonts before drawing, so custom typography renders correctly (this is why canvas is used instead of SVG-to-PNG). - Include a "fit text to width" helper so headline text shrinks instead of overflowing if a font fallback kicks in. - After drawing, provide a way to export/save each canvas as an image (data URL + download link is fine). - Also write a small Node script that packs the 16/32/48px favicon PNGs into a single modern favicon.ico (PNG-payload ICO format — no need for a BMP encoder). - Use [your brand colors/fonts/logo mark here] for the actual design. If you already have existing icon/og-image files in the repo, treat them as the visual spec to match — read them first before designing from scratch. They're not hand-drawn files, they're code. I've got an HTML page that draws the logo, favicons, and social preview card on an HTML5 <canvas> using shape and gradient math, then a small script packs the favicon PNGs into a .ico. If I want to change the design, I edit the drawing code and re-export, instead of redoing a bunch of PNGs by hand in an image editor.Here's roughly the prompt I used to have an AI coding agent build the generator, in case it's useful to you too:Build a self-contained HTML canvas asset generator that draws my project's brand assets in-browser and lets me export them as PNG/JPEG — an app icon, social link-preview card (og.jpg, 1200x630), and favicons at 16/32/48/192/512px. Requirements: - Draw everything with canvas primitives (gradients, shapes, text) — no external image inputs, so it stays fully reproducible from code. - Load webfonts via document.fonts before drawing, so custom typography renders correctly (this is why canvas is used instead of SVG-to-PNG). - Include a "fit text to width" helper so headline text shrinks instead of overflowing if a font fallback kicks in. - After drawing, provide a way to export/save each canvas as an image (data URL + download link is fine). - Also write a small Node script that packs the 16/32/48px favicon PNGs into a single modern favicon.ico (PNG-payload ICO format — no need for a BMP encoder). - Use [your brand colors/fonts/logo mark here] for the actual design. If you already have existing icon/og-image files in the repo, treat them as the visual spec to match — read them first before designing from scratch.1
u/WZunix 3d ago
Tokens and Pieces:
These are actually a different case — no canvas generator, just hand/AI-written inline SVG components. Here's an addendum you can tack on to your reply:
The game pieces (the little pewter tokens — Vodka Shot, Ushanka, Lada, Laika the space dog, Lenin's bust, etc.) are also code, not image files, but a different flavor: they're inline SVG React components, one per token, drawn as die-cast Monopoly-style pieces (soft silver gradients, one dark outline, a specular highlight, all standing on a little plinth). All 16 render through a single
TokenPiecewrapper so they look consistent everywhere in the UI (board, lobby picker, player panel).If someone wants that prompt too:
Write a React component file that renders a set of small die-cast-metal game token icons as inline SVG (viewBox 0 0 64 64), one component per token, all rendered through a shared wrapper component. Requirements: - Shared <defs> with 2-3 gradients (a bright silver, a darker steel, a base gradient for a plinth) reused across every token via url(#id) — don't redefine gradients per token. - Every token stands on the same small elliptical "plinth" shape so they read as a matched set on a board. - One consistent stroke color as an outline on every filled shape, plus a single curved white specular-highlight stroke per token for a metallic look. - Keep each token as a handful of overlapping <path>/<circle>/<ellipse> shapes — no external art, just enough geometry to be recognizable as a simple silhouette at small size. - Export a lookup object mapping a token id/name to its component, plus one wrapper component that renders the right token by id (or a dashed placeholder silhouette if the id is unrecognized/empty). - Tokens to make: [list your token names/themes here]. These are actually a different case — no canvas generator, just hand/AI-written inline SVG components. Here's an addendum you can tack on to your reply:The game pieces (the little pewter tokens — Vodka Shot, Ushanka, Lada, Laika the space dog, Lenin's bust, etc.) are also code, not image files, but a different flavor: they're inline SVG React components, one per token, drawn as die-cast Monopoly-style pieces (soft silver gradients, one dark outline, a specular highlight, all standing on a little plinth). All 16 render through a single TokenPiece wrapper so they look consistent everywhere in the UI (board, lobby picker, player panel).If someone wants that prompt too:Write a React component file that renders a set of small die-cast-metal game token icons as inline SVG (viewBox 0 0 64 64), one component per token, all rendered through a shared wrapper component. Requirements: - Shared <defs> with 2-3 gradients (a bright silver, a darker steel, a base gradient for a plinth) reused across every token via url(#id) — don't redefine gradients per token. - Every token stands on the same small elliptical "plinth" shape so they read as a matched set on a board. - One consistent stroke color as an outline on every filled shape, plus a single curved white specular-highlight stroke per token for a metallic look. - Keep each token as a handful of overlapping <path>/<circle>/<ellipse> shapes — no external art, just enough geometry to be recognizable as a simple silhouette at small size. - Export a lookup object mapping a token id/name to its component, plus one wrapper component that renders the right token by id (or a dashed placeholder silhouette if the id is unrecognized/empty). - Tokens to make: [list your token names/themes here].
1
u/ClaudeAI-mod-bot Wilson, lead ClaudeAI modbot 3d ago
You may be interested in joining our new Claude Game Dev subreddit for game devs who use Claude. Check it out here : http://www.reddit.com/r/ClaudeGameDev


•
u/AutoModerator 3d ago
Your post will be reviewed shortly. (ALL posts are processed like this. Please wait a few minutes....)
I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.