hard to tell what animal is being selected, maybe highlight current animal

[agrw]

maybe highlight current animal type, so you know what you are clicking...
new main.js, code is messy since I'm learning choo & javascript...see create html template code area

main.js:
// import choo's template helper
var html = require('choo/html')

// import template
var animal = require('./animal.js')

// export module
module.exports = function (state, emit) {
// create html template
state.c=["","","","","",""]
var animals=['all','crocodile','koala','lion','tiger','walrus']
state.c[animals.indexOf(state.params.type || 'all' )] = 'highlight'

return html '

    <div class="grass">
      <img src="/assets/bg.gif" onclick=${add} />
      ${state.animals.map(animalMap)}
    </div>
    <div class="controls">
      <ul class="filters">
        <li><a class=${state.c[0]}  href="/">all</a></li>
        <li><a class=${state.c[1]}  href="/filter/crocodile">crocodiles</a></li>
        <li><a class=${state.c[2]}  href="/filter/koala">koalas</a></li>
        <li><a class=${state.c[3]}  href="/filter/lion">lions</a></li>
        <li><a class=${state.c[4]}  href="/filter/tiger">tigers</a></li>
        <li><a class=${state.c[5]}  href="/filter/walrus">walruses</a></li>
      </ul>
    </div>
  </div>'

// map function
function animalMap (obj, i) {
return animal(remove, obj, i)
}

// add new animal to state
function add (e) {
var x = e.offsetX - 20
var y = e.offsetY - 10

emit('addAnimal', {x: x, y: y})
}

// map function
function animalMap (obj, i) {
var type = state.params.type

if (type && type !== obj.type) {
return // nothing
} else {
return animal(remove, obj, i)
}
}

// remove animal from state
function remove (e) {
var index = e.target.id
emit('removeAnimal', index)
}
}