¿Cómo se jugaba?

¿Cómo se jugaba? is a modern, content-driven web app that documents and explains traditional Spanish card games in Spanish starting with El Cuadrado and 5 Vidas.

It was born from a personal desire to preserve and share the rules of the games I grew up playing.

Built with Astro, MDX, TailwindCSS, and enriched with ✨hand-made illustrations✨.

Motivation 🧠

I’ve always loved card games, especially traditional Spanish ones. Many of these games aren’t well documented online, or their rules vary widely depending on region or family. This site is my attempt to:

🗂️ Archive my favorite games so I never forget how they’re played
📖 Teach others about Spanish card game culture
🎨 Combine a beauty design and a clean code project

🌍 Live Site

🔗 cartas.polgubau.com

📦 Tech Stack

Tool	Purpose
Astro	Static + server-side rendering
MDX	Game rules in interactive Markdown
TailwindCSS	Utility-first styling
@astrojs/content	Content collections for games
Sharp	Image optimization

🗄 Site Structure

This project is structured to keep content and code organized, making it easy to add new games or update existing ones. Here’s a quick summarized overview of the structure:

├── 📦src
     ├── 📂assets # Illustrations and media files
     ├── 📂components # Reusable UI components
     ├── 📂content # Game content (MDX files)
          └──📂games
     ├── 📂layouts  # Layout components
     ├── 📂lib
     ├── 📂pages
          └──📂games
              └──📜[...slug].astro
          └──📜index.astro
     ├── 📂styles
     ├── 📂utils
     └── 📜content.config.ts
├── public/  # Static assets (e.g. illustrations)
└── astro.config.mjs # Astro config

Games are stored in the games collection, defined via content.config.ts:

// content.config.ts
import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';

const games = defineCollection({
  loader: glob({ pattern: "**/*.{md,mdx}", base: "./src/content/games" }),
  schema: ({ image }) =>
    z.object({
      title: z.string(),
      description: z.string().optional(),
      addedAt: z.coerce.date(),
      coverImage: image(),
      tags: z.array(z.enum(['cards', "poker", "españolas"])).optional(),
    })
});

export const collections = { games };

🏅 Features

✅ Fully responsive UI (TailwindCSS)
🧾 Clean and structured game documentation via MDX
🎭 Custom hand-drawn illustrations
⚡ Fast performance (Astro + server output)
🎡 SEO-ready with sitemap & metadata

🚀 Getting Started

To run this project locally, you need to have Node.js installed. Then, follow these steps:

git clone https://github.com/polgubau/como-se-jugaba
cd como-se-jugaba
pnpm install
pnpm dev

Screenshots

🌟 Future Plans

Add more games (e.g. Brisca, Mus)
Add video explainers
Localization (ES/CAT/EN)
Comments or rule variants via MDX

✨ License

MIT