use react-ansi instead of ansi-to-react (#56)

* use react-ansi instead of ansi-to-react

* feat: auto scroll logger

Co-authored-by: Priyanshu Dangi <[email protected]>

Author: dipeshkaphle

package.json

@@ -36,13 +36,13 @@
     "@types/grecaptcha": "^3.0.3",
     "@types/react-syntax-highlighter": "^13.5.2",
     "ace-builds": "^1.4.14",
-    "ansi-to-react": "^6.1.6",
     "bootstrap": "5.1.3",
     "lit": "^2.1.1",
     "phaser": "^3.55.2",
     "phaser3-rex-plugins": "^1.1.66",
     "react": "^17.0.2",
     "react-ace": "^9.5.0",
+    "react-ansi": "^3.0.2",
     "react-bootstrap": "^2.1.2",
     "react-dom": "^17.0.2",
     "react-flags-select": "^2.1.2",
@@ -151,5 +151,8 @@
       "prettier --write"
     ]
   },
+  "resolutions": {
+    "react-virtualized": "git+https://[email protected]/remorses/react-virtualized-fixed-import.git#9.22.3"
+  },
   "packageManager": "[email protected]"
 }

packages/renderer/src/scenes/TileMap.ts

@@ -376,7 +376,7 @@ export class TileMap extends Phaser.Scene {
           }, Parameters.timePerTurn) as unknown as number;
           break;
         } else if (instruction instanceof Instructions.Print) {
-          DebugLog.log += instruction.message + '\n';
+          DebugLog.log += `${instruction.message}\n`;
           DebugLog.updateLogCallback(DebugLog.log);
         } else if (instruction instanceof Instructions.End) {
           return;

src/components/Terminal/Terminal.tsx

@@ -1,23 +1,44 @@
-import Ansi from 'ansi-to-react';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { RendererUtils } from '@codecharacter-2022/renderer';
+import ReactAnsi from 'react-ansi';
 
 export default function Terminal(): JSX.Element {
   const [log, setLog] = useState('');
+  const ref = useRef<HTMLDivElement>(null);
 
   RendererUtils.setUpdateLogCallback((log: string) => {
     setLog(log);
   });
 
+  useEffect(() => {
+    const element = document.querySelector('#log > div:nth-child(1) > div');
+    if (
+      element &&
+      element?.scrollTop + element?.clientHeight + 50 > element?.scrollHeight
+    ) {
+      element?.scrollTo(0, element.scrollHeight);
+    }
+  }, [log]);
+
   return (
     <div
+      ref={ref}
       style={{
-        width: '100%',
         height: '100%',
-        backgroundColor: '#000',
+        width: '100%',
       }}
     >
-      <Ansi>{log}</Ansi>
+      <ReactAnsi
+        style={{
+          height: '100%',
+          width: '100%',
+        }}
+        log={log}
+        bodyStyle={{ height: '100%', overflowY: 'auto' }}
+        logStyle={{ height: '100%' }}
+        autoScroll={true}
+        virtual
+      />
     </div>
   );
 }

src/store/rendererLogs/logSlice.ts

@@ -1,3 +1,4 @@
+import { RendererUtils } from '@codecharacter-2022/renderer';
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import { RootState } from '../store';
 import { getLogs } from './logAPI';
@@ -11,6 +12,9 @@ export const getLogAction = createAsyncThunk(
   async (id: string) => {
     try {
       const logs = await getLogs(id);
+      setTimeout(() => {
+        RendererUtils.loadLog(logs);
+      }, 2000);
       return logs;
     } catch (error) {
       throw error;

yarn.lock

@@ -1698,7 +1698,6 @@ __metadata:
     "@typescript-eslint/parser": ^4.33.0
     "@vitejs/plugin-react": ^1.0.7
     ace-builds: ^1.4.14
-    ansi-to-react: ^6.1.6
     babel-loader: ^8.2.3
     bootstrap: 5.1.3
     concurrently: ^5.3.0
@@ -1718,6 +1717,7 @@ __metadata:
     prettier: ^2.4.1
     react: ^17.0.2
     react-ace: ^9.5.0
+    react-ansi: ^3.0.2
     react-bootstrap: ^2.1.2
     react-dom: ^17.0.2
     react-flags-select: ^2.1.2
@@ -4743,7 +4743,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"anser@npm:^1.4.1":
+"anser@npm:^1.4.8":
   version: 1.4.10
   resolution: "anser@npm:1.4.10"
   checksum: 3823c64f8930d3d97f36e56cdf646fa6351f1227e25eee70c3a17697447cae4238fc3a309bb3bc2003cf930687fa72aed71426dbcf3c0a15565e120a7fee5507
@@ -4848,19 +4848,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-to-react@npm:^6.1.6":
-  version: 6.1.6
-  resolution: "ansi-to-react@npm:6.1.6"
-  dependencies:
-    anser: ^1.4.1
-    escape-carriage: ^1.3.0
-  peerDependencies:
-    react: ^16.3.2 || ^17.0.0
-    react-dom: ^16.3.2 || ^17.0.0
-  checksum: c626cd36d4f53e98c2305f5d6c1ac6b32f59a9286a11458a64e05ff93e8248ca5b5785401b6ee4c6cd0af1a4a0bc94315c37696480c1906fb905e14a043f4652
-  languageName: node
-  linkType: hard
-
 "anymatch@npm:^2.0.0":
   version: 2.0.0
   resolution: "anymatch@npm:2.0.0"
@@ -6260,6 +6247,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clsx@npm:^1.0.4":
+  version: 1.1.1
+  resolution: "clsx@npm:1.1.1"
+  checksum: ff052650329773b9b245177305fc4c4dc3129f7b2be84af4f58dc5defa99538c61d4207be7419405a5f8f3d92007c954f4daba5a7b74e563d5de71c28c830063
+  languageName: node
+  linkType: hard
+
 "co@npm:^4.6.0":
   version: 4.6.0
   resolution: "co@npm:4.6.0"
@@ -7216,7 +7210,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dom-helpers@npm:^5.0.1, dom-helpers@npm:^5.2.0, dom-helpers@npm:^5.2.1":
+"dom-helpers@npm:^5.0.1, dom-helpers@npm:^5.1.3, dom-helpers@npm:^5.2.0, dom-helpers@npm:^5.2.1":
   version: 5.2.1
   resolution: "dom-helpers@npm:5.2.1"
   dependencies:
@@ -9941,6 +9935,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"immer@npm:^7.0.8":
+  version: 7.0.15
+  resolution: "immer@npm:7.0.15"
+  checksum: d79deb76f8bce71fff95bfbfa6a614bf55dd1f500eea189d3dcc587d94ed911b048e875c810b4e1214b3a6a7c8db148628e0c62e6fd8a649e84002cba0053e34
+  languageName: node
+  linkType: hard
+
 "immer@npm:^9.0.7":
   version: 9.0.12
   resolution: "immer@npm:9.0.12"
@@ -13997,6 +13998,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-ansi@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "react-ansi@npm:3.0.2"
+  dependencies:
+    anser: ^1.4.8
+    escape-carriage: ^1.3.0
+    immer: ^7.0.8
+    react-virtualized: ^9.22.3
+  peerDependencies:
+    react: ^15.0.0 || ^16.0.0 || ^17.0.0
+    react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0
+  checksum: 9448a41a9e570ba57a5bc026952582343fb455ed82b744441096d1f72de96e70cfe5715b155c296f2c7e37513db441483d60b87a939fae14f7a5eae256a1a8bd
+  languageName: node
+  linkType: hard
+
 "react-async-script@npm:^1.1.1":
   version: 1.2.0
   resolution: "react-async-script@npm:1.2.0"
@@ -14374,6 +14390,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-virtualized@git+https://[email protected]/remorses/react-virtualized-fixed-import.git#9.22.3":
+  version: 9.22.3
+  resolution: "react-virtualized@https://[email protected]/remorses/react-virtualized-fixed-import.git#commit=6e416ee8aa6ac2087cecc68f68371d8fe561d9a4"
+  dependencies:
+    "@babel/runtime": ^7.7.2
+    clsx: ^1.0.4
+    dom-helpers: ^5.1.3
+    loose-envify: ^1.4.0
+    prop-types: ^15.7.2
+    react-lifecycles-compat: ^3.0.4
+  peerDependencies:
+    react: ^15.3.0 || ^16.0.0-alpha
+    react-dom: ^15.3.0 || ^16.0.0-alpha
+  checksum: 57ebda833ec4424779288735b5753ae1cf2cf8765e1cee9821b4ef1051eb1ad70f8a954121368baf0cf8a95f8dce2f045be9b44898c87bf1df859bdf6274c48f
+  languageName: node
+  linkType: hard
+
 "react@npm:^17.0.2":
   version: 17.0.2
   resolution: "react@npm:17.0.2"