valtech-components 4.0.522 → 4.0.523

package/lib/components/molecules/media-object/media-object.component.d.ts

@@ -30,7 +30,7 @@ export declare class MediaObjectComponent {
     /** Emitted when the inline link is clicked */
     onLinkClick: EventEmitter<string>;
     /** Merged configuration with defaults */
-    config: import("@angular/core").Signal<MediaObjectMetadata & Required<Pick<MediaObjectMetadata, "rounded" | "circle" | "mediaWidth" | "reversed" | "align">>>;
+    config: import("@angular/core").Signal<MediaObjectMetadata & Required<Pick<MediaObjectMetadata, "circle" | "rounded" | "mediaWidth" | "reversed" | "align">>>;
     getColor(): string;
     handleLinkClick(event: MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MediaObjectComponent, never>;

package/lib/components/molecules/phone-display/phone-display.component.d.ts

@@ -6,7 +6,7 @@ export declare class PhoneDisplayComponent {
     props: PhoneDisplayMetadata;
     onClick: EventEmitter<string>;
     protected rawPhone: import("@angular/core").Signal<string>;
-    protected mode: import("@angular/core").Signal<"button" | "link" | "text">;
+    protected mode: import("@angular/core").Signal<"button" | "text" | "link">;
     protected formatted: import("@angular/core").Signal<string>;
     protected href: import("@angular/core").Signal<string>;
     protected ariaLabel: import("@angular/core").Signal<string>;

package/lib/components/organisms/mini-games/chessimals-game.component.d.ts

@@ -114,7 +114,7 @@ export declare class ChessimalsGameComponent implements OnInit, OnDestroy {
     readonly botProfiles: ChessimalsBotProfile[];
     readonly challengeLadder: ChessimalsChallengeBot[];
     readonly animals: ChessimalsAnimalView[];
-    readonly valtechComponentsVersion = "4.0.522";
+    readonly valtechComponentsVersion = "4.0.523";
     readonly screen: import("@angular/core").WritableSignal<"home" | "challenge" | "path" | "game">;
     readonly selectedBoardSize: import("@angular/core").WritableSignal<ChessimalsBoardSize>;
     readonly selectedLocalMode: import("@angular/core").WritableSignal<ChessimalsLocalMode>;
@@ -397,6 +397,7 @@ export declare class ChessimalsGameComponent implements OnInit, OnDestroy {
     botProfileDescription(profile: ChessimalsBotProfile): string;
     botProfileTendency(profile: ChessimalsBotProfile): string;
     botProfileAvatar(profileId: ChessimalsBotProfileId): string;
+    botProfileAvatarSrc(profileId: ChessimalsBotProfileId): string;
     challengeBotProfile(bot: ChessimalsChallengeBot): ChessimalsBotProfile | undefined;
     challengeOpeningBot(): ChessimalsChallengeBot;
     challengeMenuBot(): ChessimalsChallengeBot;
@@ -412,6 +413,7 @@ export declare class ChessimalsGameComponent implements OnInit, OnDestroy {
     showChallengeIntro(): void;
     dismissChallengeIntro(): void;
     challengeLiveAvatar(): string;
+    challengeLiveAvatarSrc(): string;
     challengeLiveRivalName(): string;
     challengeLiveRivalLine(): string;
     challengeLiveStreakLabel(): string;
@@ -422,6 +424,7 @@ export declare class ChessimalsGameComponent implements OnInit, OnDestroy {
     challengeOutcomeTitle(): string;
     challengeOutcomeBody(): string;
     challengeSummaryAvatar(): string;
+    challengeSummaryAvatarSrc(): string;
     challengeRoundStageLabel(): string;
     challengeRivalVoiceLabel(): string;
     challengeRivalVoiceTitle(): string;

package/lib/components/organisms/mini-games/memory-game.component.d.ts

@@ -58,7 +58,7 @@ export declare class MemoryGameComponent implements OnDestroy {
     readonly playerName: import("@angular/core").Signal<string>;
     readonly activePlayerAvatar: import("@angular/core").Signal<string>;
     readonly activePlayerColor: import("@angular/core").Signal<string>;
-    readonly timeLabel: import("@angular/core").Signal<"time" | "timeLeft">;
+    readonly timeLabel: import("@angular/core").Signal<"timeLeft" | "time">;
     readonly formattedTime: import("@angular/core").Signal<string>;
     readonly resultMedal: import("@angular/core").Signal<MemoryMedal>;
     readonly resultSeconds: import("@angular/core").Signal<number>;

package/lib/components/organisms/mini-games/types.d.ts

@@ -58,6 +58,7 @@ export interface ChessimalsBotProfile {
     id: ChessimalsBotProfileId;
     difficulty: ChessimalsBotDifficulty;
     avatar: string;
+    avatarSrc?: string;
     labelKey: string;
     descriptionKey: string;
 }

package/lib/version.d.ts

@@ -2,4 +2,4 @@
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-export declare const VERSION = "4.0.522";
+export declare const VERSION = "4.0.523";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "4.0.522",
+  "version": "4.0.523",
   "private": false,
   "bin": {
     "valtech-firebase-config": "./src/lib/services/firebase/scripts/generate-sw-config.js"

package/src/lib/assets/games/README.md

@@ -0,0 +1,149 @@
+# Game Art Assets
+
+Guia breve para generar, limpiar y guardar arte raster para mini juegos.
+
+## Cuando usar este flujo
+
+Usar `image_gen` para assets visuales de juego que deban sentirse hechos a medida:
+
+- avatares de rivales o jugadores;
+- cartas, fichas, piezas, power-ups o insignias;
+- fondos, escenas, tableros decorativos o banners internos;
+- sprites o sprite sheets simples.
+
+No usar este flujo para iconos que ya pertenezcan al sistema visual, SVGs deterministas, diagramas simples o UI que pueda resolverse mejor con CSS/HTML.
+
+## Flujo recomendado
+
+1. Generar el asset con `image_gen`.
+2. Si se necesita transparencia, pedir fondo chroma plano.
+3. Copiar el resultado desde `$CODEX_HOME/generated_images/...` al workspace.
+4. Remover chroma localmente.
+5. Recortar, centrar y normalizar tamanos.
+6. Revisar sobre fondo claro y oscuro.
+7. Guardar solo los assets finales usados por la app.
+8. Conectar el asset con fallback textual o emoji si aplica.
+
+## Prompt base para transparencia
+
+```text
+Create the requested game asset on a perfectly flat solid #00ff00 chroma-key background for background removal.
+The background must be one uniform color with no shadows, gradients, texture, reflections, floor plane, or lighting variation.
+Keep the subject fully separated from the background with crisp edges and generous padding.
+Do not use #00ff00 anywhere in the subject.
+No cast shadow, no contact shadow, no reflection, no watermark, and no text unless explicitly requested.
+```
+
+Para sujetos verdes, usar otro chroma improbable, por ejemplo `#ff00ff`.
+
+## Remover chroma
+
+Preferir el helper instalado por Codex:
+
+```bash
+python "${CODEX_HOME:-$HOME/.codex}/skills/.system/imagegen/scripts/remove_chroma_key.py" \
+  --input <source.png> \
+  --out <final.png> \
+  --auto-key border \
+  --soft-matte \
+  --transparent-threshold 12 \
+  --opaque-threshold 220 \
+  --despill
+```
+
+Si el borde queda con halo, reintentar una vez con:
+
+```bash
+python "${CODEX_HOME:-$HOME/.codex}/skills/.system/imagegen/scripts/remove_chroma_key.py" \
+  --input <source.png> \
+  --out <final.png> \
+  --auto-key border \
+  --soft-matte \
+  --transparent-threshold 12 \
+  --opaque-threshold 220 \
+  --edge-contract 1 \
+  --despill
+```
+
+## Sprite sheets
+
+Para varios personajes, suele funcionar mejor pedir una sprite sheet consistente:
+
+```text
+Create 8 cute pixel art rival avatar portraits in a single 4x2 sprite sheet.
+Each cell must have the same size, consistent outline thickness, same lighting and generous padding.
+No text, no letters, no numbers, no watermark.
+```
+
+Despues recortar cada celda, remover chroma, centrar en un canvas cuadrado y exportar cada item con nombre semantico:
+
+```text
+explorer.png
+guardian.png
+hunter.png
+```
+
+## Ubicacion
+
+Guardar assets finales en:
+
+```text
+frontend/valtech-components/src/lib/assets/games/<game-id>/
+```
+
+Ejemplo:
+
+```text
+frontend/valtech-components/src/lib/assets/games/chessimals/challenge-avatars/explorer.png
+```
+
+Para marcas oficiales de un juego, usar un subdirectorio `brand`:
+
+```text
+frontend/valtech-components/src/lib/assets/games/chessimals/brand/chessimals-emblem.png
+```
+
+No dejar archivos fuente temporales, hojas generadas o variantes descartadas en el repo salvo que sean necesarios para mantenimiento.
+
+## Validacion visual
+
+Antes de conectar el asset:
+
+- revisar esquinas transparentes;
+- revisar que no exista halo del chroma;
+- probar sobre fondo claro y oscuro;
+- verificar que se lea bien al tamano real de UI;
+- comprobar que no se pueda arrastrar desde la interfaz (`draggable="false"` y CSS anti-drag si aplica);
+- mantener `alt=""` cuando el asset sea decorativo y ya exista texto visible con el nombre.
+
+## Conexion en Angular
+
+Preferir rutas relativas servidas como assets:
+
+```ts
+avatarSrc: 'assets/games/chessimals/challenge-avatars/explorer.png'
+```
+
+En template, mantener fallback:
+
+```html
+@if (avatarSrc; as src) {
+  <img [src]="src" alt="" draggable="false" />
+} @else {
+  {{ fallbackAvatar }}
+}
+```
+
+## Caso de referencia
+
+Chessimals usa este flujo para los avatares pixel art del modo Desafio:
+
+```text
+frontend/valtech-components/src/lib/assets/games/chessimals/challenge-avatars/
+```
+
+Documentacion ampliada:
+
+```text
+docs/frontend/mini-games-art-assets.md
+```

package/src/lib/assets/games/chessimals/brand/README.md

@@ -0,0 +1,23 @@
+# Chessimals Brand Assets
+
+Assets oficiales de marca para Chessimals.
+
+## Archivos
+
+- `chessimals-wordmark.png`: palabra CHESSIMALS transparente. Usar cuando ya exista otro elemento visual fuerte cerca.
+- `chessimals-emblem.png`: escudo transparente con las cuatro caritas. Usar como icono, card de selector, about o marca compacta.
+- `chessimals-app-icon.png`: icono maestro 1024x1024 para app stores, PWA o superficies grandes.
+- `chessimals-app-icon-capacitor.png`: fuente 1024x1024 RGB, opaca y sin borde transparente para generar assets con Capacitor.
+- `chessimals-app-icon-512.png`: icono 512x512 para manifiestos PWA.
+- `chessimals-app-icon-192.png`: icono 192x192 para manifiestos PWA.
+- `chessimals-favicon.png`: favicon PNG 64x64.
+
+## Reglas
+
+- No volver a usar `logo.jpg` o `menu-logo.jpg` para superficies nuevas.
+- Componer emblema y wordmark en HTML/CSS cuando se necesite una portada o splash.
+- Usar `chessimals-app-icon.png` como fuente maestra si se necesitan nuevos tamanos de icono.
+- Usar `chessimals-app-icon-capacitor.png` para `@capacitor/assets`; no usar PNGs transparentes como fuente de iconos nativos.
+- Mantener `alt=""` cuando el logo acompane texto visible de Chessimals.
+- Usar `draggable="false"` o CSS anti-drag si aparece en superficies interactivas.
+- Si se genera una nueva version, preservar estos nombres solo cuando se reemplace oficialmente el asset.

package/src/lib/assets/games/chessimals/powers/README.md

@@ -0,0 +1,12 @@
+# Chessimals Power Assets
+
+Official UI assets for the animal power cards.
+
+- `eagle-power.png`: diagonal flight power.
+- `bull-power.png`: straight charge power.
+- `kangaroo-power.png`: jump power.
+- `lion-power.png`: wide board power.
+
+Each asset is a transparent 512x512 PNG generated from the current Chessimals
+brand direction. Keep new power assets text-free so labels can remain localized
+in the Angular UI.