louiscenter/choo-animals

tutorial app for choo-handbook

choo-animals

🌐 Made by @louiscenter 🌐

✨ This app was built for the choo handbook ✨

If you'd like to learn how to build this app from scratch using choo, visit the guide:

https://handbook.choo.io/your-first-choo-app.

Related

• 🚂 choo
• 📖 your-first-choo-app repo
• 🦁 choo-animals starter app

choo-animals's Issues

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

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)
}
}

sample app click behavior is weird

for first choo app the clicking behavior seems odd, once you click on animal type , you have to randomly get a click on that animal, wouldn't it be better once having choosen an animal to now only click on that animal.
change index.js , see **** new line commented code
index.js:
// import choo
var choo = require('choo')

// import choo's template helper
var html = require('choo/html')

// import template
var main = require('./templates/main.js')

// initialize choo
var app = choo()

app.use(function (state, emitter) {
// initialize state
state.animals = [
{ type: 'lion', x: 200, y: 100 },
{ type: 'crocodile', x: 50, y: 300 }
]

state.atype='all'

// add animal
emitter.on('addAnimal', function (data) {
var animals = ['crocodile', 'koala', 'lion', 'tiger', 'walrus']
var type = Math.floor(Math.random() * 5)

if (state.params.type) //**** new line
type=animals.indexOf(state.params.type); //**** new line

var x = data.x
var y = data.y

var obj = { type: animals[type], x: x, y: y }
state.animals.push(obj)

emitter.emit('render')
})

// remove animal
emitter.on('removeAnimal', function (i) {
state.animals.splice(i, 1)
emitter.emit('render')
})
})

// declare routes
app.route('/', main)
app.route('/filter/:type', main)

// start app
app.mount('div')