GennadySht
/
HomeWork


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
							<header>RGBA</header>

<body>
    <script>
        class RGB {
            #r = 0
            #g = 0
            #b = 0
            onError(message) {
                //throw new Error(message);
                console.log(`ERROR: ${message}`);
            }
            toHex(val) {
                return val.toString(16).padStart(2, '0').toUpperCase();
            }
            checkChannelValue(val) {
                val = +val
                if (typeof val !== "number" || val < 0 || val > 255) {
                    this.onError(`invalid channel value: ${val}`)
                }
            }
            get r() {
                return this.#r;
            }
            set r(val) {
                this.checkChannelValue(val);
                this.#r = +val;
            }
            get g() {
                return this.#g;
            }
            set g(val) {
                this.checkChannelValue(val);
                this.#g = +val;
            }
            get b() {
                return this.#b;
            }
            set b(val) {
                this.checkChannelValue(val);
                this.#b = +val;
            }
            set hex(val) {
                let matchColors = /^#([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})$/;
                let match = matchColors.exec(val);
                if (match !== null && match.length == 4) {
                    this.r = parseInt(`${match[1]}`, 16);
                    this.g = parseInt(`${match[2]}`, 16);
                    this.b = parseInt(`${match[3]}`, 16);
                    return;
                }
                this.onError(`incorrect hex color parameter: ${val}`);
            }
            get hex() {
                return `#${this.toHex(this.r)}${this.toHex(this.g)}${this.toHex(this.b)}`;
            }
            set color(val) {
                let matchColors = /^rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)$/;
                let match = matchColors.exec(val);
                if (match !== null && match.length == 4) {
                    this.r = match[1];
                    this.g = match[2];
                    this.b = match[3];
                    return;
                }
                this.onError(`incorrect rgb color parameter: ${val}`);
            }
            get color() {
                return `rgb(${this.r}, ${this.g}, ${this.b})`;
            }


            constructor(colorString) {
                if (colorString) {
                    if (colorString.startsWith(`#`))
                        this.hex = colorString;
                    else
                        this.color = colorString;
                }
            }

        }
        function assertAreEqual(actual, expected) {
            if (actual != expected)
                throw new Error(`not expected value. actual: ${actual}, expected: ${expected}`);
        }
        //////////////////////////////////////////////////////////////////////

        class RGBA extends RGB {
            #a = 0;

            get a() {
                return this.#a;
            }
            set a(val) {
                this.checkChannelValue(val * 255);
                this.#a = +val;
            }
            set color(val) {
                if (val.startsWith('rgb(')) {
                    super.color = val;
                    this.#a = 0;
                    return;
                }
                else {
                    let matchColors = /^rgba\((\d{1,3}), *(\d{1,3}), *(\d{1,3})(?:, *(\d*\.?\d+))?\)$/;
                    let match = matchColors.exec(val);
                    if (match !== null && match.length == 5) {
                        this.r = match[1];
                        this.g = match[2];
                        this.b = match[3];
                        this.a = match[4];
                        return;
                    }
                }
                this.onError(`incorrect rgba color parameter: ${val}`);
            }
            get color() {
                return `rgba(${this.r}, ${this.g}, ${this.b}, ${this.a.toFixed(3)})`;
            }
            set hex(val) {
                let matchColors = /^#([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})?$/;
                let match = matchColors.exec(val);
                if (match !== null && match.length == 5) {
                    if (!match[4]) {
                        super.hex = val;
                        this.#a = 0;
                    }
                    else {
                        super.hex = `#${match[1]}${match[2]}${match[3]}`;
                        this.a = parseInt(`${match[4]}`, 16) / 255;
                    }
                    return;
                }
                this.onError(`incorrect hex color parameter: ${val}`);
            }
            get hex() {
                return `${super.hex}${this.toHex(Math.round(this.a * 255))}`;
            }
        }
        const rgba = new RGBA
        rgba.hex = '#80808080'
        console.log(rgba.a) //0.5
        console.log(rgba.color) //rgba(128,128,128,0.5)
        rgba.hex = '#808080'
        console.log(rgba.color) //rgba(128,128,128,0.000)
        rgba.r = 192
        rgba.a = 0.25
        console.log(rgba.hex)  //#C0808040
        rgba.color = 'rgba(1, 2, 3, 0.70)'
        rgba.b *= 10
        console.log(rgba.hex)  //#01021EB3
        rgba.color = 'rgb(1, 2, 3)'
        console.log(rgba.hex)  
    </script>
</body>