main functional of store is compete

hw10-redux/Change Me.html

@@ -10,9 +10,10 @@
         <div id="shop">
             <select id="goods">
             </select>
-            <input type="number" id="quantity">
+            <input type="number" id="quantity" placeholder="Скока">
+            <input type="number" id="cash" placeholder="бабло">
             <button id="buy">Купить</button>
-        <h1>97</h1><h1>97</h1></div>
+        </div>
         <script src="./Change Me_files/index.js"></script>
     
 

hw10-redux/Change Me_files/index.css

@@ -5,6 +5,7 @@
  button{
     width: 100%;
     font-size: 2em;
+    margin-bottom: 20px;
 }
 input, button, select{
     width: 100%;

hw10-redux/Change Me_files/index.js

@@ -21,24 +21,32 @@ function createStore(reducer){
     }
 }
 
-function reducer(state, {type, ШО, СКОКА}){ //объект action деструктуризируется на три переменных
+function reducer(state, {type, ШО, СКОКА, БАБОС}){ //объект action деструктуризируется на три переменных
     if (!state){ //начальная уборка в ларьке:
         return {
-            пиво: 100, //{count: 100, price: 30}
-            чипсы: 100,//{count: 100, price: 25}
-            сиги: 100,
-//            касса: 0, при покупках увеличивается
+            // пиво: 100, //{count: 100, price: 30}
+            // чипсы: 100,//{count: 100, price: 25}
+            пиво: {count: 100, price: 30},
+            чипсы: {count: 100, price: 25},
+            сиги: {count: 100, price: 50},
+            касса: 0, //при покупках увеличивается
         }
     }
-    if (type === 'КУПИТЬ'){ //если тип action - КУПИТЬ, то:
+    if (type === 'КУПИТЬ' && 
+        state[ШО] && СКОКА > 0 &&
+        СКОКА <= state[ШО].count && БАБОС >= state[ШО].price){ //если тип action - КУПИТЬ, то:
         //проверить на:
         //наличие товара как такового (есть ли ключ в объекте)
         //количество денег в action
         //наличие нужного количества товара.
-        //и только при соблюдении этих условий обновлять state. 
+        //и только при соблюдении этих условий обновлять state.
+        console.log('bang')
+        console.log(store.getState())
+        state.касса += +БАБОС
         return {
             ...state, //берем все что было из ассортимента
-            [ШО]: state[ШО] - СКОКА //и уменьшаем то, что покупается на количество
+            [ШО]: {count: state[ШО].count - Math.floor(СКОКА), price: state[ШО].price },//и уменьшаем то, что покупается на количество
+            //[касса]: state[касса] + БАБОС,
         }
     }
     return state //если мы не поняли, что от нас просят в `action` - оставляем все как есть
@@ -50,21 +58,23 @@ const store = createStore(reducer)
 //это надо делать где в subscribe, иначе оно не будет обновлять количество
 let select = document.getElementById('goods')
 for(let key in store.getState()) {
+    if (key === 'касса') continue;
     let option = document.createElement('option')
     option.innerText = key
     option.value = key
     select.append(option)
 }
 let quantity = document.getElementById('quantity')
+let cash = document.getElementById('cash')
 
 
 
-const купи = (ШО, СКОКА) => ({type: 'КУПИТЬ', ШО, СКОКА})
+const купи = (ШО, СКОКА, БАБОС) => ({type: 'КУПИТЬ', ШО, СКОКА, БАБОС})
 
 buy.onclick = () => {
     //достает выбранный товар и количество из DOM
 //    store.dispatch(купи(....,....))
-    store.dispatch(купи(select.value, quantity.value))
+    store.dispatch(купи(select.value, quantity.value, cash.value))
     console.log('steit', store.getState())
 }
 
@@ -78,21 +88,37 @@ const unsubscribe = store.subscribe(() => console.log(store.getState()))
 //dispatch запускает всех подписчиков из массива cbs
 
 let table = document.createElement('table')
-table.border = 1 
-function smth(){
+function drawTable(){
     table.innerHTML = ''
+    table.insertAdjacentHTML('afterbegin', `
+        <tr>
+            <th>Товар</th>
+            <th>Кол-во</th>
+            <th>Стоимость</th>
+        </tr>
+    `)
+    
     for(let key in store.getState()) {
+        if(key === 'касса') continue;
         let tr = document.createElement('tr')
         let tdKey = document.createElement('td')
-        let tdValue = document.createElement('td')
+        let tdCount = document.createElement('td')
+        let tdCost = document.createElement('td')
         tdKey.innerText = key
-        tdValue.innerText = store.getState()[key]
-        tr.append(tdKey, tdValue)
+        tdCount.innerText = store.getState()[key].count
+        tdCost.innerText = `${store.getState()[key].price} денег`
+        tr.append(tdKey, tdCount, tdCost)
         table.append(tr)
     }
+    table.insertAdjacentHTML('beforeend', `
+        <tr>
+            <th>Касса</th>
+            <td>${store.getState().касса}</td>
+        </tr>
+    `)
     shop.append(table)
 }
-smth()
-store.subscribe(smth)
+drawTable()
+store.subscribe(drawTable)
 //setTimeout(() => store.dispatch({type: 'КУПИТЬ', ШО: 'пиво', СКОКА: 3}), 5000)
 console.log(store.getState())