diff --git a/app/package-lock.json b/app/package-lock.json index 6f9f783..283b37e 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -4,6 +4,11 @@ "lockfileVersion": 1, "requires": true, "dependencies": { + "@pixi/filter-crt": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/@pixi/filter-crt/-/filter-crt-2.7.0.tgz", + "integrity": "sha512-4F6XIGniwPQkR2vc9XyaQAzauQ66GBvyUfX4raa2+ufhpVx+I2HPiSQYEBT6hahQgM0q5A/fThgjwSGAcVjHhw==" + }, "acorn-dynamic-import": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/acorn-dynamic-import/-/acorn-dynamic-import-3.0.0.tgz", @@ -448,6 +453,7 @@ }, "babel-code-frame": { "version": "6.26.0", + "resolved": false, "integrity": "sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=", "dev": true, "requires": { @@ -565,6 +571,7 @@ }, "babel-helper-define-map": { "version": "6.26.0", + "resolved": false, "integrity": "sha1-pfVtq0GiX5fstJjH66ypgZ+Vvl8=", "dev": true, "requires": { @@ -630,6 +637,7 @@ }, "babel-helper-regex": { "version": "6.26.0", + "resolved": false, "integrity": "sha1-MlxZ+QL4LyS3T6zu0DY5VPZJXnI=", "dev": true, "requires": { @@ -770,6 +778,7 @@ }, "babel-plugin-transform-es2015-block-scoping": { "version": "6.26.0", + "resolved": false, "integrity": "sha1-1w9SmcEwjQXBL0Y4E7CgnnOxiV8=", "dev": true, "requires": { @@ -996,6 +1005,7 @@ }, "babel-plugin-transform-regenerator": { "version": "6.26.0", + "resolved": false, "integrity": "sha1-4HA2lvveJ/Cj78rPi03KL3s6jy8=", "dev": true, "requires": { @@ -1110,6 +1120,7 @@ }, "babel-register": { "version": "6.26.0", + "resolved": false, "integrity": "sha1-btAhFz4vy0htestFxgCahW9kcHE=", "dev": true, "requires": { @@ -1145,6 +1156,7 @@ }, "babel-template": { "version": "6.26.0", + "resolved": false, "integrity": "sha1-3gPi0WOWsGn0bdn/+FIfsaDjXgI=", "dev": true, "requires": { @@ -1157,6 +1169,7 @@ }, "babel-traverse": { "version": "6.26.0", + "resolved": false, "integrity": "sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4=", "dev": true, "requires": { @@ -1173,6 +1186,7 @@ }, "babel-types": { "version": "6.26.0", + "resolved": false, "integrity": "sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=", "dev": true, "requires": { @@ -1184,11 +1198,13 @@ }, "babylon": { "version": "6.18.0", + "resolved": false, "integrity": "sha1-ry87iPpvXB5MY00aD46sT1WzleM=", "dev": true }, "balanced-match": { "version": "1.0.0", + "resolved": false, "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", "dev": true }, @@ -1296,6 +1312,7 @@ }, "brace-expansion": { "version": "1.1.8", + "resolved": false, "integrity": "sha1-wHshHHyVLsH479Uad+8NHTmQopI=", "dev": true, "requires": { @@ -2047,6 +2064,7 @@ }, "circular-json": { "version": "0.3.3", + "resolved": false, "integrity": "sha1-gVyZ6oT2gJUp0vRXkb34JxE1LWY=", "dev": true }, @@ -2081,6 +2099,7 @@ }, "cli-cursor": { "version": "2.1.0", + "resolved": false, "integrity": "sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=", "dev": true, "requires": { @@ -2089,6 +2108,7 @@ }, "cli-width": { "version": "2.2.0", + "resolved": false, "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=", "dev": true }, @@ -2153,6 +2173,7 @@ }, "color-name": { "version": "1.1.3", + "resolved": false, "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", "dev": true }, @@ -2240,6 +2261,7 @@ }, "core-js": { "version": "2.5.0", + "resolved": false, "integrity": "sha1-VpwFCRi+ZIazg3VSAorgRmtxcIY=", "dev": true }, @@ -2296,6 +2318,7 @@ }, "cross-spawn": { "version": "5.1.0", + "resolved": false, "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=", "dev": true, "requires": { @@ -3022,6 +3045,7 @@ }, "eslint-scope": { "version": "3.7.1", + "resolved": false, "integrity": "sha1-PWPD7f2gLgbgGkUq2IyqzHzctug=", "dev": true, "requires": { @@ -3031,6 +3055,7 @@ "dependencies": { "estraverse": { "version": "4.2.0", + "resolved": false, "integrity": "sha1-De4/7TH81GlhjOc0IJn8GvoL2xM=", "dev": true } @@ -3044,6 +3069,7 @@ }, "esrecurse": { "version": "4.2.0", + "resolved": false, "integrity": "sha1-+pVo2Y04I/mkHZHpAtyrnqblsWM=", "dev": true, "requires": { @@ -3053,6 +3079,7 @@ "dependencies": { "estraverse": { "version": "4.2.0", + "resolved": false, "integrity": "sha1-De4/7TH81GlhjOc0IJn8GvoL2xM=", "dev": true } @@ -3164,6 +3191,7 @@ }, "figures": { "version": "2.0.0", + "resolved": false, "integrity": "sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=", "dev": true, "requires": { @@ -3182,6 +3210,7 @@ }, "find-cache-dir": { "version": "1.0.0", + "resolved": false, "integrity": "sha1-kojj6ePMN0hxfTnq3hfPcfww7m8=", "dev": true, "requires": { @@ -3192,6 +3221,7 @@ }, "find-up": { "version": "2.1.0", + "resolved": false, "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=", "dev": true, "requires": { @@ -3927,6 +3957,7 @@ }, "functional-red-black-tree": { "version": "1.0.1", + "resolved": false, "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=", "dev": true }, @@ -3950,6 +3981,7 @@ }, "glob": { "version": "7.1.2", + "resolved": false, "integrity": "sha1-wZyd+aAocC1nhhI4SmVSQExjbRU=", "dev": true, "requires": { @@ -3969,6 +4001,7 @@ }, "globals": { "version": "9.18.0", + "resolved": false, "integrity": "sha1-qjiWs+abSH8X4x7SFD1pqOMMLYo=", "dev": true }, @@ -4310,6 +4343,7 @@ }, "is-fullwidth-code-point": { "version": "2.0.0", + "resolved": false, "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=", "dev": true }, @@ -4373,6 +4407,7 @@ }, "is-promise": { "version": "2.1.0", + "resolved": false, "integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=", "dev": true }, @@ -4396,6 +4431,7 @@ }, "isexe": { "version": "2.0.0", + "resolved": false, "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=", "dev": true }, @@ -4406,6 +4442,7 @@ }, "js-tokens": { "version": "3.0.2", + "resolved": false, "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=", "dev": true }, @@ -4417,6 +4454,7 @@ }, "json-schema-traverse": { "version": "0.3.1", + "resolved": false, "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A=", "dev": true }, @@ -4483,6 +4521,7 @@ }, "find-up": { "version": "1.1.2", + "resolved": false, "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=", "dev": true, "requires": { @@ -4492,6 +4531,7 @@ }, "path-exists": { "version": "2.1.0", + "resolved": false, "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=", "dev": true, "requires": { @@ -4500,6 +4540,7 @@ }, "pkg-dir": { "version": "1.0.0", + "resolved": false, "integrity": "sha1-ektQio1bstYp1EcFb/TpyTFM89Q=", "dev": true, "requires": { @@ -4527,6 +4568,7 @@ }, "locate-path": { "version": "2.0.0", + "resolved": false, "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=", "dev": true, "requires": { @@ -4551,6 +4593,7 @@ }, "lru-cache": { "version": "4.1.1", + "resolved": false, "integrity": "sha1-Yi4y6CSItJJ5EUpPns9F581rulU=", "dev": true, "requires": { @@ -4569,6 +4612,7 @@ }, "make-dir": { "version": "1.0.0", + "resolved": false, "integrity": "sha1-l6ARdR6R3YfPre9Ygy67BJNt6Xg=", "dev": true, "requires": { @@ -4697,6 +4741,7 @@ }, "mimic-fn": { "version": "1.1.0", + "resolved": false, "integrity": "sha1-5md4PZLonb00KBi1IwudYqZyrRg=", "dev": true }, @@ -4869,11 +4914,13 @@ }, "ms": { "version": "2.0.0", + "resolved": false, "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", "dev": true }, "mute-stream": { "version": "0.0.7", + "resolved": false, "integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=", "dev": true }, @@ -5113,6 +5160,7 @@ }, "onetime": { "version": "2.0.1", + "resolved": false, "integrity": "sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=", "dev": true, "requires": { @@ -5182,11 +5230,13 @@ }, "p-limit": { "version": "1.1.0", + "resolved": false, "integrity": "sha1-sH/y2aXYi+yAYDWJWiurZqJ5iLw=", "dev": true }, "p-locate": { "version": "2.0.0", + "resolved": false, "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=", "dev": true, "requires": { @@ -5292,6 +5342,7 @@ }, "path-exists": { "version": "3.0.0", + "resolved": false, "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=", "dev": true }, @@ -5377,6 +5428,7 @@ }, "pkg-dir": { "version": "2.0.0", + "resolved": false, "integrity": "sha1-9tXREJ4Z1j7fQo4L1X4Sd3YVM0s=", "dev": true, "requires": { @@ -5415,6 +5467,7 @@ }, "progress": { "version": "2.0.0", + "resolved": false, "integrity": "sha1-ihvjZr+Pwj2yvSPxDG/pILQ4nR8=", "dev": true }, @@ -5519,6 +5572,7 @@ }, "readable-stream": { "version": "2.3.3", + "resolved": false, "integrity": "sha1-No8lEtefnUb9/HE0mueHi7weuVw=", "dev": true, "requires": { @@ -5594,6 +5648,7 @@ }, "regenerator-transform": { "version": "0.10.1", + "resolved": false, "integrity": "sha1-HkmWg3Ix2ot/PPQRTXG1aRoGgN0=", "dev": true, "requires": { @@ -5746,6 +5801,7 @@ }, "restore-cursor": { "version": "2.0.0", + "resolved": false, "integrity": "sha1-n37ih/gv0ybU/RYpI9YhKe7g368=", "dev": true, "requires": { @@ -5780,6 +5836,7 @@ }, "run-async": { "version": "2.3.0", + "resolved": false, "integrity": "sha1-A3GrSuC91yDUFm19/aZP96RFpsA=", "dev": true, "requires": { @@ -5797,11 +5854,13 @@ }, "rx-lite": { "version": "4.0.8", + "resolved": false, "integrity": "sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=", "dev": true }, "rx-lite-aggregates": { "version": "4.0.8", + "resolved": false, "integrity": "sha1-dTuHqJoRyVRnxKwWJsTvxOBcZ74=", "dev": true, "requires": { @@ -5810,6 +5869,7 @@ }, "safe-buffer": { "version": "5.1.1", + "resolved": false, "integrity": "sha1-iTMSr2myEj3vcfV4iQAWce6yyFM=", "dev": true }, @@ -5911,6 +5971,7 @@ }, "shebang-command": { "version": "1.2.0", + "resolved": false, "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=", "dev": true, "requires": { @@ -5919,11 +5980,13 @@ }, "shebang-regex": { "version": "1.0.0", + "resolved": false, "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=", "dev": true }, "signal-exit": { "version": "3.0.2", + "resolved": false, "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=", "dev": true }, @@ -6070,6 +6133,7 @@ }, "source-map": { "version": "0.5.7", + "resolved": false, "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", "dev": true }, @@ -6088,6 +6152,7 @@ }, "source-map-support": { "version": "0.4.16", + "resolved": false, "integrity": "sha1-Fv7PmCEkZ9AX1Yair2jWKLlCHNg=", "dev": true, "requires": { @@ -6270,6 +6335,7 @@ }, "string-width": { "version": "2.1.1", + "resolved": false, "integrity": "sha1-q5Pyeo3BPSjKyBXEYhQ6bZASrp4=", "dev": true, "requires": { @@ -6279,11 +6345,13 @@ "dependencies": { "ansi-regex": { "version": "3.0.0", + "resolved": false, "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=", "dev": true }, "strip-ansi": { "version": "4.0.0", + "resolved": false, "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", "dev": true, "requires": { @@ -6294,6 +6362,7 @@ }, "string_decoder": { "version": "1.0.3", + "resolved": false, "integrity": "sha1-D8Z9fBQYJd6UKC3VNr7GubzoYKs=", "dev": true, "requires": { @@ -7157,6 +7226,7 @@ }, "which": { "version": "1.3.0", + "resolved": false, "integrity": "sha1-/wS9/AEO5UfXgL7DjhrBwnd9JTo=", "dev": true, "requires": { diff --git a/app/package.json b/app/package.json index 6e34809..0a90aed 100644 --- a/app/package.json +++ b/app/package.json @@ -29,6 +29,7 @@ "homepage": "https://github.com/hjacobs/kube-ops-view#readme", "dependencies": { "pixi.js": "^4.8.5", + "@pixi/filter-crt": "^2.7.0", "babel-runtime": "^6.26.0", "babel-polyfill": "^6.26.0" }, diff --git a/app/src/themes.js b/app/src/themes.js index d17b489..05e19a7 100644 --- a/app/src/themes.js +++ b/app/src/themes.js @@ -1,4 +1,5 @@ const PIXI = require('pixi.js') +import {CRTFilter} from '@pixi/filter-crt' export const ALL_THEMES = {} @@ -101,3 +102,25 @@ class HighContrastTheme extends DefaultTheme { } } new HighContrastTheme().register() + +class CRTTheme extends DefaultTheme { + constructor() { + super() + this.name = 'crt' + this.primaryColor = 0xaaaaff + this.secondaryColor = 0x222233 + } + apply(stage) { + const filter = new CRTFilter({time: 0.5}) + + stage.filters = [filter] + this.filter = filter + PIXI.ticker.shared.add(this.animate, this) + } + + animate(_delta) { + this.filter.seed = Math.random() + this.filter.time += 0.5 + } +} +new CRTTheme().register()