illiaKozyr
/
Homework


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
							<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Title</title>
        <style>
            body {
                background: oldlace;
            }

            img {
                width: 150px;
                margin-left: 20px;
            }
            h1 {
                text-align: center;
                color: brown;
            }

            #div {
                display: flex;
                flex-direction: column;
                justify-content: center;
                margin: 0 auto;
                align-items: center;
            }
            #img-block {
                display: flex;
                align-items: center;
            }
            #textBlock {
                display: flex;
            }
            p {
                padding-right: 20px;
                color: brown;
                font-size: 20px;
            }
            button {
                margin: 0 auto;
                width: 200px;
                height: 40px;
                background-color: bisque;
                box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.3);
            }
            button:hover {
                box-shadow: 0px;
            }
            .buttomP {
                color: red;
                margin: 0;
                text-align: center;
                font-size: 20px;
                padding-left: 15px;
            }
            #list,
            #amount,
            #sum {
                margin-bottom: 20px;
                width: 300px;
                height: 20px;
                background-color: bisque;
            }
            #amount,
            #sum {
                width: 294px;
            }
            #text {
                padding-left: 60px;
            }
        </style>
    </head>
    <body>
        <h1>ГОПОТА МАРКЕТ</h1>
        <div id="div">
            <div id="img-block">
                <div>
                    <img
                        src="data:image/jpeg;base64,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"
                        alt=""
                    />
                    <p id="text">20 денег</p>
                </div>
                <div>
                    <img
                        src="https://euro-opt.shop/4119-large_default/chipsy-pringles-original-pringls-original-165g.jpg"
                        alt=""
                        width=""
                    />

                    <p id="text">10 денег</p>
                </div>
                <div>
                    <img
                        src="https://img3.zakaz.ua/1.1620828397.ad72436478c_2021-05-12_Tatiana/1.1620828397.SNCPSG10.obj.0.1.jpg.oe.jpg.pf.jpg.1350nowm.jpg.1350x.jpg"
                        alt=""
                    />
                    <p id="text">30 денег</p>
                </div>
            </div>
            <div id="textBlock">
                <p>В наличии:</p>
                <br />
            </div>
            <p>Чё надо?</p>
            <select name="store" id="list" class="s-10">
                <option value="пиво">Пиво</option>
                <option value="чипсы">Чипсы</option>
                <option value="сиги">Сиги</option>
            </select>
            <p>Скок надо?</p>
            <input type="number" id="sum" class="i-3" />

            <p>Давай бабки! Сдачи нету!</p>
            <input type="number" id="amount" class="i-2" />
            <button id="button" class="b-2">
                <p class="buttomP">КУПИТЬ</p>
            </button>
            <p class="out-2" id="kassa">КАССА: 0 денег</p>
        </div>

        <script>
            setTimeout(function () {
                let parent = document.querySelector("#textBlock");
                parent.lastElementChild.remove();
                store.dispatch({ type: "КУПИТЬ", ШО: "пиво", СКОКА: 0 });
            }, 1);

            function reducer(state, { type, ШО, СКОКА, БАБЛО }) {
                //объект action деструктуризируется на три переменных
                if (!state) {
                    //начальная уборка в ларьке:
                    return {
                        пиво: { price: 20, amount: 100 },
                        чипсы: { price: 10, amount: 100 },
                        сиги: { price: 30, amount: 100 },
                        касса: { cash: 0 },
                    };
                }
                let stateSHO = state[ШО].amount;
                let statePrice = state[ШО].price;
                if (
                    type === "КУПИТЬ" &&
                    stateSHO != 0 &&
                    stateSHO >= 0 &&
                    sum.value <= 100
                ) {
                    if((stateSHO - sum.value) >= 0) {
                        if (statePrice * sum.value <= amount.value) {
                        return  {
                            ...state,
                            [ШО]: {
                                price: state[ШО].price,
                                amount: stateSHO - СКОКА,
                            },
                            касса: {
                                cash: +state.касса.cash + +amount.value,
                            },
                        };
                    } else {
                        alert("Мало денеге, пойди в мамы попроси!")
                    }
                    } else {
                        alert("У нас нету столько товара")
                        
                    }
                    
                } else {
                    alert("Либо у нас нету столько товара, либо говорить научись!")
                    
                }
                return state; 
                //если мы не поняли, что от нас просят в `action` - оставляем все как есть
            }

            function createStore(reducer) {
                let state = reducer(undefined, {}); //стартовая инициализация состояния, запуск редьюсера со state === undefined
                let cbs = []; //массив подписчиков

                const getState = () => state; //функция, возвращающая переменную из замыкания
                const subscribe = (cb) => (
                    cbs.push(cb), //запоминаем подписчиков в массиве
                    () => (cbs = cbs.filter((c) => c !== cb))
                ); //возвращаем функцию unsubscribe, которая удаляет подписчика из списка

                const dispatch = (action) => {
                    const newState = reducer(state, action); //пробуем запустить редьюсер
                    if (newState !== state) {
                        //проверяем, смог ли редьюсер обработать action
                        state = newState; //если смог, то обновляем state
                        for (let cb of cbs) cb(); //и запускаем подписчиков
                    }
                };

                return {
                    getState, //добавление функции getState в результирующий объект
                    dispatch,
                    subscribe, //добавление subscribe в объект
                };
            }
            const store = createStore(reducer);

            //запомнит функцию во внутреннем массиве cbs.
            //она будет запущена при любом успешном dispatch
            const unsubscribe = store.subscribe(() =>
                console.log(store.getState())
            );

            setTimeout(unsubscribe, 10000); //отпишемся через 10 секунд, например

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

            console.log(store.getState());
            store.subscribe(() => console.log(store.getState()));

            for (let [good, amount] of Object.entries(store.getState())) {
                console.log(good, amount);
                let p = document.createElement("p");
                p.innerHTML = `${good} (${amount})`;
                textBlock.append(p);
                button.onclick = () => {
                    store.dispatch({
                        type: "КУПИТЬ",
                        ШО: list.value,
                        СКОКА: sum.value,
                    });
                    kassa.innerHTML =
                    "КАССА: " + store.getState().касса.cash + " денег"; 
                    
                    
                };
                store.subscribe(
                    () =>
                        (p.innerText = `${good} (${
                            store.getState()[good].amount
                        })`)
                );
            }
           
        </script>
    </body>
</html>