diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/separationOverview.ts b/apps/ai-game-creator-shell/src/features/ui-editor/separationOverview.ts index 1330e2b7c..99fc27163 100644 --- a/apps/ai-game-creator-shell/src/features/ui-editor/separationOverview.ts +++ b/apps/ai-game-creator-shell/src/features/ui-editor/separationOverview.ts @@ -5,6 +5,7 @@ import { type UiTreeNodeTarget, } from './stageStatusOverview'; import type { Component } from './types/Component'; +import type { FontAsset } from './types/FontAsset'; import type { SpriteAsset } from './types/SpriteAsset'; import type { UITree } from './types/UITree'; @@ -39,12 +40,17 @@ function countRequiredAssetSlot(isBound: boolean): ComponentSeparationCounts { export function getImageSeparationCounts( component: Extract['Image'], + spriteAssets?: Record, ): ComponentSeparationCounts { - return countRequiredAssetSlot(component.target_graphic !== null); + return countRequiredAssetSlot( + component.target_graphic !== null && + (spriteAssets === undefined || component.target_graphic in spriteAssets), + ); } export function getTextSeparationCounts( component: Extract['Text'], + fontAssets?: Record, ): ComponentSeparationCounts { if ( typeof component.font !== 'object' || @@ -53,17 +59,21 @@ export function getTextSeparationCounts( ) { return EMPTY_COMPONENT_SEPARATION_COUNTS; } - return countRequiredAssetSlot(true); + return countRequiredAssetSlot( + fontAssets === undefined || component.font.Bound in fontAssets, + ); } export function getComponentSeparationCounts( component: Component, + spriteAssets?: Record, + fontAssets?: Record, ): ComponentSeparationCounts { if ('Image' in component) { - return getImageSeparationCounts(component.Image); + return getImageSeparationCounts(component.Image, spriteAssets); } if ('Text' in component) { - return getTextSeparationCounts(component.Text); + return getTextSeparationCounts(component.Text, fontAssets); } return EMPTY_COMPONENT_SEPARATION_COUNTS; } @@ -81,6 +91,7 @@ function addSeparationCounts( export function getSeparationOverview( uiTrees: UITree[], spriteAssets: Record, + fontAssets: Record = {}, ): SeparationOverview { const overview: SeparationOverview = { ...EMPTY_COMPONENT_SEPARATION_COUNTS, @@ -98,7 +109,7 @@ export function getSeparationOverview( if (node.component) { addSeparationCounts( overview, - getComponentSeparationCounts(node.component), + getComponentSeparationCounts(node.component, spriteAssets, fontAssets), ); } } diff --git a/apps/ai-game-creator-shell/src/view/ui-editor/components/SeparationOverview.tsx b/apps/ai-game-creator-shell/src/view/ui-editor/components/SeparationOverview.tsx index 6a24c82f7..79f17eceb 100644 --- a/apps/ai-game-creator-shell/src/view/ui-editor/components/SeparationOverview.tsx +++ b/apps/ai-game-creator-shell/src/view/ui-editor/components/SeparationOverview.tsx @@ -5,6 +5,7 @@ import { nodeHasBlockedComponents, nodeNeedsComponentReview, } from '../../../features/ui-editor/separationOverview'; +import type { FontAsset } from '../../../features/ui-editor/types/FontAsset'; import type { NodeId } from '../../../features/ui-editor/types/NodeId'; import type { SpriteAsset } from '../../../features/ui-editor/types/SpriteAsset'; import type { UIDesignImageId } from '../../../features/ui-editor/types/UIDesignImageId'; @@ -14,15 +15,17 @@ import { useUiTreeNodeCycle } from '../useUiTreeNodeCycle'; export function SeparationOverview({ uiTrees, sprites, + fonts, onFocusStatusNode, }: { uiTrees: UITree[]; sprites: Record; + fonts: Record; onFocusStatusNode: (treeId: UIDesignImageId, nodeId: NodeId) => void; }) { const overview = useMemo( - () => getSeparationOverview(uiTrees, sprites), - [sprites, uiTrees], + () => getSeparationOverview(uiTrees, sprites, fonts), + [fonts, sprites, uiTrees], ); const attentionCycle = useUiTreeNodeCycle({ uiTrees, diff --git a/apps/ai-game-creator-shell/src/view/ui-editor/index.tsx b/apps/ai-game-creator-shell/src/view/ui-editor/index.tsx index 2ea43b868..4696d76f9 100644 --- a/apps/ai-game-creator-shell/src/view/ui-editor/index.tsx +++ b/apps/ai-game-creator-shell/src/view/ui-editor/index.tsx @@ -269,6 +269,7 @@ export default function UiEditorPage({ { session.input.focusNode(treeId, nodeId); session.input.highlightStatusField(nodeId, 'component_status');