Copia e prompt de abajo y pegalo en la sección de Canva IA, opción </> programar. Haz clice en el botón para ver la demo.
Rol/Contexto
Actúa como un experto en Canva Code / web component embebible. Quiero un juego de solitario minimalista con 4 foundations y 7 columnas (“tableau”) usando HTML + CSS + JS vanilla, listo para integrarse con el Canva Element SDK (/_sdk/element_sdk.js y /_sdk/data_sdk.js). Debe ser responsivo, soportar drag & drop en desktop y touch-drag en móviles.
Objetivo
Entregar un único archivo HTML autocontenido que renderice el juego y exponga una config editable desde Canva con estas claves (con valores por defecto razonables):
game_title, new_game_button, win_message
background_color, card_color, text_color, button_color, accent_color
font_family, font_size
Mecánicas exactas
Genera una baraja de 4 palos temáticos (ej. Canva #00C4CC, Drive #4285F4, ChatGPT #10A37F, Microsoft #F25022) y números del 1 al 7 por cada palo (total 28).
Reparto inicial: 7 columnas; en la i-ésima columna coloca i cartas (1..7), sólo la superior visible.
Movimiento permitido:
A foundation: si vacía, sólo 1; si no, mismo palo y n = top+1.
Al tableau: si vacío, cualquier carta; si no, n = top−1 (ignora color alterno).
Victoria cuando la suma de cartas en las 4 foundations = 28; mostrar modal o banner de victoria.
Interacción y accesibilidad
Drag & drop con dragstart/dragover/drop y clase .dragging.
Touch: implementar “touch-drag” (mover carta bajo el dedo; detectar destino con elementFromPoint).
Estados visuales: hover, selected/dragging, y drop-zone highlight al pasar por encima.
Botón “Nuevo juego” que reinicia estado y oculta mensaje de victoria.
Evitar selección de texto en cartas; user-select: none; touch-action: none.
UI / Estilo
Contenedor con gradiente de background_color → accent_color.
Título y botón en cabecera centrada.
Fundations: 4 slots con borde dashed semitransparente; si hay carta, muestra sólo la superior.
Tableau: 7 columnas; apila cartas con offset vertical (p.ej. 30px).
Carta (100×140px aprox.): fondo card_color, borde redondeado, sombra, número arriba-izq. en accent_color, logo SVG centrado coloreado por palo, nombre del palo abajo.
Config y Canva Element SDK
Inicializar window.elementSdk.init({ defaultConfig, onConfigChange, mapToCapabilities, mapToEditPanelValues }).
Recolorables: background_color, card_color, text_color, button_color, accent_color.
FontEditable (font_family) y FontSizeable (font_size).
onConfigChange debe actualizar título, botón, mensaje de victoria, gradiente, colores de cartas, tamaños tipográficos.
Incluir data_sdk.js y tailwind opcionalmente solo si no rompe el sandbox.
Estructura de código
Estado global gameState = { foundations: [[],[],[],[]], tableau: [[],...,[]], draggedCard, draggedFrom, isTouchDevice, touchDrag:{...} }.
Funciones: createCard(app, number), initGame(), renderGame(), createCardElement(card, position), handlers de drag/touch, canMove(from,to), moveCard(from,to), checkWin().
Reglas en canMove exactamente como se describió.
Criterios de aceptación
Nuevo juego baraja y reparte 1..7 columnas correctamente.
Puedo mover una carta 1→foundation y continuar secuencia del mismo palo ascendente.
Puedo mover a tableau descendente y a columnas vacías cualquier carta.
Modal de victoria aparece cuando foundations suman 28.
Cambiar background_color, accent_color, card_color, text_color, button_color, font_family, font_size se refleja en vivo.
Funciona tanto con mouse como con touch.
Un solo archivo HTML, sin dependencias externas imprescindibles (salvo SDK de Canva).
Extras opcionales (si es simple):
Animación suave en hover/drag; sombra elevada; borde al seleccionar.
Texto del botón y del título vinculados a config.
Asegurar z-index correcto durante drag y restaurarlo al soltar.
Entrega
Devuelve el HTML completo (con <style> y <script> integrados) listo para pegar en Canva Code.