feat(spa): highlight the final result of a roll

close #604
mythal · Sep 2, 2024 · b31926d · b31926d
1 parent 1e0fa48
commit b31926d
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 18 deletions.
diff --git a/apps/spa/components/entities/EntityExprBinary.tsx b/apps/spa/components/entities/EntityExprBinary.tsx
@@ -1,17 +1,18 @@
-import { type FC } from 'react';
+import { type ReactNode, type FC } from 'react';
 import { type Binary, type BinaryResult } from '../../interpreter/entities';
 import { EntityExprNode } from './EntityExprNode';
 import { IsTopLevelContext, useIsTopLevel } from '../../hooks/useIsTopLevel';
+import { Result } from './Result';
 
 interface Props {
   node: Binary | BinaryResult;
 }
 
 export const EntityExprBinary: FC<Props> = ({ node }) => {
   const isTopLevel = useIsTopLevel();
-  let result = '';
+  let result: ReactNode = null;
   if (isTopLevel && 'value' in node) {
-    result = `=${node.value}`;
+    result = <Result final>{node.value}</Result>;
   }
   const entityNode = (
     <span className="EntityExprBinary">

diff --git a/apps/spa/components/entities/EntityExprCocRoll.tsx b/apps/spa/components/entities/EntityExprCocRoll.tsx
@@ -6,6 +6,8 @@ import { cocRollSubTypeDisplay, cocSuccessLevelDisplay } from '../../interpreter
 import { Delay } from '../Delay';
 import { FallbackIcon } from '../FallbackIcon';
 import { RollBox } from './RollBox';
+import { Result } from './Result';
+import { useIsTopLevel } from '../../hooks/useIsTopLevel';
 
 interface Props {
   node: CocRoll | CocRollResult;
@@ -26,6 +28,7 @@ const UndecidedCocRoll: FC<{ node: CocRoll }> = ({ node }) => {
 
 const CocResult: FC<{ node: CocRollResult }> = ({ node }) => {
   const intl = useIntl();
+  const topLevel = useIsTopLevel();
   let target: ReactNode = null;
   let successLevel: ReactNode = null;
   let modifiers: ReactNode = null;
@@ -54,7 +57,9 @@ const CocResult: FC<{ node: CocRollResult }> = ({ node }) => {
   return (
     <span>
       {modifiers}
-      {node.value}
+      <Result final={topLevel} noEqual>
+        {node.value}
+      </Result>
       {target}
       {successLevel}
     </span>

diff --git a/apps/spa/components/entities/EntityExprMax.tsx b/apps/spa/components/entities/EntityExprMax.tsx
@@ -1,15 +1,18 @@
-import { type FC } from 'react';
+import { type ReactNode, type FC } from 'react';
 import { type Max, type MaxResult } from '../../interpreter/entities';
 import { EntityExprNode } from './EntityExprNode';
+import { useIsTopLevel } from '../../hooks/useIsTopLevel';
+import { Result } from './Result';
 
 interface Props {
   node: Max | MaxResult;
 }
 
 export const EntityExprMax: FC<Props> = ({ node: maxNode }) => {
-  let result = '';
+  const topLevel = useIsTopLevel();
+  let result: ReactNode = null;
   if ('value' in maxNode) {
-    result = `=${maxNode.value}`;
+    result = <Result final={topLevel}>{maxNode.value}</Result>;
   }
   return (
     <div className="EntityExprMax inline-flex">

diff --git a/apps/spa/components/entities/EntityExprMin.tsx b/apps/spa/components/entities/EntityExprMin.tsx
@@ -1,15 +1,18 @@
-import { type FC } from 'react';
+import { type ReactNode, type FC } from 'react';
 import { type Min, type MinResult } from '../../interpreter/entities';
 import { EntityExprNode } from './EntityExprNode';
+import { Result } from './Result';
+import { useIsTopLevel } from '../../hooks/useIsTopLevel';
 
 interface Props {
   node: Min | MinResult;
 }
 
 export const EntityExprMin: FC<Props> = ({ node: minNode }) => {
-  let result = '';
+  const topLevel = useIsTopLevel();
+  let result: ReactNode = null;
   if ('value' in minNode) {
-    result = `=${minNode.value}`;
+    result = <Result final={topLevel}>{minNode.value}</Result>;
   }
   return (
     <div className="EntityExprMin inline-flex">

diff --git a/apps/spa/components/entities/EntityExprRepeat.tsx b/apps/spa/components/entities/EntityExprRepeat.tsx
@@ -2,6 +2,8 @@ import { type FC } from 'react';
 import { type EvaluatedExprNode, type ExprNode, type Repeat, type RepeatResult } from '../../interpreter/entities';
 import { EntityExprNode } from './EntityExprNode';
 import { EntityExprNodeUnknown } from './EntityExprUnknown';
+import { useIsTopLevel } from '../../hooks/useIsTopLevel';
+import { Result } from './Result';
 
 interface Props {
   node: Repeat | RepeatResult;
@@ -15,6 +17,7 @@ export const RepeatItem: FC<{ item: ExprNode | EvaluatedExprNode | 0 }> = ({ ite
 };
 
 export const EntityExprRepeat: FC<Props> = ({ node: repeat }) => {
+  const topLevel = useIsTopLevel();
   const { node, count } = repeat;
   if (count === 0) {
     return <EntityExprNodeUnknown />;
@@ -35,7 +38,8 @@ export const EntityExprRepeat: FC<Props> = ({ node: repeat }) => {
       {nodeList.map((item, key) => (
         <RepeatItem item={item} key={key} />
       ))}{' '}
-      &#125;{'value' in repeat && <span>={repeat.value}</span>}
+      &#125;
+      {'value' in repeat && <Result final={topLevel}>{repeat.value}</Result>}
     </span>
   );
 };
diff --git a/apps/spa/components/entities/EntityExprRoll.tsx b/apps/spa/components/entities/EntityExprRoll.tsx
@@ -5,6 +5,8 @@ import { type Roll, type RollResult } from '../../interpreter/entities';
 import { Delay } from '../Delay';
 import { FallbackIcon } from '../FallbackIcon';
 import { RollBox } from './RollBox';
+import { useIsTopLevel } from '../../hooks/useIsTopLevel';
+import { Result } from './Result';
 
 interface Props {
   node: Roll | RollResult;
@@ -29,13 +31,9 @@ const RollFilter: FC<{ filter: Roll['filter'] | undefined | null }> = ({ filter
 const Undecided: FC = () => <span>=??</span>;
 
 const ShowRollResult: FC<{ node: RollResult }> = ({ node }) => {
+  const topLevel = useIsTopLevel();
   if (node.values.length <= 1) {
-    return (
-      <span className="">
-        {'='}
-        {node.value}
-      </span>
-    );
+    return <Result final={topLevel}>{node.value}</Result>;
   }
   return (
     <span>

diff --git a/apps/spa/components/entities/EntityExprSubExpr.tsx b/apps/spa/components/entities/EntityExprSubExpr.tsx
@@ -2,6 +2,7 @@ import { EntityExprNode } from './EntityExprNode';
 import { type SubExpr, type SubExprResult } from '../../interpreter/entities';
 import { IsTopLevelContext, useIsTopLevel } from '../../hooks/useIsTopLevel';
 import { type ReactNode } from 'react';
+import { Result } from './Result';
 
 interface Props {
   node: SubExpr | SubExprResult;
@@ -11,7 +12,7 @@ export const EntityExprSubExpr = ({ node }: Props) => {
   const isTopLevel = useIsTopLevel();
   let resultNode: ReactNode = null;
   if (isTopLevel && 'value' in node) {
-    resultNode = <span>={node.value}</span>;
+    resultNode = <Result final>{node.value}</Result>;
   }
   const entityNode = (
     <span className="EntityExprSubExpr">

diff --git a/apps/spa/components/entities/Result.tsx b/apps/spa/components/entities/Result.tsx
@@ -0,0 +1,17 @@
+import clsx from 'clsx';
+import { type FC, type ReactNode } from 'react';
+
+export const Result: FC<{ children: ReactNode; final?: boolean; noEqual?: boolean }> = ({
+  children,
+  final = false,
+  noEqual = false,
+}) => {
+  return (
+    <span>
+      {!noEqual && <span>=</span>}
+      <span className={clsx('Result', final ? 'text-expr-result font-bold' : 'decoration-expr-decoration underline')}>
+        {children}
+      </span>
+    </span>
+  );
+};
diff --git a/packages/ui/tailwind.config.ts b/packages/ui/tailwind.config.ts
@@ -301,6 +301,8 @@ const makeTheme = (name: 'dark' | 'light'): Config['theme'] => {
       },
       expr: {
         bg: $(lime[50], neutral[900]),
+        result: $(brand[600], brand[500]),
+        decoration: $(neutral[400], neutral[600]),
       },
       code: {
         bg: $(neutral[100], black),