fix(ui): 카드 텍스트 가독성 개선

tools/deck/gen-slaydeck.mjs

@@ -216,7 +216,8 @@ const HEAD_OFFSET_Y = 1.4; // 몬스터 월드 원점 위로 띄울 높이(머
 
 const HP_BAR_W = 140;
 const WHITE = { r: 1, g: 1, b: 1, a: 1 };
-const INK = { r: 0.13, g: 0.11, b: 0.09, a: 1 }; // 밝은 배너·설명 박스 위 먹색 글자
+const CARD_NAME_TEXT = { r: 1, g: 0.92, b: 0.62, a: 1 };
+const CARD_DESC_TEXT = { r: 0.98, g: 0.96, b: 0.9, a: 1 };
 // 카드 프레임(1054×1492 원본) 슬롯 레이아웃 — 픽셀 실측을 180×250 카드 좌표로 환산한 기준값을 폭 비례 스케일.
 // 실측(워리어·메이지·밴딧 공통): 육각 중심 (120,127)→(-70,104) · 배너 본체 y55..165, x215..1015→중심 (+15,+107)
 // · 설명 박스 y~1030..1480→중심 (0,-86) · 아트 영역 y260..1030→중심 (0,+17)
@@ -225,9 +226,9 @@ function cardFaceLayout(W) {
   const r = (v) => Math.round(v * s);
   return {
     texts: [
-      ['Cost', { size: { x: r(40), y: r(40) }, pos: { x: r(-70), y: r(104) }, fontSize: r(24), bold: true, color: WHITE }],
-      ['Name', { size: { x: r(132), y: r(24) }, pos: { x: r(15), y: r(107) }, fontSize: r(16), bold: true, color: INK }],
-      ['Desc', { size: { x: r(150), y: r(62) }, pos: { x: 0, y: r(-86) }, fontSize: r(16), bold: false, color: INK }],
+      ['Cost', { size: { x: r(40), y: r(40) }, pos: { x: r(-70), y: r(104) }, fontSize: r(24), bold: true, color: WHITE, dropShadow: true, outlineWidth: 2 }],
+      ['Name', { size: { x: r(142), y: r(28) }, pos: { x: r(15), y: r(106) }, fontSize: r(17), bold: true, color: CARD_NAME_TEXT, dropShadow: true, outlineWidth: 2 }],
+      ['Desc', { size: { x: r(158), y: r(78) }, pos: { x: 0, y: r(-82) }, fontSize: r(14), bold: true, color: CARD_DESC_TEXT, dropShadow: true, outlineWidth: 2 }],
     ],
     art: { size: { x: r(112), y: r(112) }, pos: { x: 0, y: r(17) } },
   };
@@ -334,15 +335,15 @@ function button({ enabled = true } = {}) {
   };
 }
 
