瀏覽代碼

HW YB2NKR8B2LL done

Varvara Huza 3 年之前
父節點
當前提交
c08e6d8df7

二進制
Homework_12/images/beerLittle.jpg


二進制
Homework_12/images/beerMany.jpg


二進制
Homework_12/images/beerMiddle.png


二進制
Homework_12/images/beerNone.jpg


二進制
Homework_12/images/chipsLittle.png


二進制
Homework_12/images/chipsMany.jpg


二進制
Homework_12/images/chipsMiddle.jpg


二進制
Homework_12/images/chipsNone.jpg


二進制
Homework_12/images/cigsLittle.jpg


二進制
Homework_12/images/cigsMany.jpg


二進制
Homework_12/images/cigsMiddle.jpg


二進制
Homework_12/images/cigsNone.jpg


二進制
Homework_12/images/nothing.jpg


文件差異過大導致無法顯示
+ 63 - 0
Homework_12/index.html


+ 144 - 0
Homework_12/main.js

@@ -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