diff --git a/M02_MasterTemplete/DataFlow/M02_DF_Verify.css b/M02_MasterTemplete/DataFlow/M02_DF_Verify.css index 7843ee96f..7f5dd2c53 100644 --- a/M02_MasterTemplete/DataFlow/M02_DF_Verify.css +++ b/M02_MasterTemplete/DataFlow/M02_DF_Verify.css @@ -116,3 +116,15 @@ color: var(--color-danger); font-size: var(--text-caption); } + +/* 쉬는 갈래 — 문제가 아니라 회색으로 */ +.m02-dfver__rest { + padding: var(--spacing-8) var(--spacing-12); + border-left: 4px solid var(--color-border); + background: var(--color-surface); + color: var(--color-text-muted); +} + +.m02-dfver__rest .ui-btn { + color: var(--color-text-muted); +} diff --git a/M02_MasterTemplete/DataFlow/M02_DF_Verify.ts b/M02_MasterTemplete/DataFlow/M02_DF_Verify.ts index 9c1e422bd..b19f747bb 100644 --- a/M02_MasterTemplete/DataFlow/M02_DF_Verify.ts +++ b/M02_MasterTemplete/DataFlow/M02_DF_Verify.ts @@ -24,6 +24,11 @@ import "./M02_DF_Verify.css"; const TEXT = { Breaks: ["끊긴 곳", "Broken spots"], BreaksHint: ["누르면 그 상자 · 선을 고름", "Click to select the box or line"], + Rest: ["쉬는 갈래", "Resting branches"], + RestHint: [ + "조건이 안 맞아 쉬는 곳 — 누르면 그 선을 고름", + "Idle because a condition is not met — click to select the line", + ], Design: ["설계 때 정할 것", "To decide at design time"], DesignHint: ["여기서 바꾸면 그 상자도 바뀜", "Changing here changes the box too"], Vars: ["변수 예시값", "Variable samples"], @@ -333,33 +338,45 @@ export function renderVerify( /* 끊긴 곳 */ const spots = breaks(lg, opts.values ?? {}, { logics: opts.logics }); - const spotBlock = spots.length - ? [ - el("div", { - className: "m02-dfver__block m02-dfver__breaks", + const spotList = (list: typeof spots, hint: TextKey): HTMLElement[] => [ + el("ul", { + className: "m02-dfver__list", + children: list.map((s) => + el("li", { children: [ - el("strong", { text: tv("Breaks") }), - el("ul", { - className: "m02-dfver__list", - children: spots.map((s) => - el("li", { - children: [ - createButton({ - label: s.text, - variant: "ghost", - size: "sm", - disabled: !s.box || !on.select, - onClick: () => on.select?.({ box: s.box, port: s.port, link: s.link }), - }), - ], - }), - ), + createButton({ + label: s.text, + variant: "ghost", + size: "sm", + disabled: !s.box || !on.select, + onClick: () => on.select?.({ box: s.box, port: s.port, link: s.link }), }), - el("p", { className: "m02-dfver__muted", text: tv("BreaksHint") }), ], }), - ] - : []; + ), + }), + el("p", { className: "m02-dfver__muted", text: tv(hint) }), + ]; + const problems = spots.filter((s) => s.level !== "쉼"); + const resting = spots.filter((s) => s.level === "쉼"); + const spotBlock = [ + ...(problems.length + ? [ + el("div", { + className: "m02-dfver__block m02-dfver__breaks", + children: [el("strong", { text: tv("Breaks") }), ...spotList(problems, "BreaksHint")], + }), + ] + : []), + ...(resting.length + ? [ + el("div", { + className: "m02-dfver__block m02-dfver__rest", + children: [el("strong", { text: tv("Rest") }), ...spotList(resting, "RestHint")], + }), + ] + : []), + ]; /* 설계 때 정할 것 — Model `designInputs`(변수 · 재료 자리 · 다른 로직) + 재료 조건 자리 */ const designs = designInputs(lg);