Diseño de la ficha

Pestañas, rejilla y el catálogo completo de widgets. Cómo se reordena en móvil, visibilidad condicional, subpestañas y diseños por clase.

Los campos dicen qué tiene tu personaje. El diseño dice cómo se ve: qué aparece, dónde y con qué forma. Se edita en la pestaña Diseño.

Una ficha son pestañas, y cada pestaña es una rejilla donde colocas widgets. Un widget es una tarjeta: un atributo grande, una barra de vida, una lista de habilidades, una tabla, un botón de tirada…

La rejilla

• Arriba eliges cuántas Columnas tiene la ficha en PC (de 2 a 6; por defecto 4).
• Cada widget ocupa un Ancho (columnas) y un Alto (filas), que se ajustan al abrirlo (1 a 4 filas).

Con eso montas desde una ficha de una sola columna hasta una hoja densa de seis.

Dejar huecos

Por defecto los widgets se empaquetan sin espacios: cada uno entra donde quepa. Para dejar aire tienes tres formas, todas en la configuración del widget (sección Colocación):

• Empieza en la columna N — el widget arranca ahí y deja vacías las columnas anteriores de esa fila. Es la forma de centrar algo o de abrir un margen.
• Empezar en una fila nueva — corta la fila actual y baja. Lo que quedara de la fila anterior se queda vacío.
• El widget Hueco / espacio — un bloque invisible que reserva las celdas que le des. Se arrastra y se coloca como cualquier otro, y es el más fácil de ver mientras diseñas.

Si desde la columna que elijas el widget no cabe entero, se recorta hasta el borde en vez de saltar de fila: el diseño nunca se descoloca solo.

Pestañas de la ficha

Arriba del todo gestionas las pestañas:

• Nueva pestaña de la ficha para añadir.
• Renombrar con doble clic sobre su nombre.
• Mover a la izquierda / derecha para ordenarlas.
• Eliminar pestaña.

Lo típico: Principal con lo que se usa siempre, y luego Equipo, Conjuros, *Historia*… Una pestaña vacía avisa con «Sin widgets en esta pestaña.».

Añadir y mover widgets

• La paleta de la izquierda agrupa los widgets por categoría: pulsa uno y entra en la pestaña activa.
• Arrastra para reordenar.
• Duplicar widget para repetir uno ya configurado.
• Pulsa un widget para abrir su configuración: tamaño, qué campo muestra y sus opciones propias.

La mayoría de widgets se enganchan a un campo (eliges cuál en su configuración). Algunos funcionan sin campo ninguno, porque los defines ahí mismo:

• Contador sin campo: defines mínimo, máximo e inicial; se guarda solo.
• Selección sin campo: escribes tú las opciones y solo guarda la elección.
• Lista de control: defines las casillas (vacías si quieres) y cuenta x/total.
• Texto fijo / Nota: título y cuerpo escritos por ti.

Catálogo de widgets

Estadísticas

Tablas y listas

El almacén se MUEVE, no se copia. Si coges el último rifle, ya no está en la nave. Es a propósito: un catálogo que no baja convierte el reparto en una conversación («¿lo has cogido tú?») en vez de en un dato. Se monta en dos sitios, y es fácil confundirlos porque se llaman parecido: - En la hoja de grupo, el widget de Inventario. Ahí se guardan las cosas comunes. - En la ficha del personaje, el widget de Inventario del grupo. Ese es el que enseña la bodega de la nave y permite coger y devolver. Puede coger cualquier miembro de la mesa, y devolver también.

Tiradas

La ventaja no es un modificador. No suma nada al total: tira más dados y descarta. Un +2 sube el suelo de la tirada; la ventaja sube la media sin tocar el máximo. Son dos mecánicas distintas y confundirlas es de los errores que más se ven. Va apagada salvo que la enciendas, y eso es a propósito: en un sistema de reserva (Mundo de Tinieblas) «ventaja» son dados que suman éxitos, no dados que compiten. Encenderla ahí le quitaría éxitos al jugador. El estado se guarda en la ficha como _ventaja (1, 0 o −1), así que una fórmula puede leerlo: IF(_ventaja > 0, 2, 0).

Cartas

La Mano de cartas no es una copia: es la misma baraja que el máster puso en la pestaña Barajas, así que lo que robes aquí lo ve él al instante. Trae robar, mostrar (la carta se queda en tu mano y la ve toda la mesa — y si hay combate activo se ofrece mandarla al orden de Iniciativa con su valor), jugar a la mesa y quemar. Está en la ficha a propósito: en los juegos de cartas se gastan MIENTRAS tiras, y salirse a otra pestaña para descartar rompe el momento.

