Homework/Homework_12/main.js

function createStore(reducer){
    let state       = reducer(undefined, {}) 
    let cbs         = []                    
    
    const getState  = () => state            
    const subscribe = cb => (cbs.push(cb),   
                             () => cbs = cbs.filter(c => c !== cb)) 
                             
    const dispatch  = action => { 
        const newState = reducer(state, action) 
        if (newState !== state){
            state = newState 
            for (let cb of cbs)  cb() 
        }
    }
    
    return {
        getState, 
        dispatch,
        subscribe 
    }
}

function reducer(state, {type, ШО, СКОКА, БАБЛО}){ 
    if (!state){ 
        return {
            goods: {пиво: {count: 100, price: 35},
                    чипсы: {count: 100, price: 25},
                    сиги: {count: 100, price: 50}
                },
            cash: 0
        }
    }
    if (type === 'КУПИТЬ' && ШО in state.goods && БАБЛО >= state.goods[ШО].price && (СКОКА <= state.goods[ШО].count && СКОКА > 0)){ 
        return { 
            ...state,
            goods: {...state.goods, [ШО]: {...state.goods[ШО], count: state.goods[ШО].count - СКОКА}},
            cash: state.cash + БАБЛО
        }
    }
    return state 
}

const actionCreatorBuy = (шо, скока, бабло) => {
    return ({
        type: 'КУПИТЬ',
        ШО: шо,
        СКОКА: скока,
        БАБЛО: бабло
    })
}

const showQuantity = () => {
    beerQuantity.innerText = store.getState().goods.пиво.count
    chipsQuantity.innerText = store.getState().goods.чипсы.count
    cigsQuantity.innerText = store.getState().goods.сиги.count
}



const showImages = () => {
    showcase.innerHTML = ''
    let beerImg = document.createElement('img')
    let beerQuantity = store.getState().goods.пиво.count
    if (beerQuantity >= 85) {
        beerImg.src = 'images/beerMany.jpg'
    } else if (beerQuantity >= 50) {
        beerImg.src = 'images/beerMiddle.png'
    } else if (beerQuantity >= 20) {
        beerImg.src = 'images/beerLittle.jpg'
    } else if (beerQuantity === 0) {
        beerImg.src = 'images/beerNone.jpg'
    }

    let chipsImg = document.createElement('img')
    let chipsQuantity = store.getState().goods.чипсы.count
    if (chipsQuantity >= 85) {
        chipsImg.src = 'images/chipsMany.jpg'
    } else if (chipsQuantity >= 50) {
        chipsImg.src = 'images/chipsMiddle.jpg'
    } else if (chipsQuantity >= 20) {
        chipsImg.src = 'images/chipsLittle.png'
    } else if (chipsQuantity === 0) {
        chipsImg.src = 'images/chipsNone.jpg'
    }

    let cigsImg = document.createElement('img')
    let cigsQuantity = store.getState().goods.сиги.count
    if (cigsQuantity >= 85) {
        cigsImg.src = 'images/cigsMany.jpg'
    } else if (cigsQuantity >= 50) {
        cigsImg.src = 'images/cigsMiddle.jpg'
    } else if (cigsQuantity >= 20) {
        cigsImg.src = 'images/cigsLittle.jpg'
    } else if (cigsQuantity === 0) {
        cigsImg.src = 'images/cigsNone.jpg'
    }

    let nothingLeftImg = document.createElement('img')
    nothingLeftImg.src = 'images/nothing.jpg'

    if(beerQuantity === 0 && chipsQuantity === 0 && cigsQuantity === 0) {
        showcase.append(nothingLeftImg)
    } else {
        showcase.append(beerImg, chipsImg, cigsImg)
    }
    
}

const store = createStore(reducer)
showQuantity()
showImages()

for (let [good, {price}] of Object.entries(store.getState().goods)) {
    let row = document.createElement('tr')
    let cell = document.createElement('td')
    let priceCell = document.createElement('td')
    cell.innerText = good
    priceCell.innerText = price
    row.append(cell, priceCell)
    pricelist.append(row)
}

for (let good of Object.keys(store.getState().goods)) {
    let option = document.createElement('option')
    option.value = good
    option.innerText = good
    goods.append(option)
}


buy.onclick = () => {
    store.dispatch(actionCreatorBuy(goods.value, quantity.value, +money.value)) 
}

store.subscribe(() => console.log(store.getState())) 
store.subscribe(() => {quantity.value = '', money.value = ''})
store.subscribe(showQuantity)
store.subscribe(showImages)



//происходит запуск редьюсера, который создает новый state. 
//dispatch запускает всех подписчиков из массива cbs