diff --git a/hwe/ts/utilGame/formatLog.ts b/hwe/ts/utilGame/formatLog.ts
new file mode 100644
index 00000000..8491aead
--- /dev/null
+++ b/hwe/ts/utilGame/formatLog.ts
@@ -0,0 +1,58 @@
+const regex = /<([RBGMCLSODYW]1?|1|\/)>/g;
+
+const convertMap: Record<string, string> = {
+  "R": 'color: red;',
+  "B": 'color: blue;',
+  "G": 'color: green;',
+  "M": 'color: magenta;',
+  "C": 'color: cyan;',
+  "L": 'color: limegreen;',
+  "S": 'color: skyblue;',
+  "O": 'color: orangered;',
+  "D": 'color: orangered;',
+  "Y": 'color: yellow;',
+  "W": 'color: white;',
+  "1": 'font-size: 0.9em;',
+}
+
+const convertMap2: Record<string, string> = {
+  "1": 'font-size: 0.9em;',
+}
+
+export function formatLog(text?: string): string {
+  if (!text) {
+    return '';
+  }
+
+  let matchRes;
+  let lastIndex = 0;
+  const result = [];
+  while ((matchRes = regex.exec(text)) !== null) {
+    const {
+      0: partAll,
+      1: subPart,
+      index,
+    } = matchRes;
+    if (lastIndex != index) {
+      result.push(text.slice(lastIndex, index));
+    }
+
+    if (subPart == '/') {
+      result.push(`</span>`);
+    }
+    else if (subPart.length == 2) {
+      result.push(`<span style="${convertMap[subPart[0]] ?? ''}${convertMap2[subPart[1]] ?? ''}">`);
+    }
+    else {
+      result.push(`<span style="${convertMap[subPart] ?? ''}">`);
+    }
+
+    lastIndex = index + partAll.length;
+  }
+
+  if (lastIndex != text.length) {
+    result.push(text.slice(lastIndex));
+  }
+
+  return result.join('');
+}
\ No newline at end of file