Opciones: deck_key elige qué baraja (vacío = la primera de la mesa) y show_corruption enseña el botón de «coger carta» de los juegos que lo usan. Si la ficha no está en una campaña, el widget lo dice: las barajas van por mesa.

Las cartas pueden tocar tus campos. Si una carta lleva efectos (se escriben en la pestaña Barajas del creador, con el mismo formato que los perks), se aplican mientras la tengas: una Bendición de «+2 de vida» te sube el tope de vida en cuanto la robas y te lo baja en cuanto la sueltas. Según la carta, cuenta en mano o desde que la juegas a la mesa, y siempre sobre la ficha de quien la tiene — la carta que juegue otro no cambia la tuya. Entra en el mismo cálculo que todo lo demás, así que los derivados que dependan de ese campo se recalculan solos. No hace falta que el jugador tenga este widget para que apliquen, pero sí para que vea por qué le han cambiado los números.

Texto y Notas

Imagen fija y Retrato no son lo mismo, y es el error más común. Retrato guarda un dato de cada ficha; si esa ficha no tiene URL propia, cae al avatar del personaje. Así que para una ayuda que debe salir igual para todo el mundo, Retrato nunca va a funcionar —ni apuntándolo a un campo de texto—, porque el campo lo rellena cada jugador y nace vacío. Una chuleta no es un dato del personaje: es parte de tu sistema. Ésa va en Imagen fija, que guarda la imagen en el propio widget.

En Imagen fija puedes elegir cómo encaja: Entera (por defecto) la enseña completa aunque sobre hueco —es lo que quieres en una tabla, donde recortar te come justo las filas de los bordes— y Llena el hueco recorta lo que sobre, que es lo que quieres en una cenefa o un fondo.

Estructura

La tienda: cuando hay muchos campos comprables

Un campo con «Se puede comprar» saca su ▲ allí donde lo coloques. Para uno o dos va bien. Para treinta no: acabas con cinco columnas de contadores permanentes en la ficha para algo que se hace una vez al terminar la sesión, y eso no es una ficha, es un formulario.

El widget Tienda de mejoras lo convierte en lo que es: un momento. Le dices de qué reserva se paga y saca todos los campos cuya mejora cobre de ahí — cerrada por defecto, con la reserva en la solapa y cuántas cosas tienes a tu alcance ahora mismo.

No se pinta si no hay nada que comprar. Ni el título.

Cada fila dice de dónde a dónde vas, no solo el precio: «+1 por 18» no significa nada y «Profesional → Especialista · 30» sí. Los nombres de cada escalón los pone el sistema en upgrade.step_labels; sin ellos se enseña el número.

Compra y cobro van en un solo guardado. En dos escrituras, un fallo entre medias deja el escalón cobrado y no concedido — y eso no se arregla desde la mesa.

Los relojes: lo que dura menos que la partida

Casi todo sistema tiene cosas que caducan — las defensas acumuladas de este asalto, un uso por escena, un «una vez por sesión» —. Nada de eso vuelve solo, así que se lleva a mano; y a mano quiere decir que no se lleva: el número se queda puesto y lo siguiente sale mal sin que nadie relacione una cosa con la otra.

En Campos, cada campo puede decir «Vuelve a su sitio en» un ámbito. Un perk con usos puede decir lo mismo. Después colocas el widget Relojes y sale un botón por ámbito.

Los ámbitos los inventas tú: asalto, escena, sesion, descanso, luna… El motor no sabe qué son ni cuál va dentro de cuál —a propósito: en cuanto se hornea una jerarquía hay un sistema que la rompe—. Solo agrupa y aplica.

Qué es «su sitio»: un contador vuelve al valor que le digas (o a su valor por defecto); un recurso vuelve lleno, que descansar no es quedarse a cero; los usos de un perk vuelven al máximo.

El botón se apaga cuando no hay nada que mover, y al pulsarlo dice qué ha cambiado — reiniciar toca varias cosas a la vez y algunas no están a la vista.

El grimorio: cuando lanzar es lo que más se pulsa

Un conjuro no es una entidad aparte: es un perk con una acción que tira y cobra un recurso. Eso ya se podía montar. Lo que faltaba era la vista — el panel de perks los pinta como tarjetas sueltas del mismo tamaño, con el coste en letra pequeña, revueltos con rasgos que no se lanzan nunca.

El widget Grimorio enseña esos mismos perks como los enseña una ficha de D&D:

• La reserva arriba, en casillas. «3/5» no te dice si te llega para el que vas a lanzar; cinco casillas de las que quedan tres, sí. Se gasta y se recupera pulsándolas.
• Agrupados por familia, en el orden en que tú listes las familias, con el recuento al lado.
• Filas, no tarjetas: nombre, qué hace y el botón de lanzar en la misma línea.
• Lo que no te puedes pagar sale apagado, antes de pulsarlo.
• Lo gratis (una pasiva sin coste) va aparte: no compite por la reserva.