-function text({ value, fontSize, bold = false, color = { r: 1, g: 1, b: 1, a: 1 }, alignment = 4 }) {
+function text({ value, fontSize, bold = false, color = { r: 1, g: 1, b: 1, a: 1 }, alignment = 4, dropShadow = false, outlineWidth = 1 }) {
   return {
     '@type': 'MOD.Core.TextComponent',
     Alignment: alignment,
     Bold: bold,
-    DropShadow: false,
+    DropShadow: dropShadow,
     DropShadowAngle: 30,
     DropShadowColor: { r: 0, g: 0, b: 0, a: 0.72 },
-    DropShadowDistance: 32,
+    DropShadowDistance: dropShadow ? 18 : 32,
     Font: 0,
     FontColor: color,
     FontSize: fontSize,
@@ -350,7 +351,7 @@ function text({ value, fontSize, bold = false, color = { r: 1, g: 1, b: 1, a: 1
     MinSize: 8,
     OutlineColor: { r: 0.08, g: 0.08, b: 0.08, a: 1 },
     OutlineDistance: { x: 1, y: -1 },
-    OutlineWidth: 1,
+    OutlineWidth: outlineWidth,
     Overflow: 0,
     OverrideSorting: false,
     Padding: { left: 0, right: 0, top: 0, bottom: 0 },
@@ -586,7 +587,7 @@ function upsertUi() {
           components: [
             transform({ parentW: CARD_W, parentH: CARD_H, anchor: { x: 0.5, y: 0.5 }, pivot: { x: 0.5, y: 0.5 }, size: cfg.size, pos: cfg.pos }),
             sprite({ color: TRANSPARENT }),
-            text({ value: cfg.value, fontSize: cfg.fontSize, bold: cfg.bold, color: cfg.color }),
+            text({ value: cfg.value, fontSize: cfg.fontSize, bold: cfg.bold, color: cfg.color, dropShadow: cfg.dropShadow, outlineWidth: cfg.outlineWidth }),
           ],
         });
         ui.ContentProto.Entities.push(child);
@@ -608,6 +609,10 @@ function upsertUi() {
         child.jsonString['@components'][2].FontSize = cfg.fontSize;
         child.jsonString['@components'][2].MaxSize = cfg.fontSize;
         child.jsonString['@components'][2].FontColor = cfg.color;
+        child.jsonString['@components'][2].Bold = cfg.bold;
+        child.jsonString['@components'][2].DropShadow = cfg.dropShadow === true;
+        child.jsonString['@components'][2].DropShadowDistance = cfg.dropShadow === true ? 18 : 32;
+        child.jsonString['@components'][2].OutlineWidth = cfg.outlineWidth || 1;
       }
     }
 
@@ -877,7 +882,7 @@ function upsertUi() {
         components: [
           transform({ parentW: INSPECT_CARD_W, parentH: INSPECT_CARD_H, anchor: { x: 0.5, y: 0.5 }, pivot: { x: 0.5, y: 0.5 }, size: cfg.size, pos: cfg.pos }),
           sprite({ color: TRANSPARENT }),
-          text({ value: cfg.value, fontSize: cfg.fontSize, bold: cfg.bold, color: cfg.color }),
+          text({ value: cfg.value, fontSize: cfg.fontSize, bold: cfg.bold, color: cfg.color, dropShadow: cfg.dropShadow, outlineWidth: cfg.outlineWidth }),
         ],
       }));
     }
@@ -1032,7 +1037,7 @@ function upsertUi() {
         components: [
           transform({ parentW: ALL_DECK_CARD_W, parentH: ALL_DECK_CARD_H, anchor: { x: 0.5, y: 0.5 }, pivot: { x: 0.5, y: 0.5 }, size: cfg.size, pos: cfg.pos }),
           sprite({ color: TRANSPARENT }),
-          text({ value: cfg.value, fontSize: cfg.fontSize, bold: cfg.bold, color: cfg.color }),
+          text({ value: cfg.value, fontSize: cfg.fontSize, bold: cfg.bold, color: cfg.color, dropShadow: cfg.dropShadow, outlineWidth: cfg.outlineWidth }),
         ],
       }));
     }
@@ -1551,7 +1556,7 @@ function upsertUi() {
         components: [
           transform({ parentW: CARD_W, parentH: CARD_H, anchor: { x: 0.5, y: 0.5 }, pivot: { x: 0.5, y: 0.5 }, size: cfg.size, pos: cfg.pos }),
           sprite({ color: TRANSPARENT }),
-          text({ value: cfg.value, fontSize: cfg.fontSize, bold: cfg.bold, color: cfg.color }),
+          text({ value: cfg.value, fontSize: cfg.fontSize, bold: cfg.bold, color: cfg.color, dropShadow: cfg.dropShadow, outlineWidth: cfg.outlineWidth }),
         ],
       }));
     }
@@ -1775,7 +1780,7 @@ function upsertUi() {
         components: [
           transform({ parentW: CARD_W, parentH: CARD_H, anchor: { x: 0.5, y: 0.5 }, pivot: { x: 0.5, y: 0.5 }, size: cfg.size, pos: cfg.pos }),
           sprite({ color: TRANSPARENT }),
-          text({ value: cfg.value, fontSize: cfg.fontSize, bold: cfg.bold, color: cfg.color }),
+          text({ value: cfg.value, fontSize: cfg.fontSize, bold: cfg.bold, color: cfg.color, dropShadow: cfg.dropShadow, outlineWidth: cfg.outlineWidth }),
         ],
       }));
     }