A fun and interactive café simulation game where you take orders and make delicious drinks for customers, set in a small mountain cabin at the base of a snowy ski slope. Master the art of coffee-making, hot chocolate brewing, and topping decoration in this cozy browser-based game.
.｡❅⋆⍋∞*｡
- Coffee - Brew the perfect cup using the coffee machine
- Hot Chocolate - Heat kettle on the stove, add chocolate, and stir
- Mocha - Combine coffee and hot chocolate for a delicious blend
- Drag & Drop - Intuitive drag-and-drop interface
- Hold-to-Pour - Hold buttons to pour milk with a progress bar
- Temperature Control - Monitor kettle temperature (avoid fires at 200°F!)
- Stirring - Hold to stir for 3 seconds with animated frames
- Bean Refilling - Refill coffee beans after every 3 coffees
- Whipped Cream - Hold canister over cup for 2 seconds to dispense
- Marshmallows - Drag scoop and drop into cup
- Sprinkles - Shake jar 3 times over the cup
Earn points based on:
- Correct drink type (40 points)
- Proper filling without overflow (30 points)
- Correct toppings (30 points)
- Perfect Score: 100 points!
- Order Receipt - Collapsible order reminder in top-left corner
- Recipe Book - Step-by-step instructions for each drink
- Earnings Tracker - See your total money earned
- Day Summary - End-of-day statistics and performance review
- Night Mode - Night time background for the last customer
Meet Scott, Nicole, Trey, and Tomi - each with their own custom orders!
- Take the Order - Read what the customer wants in their speech bubble
- Start Making - Click the forward button to enter the kitchen
- Make the Drink - Follow the recipe:
- Coffee: Drag cup to machine, wait for brew, add cold milk (optional)
- Hot Chocolate: Heat kettle on stove, pour into cup, scoop hot chocolate, stir
- Mocha: You'll need to follow the steps for both hot chocolate and coffee in the same cup! Be careful not to overflow.
- Add Toppings (optional) - Proceed to topping station for extras
- Serve - Click serve when ready!
- Get Scored - See how well you did and earn money
- The kettle cools off quick-- you'll need to leave the stove on as you pour. But don't leave the stove on for too long!
- Whipped cream should be added before other toppings
- Hold the stir button for exactly 3 seconds
- Use the recipe book if you forget the steps
- Drag cups to the trash to restart
- React 18 - UI framework
- TypeScript - Type-safe development
- Vite - Fast build tool
- CSS3 - Styling and animations
- GitHub Pages - Deployment
- Node.js 18+ and npm
# Clone the repository
git clone https://github.com/cvlases/cafe-simulation.git
cd cafe-simulation
# Install dependencies
npm install
# Run development server
npm run dev
# Build for production
npm run build
# Deploy to GitHub Pages
npm run deployThe game will be available at http://localhost:5173
cafe-simulation/
├── public/
│ └── assets/ # All game images and assets
│ ├── backgrounds/
│ ├── customers/
│ ├── objects/
│ └── ui/
├── src/
│ ├── components/ # React components
│ │ ├── Customer.tsx
│ │ ├── DrinkMakingStation.tsx
│ │ ├── ToppingStation.tsx
│ │ ├── Scorecard.tsx
│ │ └── ...
│ ├── data/ # JSON configuration files
│ │ ├── assets.json
│ │ ├── layouts.json
│ │ └── customers.ts
│ ├── hooks/ # Custom React hooks
│ ├── utils/ # Helper functions (scoring, money)
│ ├── types.ts # TypeScript type definitions
│ └── App.tsx # Main application component
├── vite.config.ts
└── package.json
- I created all of the art drawn by hand myself!
- Actions use intuitive drag-and-drop
- Hold-to-interact buttons with visual feedback
- Progress bars for time-based actions
- Immediate visual feedback for all interactions
- ✰ Correct drink type: 40 points
- ✰ Properly filled (no overflow): 30 points
- ✰ Correct toppings: 30 points
- Base pay: $5.00
- Tips scale with score:
- 90-100%: $2.50 tip
- 75-89%: $1.50 tip
- 60-74%: $0.50 tip
- Below 60%: No tip
- Sizing of some components needs aadjusting
- More drink types (Latte, Cappuccino, Tea)
- More customers with unique stories
- Achievements and unlockables
- Multiple difficulty levels
- Sound effects and background music
- Mobile-optimized controls
- Save/load game progress
Developer and artist: Claire Vlases GitHub: @cvlases 𓆝 𓆟 𓆞 𓆝 𓆟
This project is open source and available under the MIT License.
**Enjoy making drinks! **
Made with ♡ (and lots of coffee)