update console

src/components/common/Console/Console.jsx

@@ -1,11 +1,33 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import style from './Console.module.scss';
 
 export const Console = ({ isOpen, close }) => {
-  const [output, setOutput] = useState('');
+  const [output, setOutput] = useState([]);
+  const [command, setCommand] = useState('');
 
-  const handleClear = () => {
-    setOutput('');
+  useEffect(() => {
+    window.console = {
+      log: (...args) => setOutput((output) => [...output, args.join(' ')]),
+      error: (...args) => setOutput((output) => [...output, args.join(' ')]),
+      clear: () => setOutput([]),
+    };
+  }, []);
+
+  const handleCommandChange = (event) => {
+    setCommand(event.target.value);
+  };
+
+  const handleKeyDown = (event) => {
+    if (event.key === 'Enter') {
+      try {
+        const result = eval(event.target.value);
+        setOutput((output) => [...output, result]);
+      } catch (e) {
+        setOutput((output) => [...output, e.toString()]);
+      }
+      setCommand('');
+      event.preventDefault();
+    }
   };
 
   if (isOpen) {
@@ -13,13 +35,22 @@ export const Console = ({ isOpen, close }) => {
       <div className={style.console}>
         <div className={style.header}>
           <h2>Console</h2>
-          <button onClick={handleClear}>Clear</button>
+          <button onClick={() => window.console.clear()}>Clear</button>
           <button onClick={close}>x</button>
         </div>
-        <div className={style.out}>{output}</div>
+        <div className={style.out}>
+          {output.map((item, index) => (
+            <div key={index}>{item}</div>
+          ))}
+        </div>
         <div className={style.entryField}>
           <span>&#62;</span>
-          <textarea onChange={(event) => setOutput(event.target.value)} value={output} />
+          <input
+            type="text"
+            value={command}
+            onChange={handleCommandChange}
+            onKeyDown={handleKeyDown}
+          />
         </div>
       </div>
     );

src/components/common/Console/Console.module.scss

@@ -39,8 +39,9 @@
   }
 
   // FIXME: height
-  textarea {
+  input {
     color: white;
+    width: 100%;
     height: auto;
     padding: 7px;
     font-size: 15px;