Redax

HW11 Redux/script.js

@@ -1,90 +1,107 @@
-function reducer(state, {type, ШО, СКОКА, касса, ДЕНЕГ }){ 
-    if (!state){ 
+function reducer(state, {
+    type,
+    ШО,
+    СКОКА,
+    ДЕНЕГ
+}) {
+    if (!state) {
         return {
             пиво: {
                 count: 100,
-                СКОКА: 20
+                price: 20
+            },
+            чипсы: {
+                count: 60,
+                price: 10
+            },
+            сиги: {
+                count: 80,
+                price: 40
             },
-            чипсы: 100,
-            сиги: 100,
             касса: 0,
             ДЕНЕГ: 80
 
         }
     }
-    if (type === 'КУПИТЬ'){ 
-        console.log( state[ШО] )
-        if ( state[ШО] < СКОКА || ДЕНЕГ == 0){
+    if (type === 'КУПИТЬ') {
+        if (state[ШО].count < СКОКА) {
             alert('NETU!')
-            return state; 
+            return state;
+        } else if (state.ДЕНЕГ == 0) {
+            alert('SHO BABOK NET?')
+            return state;
         } else {
-            if (typeof state[ШО] === 'object' && СКОКА){
-                let {пиво} = state;
-                if (пиво.count <  СКОКА) {
+            console.log(СКОКА);
+            if (state.ДЕНЕГ !== 0 && typeof state[ШО] === 'object' && СКОКА) {
+                if (state[ШО].count < СКОКА) {
                     alert('NETU!')
                     return state;
                 } else
-                return {
-                    ...state, пиво:{...пиво, count: пиво.count - СКОКА} ,
-                      ДЕНЕГ : ДЕНЕГ - пиво.count,
-                      касса : state[касса] + пиво.price
-                }  
+                    return {
+                        ...state,
+                        ДЕНЕГ: state.ДЕНЕГ - state[ШО].price,
+                        касса: state.касса + state[ШО].price,
+                        [ШО]: {...state[ШО],
+                            count: state[ШО].count - СКОКА
+                        }
+                    }
             }
-           // console.log(ШО);
             return {
-                ...state, 
+                ...state,
                 [ШО]: state[ШО] - СКОКА,
-               
-            }  
+
+            }
         }
-       
     }
-    return state 
+    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){ 
+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()
+            for (let cb of cbs) cb()
         }
     }
-    
+
     return {
-        getState, 
+        getState,
         dispatch,
-        subscribe 
+        subscribe
     }
 }
 const store = createStore(reducer);
 
 let select = document.querySelector('#goods');
 
-function createSelectItems(selectId, store){
-    for (let key of Object.keys(store.getState())){
-        if ( key === 'касса'){
-             return;
+function createSelectItems(selectId, store) {
+    for (let key of Object.keys(store.getState())) {
+        if (key === 'касса') {
+            return;
         } else {
             let option = document.createElement('option');
             option.value = key;
             option.innerText = key;
             select.append(option);
-        } 
+        }
     }
 }
 createSelectItems('goods', store);
 
-btn.addEventListener('click',() => {
-    store.dispatch({type: 'КУПИТЬ', 'ШО': select.value, 'СКОКА': input.value})
-   // console.log(store.getState());
+btn.addEventListener('click', () => {
+    store.dispatch({
+        type: 'КУПИТЬ',
+        'ШО': select.value,
+        'СКОКА': input.value
+    })
 });
 
 function drawTable(root, store) {
@@ -93,32 +110,29 @@ function drawTable(root, store) {
         let tr = document.createElement('tr');
         let td = document.createElement('td');
         let th = document.createElement('th');
-        if (typeof pcs === 'object'){
+        if (typeof pcs === 'object') {
             let th = document.createElement('th');
             let tr = document.createElement('td');
             th.innerText = item;
             tr.append(th);
-            for (let [el, price] of Object.entries(pcs)){ 
+            for (let [el, price] of Object.entries(pcs)) {
                 let td = document.createElement('td');
-                let td1 = document.createElement('td');
-    //            console.log(el, price)              
+                let td1 = document.createElement('td');           
                 td.innerText = el;
                 td1.innerText = price;
                 tr.append(td, td1);
-                root.append(th, tr); 
+                root.append(th, tr);
 
             }
-            
+
         } else {
-                th.innerText = item;
-                td.innerText = pcs;
-                tr.append(th, td);
-                root.append(tr); 
+            th.innerText = item;
+            td.innerText = pcs;
+            tr.append(th, td);
+            root.append(tr);
         }
-                
+
     }
 }
-drawTable(table,store);
-store.subscribe(() =>drawTable(table,store))
-
-
+drawTable(table, store);
+store.subscribe(() => drawTable(table, store))

HW11 Redux/style.css

@@ -8,9 +8,15 @@
     margin: 0 auto;
     padding: 50px;
 }
-
+table {
+    margin-top: 10px;
+    border-style: ridge;
+    text-align: center;
+    vertical-align: middle;
+}
 td {
     border-style: ridge;
+    padding: 5px;
     width: 40px;
     height: 40px;
     text-align: center;