Spritz Clone

by Wray Bowling

HTML

<div id="spritz">
    <span class="left-side"></span>
    <span class="right-side">
        <span class="red-letter"></span><span class="remainder"></span>
    </span>
    <div class="mark top"></div>
    <div class="mark bottom"></div>
</div>

<button id="playpause" onclick="reset()">reset</button>
<button id="playpause" onclick="playpause()">play/pause</button>

<hr/>

<input type="range" id="baseSpeed" min="0" max="4000" value="1765"/>
<label for="baseSpeed">base speed <span id="wpm">100</span>wpm</label>

<input type="range" id="wordSpeed" min="0" max="400" value="43"/>
<label for="wordSpeed">word-length slowdown</label>

<input type="range" id="punctuationSpeed" min="0" max="2000" value="1513"/>
<label for="punctuationSpeed">punctuation slowdown</label>

<textarea>
The Time Machine, by H. G. Wells [1898]



I


The Time Traveller (for so it will be convenient to speak of him)
was expounding a recondite matter to us. His grey eyes shone and
twinkled, and his usually pale face was flushed and animated. The
fire burned brightly, and the soft radiance of the incandescent
lights in the lilies of silver caught the bubbles that flashed and
passed in our glasses. Our chairs, being his patents, embraced and
caressed us rather than submitted to be sat upon, and there was that
luxurious after-dinner atmosphere when thought roams gracefully
free of the trammels of precision. And he put it to us in this
way--marking the points with a lean forefinger--as we sat and lazily
admired his earnestness over this new paradox (as we thought it)
and his fecundity.

'You must follow me carefully. I shall have to controvert one or two
ideas that are almost universally accepted. The geometry, for
instance, they taught you at school is founded on a misconception.'

'Is not that rather a large thing to expect us to begin upon?' 
said Filby, an argumentative person with red hair.

'I do not mean to ask you to accept anything without reasonable
ground for it. You will soon admit as much...

CSS

@import url(http://fonts.googleapis.com/css?family=Droid+Sans);

body, textarea, button{
    background-color:#464664;
    color:#5F9DA8;
    padding:0;
}

a{
    color:cyan;
}

#spritz {
    position:relative;
    font-family: 'Droid Sans', Helvetica;
    margin:0 auto;
    width:300px;
    border:solid 3px black;
    border-radius:6px;
    height:2em;
    font-size:24pt;
    background-color:white;
    color:black;
}

#spritz .left-side,
#spritz .right-side{
    position:absolute;
    bottom:0.4em;
}

#spritz .left-side{
    right:67%;
    text-align:right;
}

#spritz .right-side{
    left:33%;
    text-align:left;
}

#spritz .red-letter{
    color:red;
}

#spritz .mark{
    position:absolute;
    width:3px;
    height:5px;
    left:34%;
    background-color:black;
}

#spritz .mark.top{ top:0; }
#spritz .mark.bottom{ bottom:0; }

textarea{
    height:200px;
    width:100%;
}

label{
    float:left;
    display:block;
    width:20%;
}

input[type='range']{
    float:left;
    display:block;
    width:80%;
    margin:0;
}

JavaScript

var spritz = document.getElementById('spritz');
var left_side = document.querySelector('#spritz .left-side');
var red_letter = document.querySelector('#spritz .red-letter');
var remainder = document.querySelector('#spritz .remainder');
var baseSpeed = document.getElementById('baseSpeed');
var wordSpeed = document.getElementById('wordSpeed');
var punctuationSpeed = document.getElementById('punctuationSpeed');
var wpm_el = document.getElementById('wpm');
var cursor, chunks, bestLetter;
var timer;
var playing = false;

function spritzRun(){
    var word = chunks[cursor];

    switch (word.length) {
		case 1:
			bestLetter = 0; // first
			break;
		case 2:
		case 3:
		case 4:
		case 5:
			bestLetter = 1; // second
			break;
		case 6:
		case 7:
		case 8:
		case 9:
			bestLetter = 2; // third
			break;
		case 10:
		case 11:
		case 12:
		case 13:
			bestLetter = 3; // fourth
			break;
		default:
			bestLetter = 4; // fifth
		};

    left_side.innerHTML = word.substring(0,bestLetter);
    red_letter.innerHTML = word.substring(bestLetter,bestLetter+1);
    remainder.innerHTML = word.substring(bestLetter+1);

    // end of line
    if(cursor >= chunks.length - 1){
        clearInterval(timer);
    }else{
        var delay = 100;

        // lengthen delay for longer words
        delay += 500 * (wordSpeed.value/4000) * chunks[cursor].length;

        // lengthen delay when punctuation is used
        var punctuation = chunks[cursor].match(/(\.|,|\?|!|\*+|—|;)/g);
        if(punctuation !== null){
            delay += 500 * (punctuationSpeed.value/4000) * punctuation.length;
        }

        // advance
        cursor++;
        timer = setTimeout(spritzRun, delay * (4000 - baseSpeed.value)/2000);

        // display words per minute
        wpm_el.innerText = Math.round(100 + delay*(baseSpeed.value/2000));
    }
}

function reset(){
    cursor = 0;
    chunks = [];
    playing = false;

    // use text area text
    var spritz_list =...