done

foop ES6.js

@@ -0,0 +1,201 @@
+//Store Class
+                   
+{
+    class Store{
+        #reducer;
+        #state;
+        #cbs = []
+        
+        constructor(reducer){
+            this.#reducer=reducer
+            this.#state= this.#reducer(undefined, {}) 
+        }
+        
+        get state(){
+            return this.#state
+        }
+    
+        getState(){
+            return this.#state
+        }
+        
+        subscribe(cb){
+            (this.#cbs.push(cb), () => this.#cbs = this.#cbs.filter(c => c !== cb))
+        }
+        
+        dispatch(action){ 
+            const newState = this.#reducer(this.#state, action) 
+            if (newState !== this.#state){ 
+                this.#state = newState 
+                for (let cb of this.#cbs)  cb() 
+            }
+        }
+    }
+}  
+
+
+class StoreThunk extends Store{
+    dispatch(action) {
+        if (typeof action === 'function') { 
+            return action(this.dispatch.bind(this), this.state)
+        }
+        super.dispatch(action);
+    }
+}
+
+
+
+//Password Class
+{
+    class Password{
+        
+        constructor(parent, open){
+            let input = document.createElement('input')
+            let checkBox = document.createElement('input')
+            checkBox.type = 'checkbox'
+            checkBox.onchange =()=>this.open(checkBox.checked)
+            parent.append(input, checkBox)
+        }
+        set value(value){ 
+            this.input.value = value
+        }
+        set open(open){
+            this.input.type = open ?'text':'password'
+        }
+
+        get value(){
+            this.input.value
+        }
+        get open(){
+            this.input.type
+        }  
+    }
+
+    let p = new Password(document.body, true)
+
+    p.onChange = data => console.log(data)
+    p.onOpenChange = open => console.log(open)
+    
+    p.value('qwerty')
+    console.log(p.value())
+    
+    p.open(false)
+    console.log(p.open()) 
+}
+
+
+
+
+
+class RGB{
+    #r 
+    #g
+    #b
+
+    get r(){
+        return this.#r
+    }
+    get g(){
+        return this.#g
+    }
+    get b(){
+        return this.#b
+    }
+    get rgb(){
+        return `rgb(${this.#r},${this.#g},${this.#b})`
+    }
+    get hex(){
+        return "#" + ((1 << 24) + (this.#r << 16) + (this.#g << 8) + this.#b).toString(16).slice(1)
+    }
+
+    set r(value){
+        if(typeof value === 'number' && value<=255 && value>=0){
+            return this.#r=value
+        }else{throw new RangeError(value)}
+    }
+    set g(value){
+        if(typeof value === 'number' && value<=255 && value>=0){
+            return this.#g=value
+        }else{throw new RangeError(value)}
+    }
+    set b(value){
+        if(typeof value === 'number' && value<=255 && value>=0){
+            return this.#b=value
+        }else{throw new RangeError(value)}
+    }
+    set rgb(rgb){
+        var matchColors = /rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/;
+        var match = matchColors.exec(rgb);
+        if (match !== null) {
+            this.#r = match[1]
+            this.#g = match[2]
+            this.#b = match[3]
+        }else{throw new RangeError(rgb)}
+    }
+    set hex(hex){
+        var match = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        if (match !== null) {
+            this.#r = parseInt(match[1], 16)
+            this.#g = parseInt(match[2], 16)
+            this.#b = parseInt(match[3], 16)
+        }else{throw new SyntaxError(hex)}
+    }
+    
+}
+
+
+
+class RGBA extends RGB{
+    #a
+    get a(){
+        return this.#a
+    }
+    set a(value){
+        if(typeof value === 'number' && value<=1 && value>=0){
+            return this.#a=value
+        }else{throw new RangeError(value)}
+    }
+    set hex(hex){
+        if(hex.length>7){
+            var match = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+            if (match !== null) {
+                this.r = parseInt(match[1], 16)
+                this.g = parseInt(match[2], 16)
+                this.b = parseInt(match[3], 16)
+                this.#a= parseInt(match[4], 16)/255
+                this.#a= +this.#a.toFixed(2)
+            }else{throw new SyntaxError(hex)}
+        }else{return super.hex=hex}
+    }
+    get hex(){
+        debugger
+        let transparency=((this.#a * 255) | 1 << 8).toString(16).slice(1)
+        if (transparency.length == 1) transparency = '0' + transparency;
+        return super.hex+transparency
+    }
+    set rgba(rgba){
+        debugger
+        var matchColors = /^rgba\((\d{1,3}), *(\d{1,3}), *(\d{1,3})(?:, *(\d*\.?\d+))?\)$/;
+        var match = matchColors.exec(rgba);
+        if (match !== null) {
+            this.r = Number(match[1])
+            this.g = Number(match[2])
+            this.b = Number(match[3])
+            this.#a = Number(match[4])
+        }else{throw new RangeError(rgba)}
+    }
+    get rgba(){
+        return `rgba(${this.r},${this.g},${this.b},${this.#a})`
+    }
+    set color(value){
+        try{
+            this.hex=value
+        }catch(e){}
+        try{
+            this.rgba=value
+        }catch(e){}
+        try{
+            this.rgb=value
+        }catch(e){}
+    }
+}

Ларёк.html

@@ -64,29 +64,35 @@
             
             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){ 
-                    state = newState 
-                    for (let cb of cbs)  cb() 
-                }
-            }
-            
-            return {
-                getState, 
-                dispatch,
-                subscribe 
-            }
+        class Store{
+    #reducer;
+    #state;
+    #cbs = []
+    
+    constructor(reducer){
+        this.#reducer=reducer
+        this.#state= this.#reducer(undefined, {}) 
+    }
+    get state(){
+        return this.#state
+    }
+    getState(){
+        return this.#state
+    }
+    
+    subscribe(cb){
+        (this.#cbs.push(cb), () => this.#cbs = this.#cbs.filter(c => c !== cb))
+    }
+    
+    dispatch(action){ 
+        const newState = this.#reducer(this.#state, action) 
+        if (newState !== this.#state){ 
+            this.#state = newState 
+            for (let cb of cbs)  cb() 
         }
-        const store = createStore(reducer)
+    }
+}
+        const store = new Store(reducer)
         const unsubscribe = store.subscribe(() => console.log(store.getState()))
 
         

Модуль js/index.js

@@ -114,12 +114,15 @@ store.subscribe(() => console.log(store.getState()))
 function authReducer(state={}, {type, token}){
 	if (type === 'AUTH_LOGIN'){ 
 		const payload = jwtDecode(token)
-		if (payload){
-			return {
-				token,
-				payload
-			}
-		}
+		try{
+            if (payload){
+                return {
+                    token,
+                    payload
+                }
+		    }
+        }
+        catch (e) {}
 	}
 	if (type === 'AUTH_LOGOUT'){ 
 		return {}
@@ -228,7 +231,6 @@ const getGQL = url =>
 
 
 const url = 'http://shop-roles.node.ed.asmer.org.ua/'
-
 const gql = getGQL(url + 'graphql')
 
 
@@ -573,7 +575,7 @@ function Password(parent, open) {
 
     inputPass.oninput = btn
     inputLogin.oninput = btn
-    this.getbutton =(funk)=> button.onclick=funk
+    this.getbutton =(func)=> button.onclick=func
     parent.append(inputLogin,inputPass,checkBox,button,div)
 }
 store.dispatch(actionAuthLogin(localStorage.authToken))