@rpgjs/client 5.0.0-beta.4 → 5.0.0-beta.6

package/src/components/gui/dialogbox/index.ce

@@ -29,10 +29,15 @@
                             </div>
                         </Navigation>
                     }
-               </div>
+                </div>
                 @if (hasFace()) {
                     <div class="rpg-ui-dialog-face">
-                        <DOMSprite sheet={faceSheet(face.id, face.expression)} />
+                        <DOMSprite
+                            sheet={faceSheet(dialogFace())}
+                            width="100%"
+                            height="100%"
+                            objectFit="contain"
+                        />
                     </div>
                 }
             </div>
@@ -76,7 +81,11 @@
 
     const dialogPosition = computed(() => resolveProp(position) || "bottom");
     const isFullWidth = computed(() => resolveProp(fullWidth) !== false);
-    const hasFace = computed(() => !!resolveProp(face));
+    const dialogFace = computed(() => resolveProp(face));
+    const hasFace = computed(() => {
+        const value = dialogFace();
+        return !!(value && value.id);
+    });
 
     const displayMessage = signal("");
     const fullMessage = signal("");
@@ -192,10 +201,10 @@
         },
     })
 
-    const faceSheet = (graphicId, animationName) => {
+    const faceSheet = (faceValue) => {
         return {
-            definition: engine.getSpriteSheet(graphicId),
-            playing: animationName,
+            definition: engine.getSpriteSheet(faceValue.id),
+            playing: faceValue.expression || "default",
         };
     }