123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154 |
- <!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>Document</title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <div id="parampampam">
- <div class="shop">
- <select id='range'>
- <option value="пиво">Пиво</option>
- <option value="чипсы">Чипсы</option>
- <option value="сиги">Сиги</option>
- </select>
- <input type='number' id='amount1' placeholder='количество' />
- <input type='number' id='money' placeholder='сумма' />
- <button id='buy'>Купить</button>
- </div>
- <div id="tovar">
- </div>
- <div id="price">
- </div>
- <p id="kassa">Собираюсь построить Зикурат: </p>
- </div>
- <script>
- setTimeout(function () {
- let parent = document.getElementById("price");
- parent.lastElementChild.remove();
- store.dispatch({ type: "КУПИТЬ", ШО: "пиво", СКОКА: 0 });
- }, 1);
- setTimeout(function () {
- let parent = document.getElementById("tovar");
- parent.lastElementChild.remove();
- store.dispatch({ type: "КУПИТЬ", ШО: "пиво", СКОКА: 0 });
- }, 1);
- function reducer(state, { type, ШО, СКОКА, ДЕНЬГИ }) {
- if (!state) {
- return {
- пиво: { count: 100, price: 23 },
- чипсы: { count: 100, price: 18 },
- сиги: { count: 100, price: 41 },
- касса: 0,
- }
- }
- if (type === 'КУПИТЬ' && СКОКА >= 0) {
- if (state[ШО].count >= СКОКА) {
- if (money.value >= (state[ШО].price * СКОКА)) {
- return {
- ...state,
- [ШО]: { count: state[ШО].count - СКОКА, price: state[ШО].price },
- касса: state.касса + +money.value
-
- }
- }
- else {
- alert("Нужно больше золота!")
- }
- }
- else {
- alert('Извините товар едет!')
- }
- }
- else {
- alert('Наверное вам хватит ');
- }
- return state
- }
- 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
- }
- }
- const store = createStore(reducer)
-
-
- const unsubscribe = store.subscribe(() => console.log(store.getState()))
-
-
-
- store.dispatch({ type: 'КУПИТЬ', ШО: "пиво", СКОКА: 0 })
-
- for (let [good, amount] of Object.entries(store.getState())) {
- console.log(good, amount);
- let p = document.createElement("p");
- let p1 = document.createElement("p")
- p.innerHTML = `Количество ${good}: ${amount.count}`;
- p1.innerHTML = `(Цена-${amount.price})`
- price.append(p1)
- tovar.append(p);
- buy.onclick = () => {
- store.dispatch({ type: "КУПИТЬ", ШО: range.value, СКОКА: amount1.value });
- kassa.innerHTML =
- "Собираюсь построить Зикурат: " + store.getState().касса
- };
- store.subscribe(
- () =>
- (p.innerHTML = `Количество ${good}: ${store.getState()[good].count
- }`)
- );
- }
- </script>
- </body>
- </html>
|