var components = { Position: {}, Velocity:{}, Spite: {}, Timer: {}, ScreenShake: {}, RemoveComponents: {} }

var player = 1
var enemy = 2
var potplants = [3,4,5]
var game = 6

components.Position[player] = { x:100, y: 100 }
components.Velocity[player] = { x: 0.5, y: 0 }
components.Sprite[player] = sprites.player

components.Position[enemy] = { x: 0, y: 100}
components.Velocity[enemy] = { x: 1, y: 0}
components.Sprite[enemy] = sprites.enemy

potplants.forEach(function(potplant, i){
   components.Position[potplant] = { x: i * 100, y: 200 }
   components.Sprite[potplant] = sprites.potplant
})

components.Timer[6] = { count: 0, interval: 1000, on: { ScreenShake: { x: 1, y: 0 } } }

//gameloop systems

[
   [Move,  components.Velocity]
   [Timer, components.Timer],
   [Screenshake, components.Screenshake],
   [Render, components.Sprite],
   [RemoveComponents, components.RemoveComponents],
].forEach(callSystem)

function callSystem([system, components]){
    _.each(components, system)
}

function Move(velocity, entity){
   var p = component.Position[entity]
   p.x += velocity.x
   p.y += velocity.y
}

function Render(sprite, entity){
   var p = component.Position[entity]
   context.drawImage(p.x, p.y, ..., sprite.img )
}

function Timer(timer, entity){
   if(timer.count > timer.timer){
       if(timer.repeat){
           timer.count = 0
       } else {
           components.RemoveComponents[entity] = { components: ['Timer']  }
       }
       
       
       _.each(components.on, function(data, name){
            components[name] = data
       })

   }
   timer.count ++
}

function ScreenShake(screenshake, entity){
    //shake the screen
    components.RemoveComponents[entity] = { components: ['ScreenShake']}
}

function RemoveComponents(remove, entity){
    remove.forEach(function(){
        delete components.ScreenShake[entity]
    })
}