atridad/atridotdad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed terminal
All checks were successful
Docker Deploy / build-and-push (push) Successful in 3m34s
Details

Browse Source
This commit is contained in:
Atridad Lahiji
2025-06-13 00:15:30 -06:00
parent 2a79d0da67
commit ad7cc25766
1 changed files with 33 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/Terminal.tsx
View File

@ -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>
);
};