Al colocarlo eliges tres cosas: la reserva que gastan (un campo de tipo Recurso), el campo contra el que se tira (sale como botón en la cabecera) y las familias que enseña — por el principio de la categoría del perk, así que Conjuro recoge «Conjuro común», «Conjuro Menor»…

Preparación diaria (opcional)

Si tu sistema prepara conjuros cada mañana («preparas N y solo esas puedes lanzar hoy»), apunta el widget a un campo de tipo Lista en Preparación diaria. Cada conjuro gana una marca: los que no lleves marcados salen apagados y con el motivo. La cabecera dice cuántas llevas de cuántas te caben (Cuántas caben = un campo cualquiera con ese número, normalmente un derivado).

Se guardan por nombre, porque es el mismo campo de Lista de siempre y lo que quede ahí escrito tiene que poder leerlo una persona; la comparación ignora tildes y mayúsculas.

Y quita el widget de Lista suelto que apuntaba a ese campo: dos controles escribiendo lo mismo acaban sin cuadrar — se podía apuntar a mano un conjuro que no tienes, o lanzar uno que no estaba en la lista.

Si tu sistema tiene varias tradiciones y solo una prepara, pon la condición en Solo cuando… (hechiceria > 0). Al resto no le aparece la marca por ninguna parte.

El coste de cada conjuro no se pone en el widget: es el de su acción, en la pestaña Perks. Ahí, junto a la cantidad, tienes «si fallas» — lo que cuesta cuando la tirada no sale («fallar gasta 1 igual»). Se cobra entero al lanzar y se devuelve la diferencia al asentarse el dado; una pifia nunca se abarata, que es el peor resultado y no un descuento. Su pareja, crit_amount («un crítico no gasta»), se escribe hoy solo al importar JSON. Y el precio puede ser una fórmula (amount_formula, por ahora solo al importar JSON) cuando depende de quién lanza y no de qué lanza — «esta tradición paga +1 sobre lo normal». Con un número fijo eso no se puede escribir, porque el mismo conjuro cuesta distinto a dos personajes.

Roster y catálogos (el widget «Equipo / compañeros»)

El widget de roster lleva una lista de fichas-tarjeta dentro de la ficha (mascotas, mechs, familiares, una escuadra, los Pokémon del entrenador…). Cada tarjeta tiene nombre, retrato (URL), barra de recurso y los stats que definas. Al pulsarlo en Diseño tienes:

• Tarjeta a medida: eliges QUÉ campos de tu sistema salen en la tarjeta — los stats del grid, la barra de recurso, el subtítulo, los detalles del desplegable, el dado de tirada y si hay botón de «sacar a combate». Así la tarjeta usa TUS campos, no unos fijos.
• Catálogos: un catálogo es un dataset de tu sistema (una lista de entradas con los valores de tus campos) que autorrellena la tarjeta. Los gestionas en la pestaña «Catálogos» del creador (o con el botón «Editar catálogos» del propio widget): creas catálogos, eliges sus columnas (tus campos), buscas entradas, las editas a mano o importas en masa pegando CSV o JSON (mapeas cada columna a un campo). Con un catálogo, «Añadir» abre un buscador que rellena la tarjeta con la entrada elegida; sin catálogo, se rellenan a mano.

Los catálogos viven en el sistema (viajan al exportarlo o compartirlo): sirven para cualquier juego — tu bestiario de compañeros, un catálogo de naves, de invocaciones…

Colocación y apariencia de cada widget

Al pulsar un widget, además de su tamaño y sus opciones propias, tienes:

Colocación

Apariencia

Un widget que ocultes sigue apareciendo en el editor, atenuado y con el ojo tachado, para que puedas volver a mostrarlo. En la ficha del jugador no aparece.

Referenciar un widget desde tu CSS

Si escribes CSS propio (pestaña Estilo), no tienes que adivinar cómo se llama nada: la configuración de cada widget trae un bloque Referencia desde el CSS con sus selectores listos para copiar (pulsa uno y va al portapapeles).

Cada widget de la ficha sale con estos ganchos:

La Clase propia es un campo de texto libre: escribe destacado y ese widget saldrá con sysc-destacado. Puedes poner varias separadas por espacio y reutilizarlas en varios widgets para estilarlos a la vez.

/* Todos los bloques de stat, con más aire */
.sys-widget-stat_block { padding: 12px; }

/* Solo los que marcaste como «destacado» */
.sysc-destacado { border-color: gold; box-shadow: 0 0 12px rgba(255,200,0,.25); }

