Add custom <nobr> tag

package.json

@@ -64,7 +64,7 @@
   "scripts": {
     "tsc": "tsc",
     "lint": "tslint -c ./tslint.json --project ./tsconfig.json --format stylish",
-    "test": "nyc --reporter=html --reporter=text mocha --require ts-node/register --bail src/test/**/*.ts",
+    "test": "nyc --reporter=html --reporter=text mocha --require ts-node/register --bail src/test/**/*.ts src/**/*.test.ts",
     "prettier-check": "prettier --list-different \"src/**/*.ts*(x)\"",
     "build": "webpack --mode production --devtool source-map --progress",
     "start": "NODE_OPTIONS=--openssl-legacy-provider webpack-dev-server --mode development --open --devtool cheap-module-source-map",

src/ui/questPlay/brAndNobrTags.test.ts

@@ -0,0 +1,22 @@
+import * as assert from "assert";
+import { brAndNobrTags } from "./brAndNobrTags";
+
+describe("brAndNobrTags", () => {
+  it("should split the text by <br> into separate lines", () => {
+    const texts = ["a", " b <br> c ", "d", "<br>", "c"];
+    const result = brAndNobrTags(texts);
+    assert.deepEqual(result, ["a", " b ", " c ", "d", "", "", "c"]);
+  });
+
+  it("should join line with next if it ends with <nobr>", () => {
+    const texts = ["a", "b<nobr>", "c", "d", "e <nobr>  ", "f", "<nobr>"];
+    const result = brAndNobrTags(texts);
+    assert.deepEqual(result, ["a", "bc", "d", "e f", ""]);
+  });
+
+  it("should not cut last empty line", () => {
+    const texts = ["a", ""];
+    const result = brAndNobrTags(texts);
+    assert.deepEqual(result, ["a", ""]);
+  });
+});

src/ui/questPlay/brAndNobrTags.ts

@@ -0,0 +1,26 @@
+/**
+ * Split the text by <br> into separate lines
+ * Join line with next if it ends with <nobr>
+ */
+export function brAndNobrTags(texts: string[]) {
+  const out: string[] = [];
+  let currentLine = "";
+  let isNeedLastLineFlush = false;
+  for (const text of texts) {
+    for (const line of text.split("<br>")) {
+      const rtimmedLine = line.trimRight();
+      if (rtimmedLine.endsWith("<nobr>")) {
+        currentLine += rtimmedLine.slice(0, rtimmedLine.length - "<nobr>".length);
+        isNeedLastLineFlush = true;
+      } else {
+        out.push(currentLine + line);
+        currentLine = "";
+        isNeedLastLineFlush = false;
+      }
+    }
+  }
+  if (isNeedLastLineFlush) {
+    out.push(currentLine);
+  }
+  return out;
+}

src/ui/questPlay/questPlay.tsx

@@ -28,6 +28,7 @@ import {
 import { GamePlayButton } from "./questPlay.button";
 import { useDarkTheme } from "./questPlay.metatheme";
 import { toggleFullscreen } from "./fullscreen";
+import { brAndNobrTags } from "./brAndNobrTags";
 
 function initRandomGame(quest: Quest, doFirstStep: boolean) {
   const gameState = initGame(
@@ -282,7 +283,7 @@ export function QuestPlay({
     </DivFadeinCss>
   );
 
-  const paramsStrings = ([] as string[]).concat(...uistate.paramsState.map((x) => x.split("<br>")));
+  const paramsStrings = brAndNobrTags(uistate.paramsState);
 
   const params = (
     <>