# Countryball Pet

## About This App
A simulation game where you adopt and care for authentic countryball characters with expressive white-eyed personalities

- **Generated from**: Reddit post/comment
- **Original Post**: reddit:t1_o42gmgy
- **Creator**: @countryballspace

## Specification


# Countryball Pet Game (Authentic Polandball Style with White Eyes)

Create a fun, interactive virtual pet game featuring authentic countryballs (the iconic spherical country characters from Polandball comics) that users can adopt, care for, and play with - following the TRUE fandom style with classic white circle eyes WITHOUT pupils.

## App Type

**HTML5 Canvas App** - Best suited for the animated countryball characters, interactive gameplay, and visual feedback systems needed for a pet simulation.

## UI Elements

### Header

A playful header with the title "Countryball Pet" in a bold, comic-style font. Include a row of small flag icons as decoration. The header should have a light blue sky-like gradient background.

### Main Game Area (Canvas)

#### Pet Display

- A large central canvas area showing your countryball pet bouncing/wobbling gently in an idle animation
- **CRITICAL: WHITE CIRCLE EYES WITHOUT PUPILS** - This is the authentic Polandball style!
  - Two solid white circles as eyes (no iris, no pupil, just plain white filled circles with a thin black outline)
  - Eyes should be slightly different sizes for that hand-drawn comic feel (one eye ~15% of ball radius, other ~12%)
  - Eyes positioned in the upper-middle area of the ball, slightly off-center for charm
  - Eyes should subtly move/shift based on mood and actions (look toward food when feeding, droop when tired, bounce when happy)
  - **NO MOUTH** - No mouth is drawn, ever. Communication is through speech bubbles only.
  - **NO PUPILS** - The eyes are SOLID WHITE circles. No black dots, no iris coloring, nothing inside. Pure white with black outline.
- The countryball's emotions are expressed through:
  - Eye size changes (wide eyes = surprised/excited, squinting/smaller = sleepy/suspicious)
  - Eye position shifts (looking down = sad, looking up = hopeful, looking around = curious)
  - Movement speed and bounce patterns (happy = bouncy, sad = slow droopy movements)
  - Tilt/angle of the ball (excited = tilting side to side, tired = leaning)
  - Sweat drops, anger symbols, or other EXTERNAL emotion indicators floating nearby
  - Speech bubbles for communication (the ONLY way they "speak")
- Speech bubbles appearing occasionally with funny country-specific phrases or reactions
- Background should be a simple cozy room or outdoor scene

#### Flag Rendering
- **USE ACTUAL FLAG IMAGES FROM WIKIPEDIA** - Load flag images from Wikimedia Commons URLs
- Example format: `https://upload.wikimedia.org/wikipedia/commons/thumb/[path]/[flag].svg/[width]px-[flag].svg.png`
- Render flags as circular/spherical with proper aspect ratio and clipping
- Add the classic white outline stroke around the countryball (2-3px)
- Apply subtle shading to give the ball a 3D spherical appearance
- **Draw the white eyes ON TOP of the flag texture** so they sit naturally on the ball's surface
- Eyes should have a very subtle shadow beneath them to give depth on the sphere

#### Stats Dashboard

Display pet stats in a cute, easy-to-read format below or beside the pet:
- **Happiness** - Heart meter (0-100%)
- **Hunger** - Food bowl icon meter
- **Energy** - Lightning bolt meter
- **Cleanliness** - Sparkle meter

Each stat bar should be colorful and animated, depleting slowly over time.

### Action Buttons Panel

A row of large, friendly buttons for interacting with your pet:
- 🍔 **Feed** - Opens a mini food menu (pierogi, baguette, hamburger, etc. based on country). Eyes look toward food item.
- 🎾 **Play** - Initiates a simple minigame or makes the ball bounce around excitedly. Eyes go wide and bounce.
- 🛁 **Clean** - Shows soap bubbles animation around the ball. Eyes squint shut.
- 💤 **Sleep** - Pet wobbles slowly and "ZZZ" appears above it. Eyes become tiny horizontal lines (closed).
- 🎁 **Gifts** - Give your countryball accessories (hats, monocles, etc.). Eyes go wide with excitement.

### Country Selection (Initial Screen)

