// Main Block

import React, { Component } from 'react'
import logo from './logo.svg'
import './App.css'

import Slider from './components/Slider'
import Roster from './components/Roster'
import Focused from './components/Focused'

import focusObserver from './utils/observer'

class App extends Component {
  constructor(){
    super()
    this.state = {
      focus:0
    }
  }


  componentDidMount(){
    focusObserver.addObserver((param)=>{
      this.setState(()=>({focus:param}))
    })
    console.log(this.state)
    focusObserver.executeFuncs(5)
    console.log(this.state)
  }



  render () {
    return (
      <div className='container'>
        <Slider />
        <Roster />
        <Focused />
      </div>
    )
  }
}

export default App


//Observer Block

let changeFocus = []

let observer = {
    addObserver:(someFunc)=>{
        changeFocus.push(someFunc)
    },
    executeFuncs:(param)=>{
        changeFocus.map(elem=>{

            elem(param)
        })
    }
}

export default observer