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).

Así puedes montar 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. Sirve para centrar algo o 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, así que el diseño no se descoloca.

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, y así todos ven quién tiene cada cosa. Se monta en dos sitios con nombres parecidos: - 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 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. Si tu juego la quiere así, en Reglas de tirada → Cómo se aplica elige Modificador fijo (por defecto +2 / −2) en vez de dados de más. En los sistemas de tirar por debajo, marca «En ventaja, quedarse con el dado bajo» para que la ventaja se quede el dado bueno (los sistemas nuevos ya vienen así). Va apagada salvo que la enciendas. En un sistema de reserva (contar éxitos) la «ventaja» son dados que suman éxitos en vez de competir, y 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 usa la misma baraja que el máster puso en la pestaña Barajas, así que lo que robes aquí lo ve él al instante. Permite robar, mostrar (la carta se queda en tu mano y la ve toda la mesa; si hay combate activo, se ofrece mandarla al orden de Iniciativa con su valor), jugar a la mesa y quemar. Está en la ficha porque en los juegos de cartas se gastan mientras tiras, sin tener que cambiar de pestaña.

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 se confunden a menudo. Retrato guarda un dato de cada ficha; si esa ficha no tiene URL propia, cae al avatar del personaje. Para una ayuda que debe salir igual para todo el mundo, Retrato no sirve (ni apuntándolo a un campo de texto), porque el campo lo rellena cada jugador y nace vacío. Una chuleta es parte de tu sistema y 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 (mejor para una tabla, donde recortar se come las filas de los bordes), y Llena el hueco recorta lo que sobre (mejor para 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. Con treinta acabas con cinco columnas de contadores permanentes en la ficha para algo que se hace una vez al terminar la sesión.

El widget Tienda de mejoras los agrupa en un solo sitio. 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 siquiera el título.

Cada fila dice de dónde a dónde vas, no solo el precio: en vez de «+1 por 18», sale «Profesional → Especialista · 30». 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, para que un fallo a medias no deje el escalón cobrado y sin conceder.

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». Si se llevan a mano, es fácil olvidarse de reiniciarlas y que la siguiente tirada salga mal.

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, para no imponer una jerarquía que algún sistema no siga. 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; 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, porque 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 es un perk con una acción que tira y cobra un recurso. El panel de perks los pinta como tarjetas sueltas del mismo tamaño, con el coste en letra pequeña y mezclados 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. Con cinco casillas de las que quedan tres ves de un vistazo si te llega para el que vas a lanzar. 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.

Quita el widget de Lista suelto que apuntaba a ese campo: con dos controles escribiendo lo mismo 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. Su pareja, crit_amount («un crítico no gasta»), se escribe hoy solo al importar JSON. El precio también 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»), porque el mismo conjuro cuesta distinto a dos personajes.

Roster y bases de datos (el widget «Equipo / compañeros»)

El widget de roster lleva una lista de fichas-tarjeta dentro de la ficha (mascotas, mechs, familiares, una escuadra…). 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 y no unos fijos.
• Bases de datos: una base de datos es un dataset de tu sistema (una lista de entradas con los valores de tus campos) que autorrellena la tarjeta. Las gestionas en la pestaña «Bases de datos» del creador (o con el botón «Editar bases de datos» del propio widget): creas bases de datos, 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). La tabla de entradas funciona como una hoja de cálculo: flechas e Intro para moverte, y un bloque copiado de Excel o Sheets se pega desde cualquier celda (lo que sobre crea entradas nuevas; con un filtro puesto solo toca lo que se ve). Copiar como tabla se la lleva de vuelta. Al importar también se puede subir un archivo (CSV, Excel .xlsx con su hoja, JSON) o traerlo de un enlace (Google Sheets, GitHub, un CSV o JSON público). Con «Recordar el enlace», la base de datos guarda de dónde viene y aparece Actualizar: lo vuelve a traer y funde por nombre (lo que ya estaba conserva sus efectos, lo nuevo se añade y no se borra nada). Lo traído queda guardado en el sistema: la ficha del jugador no llama nunca a ese enlace. Si un sitio no deja leer el archivo desde otra web, se baja y se sube. Con una base de datos, «Añadir» abre un buscador que rellena la tarjeta con la entrada elegida; sin base de datos, se rellenan a mano.

Las bases de datos viven en el sistema (viajan al exportarlo o compartirlo): sirven para cualquier juego: tu bestiario de compañeros, una base de datos de naves, de invocaciones…

Monturas, mascotas y vehículos con mochila propia

En el widget de equipo puedes activar que cada tarjeta lleve su propia mochila (objetos con cantidad y peso) y una capacidad de carga: una cifra por defecto, una columna de la tarjeta que la declare o lo que escriba el jugador en esa tarjeta (manda lo último). La barra de carga avisa cuando se pasa. Con perfil cada tarjeta tiene descripción, una imagen propia (que sirve de token al sacarla a combate) y, si el sistema tiene bestiario, una criatura enlazada: al sacarla a combate lleva la ficha de esa criatura con el nombre y la imagen de la tarjeta.

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), 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í que tu clase no 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

