function createStore(reducer){ let state = reducer(undefined, {}) let cbs = [] return { dispatch(action){ const newState = reducer(state, action) if (newState !== state){ state = newState for (let cb of cbs) cb() } }, getState(){ return state }, subscribe(cb){ cbs.push(cb) return () => cbs = cbs.filter(c => c !== cb) } } } function createDom (state) { let content = document.getElementById('content') content.innerHTML = '' let spanBeerAmount = document.createElement('span') spanBeerAmount = `Цена - ${state.пиво.БАБЛО} грн | В наличии:${state.пиво.СКОКА} шт.` let spanImgBeer = document.createElement('span') let imgBeer = document.createElement('img') imgBeer.src = "https://www.meme-arsenal.com/memes/a47737a30a10732b77d522f44f43ea3d.jpg" spanImgBeer.append(imgBeer) imgBeer.style.width = '200px' content.append(spanImgBeer) content.append(spanBeerAmount) let spanChipsAmount = document.createElement('span') spanChipsAmount = `Цена = ${state.чипсы.БАБЛО} грн | В наличии: ${state.чипсы.СКОКА} пачек` let spanImgChips = document.createElement('span') spanImgChips.style.marginLeft = '50px' let imgChips = document.createElement('img') imgChips.src = "chips.png" imgChips.style.width = '150px' imgChips.style.marginRight = '30px' spanImgChips.append(imgChips) content.append(spanImgChips) content.append(spanChipsAmount) let spanCigarettesAmount = document.createElement('span') spanCigarettesAmount = `Цена: ${state.сиги.БАБЛО} грн | В наличии: ${state.сиги.СКОКА} пачек` let spanImgCigarettes = document.createElement('span') let imgCigarettes = document.createElement('img') imgCigarettes.src = 'cigi.png' imgCigarettes.style.width = '200px' spanImgCigarettes.style.marginLeft = '10px' spanImgCigarettes.append(imgCigarettes) content.append(spanImgCigarettes) content.append(spanCigarettesAmount) let cashbox = document.createElement('span') let cashboxImg = document.createElement('img') cashboxImg.src = "kassa.png" cashboxImg.style.width = '200px' cashboxImg.style.position = 'relative' cashboxImg.style.top = '60px' cashboxImg.style.left = '50px' cashbox.style.position = 'relative' cashbox.style.top = '5px' cashbox.style.left = '100px' cashbox.innerHTML = `В кассе: ${state.касса} грн. ` content.append(cashboxImg) content.append(cashbox) let btnCashbox = document.createElement('button') btnCashbox.innerHTML = "Посмотреть сколько в кассе" btnCashbox.style.marginLeft = '80px' content.append(btnCashbox) let btnHidden = document.createElement('button') btnHidden.hidden = true btnHidden.innerHTML = 'Скрыть' btnHidden.style.position = 'relative' btnHidden.style.top = '40px' btnHidden.style.left = '20px' content.append(btnHidden) cashbox.hidden = true btnCashbox.hidden = false btnCashbox.onclick = () => { alert ("Только для продавщицы!!!") let password = prompt('Введите пароль для продавщицы') if (password == 'qwerty'){ cashbox.hidden = false btnCashbox.hidden = true btnHidden.hidden = false} else { alert ("Куда лезешь?") } } btnHidden.onclick = () => { cashbox.hidden = true btnCashbox.hidden = false btnHidden.hidden = true } let selectProducts = document.createElement('select') content.append(selectProducts) selectProducts.style.marginLeft = '300px' let option = document.createElement('option') option.innerHTML = 'Выберите продукт' selectProducts.append(option) let inputAmount = document.createElement('input') inputAmount.type = 'number' content.append(inputAmount) inputAmount.style.marginLeft = '20px' inputAmount.placeholder = 'Количество товара' let beer = document.createElement('option') beer.innerHTML = 'пиво' selectProducts.append(beer) let chips = document.createElement('option') chips.innerHTML = 'чипсы' selectProducts.append(chips) let cigarettes = document.createElement('option') cigarettes.innerHTML = 'сиги' selectProducts.append(cigarettes) let btn = document.createElement('button') content.append(btn) btn.innerHTML = 'Купить' btn.style.marginLeft = '20px' btn.onclick = () => { if(state[selectProducts.value].СКОКА >= inputAmount.value){ let amount = inputAmount.value let selectNum = selectProducts.value store.dispatch(купиШото(amount,selectNum)) } else { alert('В наличие столько нету!') } } return state } function reducer(state, {type, ШО, СКОКА,БАБЛО}){ if (!state){ return { пиво: {СКОКА:100,БАБЛО:60}, чипсы: {СКОКА:100,БАБЛО:30}, сиги: {СКОКА:100 , БАБЛО:50}, касса: 0 } } if (type === 'КУПИТЬ'){ return { ...state, [ШО]: {...state[ШО], СКОКА: state[ШО].СКОКА - СКОКА }, касса: state[ШО].БАБЛО * СКОКА + state.касса } } return state } const store = createStore(reducer) const unsubscribe2 = store.subscribe(() => console.log('подписчик 2', store.getState())) const shop = store.subscribe(() => createDom(store.getState())) const купиПиво = СКОКА => ({type: 'КУПИТЬ', ШО: "пиво", СКОКА}) const купиЧипсы = СКОКА => ({type: 'КУПИТЬ', ШО: "чипсы", СКОКА}) const купиСиги = СКОКА => ({type: 'КУПИТЬ', ШО: "сиги", СКОКА}) const купиШото = (СКОКА,ШО) => ({type: 'КУПИТЬ', ШО, СКОКА}) store.dispatch(купиПиво(0)) store.dispatch(купиЧипсы(0)) store.dispatch(купиСиги(0))