¿Cómo se jugaba?
¿Cómo se jugaba? is a modern, content-driven web app that documents and explains traditional Spanish card games — 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 beautiful design and clean code project
🌍 Live Site
✨ Main Features
- ✅ Fully responsive UI (TailwindCSS)
- 🧾 Game documentation written in MDX
- 🎭 Custom hand-drawn illustrations
- ⚡ Optimized and fast (Astro + server output)
- 🎡 SEO-ready with sitemap & metadata
Technical Details
For developers & curious minds
📦 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 |
🗄 Project 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.mjsExample of content collection definition:
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 };🧪 Local Setup
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
