Chomb Farm is a cozy pixel-art farming game where you tend a 3×3 plot grid with the help of your Chomb crew - small, round, surprisingly hard-working little creatures. Each plot follows a hands-on pipeline: fertilize the soil, plant a crop, water it, watch it grow, then send in a harvester. Every Chomb has a specific role, so you'll need to coordinate your roster wisely as your farm scales up. The goal is simple: keep the fields lush, earn seeds, and maybe figure out what Chombs are actually made of.
Setting up the project's data layer and context architecture.
farmReducer.jswithuseReducermanaging{ seeds, plots[], chombRoster[] }FarmContext.jsxproviding{ state, dispatch }viauseFarm()hookinitialState: 9 empty plots, 3 starter Chombs (Biscuit, Mochi, Sprout)
Building the visual farm and Chomb management sidebar.
FarmGrid- 3×3 CSS grid ofPlotTilecomponentsPlotTile- renders plot states with a crop progress barChombRoster- draggable Chomb cards using the HTML5 Drag & Drop APIHUDbar displaying the live seed countChombShopsidebar with purchasable Chombs;UNLOCK_CHOMBdeducts seeds
Making the farm actually tick.
TICK_PLOTaction +useEffectinterval inPlotTile- Harvest, wilt, and replant mechanics with seed rewards per crop type
ChombShopwith purchasable Chombs sourced fromchombs.jscatalog
Reworked core mechanic so each Chomb has a distinct role.
- New plot phase pipeline:
empty → fertilizing → fertilized → needs_water → watering → growing → ready → harvesting - Chomb roles: Fertilizer 🌿 (4 s) · Waterer 💧 (5 s) · Harvester ⚒ (4 s)
- Growing phase auto-ticks 30 s with no Chomb assignment needed
- Drop validation is role-gated - wrong Chomb type on a phase does nothing
- Crop picker appears after successful fertilization
- Role badges (color-coded) on every Chomb card and shop entry
Making the game feel alive and polished.
ChombSprite- animated idle/walk sprite component driven by per-animation PNG sheets- Per-Chomb color variants via CSS
hue-rotate/saturatefilters (no extra assets needed) SelectionContext- click-to-select Chomb assignment as an alternative to drag & drop- Visual phase emoji indicators on every
PlotTile - Crop-specific growing timers (
CROP_GROWING_TIMES) and seed yields (CROP_SEEDS) - Animated progress bar on each plot during timed phases
Making the farm playable on any screen.
- Responsive layout: desktop shows left
CropGuidesidebar + right Chomb roster; mobile shows a horizontal scroll strip above the grid BottomNav- fixed tabbed drawer (Shop / Guide) for mobile that slides up on demandCropGuide- in-game reference table showing each crop's total time and seed reward- General spacing, typography, and palette pass across all components
| Tool | Purpose |
|---|---|
| Vite | Dev server & bundler |
| React 19 | UI & state management (useReducer, useContext) |
| CSS Modules | Scoped component styles |
| HTML5 Drag & Drop API | Drag Chombs onto farm plots |
| Firebase Hosting | Static site deployment |
| GitHub Actions | CI/CD — auto-deploy on push to main & preview on PRs |
npm install
npm run devThen open http://localhost:5173 in your browser.
Art in this project comes from two wonderfully talented creators - please show them some love!
Artist: chiecola - the adorable Chomb sprites that make the whole farm come alive. License (Full version, $2.50+):
- ✅ Commercial and non-commercial use allowed
- ✅ Editing and modifying assets is allowed
- ❌ Do not resell or redistribute (modified or as-is)
- ❌ Do not use in crypto, blockchain, or NFT projects
- 💛 Credits not required but greatly appreciated - thanks, chiecola!
Artist: Cup Nooble - the warm, earthy UI tiles and farm aesthetics. License (Premium, $3.99+):
- ✅ Commercial and non-commercial use allowed
- ✅ Modifying assets is allowed
- ❌ Do not resell or redistribute (modified or as-is)
- 💛 Credit to the artist is greatly appreciated ^^