/* El widget ligado al campo «vida» */
[data-widget-field="vida"] { background: rgba(200,0,0,.08); }

El prefijo sysc- se pone solo: así tu clase nunca puede chocar con las de la app (escribir hidden o flex como clase propia no puede romper nada). Todo tu CSS se acota además a tu ficha, así que no puede afectar al resto de Roliando.

Qué CSS puedes escribir

CSS de verdad, no un subconjunto de juguete. Selectores completos:

/* Una fila sí y otra no, medio tono más oscura: 30 habilidades seguidas sobre el
   mismo fondo se leen fatal */
.sys-widget-skill_list button:nth-child(2n) { background: rgba(0,0,0,.22); }

/* El widget que CONTIENE una barra necesita respirar por abajo */
.sys-widget:has(.stat-bar) { padding-bottom: 4px; }

/* Capitular de manuscrito: la letra ocupa dos renglones y el párrafo se ajusta solo */
.sys-widget-custom_block p:first-of-type::first-letter { initial-letter: 2; color: #7a2410; }

/* Algo que respira. Muy despacio: un latido rápido marea a los dos minutos */
@keyframes brasa { 50% { box-shadow: inset 0 0 50px rgba(176,58,46,.28); } }
.sysc-tirada { animation: brasa 9s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .sysc-tirada { animation: none; } }

Tienes 60.000 caracteres, que dan para una ficha pintada entera.

Lo que no puedes, y por qué: nada que ejecute código (expression(), javascript:), url() a un servidor de fuera (solo data: o tus imágenes y tipografías subidas desde el propio editor), y position: fixed — se degrada a absolute, para que ningún sistema pueda tapar la aplicación. Todo lo que se descarta te lo dice el editor con su motivo; no desaparece en silencio.

Móvil

La ficha se reordena sola en pantallas pequeñas, pero puedes mandar tú:

• El interruptor Diseño para PC / Diseño para móvil cambia entre los dos.
• En móvil eliges Columnas móvil (1 a 3; por defecto 2).
• Si no defines un diseño propio de móvil, se reutiliza el de PC con un reflujo proporcional: un widget que ocupa media ficha en PC ocupa media en móvil, y uno que ocupa todo el ancho lo sigue ocupando.
• Si un widget concreto no queda bien con el reflujo, fíjale un Ancho en móvil en su configuración, u ocúltalo en móvil si ahí sobra.

Merece la pena revisar el móvil: es donde más gente juega.

Mostrar solo si (visibilidad condicional)

En la configuración de cualquier widget, abajo, tienes Mostrar solo si (opcional): una fórmula sobre los campos de la ficha. Si da verdadero, el widget se pinta; si no, desaparece. Vacío = siempre visible.

nivel >= 3
vida <= 0
clase == 'mago'

Sirve para fichas que crecen con el personaje (la sección de conjuros aparece al ser lanzador) o para avisos que solo salen cuando tocan.

Subpestañas

El widget Subpestañas mete pestañas dentro de una pestaña, con sus propios widgets («Acciones», «Conjuros», «Rasgos»). Se gestionan con Añadir pestaña interna.

Úsalas cuando una pestaña acumula demasiado, pero no abuses: dos niveles de pestañas ya esconden bastante.

Diseños por clase

Puedes definir un diseño distinto por clase o arquetipo: el mago ve su tabla de conjuros y el guerrero sus maniobras, sin que a nadie le sobre media ficha. Requiere un campo de selección marcado como clase/arquetipo (ver la guía de Campos).

Consejos

• Lo que se usa cada turno, arriba y grande. El trasfondo puede vivir en otra pestaña.
• Separadores para respirar. Un par de Separador / Título organizan más que diez tarjetas alineadas.
• Los huecos también componen. Un Hueco o un «empieza en la columna 2» centran un bloque y dan aire sin necesidad de tocar CSS.
• Prueba en la Vista previa después de cada tanda de cambios, y mira también el móvil.
• No repitas el mismo campo en dos widgets salvo que tenga sentido: confunde al editar.

Límites conocidos

• El alto de un widget llega hasta 4 filas (el alto mínimo en px te deja afinar dentro).
• Empieza en la columna y Empezar en una fila nueva solo aplican en PC: en móvil, con 1-3 columnas, dejarían la ficha medio vacía. Para el móvil usa el Ancho en móvil, el diseño móvil propio, o el widget Hueco.
• El diseño se guarda por pestaña: no hay «plantillas» de diseño reutilizables entre sistemas (para eso, exporta el sistema e impórtalo).

Siguiente paso

Con la ficha montada, define cómo se tira y cómo pega: las guías de Tiradas y de Combate.

Todas las guías de Roliando