mworzala/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .terminal div {
            max-height: 500px;
            overflow-y: scroll;
        }
    </style>
</head>
<body>
<h1>Directory Test</h1>

<div class="terminal">
    <div id="lines"></div>
    <input id="typearea" type="text" autofocus>
    <p id="dir">/</p>
</div>

<script>
    function mkdir(name) {
        if (dir[name])
            return;
        dir[name] = {};

        dir[name]['.'] = dir[name];
        dir[name]['..'] = dir;
        dir[name]['~abs'] = dir['~abs'] + name + '/'
    }
    function cd(name) {
        if (!name)
            dir = root;
        else {
            const target = parsePath(name);
            if (target)
                dir = target;
            else lineArea.add(`unknown directory ${name}`);
        }
    }
    function ls() {
        lineArea.add(Object.keys(dir).filter(item => !item.startsWith('~')))
    }

    let dir = {
        '~abs': '/'
    };
    const root = dir;

    mkdir('test1');
    mkdir('cool');
    mkdir('secrets');

    function parsePath(path) {
        if (!path)
            return;

        // Account for a trailing slash which should not have any effect.
        if (path.length > 2 && path.endsWith('/'))
            path = path.substr(0, path.length - 1);

        let directory = dir, i = 0;
        const parts = path.split('/');

        // Account for a starting slash to begin search from root.
        if (parts[0].length === 0) {
            if (path.length === 1)
                return root;
            directory = root;
            i = 1;
        }

        // Search for directory
        for (; i < parts.length; i++) {
            directory = directory[parts[i]];
            if (!directory)
                return;
        }
        return directory
    }

    const lineArea = document.getElementById('lines');
    lineArea.add = (line) => {
        const p = document.createElement('p');
        p.innerText = line;
        lineArea.appendChild(p);
        lineArea.scrollTop += 100
    };

    function processLine(input) {
        lineArea.add(input);
        const cmd = input.split(' ');
        if (cmd[0].toLowerCase() === 'mkdir') {
            mkdir(cmd[1])
        } else if (cmd[0].toLowerCase() === 'cd') {
            cd(cmd[1])
        } else if (cmd[0].toLowerCase() === 'ls') {
            ls()
        } else if (cmd[0].toLowerCase() === 'abs') {
            lineArea.add(dir['~abs'])
        } else {
            lineArea.add(`Unknown command ${cmd[0]}`)
        }
    }

    const inArea = document.getElementById('typearea');
    inArea.addEventListener('keydown', e => {
        if (e.key !== 'Enter')
            return;
        processLine(inArea.value.replace('~', ''));
        inArea.value = '';
    })
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>

	<style>
	.terminal div {
	max-height: 500px;
	overflow-y: scroll;
	}
	</style>
	</head>
	<body>
	<h1>Directory Test</h1>

	<div class="terminal">
	<div id="lines"></div>
	<input id="typearea" type="text" autofocus>
	<p id="dir">/</p>
	</div>

	<script>
	function mkdir(name) {
	if (dir[name])
	return;
	dir[name] = {};

	dir[name]['.'] = dir[name];
	dir[name]['..'] = dir;
	dir[name]['~abs'] = dir['~abs'] + name + '/'
	}
	function cd(name) {
	if (!name)
	dir = root;
	else {
	const target = parsePath(name);
	if (target)
	dir = target;
	else lineArea.add(`unknown directory ${name}`);
	}
	}
	function ls() {
	lineArea.add(Object.keys(dir).filter(item => !item.startsWith('~')))
	}

	let dir = {
	'~abs': '/'
	};
	const root = dir;

	mkdir('test1');
	mkdir('cool');
	mkdir('secrets');

	function parsePath(path) {
	if (!path)
	return;

	// Account for a trailing slash which should not have any effect.
	if (path.length > 2 && path.endsWith('/'))
	path = path.substr(0, path.length - 1);

	let directory = dir, i = 0;
	const parts = path.split('/');

	// Account for a starting slash to begin search from root.
	if (parts[0].length === 0) {
	if (path.length === 1)
	return root;
	directory = root;
	i = 1;
	}

	// Search for directory
	for (; i < parts.length; i++) {
	directory = directory[parts[i]];
	if (!directory)
	return;
	}
	return directory
	}

	const lineArea = document.getElementById('lines');
	lineArea.add = (line) => {
	const p = document.createElement('p');
	p.innerText = line;
	lineArea.appendChild(p);
	lineArea.scrollTop += 100
	};

	function processLine(input) {
	lineArea.add(input);
	const cmd = input.split(' ');
	if (cmd[0].toLowerCase() === 'mkdir') {
	mkdir(cmd[1])
	} else if (cmd[0].toLowerCase() === 'cd') {
	cd(cmd[1])
	} else if (cmd[0].toLowerCase() === 'ls') {
	ls()
	} else if (cmd[0].toLowerCase() === 'abs') {
	lineArea.add(dir['~abs'])
	} else {
	lineArea.add(`Unknown command ${cmd[0]}`)
	}
	}

	const inArea = document.getElementById('typearea');
	inArea.addEventListener('keydown', e => {
	if (e.key !== 'Enter')
	return;
	processLine(inArea.value.replace('~', ''));
	inArea.value = '';
	})
	</script>
	</body>
	</html>