P4int3r

index.html

<canvas></canvas>

P4int3r.markdown

P4int3r

A Pen by keppy on CodePen.

License.

script.babel

let P4int3r = {}
const canvas = document
canvas.write('<div id="message"></div id="message">')


// Tics Per Second
const TPS = 5

/*
* Sets the painting function.
*/
P4int3r.setNextPainter =
  (type, incoming, paintSpeed, ticksTillDead) => {

    let timeOfDeath = 1000 / TPS * ticksTillDead + paintSpeed * incoming.length
    let growth = 1000 / TPS * paintSpeed
    
    if (type === String) {
      let flow = true
      let i = 0
      P4int3r.painter = () => {
        let sequencer = () => {
          if (flow === true) {
            document.getElementById('message').innerHTML = document.getElementById('message').innerHTML + incoming.charAt(i)
            i++
          }
        }
        
        let dots = () => {
          if (incoming.length <= i) {
            document.getElementById('message').innerHTML = document.getElementById('message').innerHTML.slice(-0)
            i--
          }
        }
        
        let killer = () => {
          if (incoming.length <= i || flow === false) {
            flow = false
            console.log(i)
            document.getElementById('message').innerHTML = document.getElementById('message').innerHTML.slice(0, -1)
            i = i - 3
          }
        }
        
        setInterval(sequencer, growth)
        setInterval(dots, growth)
        setInterval(killer, growth)
      }
    }
  }

/**
* Begins the game
*/
 P4int3r.setNextPainter.apply(this, [String, 'You might be here for a while.', 2, 50])

P4int3r.painter()