From ad7cc257663eec44afc48f23519b776b2d0ab06c Mon Sep 17 00:00:00 2001
From: Atridad Lahiji <me@atri.dad>
Date: Fri, 13 Jun 2025 00:15:30 -0600
Subject: [PATCH] fixed terminal

---
 src/components/Terminal.tsx | 60 ++++++++++++++++++++-----------------
 1 file changed, 33 insertions(+), 27 deletions(-)

diff --git a/src/components/Terminal.tsx b/src/components/Terminal.tsx
index 7c11c0d..0132cc8 100644
--- a/src/components/Terminal.tsx
+++ b/src/components/Terminal.tsx
@@ -31,10 +31,10 @@ const Terminal = () => {
   const terminalRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    if (terminalRef.current) {
+    if (terminalRef.current && !isTrainRunning) {
       terminalRef.current.scrollTop = terminalRef.current.scrollHeight;
     }
-  }, [commandHistory]);
+  }, [commandHistory, isTrainRunning]);
 
   // Load command history from localStorage
   useEffect(() => {
@@ -130,7 +130,7 @@ const Terminal = () => {
   };
 
   return (
-    <div className="bg-base-100 text-base-content font-mono text-sm h-full flex flex-col rounded-lg border-2 border-primary shadow-2xl">
+    <div className="bg-base-100 text-base-content font-mono text-sm h-full flex flex-col rounded-lg border-2 border-primary shadow-2xl relative">
       <div className="bg-base-200 px-4 py-2 rounded-t-lg border-b border-base-300">
         <div className="flex items-center space-x-2">
           <div className="w-3 h-3 bg-error rounded-full"></div>
@@ -144,31 +144,11 @@ const Terminal = () => {
 
       <div
         ref={terminalRef}
-        className="flex-1 p-4 overflow-y-auto scrollbar-thin scrollbar-thumb-base-300 scrollbar-track-base-100 relative"
-        onClick={() => inputRef.current?.focus()}
+        className={`flex-1 p-4 overflow-y-auto scrollbar-thin scrollbar-thumb-base-300 scrollbar-track-base-100 relative ${
+          isTrainRunning ? 'opacity-0' : 'opacity-100'
+        }`}
+        onClick={() => !isTrainRunning && inputRef.current?.focus()}
       >
-        {isTrainRunning && (
-          <div
-            className="absolute top-1/2 transform -translate-y-1/2 z-10 pointer-events-none text-base-content font-mono text-xs whitespace-nowrap"
-            style={{
-              left: `${trainPosition}%`,
-              transition: "none",
-            }}
-          >
-            <pre className="leading-none">{`
-      ====        ________                ___________
-  _D _|  |_______/        \\__I_I_____===__|_________|
-   |(_)---  |   H\\________/ |   |        =|___ ___|      _________________
-   /     |  |   H  |  |     |   |         ||_| |_||     _|                \\_____A
-  |      |  |   H  |__--------------------| [___] |   =|                        |
-  | ________|___H__/__|_____/[][]~\\_______|       |   -|                        |
-  |/ |   |-----------I_____I [][] []  D   |=======|____|________________________|_
-__/ =| o |=-O=====O=====O=====O \\ ____Y___________|__|__________________________|_
- |/-=|___|=    ||    ||    ||    |_____/~\\___/          |_D__D__D_|  |_D__D__D_|
-  \\_/      \\__/  \\__/  \\__/  \\__/      \\_/               \\_/   \\_/    \\_/   \\_/`}</pre>
-          </div>
-        )}
-
         <div className="min-h-full">
           {commandHistory.map((command: Command, index: number) => (
             <div key={index} className="mb-2">
@@ -218,7 +198,33 @@ __/ =| o |=-O=====O=====O=====O \\ ____Y___________|__|_________________________
             </form>
           )}
         </div>
+
       </div>
+
+      {/* Train animation overlay - positioned over the content area but outside the opacity div */}
+      {isTrainRunning && (
+        <div className="absolute inset-x-0 top-16 bottom-0 flex items-center justify-center overflow-hidden pointer-events-none">
+          <div
+            className="text-white font-mono text-xs whitespace-nowrap"
+            style={{
+              transform: `translateX(${trainPosition}%)`,
+              transition: "none",
+            }}
+          >
+            <pre className="leading-none">{`
+      ====        ________                ___________
+  _D _|  |_______/        \\__I_I_____===__|_________|
+   |(_)---  |   H\\________/ |   |        =|___ ___|      _________________
+   /     |  |   H  |  |     |   |         ||_| |_||     _|                \\_____A
+  |      |  |   H  |__--------------------| [___] |   =|                        |
+  | ________|___H__/__|_____/[][]~\\_______|       |   -|                        |
+  |/ |   |-----------I_____I [][] []  D   |=======|____|________________________|_
+__/ =| o |=-O=====O=====O=====O \\ ____Y___________|__|__________________________|_
+ |/-=|___|=    ||    ||    ||    |_____/~\\___/          |_D__D__D_|  |_D__D__D_|
+  \\_/      \\__/  \\__/  \\__/  \\__/      \\_/               \\_/   \\_/    \\_/   \\_/`}</pre>
+          </div>
+        </div>
+      )}
     </div>
   );
 };