This repository has been archived by the owner on May 12, 2024. It is now read-only.
generated from CodeChefVIT/template
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #29 from pranav-deshmukh/master
terminal page
- Loading branch information
Showing
3 changed files
with
181 additions
and
41 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6,6 +6,7 @@ import { useState, useEffect, useRef } from "react"; | |
| interface Command { | ||
| command: string; | ||
| output: string[]; | ||
| displayOutput: string[]; | ||
| } | ||
| const Terminal = () => { | ||
| const [inputValue, setInputValue] = useState(""); | ||
|
|
@@ -21,30 +22,37 @@ const Terminal = () => { | |
|
|
||
| const commandOutputs: CommandOutputs = { | ||
| whatisdevsoc: [ | ||
| "Hey, hjdsbc ADFH Ga dsfhLA a", | ||
| "hasbfdsf DIF KJa dfiu AIF ahidf UADHFIpdfhIAFafnFa", | ||
| '<span class="command">whatisdevsoc</span>What is Devsoc?', | ||
| '<span class="command">whoisdevsoc</span>Who is devsoc?', | ||
| ], | ||
| whoisdevsoc: [ | ||
| "The paradox of “Who am I?” is: we never know, but, we constantly find out.", | ||
| '<span class="command">whatisdevsoc</span>What is Devsoc?', | ||
| '<span class="command">whoisdevsoc</span>Who is devsoc?', | ||
| ], | ||
| whyisdevsoc: [ | ||
| "Because exploring the unknown and innovating is at the heart of human nature.", | ||
| '<span class="command">whatisdevsoc</span>What is Devsoc?', | ||
| '<span class="command">whoisdevsoc</span>Who is devsoc?', | ||
| ], | ||
| secret: [ | ||
| '<span class="command">sudo</span> Only use if you\'re admin', | ||
| '<span class="command">whatisdevsoc</span>What is Devsoc?', | ||
| '<span class="command">whoisdevsoc</span>Who is devsoc?', | ||
| ], | ||
| aditansh: [ | ||
| "Still curating... most projects are offline, on GitHub, or confidential.", | ||
| '<span class="command">whatisdevsoc</span>What is Devsoc?', | ||
| '<span class="command">whoisdevsoc</span>Who is devsoc?', | ||
| ], | ||
| adityabhaiya: [ | ||
| '<span class="command">whatisdevsoc</span>What is Devsoc?', | ||
| '<span class="command">whoisdevsoc</span>Who is devsoc?', | ||
| ], | ||
| adityabhaiya: ["Hello"], | ||
| help: [ | ||
| '<span class="command">whatisdevsoc</span> What is Devsoc?', | ||
| '<span class="command">whoisdevsoc</span> Who is devsoc?', | ||
| '<span class="command">whyisdevsoc</span> Why is devsoc', | ||
| '<span class="command">aditansh</span> Aditansh', | ||
| '<span class="command">adityabhaiya</span> Adityabhaiya', | ||
| '<span class="command">help</span> Help', | ||
| '<span class="command">clear</span> Clear terminal', | ||
| '<span class="command">whatisdevsoc</span>What is Devsoc?', | ||
| '<span class="command">whoisdevsoc</span>Who is devsoc?', | ||
| '<span class="command">whyisdevsoc</span>Why is devsoc', | ||
| '<span class="command">aditansh</span>Aditansh', | ||
| '<span class="command">adityabhaiya</span>Adityabhaiya', | ||
| '<span class="command">help</span>Help', | ||
| '<span class="command">clear</span>Clear terminal', | ||
| "<br>", | ||
| ], | ||
| clear: [], | ||
|
|
@@ -60,23 +68,73 @@ const Terminal = () => { | |
| ], | ||
| }; | ||
|
|
||
| const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms)); | ||
|
|
||
|
|
||
| const handleKeyPress = (event: React.KeyboardEvent) => { | ||
| if (event.key === "Enter") { | ||
| event.preventDefault(); | ||
| const trimmedInput = inputValue.trim(); | ||
| if (trimmedInput === "clear") { | ||
| setCommands([]); | ||
| } else { | ||
| const output = commandOutputs[trimmedInput] ?? [ | ||
| `Command not found: ${trimmedInput}`, | ||
| ]; | ||
| setCommands([...commands, { command: trimmedInput, output }]); | ||
| console.log(output); | ||
| } | ||
| setCommands([]); | ||
| } else { | ||
| const output = commandOutputs[trimmedInput] ?? [`Command not found: ${trimmedInput}`]; | ||
| const displayOutput = output.map(() => ""); | ||
| setCommands((prevCommands) => [...prevCommands, { command: trimmedInput, output, displayOutput }]); | ||
| } | ||
|
|
||
| setInputValue(""); | ||
| } | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| if (commands.length > 0) { | ||
| triggerTypewriterEffect(commands.length - 1); | ||
| } | ||
| }, [commands]); | ||
|
|
||
| const triggerTypewriterEffect = (commandIndex: number) => { | ||
| let currentLineIndex = 0; | ||
|
|
||
| if (commandIndex >= 0 && commandIndex < commands.length) { | ||
| const command = commands[commandIndex]; | ||
| if (!command) return; | ||
| const outputLines = command.output; | ||
|
|
||
| const typeNextChar = () => { | ||
| if (currentLineIndex < outputLines.length) { | ||
| const line = outputLines[currentLineIndex]??''; | ||
| const currentDisplayLine = command.displayOutput[currentLineIndex] ?? ''; | ||
| const nextCharIndex = currentDisplayLine.length; | ||
|
|
||
| if (nextCharIndex < line.length) { | ||
| setCommands((prevCommands) => { | ||
| const newCommands = [...prevCommands]; | ||
| if (newCommands[commandIndex]) { | ||
| const newDisplayOutput = [...newCommands[commandIndex]?.displayOutput ?? []]; | ||
| newDisplayOutput[currentLineIndex] = line.substr(0, nextCharIndex + 1); | ||
| newCommands[commandIndex].displayOutput = newDisplayOutput; | ||
| } | ||
| return newCommands; | ||
| }); | ||
| setTimeout(typeNextChar, 50); | ||
| } else { | ||
|
|
||
| currentLineIndex++; | ||
| setTimeout(typeNextChar, 0); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| typeNextChar(); | ||
| } | ||
| }; | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => { | ||
| setInputValue(event.target.value); | ||
| }; | ||
|
|
@@ -143,21 +201,22 @@ scrollToBottom() | |
| {/* <span className="color2 ml-[15px]">Welcome to Devsoc web terminal.</span> */} | ||
| {/* <span className="color2 ml-[15px]">For a list of available commands, type</span> <span className="command">'help'</span><span className="color2">.</span> */} | ||
| {commands.map((cmdObj, index) => ( | ||
| <div key={index}> | ||
| <div className="command-line"> | ||
| <span>[email protected]:~${cmdObj.command}</span> | ||
| </div> | ||
| {cmdObj.output.map((line, lineIndex) => ( | ||
| <div | ||
| key={lineIndex} | ||
| className="command-output" | ||
| dangerouslySetInnerHTML={{ __html: line }} | ||
| ></div> | ||
| ))} | ||
| </div> | ||
| ))} | ||
| <div key={index}> | ||
| <div className="command-line"> | ||
| <span>[email protected]:~${cmdObj.command}</span> | ||
| </div> | ||
| {cmdObj.displayOutput.map((line, lineIndex) => ( | ||
| <div | ||
| key={lineIndex} | ||
| className="command-output" | ||
| dangerouslySetInnerHTML={{ __html: line }} | ||
| ></div> | ||
| ))} | ||
| </div> | ||
| ))} | ||
|
|
||
| <div id="command" className="flex"> | ||
| <div id="liner" className="ml-[15px] flex-1"> | ||
| <div id="liner" className="ml-[10px] flex-1"> | ||
| <span>[email protected]:~${inputValue}</span> | ||
| <b className="cursor">█</b> | ||
| <div style={{ marginBottom: 100 }} ref={endRef} /> | ||
|
|
@@ -175,15 +234,15 @@ scrollToBottom() | |
|
|
||
| <style jsx>{` | ||
| .command-output { | ||
| margin-left: 5px; | ||
| margin-left: 10px; | ||
| } | ||
| .command-line { | ||
| margin-bottom: 10px; | ||
| margin-left: 5px; | ||
| margin-left: 10px; | ||
| } | ||
| .command { | ||
| margin-bottom: 10px; | ||
| margin-left: 5px; | ||
| margin-left: 10px; | ||
| } | ||
| `}</style> | ||
| </div> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import React, { useEffect, useState } from 'react'; | ||
|
|
||
| interface TypewriterEffectProps { | ||
| textLines: string[]; | ||
| onTypingComplete: () => void; | ||
| } | ||
|
|
||
| const TypewriterEffect = ({ textLines, onTypingComplete }: TypewriterEffectProps) => { | ||
| const [lineIndex, setLineIndex] = useState(0); | ||
| const [displayedLines, setDisplayedLines] = useState<(string | undefined)[]>([]); | ||
|
|
||
|
|
||
| useEffect(() => { | ||
| if (lineIndex < textLines.length) { | ||
| const timeoutId = setTimeout(() => { | ||
| setDisplayedLines((prevLines) => [...prevLines, textLines[lineIndex]]); | ||
| setLineIndex(lineIndex + 1); | ||
| }, lineIndex * 10); | ||
|
|
||
| return () => clearTimeout(timeoutId); | ||
| } else { | ||
| setTimeout(()=>{ | ||
|
|
||
| onTypingComplete(); | ||
| },600) | ||
| } | ||
| }, [lineIndex, textLines, onTypingComplete]); | ||
|
|
||
| return ( | ||
| <div className='text-[#757575] text-sm font-diatype font-thin'> | ||
| {displayedLines.map((line, index) => ( | ||
| <div key={index} dangerouslySetInnerHTML={{ __html: line ?? '' }} /> | ||
|
|
||
| ))} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default TypewriterEffect |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters