Merge pull request #164 from RaenonX-DL/dev

v2.8.1 Release

Author: RaenonX

doc/markdown.md

@@ -54,17 +54,23 @@ Larger (2rem):
 ==([fx])<Expression>([fx])(Decimal)==
 ```
 
+> Things in the parentheses are optional.
+
 Show the expression and the result in 2 decimals at the end:
 
 ```
 ==<Expression>[fx][2f]==
 ```
 
-> Things in the parentheses are optional.
-
 - `[O]` `[fx]` is a constant string representing the placeholder of the calculation expression.
 - `[R]` `<Expression>` is the expression used for the calculation.
 - `[O]` `<Decimal>` is the number of decimals to display.
   - Either have something like `[2f]` for showing 2 decimals, or omit it all.
+  - Default to 0 decimals i.e., the answer will be an integer if not set.
 
 > Both `*` and `x` mean multiply.
+
+#### References
+
+Check [mathjs documentation](https://mathjs.org/docs/expressions/syntax.html)
+for the expression syntax.

src/components/elements/markdown/main.test.tsx

@@ -170,4 +170,21 @@ describe('Markdown', () => {
 
     expect(screen.getByText('10 (5 + 5)')).toBeInTheDocument();
   });
+
+  it('calculates complicating expression', async () => {
+    const markdown = '==[fx] 13% x 2 + 38% x 1== (3 Hit)';
+
+    renderReact(() => <Markdown>{markdown}</Markdown>);
+
+    expect(screen.getByText('(13% x 2 + 38% x 1) 64%')).toBeInTheDocument();
+    expect(screen.getByText(/(3 Hit)/)).toBeInTheDocument();
+  });
+
+  it('skips calculating invalid expression', async () => {
+    const markdown = '==something==';
+
+    renderReact(() => <Markdown>{markdown}</Markdown>);
+
+    expect(screen.getByText('something')).toBeInTheDocument();
+  });
 });

src/components/elements/markdown/transformers/math/const.ts

@@ -1,7 +1,20 @@
+import {ExpressionReplacements} from './types';
+
 export const expressionPlaceholder = '[fx]';
 
 export const decimalRegex = /\[(\d+)f]$/;
 
-export const charReplacements: Array<[string, string]> = [
-  ['x', '*'],
+export const charReplacements: ExpressionReplacements = [
+  {
+    name: 'multiplySign',
+    atCalculate: '*',
+    atDisplay: 'x',
+    availableDirections: ['toCalculate', 'toDisplay'],
+  },
+  {
+    name: 'percentSign',
+    atCalculate: '/100',
+    atDisplay: '%',
+    availableDirections: ['toCalculate'],
+  },
 ];

src/components/elements/markdown/transformers/math/main.test.tsx

@@ -65,4 +65,34 @@ describe('Markdown math expression', () => {
 
     expect(screen.getByText('0.63 (5 / 8)')).toBeInTheDocument();
   });
+
+  it('preserves % if present in the expression using `x` for multiply', async () => {
+    renderReact(() => <CalcExpression>{'140% x 2 + 2000% [fx]'}</CalcExpression>);
+
+    expect(screen.getByText('2280% (140% x 2 + 2000%)')).toBeInTheDocument();
+  });
+
+  it('preserves % if present in the expression', async () => {
+    renderReact(() => <CalcExpression>{'140% * 2 + 2000% [fx]'}</CalcExpression>);
+
+    expect(screen.getByText('2280% (140% x 2 + 2000%)')).toBeInTheDocument();
+  });
+
+  it('calculates complicating expression w/ %', async () => {
+    renderReact(() => <CalcExpression>{'15% x 1 + 90% x 2 + 105% x 3 [fx]'}</CalcExpression>);
+
+    expect(screen.getByText('510% (15% x 1 + 90% x 2 + 105% x 3)')).toBeInTheDocument();
+  });
+
+  it('calculates complicating expression w/o %', async () => {
+    renderReact(() => <CalcExpression>{'15 x 1 + 90 x 2 + 105 x 3 [fx]'}</CalcExpression>);
+
+    expect(screen.getByText('510 (15 x 1 + 90 x 2 + 105 x 3)')).toBeInTheDocument();
+  });
+
+  it('can calculate multiple multiplications', async () => {
+    renderReact(() => <CalcExpression>{'15 x 5 x 3'}</CalcExpression>);
+
+    expect(screen.getByText('225')).toBeInTheDocument();
+  });
 });

src/components/elements/markdown/transformers/math/main.tsx

@@ -17,20 +17,28 @@ export const CalcExpression = ({children}: CalcExpressionProps) => {
   children = children.trim(); // Trim whitespaces there's any
 
   let evalResult;
+  const replaceResult = replaceExpression(children, 'toCalculate');
   try {
-    evalResult = evaluate(replaceExpression(children, 'toCalculate'));
+    evalResult = evaluate(replaceResult.expression, {pct: 0.01});
   } catch (e) {
     return <>{children}</>;
   }
 
-  if (decimalInfo.decimalCount) {
-    evalResult = evalResult.toFixed(decimalInfo.decimalCount);
+  // Cannot merge this because:
+  // - *100 and postfix `%` at first: `toFixed()` cannot execute
+  // - *100 and postfix `%` at last:  if `decimalCount` not provided, 510% (5.1) will be 500% (5.0)
+  if (replaceResult.replacementUsed.percentSign) {
+    evalResult *= 100;
+  }
+  evalResult = evalResult.toFixed(decimalInfo.decimalCount || 0);
+  if (replaceResult.replacementUsed.percentSign) {
+    evalResult = `${evalResult}%`;
   }
 
   return (
     <ExpressionOutput
       exprExtractResult={expressionInfo}
-      expression={replaceExpression(children, 'toDisplay')}
+      expression={replaceExpression(children, 'toDisplay').expression}
       evalResult={evalResult}
     />
   );

src/components/elements/markdown/transformers/math/replacer.ts

@@ -1,16 +1,55 @@
+import {escapeRegexChars} from '../../../../../utils/regex';
 import {charReplacements} from './const';
-import {ExpressionReplaceDirection} from './types';
+import {ExpressionReplaceDirection, ExpressionReplaceReturn} from './types';
 
 
-export const replaceExpression = (expression: string, direction: ExpressionReplaceDirection): string => {
-  charReplacements.forEach(([display, evaluate]) => {
+type ReplaceResult = {
+  isChanged: boolean,
+  replacedExpression: string,
+}
+
+const replace = (expression: string, src: RegExp, dst: string): ReplaceResult => {
+  const replacedExpression = expression.replace(src, dst);
+
+  return {
+    isChanged: replacedExpression !== expression,
+    replacedExpression,
+  };
+};
+
+export const replaceExpression = (
+  expression: string,
+  direction: ExpressionReplaceDirection,
+): ExpressionReplaceReturn => {
+  const replacementUsed: ExpressionReplaceReturn['replacementUsed'] = {
+    multiplySign: false,
+    percentSign: false,
+  };
+
+  charReplacements.forEach((replacement) => {
+    if (!replacement.availableDirections.includes(direction)) {
+      return;
+    }
+
     if (direction === 'toCalculate') {
-      expression = expression.replace(display, evaluate);
+      const {replacedExpression, isChanged} = replace(
+        expression,
+        new RegExp(escapeRegexChars(replacement.atDisplay), 'g'),
+        replacement.atCalculate,
+      );
+      expression = replacedExpression;
+      replacementUsed[replacement.name] ||= isChanged;
     }
     if (direction === 'toDisplay') {
-      expression = expression.replace(evaluate, display);
+      const {replacedExpression, isChanged} = replace(
+        expression,
+        new RegExp(escapeRegexChars(replacement.atCalculate), 'g'),
+        replacement.atDisplay,
+      );
+      expression = replacedExpression;
+      replacementUsed[replacement.name] ||= isChanged;
     }
   });
 
-  return expression;
+  return {replacementUsed, expression};
 };

src/components/elements/markdown/transformers/math/types.ts

@@ -14,6 +14,22 @@ export type ExtractExpressionReturn = ExtractReturn & {
 
 export type ExpressionReplaceDirection = 'toCalculate' | 'toDisplay';
 
+export type ExpressionReplacementName = 'multiplySign' | 'percentSign';
+
+export type ExpressionReplacement = {
+  name: ExpressionReplacementName,
+  atCalculate: string,
+  atDisplay: string,
+  availableDirections: Array<ExpressionReplaceDirection>,
+}
+
+export type ExpressionReplacements = Array<ExpressionReplacement>
+
+export type ExpressionReplaceReturn = {
+  expression: string,
+  replacementUsed: { [name in ExpressionReplacementName]: boolean },
+}
+
 export type CalcExpressionProps = {
   children: string,
 }

src/components/pages/siteAlert.module.css

@@ -1,22 +1,37 @@
+// Height of 2 lines of text
+$height: 4.125rem;
+
 .container {
   overflow: hidden;
+  height: $height;
 }
 
 .text {
   animation: marquee 4s linear infinite;
+  height: $height;
+  // Override border radius for alert in bootstrap
   border-radius: 0 !important;
+  // Align element vertically at the middle
+  display: table-cell;
+  vertical-align: middle;
+  // Overwritten if `display` is not `table-cell`
+  margin: 0;
+  // `display: table-cell` causes the element NOT to stretch
+  width: 100vw;
+  // Align with navbar and override bootstrap alert padding
+  padding: 0.5rem 1rem !important;
 }
 
 @keyframes marquee {
   0% {
     transform: translate(0, 100%);
   }
 
-  4% {
+  5% {
     transform: translate(0, 0);
   }
 
-  96% {
+  95% {
     transform: translate(0, 0);
   }