fixed terminal issues and improved about me

Author: TheSYNcoder

src/App.js

@@ -15,6 +15,7 @@ import Terminal from "./Components/Terminal";
 import ChangeBackground from "./Components/ChangeBackground";
 import Dock from "./Components/Dock";
 import HDD from "./Assets/hdd.png";
+import SpotLight from "./Components/Spotlight";
 import Folder from "./Assets/folder.png";
 
 import Head from 'next/head';
@@ -140,6 +141,7 @@ const App = ()  => {
         <Stacks/>
         <Background />
         <ContextMenu menu={ <DefaultContextMenu />} />
+        <SpotLight />
         <Dock/>
       </ThemeProvider>      
     </Store>

src/Components/Screens/Projects.js

@@ -1,8 +1,44 @@
 import React from 'react';
-
+import HDD from "../../Assets/hdd.png";
 const Projects = () => {
+
+    const projectList = [
+        {
+            title : 'Jadavpur University Compiler Compiler',
+            description : 'A LL(1) parser written in C++. It supports dynamic grammar files for parsing different languages and visualizes the abstract syntax tree using Treant.js', 
+            link: 'https://github.com/TheSYNcoder/JuCC',
+            featImage: 'https://user-images.githubusercontent.com/42897033/116920657-8acdf480-ac70-11eb-8d3f-46cf27fcb1a1.png' ,
+        },
+        {
+            title : 'An Assembler',
+            description: 'Implementation of a two-pass assembler involving tries for fast in-memory opcode fetch and has implementation of loader and linkers for linking the object file created to make an executable file.',
+            link: 'https://github.com/TheSYNcoder/ProprietaryAssembler',
+            featImage: 'https://images.unsplash.com/photo-1583109193439-1ebb113bceac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1237&q=80' ,
+        },
+        {
+            title : 'Budgify',
+            description: 'A personal savings app to maintain your day to day expenses and incomes. The app has many features such as tracking expenses and visualizing them',
+            link: 'https://play.google.com/store/apps/details?id=com.budgify',
+            featImage: 'https://play-lh.googleusercontent.com/WN77wvQymKgTcOBXt1o-C6hSQfTOcorhkYr6VpXAWf0bvm5tDHSAPPRNC7ev-nn3fPM=s180-rw',
+        },
+    ]
+
     return  (
-        <div className="text-black">Projects and more </div>
+        <div className="h-full w-full flex flex-col items-center ">
+            <div className="text-black dark:text-white font-black text-xl mt-2 p-2">Featured Projects</div>
+            <div className="flex w-11/12 flex-col">{
+                projectList.map( proj => <div key={proj} className="border-2 border-blue-500 p-2 my-2 flex flex-col w-full shadow-xl">
+                    <div className="flex flex-row">
+                        <img className=" w-4/12 rounded-xl " src={proj.featImage}></img>
+                        <div className="ml-2 w-8/12">
+                            <div className="text-md dark:text-white text-black font-bold ">{proj.title}</div>
+                            <div className="text-md dark:text-gray-200 text-gray-600 font-normal ">{proj.description}</div>
+                            <a className="text-sm dark:text-white text-black font-medium hover:text-gray-800" href={proj.link}> <ion-icon name="link-outline" large ></ion-icon>View Project </a>
+                        </div>
+                    </div>
+                </div>)
+            }</div>
+        </div>
     )
 }
 

src/Components/Spotlight.js

@@ -0,0 +1,107 @@
+import React from 'react';
+import { Context } from "../store";
+
+const SpotLight = () => {
+
+    const [state, dispatch] = React.useContext(Context);    
+    const currState = React.useRef(state);
+
+    const [ show , setShow ] = React.useState(false);
+
+    const [ keysPressed , setKeys ] = React.useState({});
+
+    const onKeyDown = (e) => {
+        var map = keysPressed;
+        map[e.keyCode] = true;
+        map[e.key] = true;
+        // control and space together
+        if ( ( map[17] || map['Meta']) && map[32] ){
+            setShow(true);
+        }
+        setKeys(map);
+
+    }
+
+    const onKeyUp = (e) => {
+        var map = keysPressed;
+        delete map[e.keyCode];
+        delete map[e.key];
+        setKeys(map);        
+    }
+
+
+    const onClick = (e) => {
+        var spot = document.getElementById('spotlight'), targetEl = e.target;
+
+        do {
+            if (targetEl === spot) {
+                return;
+            }
+            targetEl = targetEl.parentNode;
+        } while (targetEl.parentNode && targetEl);
+
+        // outside
+        show && setShow(false);
+    }
+
+    React.useEffect(() => {
+        document.addEventListener('keydown', onKeyDown , false );
+        document.addEventListener('keyup', onKeyUp , false );
+        document.addEventListener('click' , onClick , false );
+        return () => {
+            document.removeEventListener('keydown' , onKeyDown , false );
+            document.removeEventListener('keyup' , onKeyUp , false );
+            document.removeEventListener('click' , onClick , false );
+        }
+    }, []);
+
+
+    React.useEffect(() => {
+        currState.current = state;
+    }, [state]);
+
+    const validOptions = [ 'terminal.app', 'mail.app' , 'finder.app' ];
+    const [ value , setValue ] = React.useState('');
+
+    const onClickSpot = (e) => {
+        setValue(e);
+
+    }
+
+    const getSuggestions = () => {
+        return validOptions.map( e =>{
+            if ( e.indexOf(value) !== -1) 
+                return  <div key={e} onClick={() => onClickSpot(e)} className="text-white text-md p-2 hover:bg-gray-100 rounded-xl hover:text-black">{e}</div>    
+        })
+        
+    }
+
+    const handleKeyDown = (e) => {
+        if ( e.keyCode === 13 ){
+            var index = validOptions.indexOf(value);
+            if ( index === -1 ){
+                setShow(false);
+                return;
+            }
+            if ( index === 0) {
+                dispatch({ type: "NEW_WINDOW", payload: { id: 'TERMINAL', header: true, title: "Terminal" } })            
+            } else if ( index === 1 ){
+                dispatch({ type: "NEW_WINDOW", payload: { id: 'RANDOM', header: true, title: "Mail" } })            
+            } else if ( index ===  2 ){
+                dispatch({ type: "NEW_WINDOW", payload: { id: 'RANDOM', header: true, title: "Finder" } })
+            }
+            setShow(false);
+
+        }
+    }
+
+    return (
+        <div id="spotlight" className={ "absolute top-1/4 left-1/4 z-10 w-6/12 flex flex-col h-30 rounded-xl " + ( show ? ""  : "hidden")} style={{backgroundColor : "rgb(224, 252, 242, 0.6)"}} >
+            <input value={value} onChange={(e) => setValue(e.target.value)} onKeyDown={handleKeyDown}
+            className="focus:outline-none border-b-2 border-gray-400 h-4 w-11/12  bg-transparent ml-4 p-5 pl-2 pr-1"></input>
+            <div>{getSuggestions()}</div>
+        </div>
+    )
+}
+
+export default SpotLight;

src/Components/Terminal.js

@@ -52,8 +52,18 @@ const Terminal = (props) => {
                     'shuvayan'
                 ]
             }
