|
@@ -0,0 +1,144 @@
|
|
|
|
+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
|