From 6300fe10829d40b9a0428e813ac85047f11cf3e4 Mon Sep 17 00:00:00 2001
From: jisangs <jisangs@gmail.com>
Date: Sun, 31 May 2026 16:13:14 +0900
Subject: [PATCH] =?UTF-8?q?=ED=92=80=EC=9D=B4=ED=95=98=EA=B3=A0=20?=
 =?UTF-8?q?=EC=9E=88=EB=8A=94=20=EB=82=B4=EC=9A=A9=20=EC=83=89=EC=83=81=20?=
 =?UTF-8?q?=EA=B0=95=EC=A1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../play/NumberPlayClient.tsx                 | 31 ++++++++++++++++-
 .../play/VariablePlayClient.tsx               | 34 ++++++++++++++++++-
 2 files changed, 63 insertions(+), 2 deletions(-)

diff --git a/app/(game)/number-parentheses/play/NumberPlayClient.tsx b/app/(game)/number-parentheses/play/NumberPlayClient.tsx
index 788a2c5..afb8106 100644
--- a/app/(game)/number-parentheses/play/NumberPlayClient.tsx
+++ b/app/(game)/number-parentheses/play/NumberPlayClient.tsx
@@ -17,8 +17,34 @@ import { DESKTOP_INPUT_DEVICE_QUERY } from "@/lib/input-device";
 import KatexRenderer from "@/components/math/KatexRenderer";
 import { useGameStore } from "@/store/gameStore";
 import type { MaxTermCount, ProblemCount } from "@/store/gameStore";
+import type { ParenthesisSignProblem } from "@/lib/engine/types";
 
 const REAL_NUMBER_PATTERN = /^-?\d+(?:\.\d+)?$/;
+const ACTIVE_TERM_COLOR = "#f97316";
+
+function highlightLatex(latex: string) {
+  return `\\textcolor{${ACTIVE_TERM_COLOR}}{${latex}}`;
+}
+
+function formatActiveTermProblemLatex(
+  problem: ParenthesisSignProblem,
+  activeTermIndex: number,
+) {
+  const termLatex = problem.terms
+    .map((term, index) => {
+      const displayTerm =
+        index === activeTermIndex ? highlightLatex(`${term}`) : `${term}`;
+
+      if (index === 0) return displayTerm;
+
+      return `${problem.operators[index - 1]} ${displayTerm}`;
+    })
+    .join(" ");
+
+  return `${highlightLatex(`${problem.multiplier}`)}${highlightLatex(
+    "(",
+  )}${termLatex}${highlightLatex(")")}`;
+}
 
 function parseAnswer(value: string) {
   const trimmed = value.trim();
@@ -205,6 +231,9 @@ export default function NumberPlayClient({
 
   const submitted = currentResult !== null;
   const isLastProblem = session.currentIndex === session.problems.length - 1;
+  const problemLatex = submitted
+    ? currentProblem.latexBefore
+    : formatActiveTermProblemLatex(currentProblem, activeInput);
   const pendingAnswerLabels = currentProblem.terms.map((term, index) => {
     if (index === 0) return String(term);
 
@@ -239,7 +268,7 @@ export default function NumberPlayClient({
           className="rounded-md bg-white px-6 pt-6 pb-4 shadow-sm ring-1 ring-slate-200 sm:p-8"
         >
           <div className="text-3xl font-semibold text-slate-950 sm:text-4xl">
-            <KatexRenderer latex={currentProblem.latexBefore} displayMode />
+            <KatexRenderer latex={problemLatex} displayMode />
           </div>
           <div className="mt-6">
             <StageIndicator
diff --git a/app/(game)/variable-parentheses/play/VariablePlayClient.tsx b/app/(game)/variable-parentheses/play/VariablePlayClient.tsx
index d9c9013..401b8f3 100644
--- a/app/(game)/variable-parentheses/play/VariablePlayClient.tsx
+++ b/app/(game)/variable-parentheses/play/VariablePlayClient.tsx
@@ -10,12 +10,41 @@ import VariableFeedbackPanel from "@/components/game/VariableFeedbackPanel";
 import VariableScoreSummary from "@/components/game/VariableScoreSummary";
 import KatexRenderer from "@/components/math/KatexRenderer";
 import { formatVariableTermLatex } from "@/lib/engine/variable-parenthesis";
+import type { VariableParenthesisProblem } from "@/lib/engine/variable-types";
 import {
   useVariableGameStore,
   type VariableMaxTermCount,
   type VariableProblemCount,
 } from "@/store/variableGameStore";
 
+const ACTIVE_TERM_COLOR = "#f97316";
+
+function highlightLatex(latex: string) {
+  return `\\textcolor{${ACTIVE_TERM_COLOR}}{${latex}}`;
+}
+
+function formatActiveTermProblemLatex(
+  problem: VariableParenthesisProblem,
+  activeTermIndex: number,
+) {
+  const termLatex = problem.terms
+    .map((term, index) => {
+      const displayTerm =
+        index === activeTermIndex
+          ? highlightLatex(formatVariableTermLatex(term))
+          : formatVariableTermLatex(term);
+
+      if (index === 0) return displayTerm;
+
+      return `${problem.operators[index - 1]} ${displayTerm}`;
+    })
+    .join(" ");
+
+  return `${highlightLatex(`${problem.multiplier}`)}${highlightLatex(
+    "(",
+  )}${termLatex}${highlightLatex(")")}`;
+}
+
 interface VariablePlayClientProps {
   problemCount: VariableProblemCount;
   maxTermCount: VariableMaxTermCount;
@@ -156,6 +185,9 @@ export default function VariablePlayClient({
 
   const submitted = currentResult !== null;
   const isLastProblem = session.currentIndex === session.problems.length - 1;
+  const problemLatex = submitted
+    ? currentProblem.latexBefore
+    : formatActiveTermProblemLatex(currentProblem, activeTermIndex);
   const pendingChoiceLabels = currentProblem.terms.map((term, index) =>
     formatVariableTermLatex({
       ...term,
@@ -189,7 +221,7 @@ export default function VariablePlayClient({
 
         <div className="rounded-md bg-white px-6 pt-6 pb-4 shadow-sm ring-1 ring-slate-200 sm:p-8">
           <div className="text-3xl font-semibold text-slate-950 sm:text-4xl">
-            <KatexRenderer latex={currentProblem.latexBefore} displayMode />
+            <KatexRenderer latex={problemLatex} displayMode />
           </div>
           <div className="mt-6">
             <StageIndicator