+            
+
+
             localStorage.setItem('localstructure', JSON.stringify(dirStructure));
         }
+        var files = JSON.parse(localStorage.getItem('files'));
+        if (files === null || files === undefined) {
+            files = {
+                'shuvayan/documents/welcome.txt': "Hey welcome to the personal website of Shuvayan Ghosh Dastidar. This is based on the theme of MacOS. All basic features in default MacOS are present. Hope you have a great time."
+            }
+            localStorage.setItem('files', JSON.stringify(files));
+        }
     }, []);
 
 
@@ -126,6 +136,76 @@ const Terminal = (props) => {
         }
 
     }
+
+
+    const processTouch = (tokens) => {
+        var ret = [];
+        var filest = JSON.parse(localStorage.getItem('files'));
+        var dirStr = JSON.parse(localStorage.getItem('localstructure'));
+        if ( tokens.length === 1 ){
+            return [ "touch: usage: touch <file1> <file2> .."];
+        }
+        var filenames = tokens.slice(1);
+        var validfiles = Object.keys(filest);
+        for ( var file of filenames ){
+            var sysfile = currDir + '/' + file;
+            if ( validfiles.indexOf(sysfile) !== -1 ){
+                continue;
+            }
+            filest[sysfile] = "";
+            var filesinDir = dirStr[currDir];
+            filesinDir.push(file);
+            dirStr[currDir] = filesinDir;
+            localStorage.setItem('localstructure', JSON.stringify(dirStr));
+        }
+        return ret;
+    }
+
+
+    const processCAT = (tokens) => {
+        var ret = [];
+        if ( tokens.length ===  1 ) {
+            return ret;
+        }
+        const filenames = tokens.slice(1);
+        var filest = JSON.parse(localStorage.getItem('files'));
+        for ( var file of filenames ){
+            var content = filest[currDir + '/' + file ];
+            ret.push(content);
+        }
+        return ret;
+    }
+
+
+    const processOpen = (tokens) => {
+        var ret = [];
+        
+        if ( tokens.length !== 2){
+            return [ 'open: usage: open <app>'];
+        }
+        var dirStr = JSON.parse(localStorage.getItem('localstructure'));
+        var validDir = currDir === 'shuvayan' ? Object.keys(dirStr) : dirStr[currDir];
+        var filenames = Object.keys(JSON.parse(localStorage.getItem('files')));
+        // cannot open files
+        const appname =tokens[1];
+        if ( filenames.indexOf( currDir + '/' + appname ) !== -1){
+            return [ 'open: error: cannot open file : ' + appname];
+        }
+        // open finder on not app 
+
+        // TODO fix implementation of finder and mail apps
+        var dirs = Object.keys(JSON.parse(localStorage.getItem('localstructure')));
+        if ( dirs.indexOf( currDir + '/' + appname ) !== -1){
+            dispatch({ type: "NEW_WINDOW", payload: { id: 'RANDOM', header: true, title : appname } })
+            return ret;
+        }
+        var validApps = dirStr['shuvayan/applications'].map(e => e.toLowerCase());
+        if (currDir === 'shuvayan/applications' && validApps.indexOf(appname) !== -1){  
+            dispatch({ type: "NEW_WINDOW", payload: { id: 'RANDOM', header: true, title: appname } })
+            return ret;
+        }
+        return ['open: error: cannot open ' + appname]        
+    }
 
 
     const processStatement = () => {
@@ -184,15 +264,30 @@ const Terminal = (props) => {
                 return;
             }
             case 'touch' : {
-                // TODO
+                var ret = processTouch(tokens);
+                for ( var r of ret) {
+                    curr.push({ res : r});
+                }
+                setCurrHistory(curr);
+                setValue('');
                 return;
             }
-            case 'cat' : {
-                // TODO
+            case 'cat' : {                
+                var content = processCAT(tokens);
+                for ( var con of content ){
+                    curr.push({ res : con });                    
+                }
+                setCurrHistory(curr);
+                setValue('');
                 return;
             } 
             case 'open' : {
-                // TODO
+                var ret = processOpen(tokens);
+                for (var con of ret) {
+                    curr.push({ res: con });
+                }
+                setCurrHistory(curr);
+                setValue('');
                 return;
             }
             default : console.log('wrong command');

src/Components/useContextHook.js

@@ -11,7 +11,7 @@ export const useContextHook = () => {
     const handleContextMenu = (e) => {
         e.preventDefault();
 
-        console.log('handle', e.pageX, e.clientX, e.clientY, e.pageY);
+        
         setXPos(`${e.pageX}px`);
         setYPos(`${e.pageY}px`);
         setShowMenu(true);
@@ -51,7 +51,7 @@ export const useContextHook = () => {
 
 const ContextMenu = ({menu}) => {
     const { xPos , yPos , showMenu } = useContextHook();
-    console.log( xPos , yPos , showMenu );
+    
     return (
         <Motion defaultStyle={{opacity : 0 }}
         style={{opacity :!showMenu ? spring(0) : spring(1) }}