- Grid of clickable countryballs using Wikipedia flag images, **each with white circle eyes** for preview
- Include popular options: Poland, USA, Germany, France, UK, Japan, Russia, Brazil, Canada, Italy, Spain, Australia, Sweden, Mexico, India, South Korea, Turkey, etc.
- Each country has slightly different personality traits, food preferences, and eye placement style
- Hover effects showing country name and a brief personality description
- Flag images loaded from Wikimedia Commons and rendered as spheres with eyes

### Accessories/Customization Panel

- Unlockable items your pet can wear (rendered ON TOP of the ball)
- Hats, bow ties, military helmets, crowns rendered floating on/above the countryball
- Sunglasses that go over the white eyes
- Items unlock as you care for your pet over time

## Styling Preferences

- Bright, cheerful color palette inspired by national flags
- Comic/hand-drawn aesthetic matching authentic Polandball art style
- **WHITE CIRCLE EYES WITHOUT PUPILS** - The signature Polandball look!
- **NO MOUTH DRAWN ON THE BALL** - Speech bubbles handle all communication
- Rounded UI elements and bubbly fonts
- White outline strokes around countryballs (classic Polandball style)
- Playful bounce animations and squash-stretch effects
- Eye animations that convey emotion (the eyes are the main emotional indicator!)
- Emotion indicators are EXTERNAL (floating symbols, sweat drops, question marks, exclamation points)
- Sound effect indicators (visual "boing!" "nom nom" text popups)

## Functionality

- **Persistent State**: Save pet stats, selected country, unlocked items, and pet age using localStorage
- **Real-time Simulation**: Stats slowly decrease over time (even when app is closed, calculate time passed on return)
- **Pet Aging**: Track days since adoption, with milestones and celebrations
- **Random Events**: Occasional pop-ups like "Your countryball wants to tell you something!" with country-specific speech bubbles
- **Eye Expressions**: Eyes react dynamically to all interactions - wide when surprised, darting around when nervous, half-closed when sleepy
- **Happiness Reactions**: Pet's movement patterns, eye behavior, and external emotion symbols change based on wellbeing
- **Minigame**: Simple click-based game like catching bouncing items or a reaction game
- **Death Prevention**: If stats get too low, pet moves sadly with droopy eyes and sad symbols, but doesn't die (family-friendly!)

## Country-Specific Features

- Each country has unique:
  - Favorite foods that boost happiness more
  - Catchphrases and speech patterns (in speech bubbles only!)
  - Unlockable country-themed accessories (berets, cowboy hats, ushankas, etc.)
  - Idle animations expressed through movement and eye behavior (e.g., France's eyes look sophisticated and half-lidded, USA's eyes bounce energetically)
  - Eye placement style (subtle variations per country for personality)

## Eye Animation Details

The white eyes are the PRIMARY way to convey personality and emotion:
- **Happy**: Eyes bounce slightly, normal size, looking forward
- **Excited**: Eyes go wide (larger circles), shift rapidly
- **Sad**: Eyes droop (shift downward on the ball), get slightly smaller
- **Sleepy**: Eyes become horizontal ovals/lines (closing animation)
- **Surprised**: Eyes go very large momentarily
- **Eating**: Eyes look toward food, squint slightly (contentment)
- **Angry**: Eyes tilt inward (like angry eyebrows effect, achieved by shifting eye positions)
- **Confused**: Eyes become different sizes, one shifts slightly
- **Nervous**: Eyes dart left and right rapidly, sweat drops appear

## Visual Effects

- Particle effects for feeding (food crumbs)
- Bubble particles for cleaning
- Heart particles floating around when happy
- ZZZ floating text when sleeping
- Confetti for milestones/achievements
- Sweat drops when nervous/low stats
- Anger symbols (💢) when irritated
- Question marks (❓) for confused states
- Eye sparkle effect when receiving gifts

## Wikipedia Flag Image Loading

Preload flag images from Wikimedia Commons for these countries:
- Poland: `/wikipedia/en/1/12/Flag_of_Poland.svg`
- USA: `/wikipedia/en/a/a4/Flag_of_the_United_States.svg`
- Germany: `/wikipedia/en/b/ba/Flag_of_Germany.svg`
- France: `/wikipedia/en/c/c3/Flag_of_France.svg`
- UK: `/wikipedia/en/a/ae/Flag_of_the_United_Kingdom.svg`
- Japan: `/wikipedia/en/9/9e/Flag_of_Japan.svg`
- Russia: `/wikipedia/en/f/f3/Flag_of_Russia.svg`
- Brazil: `/wikipedia/en/0/05/Flag_of_Brazil.svg`
- Canada: `/wikipedia/commons/d/d9/Flag_of_Canada_%28Pantone%29.svg`
- Italy: `/wikipedia/en/0/03/Flag_of_Italy.svg`
- Spain: `/wikipedia/en/9/9a/Flag_of_Spain.svg`
- Australia: `/wikipedia/commons/8/88/Flag_of_Australia_%28converted%29.svg`
- Sweden: `/wikipedia/en/4/4c/Flag_of_Sweden.svg`
- Mexico: `/wikipedia/commons/f/fc/Flag_of_Mexico.svg`
- South Korea: `/wikipedia/commons/0/09/Flag_of_South_Korea.svg`
- Turkey: `/wikipedia/commons/b/b4/Flag_of_Turkey.svg`
- India: `/wikipedia/en/4/41/Flag_of_India.svg`

Use the format: `https://upload.wikimedia.org/wikipedia/[path]/[width]px-[filename].png`

**IMPORTANT FALLBACK**: If Wikipedia images fail to load (CORS issues), draw the flags programmatically on canvas using the correct colors and patterns. Every country should have a canvas-drawn fallback flag.

## Footer

Include the remix link and a small "Day X with [Country Name]" counter showing how long you've had your pet.

---

Now here is my full implementation:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countryball Pet 🌍</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Comic+Neue:wght@400;700&display=swap');

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    font-family: 'Comic Neue', cursive;
    background: linear-gradient(180deg, #87CEEB 0%, #E0F0FF 40%, #C8E6C9 70%, #8BC34A 100%);
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  header {
    background: linear-gradient(135deg, #4FC3F7, #29B6F6, #03A9F4);
    width: 100%;
    padding: 12px 0;
    text-align: center;
    border-bottom: 4px solid #0288D1;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    position: relative;
    z-index: 10;
  }

  header h1 {
    font-family: 'Fredoka One', cursive;
    color: white;
    font-size: 2.2em;
    text-shadow: 3px 3px 0 #0277BD, -1px -1px 0 #0277BD;
    letter-spacing: 2px;
  }

  .flag-deco {
    font-size: 1.3em;
    letter-spacing: 5px;
    margin-top: 4px;
  }

  #gameContainer {
    position: relative;
    margin: 15px auto;
    max-width: 700px;
    width: 95%;
  }

  canvas {
    display: block;
    margin: 0 auto;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    border: 3px solid #fff;
    background: #f5f0e8;
    width: 100%;
    max-width: 700px;
  }

  .stats-panel {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px auto;
    max-width: 700px;
    width: 95%;
    padding: 10px;
    background: rgba(255,255,255,0.9);
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  }

  .stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
    flex: 1;
  }

  .stat-icon { font-size: 1.5em; }
  .stat-label { font-weight: 700; font-size: 0.75em; color: #555; margin: 2px 0; }
  .stat-bar-bg {
    width: 100%;
    max-width: 90px;
    height: 12px;
    background: #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #ccc;
  }
  .stat-bar {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease;
  }
  .stat-value { font-size: 0.7em; color: #777; margin-top: 1px; }

  .actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px auto;
    max-width: 700px;
    width: 95%;
  }

  .action-btn {
    flex: 1;
    min-width: 80px;
    max-width: 120px;
    padding: 10px 8px;
    border: 3px solid #fff;
    border-radius: 15px;
    font-family: 'Fredoka One', cursive;
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: white;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
  }

  .action-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.25); }
  .action-btn:active { transform: translateY(0px); }

  .btn-feed { background: linear-gradient(135deg, #FF9800, #F57C00); }
  .btn-play { background: linear-gradient(135deg, #4CAF50, #388E3C); }
  .btn-clean { background: linear-gradient(135deg, #2196F3, #1565C0); }
  .btn-sleep { background: linear-gradient(135deg, #9C27B0, #6A1B9A); }
  .btn-gift { background: linear-gradient(135deg, #E91E63, #AD1457); }

  .action-btn .btn-icon { font-size

## About Berrry
Berrry transforms your social media content into interactive web applications. Share a Twitter/X post or Reddit comment, and our AI creates a custom web app hosted at your own subdomain.

**Visit**: https://berrry.app

Transform your social media ideas into real web applications today.