Puedes usar CSS completo, con todos los selectores:

/* 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: 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, que se degrada a absolute para que ningún sistema pueda tapar la aplicación. El editor te avisa de todo lo que descarta y del motivo.

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.

Revisa el móvil, porque es donde más gente juega.

Barras de recurso: continua o por bloques

Una Barra de recurso se puede pintar de dos formas:

• Barra continua: la de siempre.
• En bloques: un bloque por punto, que se van apagando al gastarse. Con recursos cortos (cuatro puntos de suerte, seis de maná) se lee mucho mejor, porque una barra a cuatro puntos da saltos enormes. Hasta 40 puntos; por encima se pinta la barra, porque con más bloques no se distinguirían.

También eliges su grosor (fina, media o gruesa).

La piel: que la hoja siga el tema

En Estilo → Piel eliges cómo se viste la hoja sin escribir CSS:

• Tema: la hoja es la app. Fondo, texto y acento son los de quien la mire (claro, oscuro, Escena, su color de acento). Lo propio de tu juego es la textura, la forma de las cajas y los títulos.
• Papel y Noche: la hoja tiene su propio tono (eliges el tono y cuánto color lleva el papel) y se lee igual con cualquier tema. El acento del jugador se conserva, pero se oscurece (papel) o se aclara (noche) lo justo para contrastar.

Encima de cualquiera de los tres:

Los colores sueltos de más abajo (fondo, paneles, texto…) mandan sobre la piel: úsalos solo si quieres fijar uno.

En tu CSS puedes ramificar por el tema de quien mira: html[data-app-claro] .mi-caja { … } se aplica solo cuando la app lleva un tema claro.

Compendios: listas grandes fuera del sistema

Una base de datos viaja dentro del sistema, y con cientos de entradas lo hace pesado. Para listas grandes (todos los objetos, los conjuros, un bestiario de mil criaturas) está Contenido → Compendios: cada entrada es una fila aparte, se lee por páginas y con buscador, y el sistema no engorda. Un compendio toma las columnas de una base de datos o tiene las suyas, y cada entrada puede llevar efectos.

Se llena a mano (la tabla se edita en el sitio y acepta pegar de Excel o Sheets), importando un archivo o un enlace, o con Copiar su base de datos (la base de datos no cambia). Los cambios se guardan al momento, sin pulsar «Guardar».

En la ficha, el widget Compendio busca y añade entradas con un clic. La ficha guarda una copia con su referencia: si el compendio cambia o se borra, la ficha sigue igual, y Actualizar trae la versión nueva cuando quieras. Mientras una entrada esté en la ficha, sus efectos se aplican (el rayo apaga una sin quitarla).

Llevar un estilo a otro sistema

Bajo los temas de Estilo hay tres atajos:

• Copiar el estilo de otro sistema tuyo: elige uno y esta ficha toma sus colores, letra, piel, CSS y plantilla de tirada. Los campos y el diseño no se tocan.
• Guardar en archivo: baja el estilo en un .json para usarlo en otro sistema o pasárselo a alguien; Abrir un estilo… lo aplica aquí.
• Deshacer: después de un tema, una plantilla, copiar, abrir o Restablecer, vuelve al estilo de justo antes.

Las imágenes que hayas subido en el sistema se conservan al cambiar de estilo.

La letra de la ficha

En Estilo eliges dos tipografías, no una:

• Fuente: la del cuerpo (los valores, las descripciones, las tablas).
• Fuente de títulos: la de los rótulos y las cifras grandes. Es la que le da carácter a la ficha; sin ella, los títulos son los de la app en todos los sistemas. Manda dentro de tu ficha, y fuera sigue mandando la letra que cada usuario haya elegido en accesibilidad.

Entre las opciones hay dos de pantalla y rótulo (Terminal de pantalla y Condensada de rótulo) además de las de siempre.

Columnas en la lista de habilidades

La Lista de habilidades puede llevar columnas extra a la derecha de cada fila, como la hoja de papel de muchos juegos:

• Casilla (sí/no): la marca de «habilidad de clase / especializada / marcada». Sale de un campo booleano cuyo nombre se arma con la clave de la habilidad más un prefijo o un sufijo (prefijo tag_ sobre sigilo lee el campo tag_sigilo), y se puede marcar desde la ficha.
• Número de otro campo: igual, pero enseña su número.
• Objetivo de la tirada: no necesita campo: calcula la fórmula de tirada de la propia habilidad, que suele ser atributo + rango. Es el número contra el que se tira.

Cada columna tiene su rótulo y su ancho, y el creador avisa si el prefijo no casa con ningún campo del sistema.

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. Vale igual en la ficha de personaje, en la ficha de criatura y en las hojas de grupo (una criatura con tipo_criatura enseña CUERPO/MENTE y un personaje, su SPECIAL: dos bloques en el mismo diseño, cada uno con su condición).

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 sin abusar: 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