Arseniy_Yurchenko
/
Home_work_6


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document1</title>
    <style>
        #store {
            background-image: url(store_1.jpg);
            min-height: 428px;
            max-width: 600px;
            position: relative;

        }

        #store__log {
            width: 195px;
            border: 2px solid red;
            position: absolute;
            top: 65%;
            right: 31%;
            display: flex;
            flex-direction: column;

        }

        #tovar__status {
            word-break: break-all;
            width: 200px;
            height: 155px;
            border: 2px solid red;
            background-color: lightgray;
            position: absolute;
            right: 31%;
        }
    </style>
</head>

<body>
    <div id="store">
        <div id="store__log">
            <select name="" id="tovar__select">
                <option id="tovar__option" value="пиво">пиво</option>
                <option id="tovar__option" value="чипсы">чипсы</option>
                <option id="tovar__option" value="сиги">сиги</option>
            </select>
            <input id="tovar__input" placeholder="скока?" type="number" value="">
            <input type="number" id="cash" placeholder="че по бабкам?" value="">
            <button id="tovar__btn">Купить</button>
        </div>
        <div id="tovar__status" style="font-size: 14px; line-height: 14px;"></div>
    </div>

    <script>
        function createStore(reducer) {
            let state = reducer(undefined, {}) //undefined

            let cbs = []
            return {
                dispatch(action) { // dispatch – функция, которая вызывает редьюсер передает туда текущее состояние и действие
                    const newState = reducer(state, action)
                    if (state !== newState) {
                        state = newState
                        cbs.forEach(cb => { cb }); // ()
                    }
                },
                subscribe(cb) { // Функция subscribe позволяет подписываться на изменение состояния контейнера
                    cbs.push(cb)
                    return () => cbs = cbs.filter(c => c !== cb)
                },
                getState() {
                    return state

                }
            }
        }

        function reducer(state, { type, шо, скока, бабос }) {
            if (state === undefined) {
                return {
                    пиво: { колво: 100, цена: 15 },
                    чипсы: { колво: 100, цена: 10 },
                    сиги: { колво: 100, цена: 30 },
                    касса: 0,
                }
            } if (скока > state[шо].колво) {
                alert(`Столько ${шо} нет в наличии`)
                return state

            } if (бабос < state[шо].цена * скока) {
                alert(`без денег ${шо} не получишь`)
                return state

            } if (бабос > state[шо].цена) {
                let cash = document.getElementById('cash')
                cash.value = бабос - state[шо].цена * скока

            } if (type === 'КУПИТЬ') {
                return {
                    ...state, // так в редьюсере возвращаются новые данные без изменения старых
                    касса: state.касса + state[шо].цена * скока,
                    [шо]: {
                        колво: state[шо].колво - скока,
                        цена: state[шо].цена
                    }
                }
            } else {
                return state
            }
        }

        const store = createStore(reducer)

        let select = document.querySelector("#tovar__select")
        let input = document.querySelector('#tovar__input')
        let button = document.querySelector('#tovar__btn')
        let statusDiv = document.querySelector('#tovar__status')

        const купи = скока => ({ type: 'КУПИТЬ', шо: `${select.value}`, скока: `${input.value}`, бабос: `${cash.value}` })


        statusDiv.innerHTML = `пиво: ${JSON.stringify(store.getState().пиво.колво)} бутылок <br> цена: ${JSON.stringify(store.getState().пиво.цена)} грн/шт <br><br> чипсоны: ${JSON.stringify(store.getState().чипсы.колво)} пачек <br> цена: ${JSON.stringify(store.getState().чипсы.цена)} грн/шт <br><br>сиги: ${JSON.stringify(store.getState().сиги.колво)} пачек <br> цена: ${JSON.stringify(store.getState().сиги.цена)} грн/шт <br><br> (Касса: ${JSON.stringify(store.getState().касса)})`
        button.addEventListener('click', function () {
            store.dispatch(купи()), store.getState(), statusDiv.innerHTML = `пиво: ${JSON.stringify(store.getState().пиво.колво)} бутылок <br> цена: ${JSON.stringify(store.getState().пиво.цена)} грн/шт <br><br> чипсоны: ${JSON.stringify(store.getState().чипсы.колво)} пачек <br> цена: ${JSON.stringify(store.getState().чипсы.цена)} грн/шт <br><br>сиги: ${JSON.stringify(store.getState().сиги.колво)} пачек <br> цена: ${JSON.stringify(store.getState().сиги.цена)} грн/шт <br><br> (Касса: ${JSON.stringify(store.getState().касса)})`
        })

        store.subscribe(() => { store.getState() })
    </script>

</body>

</html>