WriteMonkey with terminal and typewriter

http://return-true.com/2011/04/jquery-typewriter-revisited/ and http://terminal.jcubic.pl/

by dirkk0

HTML

<script src="http://terminal.jcubic.pl/js/jquery.terminal-0.4.6.min.js"></script>
<link rel="stylesheet" href="http://terminal.jcubic.pl/css/jquery.terminal.css">
<div id="term"> </div>
<div class="container">
    <textarea rows="5" cols="20" class="textarea1">

        
This is an online example of a 'distraction free editor'.
        
It works best if you enter the fullscreen mode (usually F11 or Shift-Cmd-F on Macs).
        
Hit esc to get a console.
</textarea>
</div>

<ul id="caption2" class="caption">
<li>Robot crushed by large ceiling tile.</li>
<li>Spillage of repulsion gel causes chaos in storage room.</li>
<li>Redneck robotic turrets appear after template is stolen.</li>
</ul>

    <ul id="caption" class="caption">
        <li>This was a triumph.</li>
        <li>I'm making a note here: HUGE SUCCESS.</li>
        <li>It's hard to overstate my satisfaction.</li>
        <li>Aperture Science:</li>
        <li>We do what we must because we can.</li>
        <li>For the good of all of us</li>
        <li>Except the ones who are dead.</li>
        <li>But there's no sense crying over every mistake</li>
        <li>You just keep on trying till you run out of cake</li>
        <li>And the science gets done and you make a neat gun</li>
        <li>For the people who are still alive.</li>
        <li>I'm not even angry.</li>
        <li>I'm being so sincere right now.</li>
        <li>Even though you broke my heart and killed me.</li>
        <li>And tore me to pieces.</li>
        <li>And threw every piece into a fire.</li>
        <li>As they burned it hurt because</li>
        <li>I was so happy for you.</li>
        <li>Now these points of data make a beautiful line</li>
        <li>And we're out of beta we're releasing on time.</li>
        <li>So I'm GLaD I got burned think of all the things we learned</li>
        <li>For the people who are still alive.</li>
        <li>Go ahead and leave me.</li>
        <li>I think I prefer to stay inside.</li>
       ...

CSS

body {
    -webkit-text-size-adjust:none;
    background-color: #004400;
    height:100%;
}

#term {
    border: 1px outset;
    opacity: 0.0;
    // display:  none;
    // position: absolut;
    // float: left;
    top: 20px;
    width: 300px;
    height: 60px;
    // background-color: #ff0000;
}

.textarea1 {
    background:transparent;
    font-family:Monospace, Courier;
    font-size:12pt;
    color:#98FB98;
    // line-height:10em;
    // position: absolut;
    top:10px;
    left:10px;
    width: 80%;
    height: 80%;
    border:2px white;
    outline: None;
    // float: left;
}

.container {
    position:absolute;
    top:10%;
    left:10%;
    display:block;
    width: 80%;
    height: 80%;
    // border: 3px solid #f7c;
}

.caption {
    display: none;
}

JavaScript

var mode;
mode = 0;

function toggleConsole() {
    if (mode == 0) {
        $('#term').terminal(function(command, term) {
            console.log('ok');
            if (command == 'test') {
                term.echo("you just typed 'test'");
                // term.disable();
            } else {
                term.echo('unknown command');
            }
        }, {
            greetings: 'Welcome to the machine',
            prompt: '>',
            name: 'test'
        });
        mode = -1;
    }

    term = $('#term').terminal()

    term.resume();
    
    if (mode == -1) {
        $('#term').animate({
            width: 300,
            opacity: 1
        }, 500 );
        mode = 1
    } 
    else if (mode == 1) {
        $('#term').animate({
            width: 0,
            opacity: 0
        }, 500, function () {term.pause()});
        mode = -1;
    }

    // console.log(term.paused());
/*
        $('#term').animate({
            width: 'toggle',
            opacity: 'toggle'
        }, 500);
        */
}

// toggleConsole();
$(document.documentElement).keydown(function(e) {

    // console.log(e.charCode);
    // console.log(e.keyCode);
    if (e.keyCode == 27) {
        toggleConsole();

    }
});


$(function() {
    var ch = 0;
    var item = 0;
    var items = $('#caption li').length;
    var time = 2000;

    function tickInterval() {
        if(item < items) {
            var text = $('#caption li:eq('+item+')').text();
            type(text);
            text = null;
            var tick = setTimeout(tickInterval, time);
        } else {
            clearTimeout(tick);
        }
    }

    function type(text) {
        time = 58;
        $('.textarea1').html(text.substr(0, ch++));
        if(ch > text.length) {
            item++;
            ch = 0;
            time = 3000;
        }
    }

    var tick = setTimeout(tickInterval, time);
});