Compare commits
No commits in common. "6d4bc1dac177480d82fb67c0b273b8bd80fc5adb" and "1a1a4be3f8477a2ec23ca0a6f6b9aeea628cd203" have entirely different histories.
6d4bc1dac1
...
1a1a4be3f8
|
|
@ -1,12 +0,0 @@
|
||||||
const {
|
|
||||||
override,
|
|
||||||
addWebpackAlias,
|
|
||||||
} = require("customize-cra");
|
|
||||||
const path = require("path");
|
|
||||||
|
|
||||||
module.exports = override(
|
|
||||||
addWebpackAlias({
|
|
||||||
'@': path.resolve(__dirname, 'src/'),
|
|
||||||
'@components': path.resolve(__dirname, 'src/components'),
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
|
|
@ -11,15 +11,11 @@
|
||||||
"@testing-library/jest-dom": "^5.16.1",
|
"@testing-library/jest-dom": "^5.16.1",
|
||||||
"@testing-library/react": "^12.1.2",
|
"@testing-library/react": "^12.1.2",
|
||||||
"@testing-library/user-event": "^13.5.0",
|
"@testing-library/user-event": "^13.5.0",
|
||||||
"canvas-confetti": "^1.5.1",
|
|
||||||
"customize-cra": "^1.0.0",
|
|
||||||
"polished": "^4.1.3",
|
"polished": "^4.1.3",
|
||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
"react-app-rewired": "^2.2.1",
|
|
||||||
"react-dom": "^17.0.2",
|
"react-dom": "^17.0.2",
|
||||||
"react-router-dom": "^6.2.1",
|
"react-router-dom": "^6.2.1",
|
||||||
"react-scripts": "5.0.0",
|
"react-scripts": "5.0.0",
|
||||||
"react-transition-group": "^4.4.2",
|
|
||||||
"styled-components": "^5.3.3"
|
"styled-components": "^5.3.3"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -4899,15 +4895,6 @@
|
||||||
"url": "https://opencollective.com/browserslist"
|
"url": "https://opencollective.com/browserslist"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/canvas-confetti": {
|
|
||||||
"version": "1.5.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.5.1.tgz",
|
|
||||||
"integrity": "sha512-Ncz+oZJP6OvY7ti4E1slxVlyAV/3g7H7oQtcCDXgwGgARxPnwYY9PW5Oe+I8uvspYNtuHviAdgA0LfcKFWJfpg==",
|
|
||||||
"funding": {
|
|
||||||
"type": "donate",
|
|
||||||
"url": "https://www.paypal.me/kirilvatev"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/case-sensitive-paths-webpack-plugin": {
|
"node_modules/case-sensitive-paths-webpack-plugin": {
|
||||||
"version": "2.4.0",
|
"version": "2.4.0",
|
||||||
"resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
|
||||||
|
|
@ -5731,19 +5718,6 @@
|
||||||
"resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
|
"resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
|
||||||
"integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg=="
|
"integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg=="
|
||||||
},
|
},
|
||||||
"node_modules/csstype": {
|
|
||||||
"version": "3.0.10",
|
|
||||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
|
|
||||||
"integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
|
|
||||||
},
|
|
||||||
"node_modules/customize-cra": {
|
|
||||||
"version": "1.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/customize-cra/-/customize-cra-1.0.0.tgz",
|
|
||||||
"integrity": "sha512-DbtaLuy59224U+xCiukkxSq8clq++MOtJ1Et7LED1fLszWe88EoblEYFBJ895sB1mC6B4uu3xPT/IjClELhMbA==",
|
|
||||||
"dependencies": {
|
|
||||||
"lodash.flow": "^3.5.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/damerau-levenshtein": {
|
"node_modules/damerau-levenshtein": {
|
||||||
"version": "1.0.7",
|
"version": "1.0.7",
|
||||||
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz",
|
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz",
|
||||||
|
|
@ -6035,15 +6009,6 @@
|
||||||
"utila": "~0.4"
|
"utila": "~0.4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/dom-helpers": {
|
|
||||||
"version": "5.2.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
|
|
||||||
"integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
|
|
||||||
"dependencies": {
|
|
||||||
"@babel/runtime": "^7.8.7",
|
|
||||||
"csstype": "^3.0.2"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/dom-serializer": {
|
"node_modules/dom-serializer": {
|
||||||
"version": "1.3.2",
|
"version": "1.3.2",
|
||||||
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
|
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
|
||||||
|
|
@ -10831,11 +10796,6 @@
|
||||||
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
|
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
|
||||||
"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
|
"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
|
||||||
},
|
},
|
||||||
"node_modules/lodash.flow": {
|
|
||||||
"version": "3.5.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/lodash.flow/-/lodash.flow-3.5.0.tgz",
|
|
||||||
"integrity": "sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o="
|
|
||||||
},
|
|
||||||
"node_modules/lodash.memoize": {
|
"node_modules/lodash.memoize": {
|
||||||
"version": "4.1.2",
|
"version": "4.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
|
||||||
|
|
@ -13180,28 +13140,6 @@
|
||||||
"node": ">=14"
|
"node": ">=14"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/react-app-rewired": {
|
|
||||||
"version": "2.2.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/react-app-rewired/-/react-app-rewired-2.2.1.tgz",
|
|
||||||
"integrity": "sha512-uFQWTErXeLDrMzOJHKp0h8P1z0LV9HzPGsJ6adOtGlA/B9WfT6Shh4j2tLTTGlXOfiVx6w6iWpp7SOC5pvk+gA==",
|
|
||||||
"dependencies": {
|
|
||||||
"semver": "^5.6.0"
|
|
||||||
},
|
|
||||||
"bin": {
|
|
||||||
"react-app-rewired": "bin/index.js"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"react-scripts": ">=2.1.3"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/react-app-rewired/node_modules/semver": {
|
|
||||||
"version": "5.7.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
|
|
||||||
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
|
|
||||||
"bin": {
|
|
||||||
"semver": "bin/semver"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/react-dev-utils": {
|
"node_modules/react-dev-utils": {
|
||||||
"version": "12.0.0",
|
"version": "12.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz",
|
||||||
|
|
@ -13446,21 +13384,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/react-transition-group": {
|
|
||||||
"version": "4.4.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
|
|
||||||
"integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
|
|
||||||
"dependencies": {
|
|
||||||
"@babel/runtime": "^7.5.5",
|
|
||||||
"dom-helpers": "^5.0.1",
|
|
||||||
"loose-envify": "^1.4.0",
|
|
||||||
"prop-types": "^15.6.2"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"react": ">=16.6.0",
|
|
||||||
"react-dom": ">=16.6.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/readable-stream": {
|
"node_modules/readable-stream": {
|
||||||
"version": "3.6.0",
|
"version": "3.6.0",
|
||||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
|
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
|
||||||
|
|
@ -19779,11 +19702,6 @@
|
||||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001294.tgz",
|
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001294.tgz",
|
||||||
"integrity": "sha512-LiMlrs1nSKZ8qkNhpUf5KD0Al1KCBE3zaT7OLOwEkagXMEDij98SiOovn9wxVGQpklk9vVC/pUSqgYmkmKOS8g=="
|
"integrity": "sha512-LiMlrs1nSKZ8qkNhpUf5KD0Al1KCBE3zaT7OLOwEkagXMEDij98SiOovn9wxVGQpklk9vVC/pUSqgYmkmKOS8g=="
|
||||||
},
|
},
|
||||||
"canvas-confetti": {
|
|
||||||
"version": "1.5.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.5.1.tgz",
|
|
||||||
"integrity": "sha512-Ncz+oZJP6OvY7ti4E1slxVlyAV/3g7H7oQtcCDXgwGgARxPnwYY9PW5Oe+I8uvspYNtuHviAdgA0LfcKFWJfpg=="
|
|
||||||
},
|
|
||||||
"case-sensitive-paths-webpack-plugin": {
|
"case-sensitive-paths-webpack-plugin": {
|
||||||
"version": "2.4.0",
|
"version": "2.4.0",
|
||||||
"resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
|
||||||
|
|
@ -20384,19 +20302,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"csstype": {
|
|
||||||
"version": "3.0.10",
|
|
||||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
|
|
||||||
"integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
|
|
||||||
},
|
|
||||||
"customize-cra": {
|
|
||||||
"version": "1.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/customize-cra/-/customize-cra-1.0.0.tgz",
|
|
||||||
"integrity": "sha512-DbtaLuy59224U+xCiukkxSq8clq++MOtJ1Et7LED1fLszWe88EoblEYFBJ895sB1mC6B4uu3xPT/IjClELhMbA==",
|
|
||||||
"requires": {
|
|
||||||
"lodash.flow": "^3.5.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"damerau-levenshtein": {
|
"damerau-levenshtein": {
|
||||||
"version": "1.0.7",
|
"version": "1.0.7",
|
||||||
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz",
|
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz",
|
||||||
|
|
@ -20624,15 +20529,6 @@
|
||||||
"utila": "~0.4"
|
"utila": "~0.4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"dom-helpers": {
|
|
||||||
"version": "5.2.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
|
|
||||||
"integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
|
|
||||||
"requires": {
|
|
||||||
"@babel/runtime": "^7.8.7",
|
|
||||||
"csstype": "^3.0.2"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"dom-serializer": {
|
"dom-serializer": {
|
||||||
"version": "1.3.2",
|
"version": "1.3.2",
|
||||||
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
|
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
|
||||||
|
|
@ -24088,11 +23984,6 @@
|
||||||
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
|
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
|
||||||
"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
|
"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
|
||||||
},
|
},
|
||||||
"lodash.flow": {
|
|
||||||
"version": "3.5.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/lodash.flow/-/lodash.flow-3.5.0.tgz",
|
|
||||||
"integrity": "sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o="
|
|
||||||
},
|
|
||||||
"lodash.memoize": {
|
"lodash.memoize": {
|
||||||
"version": "4.1.2",
|
"version": "4.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
|
||||||
|
|
@ -25639,21 +25530,6 @@
|
||||||
"whatwg-fetch": "^3.6.2"
|
"whatwg-fetch": "^3.6.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"react-app-rewired": {
|
|
||||||
"version": "2.2.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/react-app-rewired/-/react-app-rewired-2.2.1.tgz",
|
|
||||||
"integrity": "sha512-uFQWTErXeLDrMzOJHKp0h8P1z0LV9HzPGsJ6adOtGlA/B9WfT6Shh4j2tLTTGlXOfiVx6w6iWpp7SOC5pvk+gA==",
|
|
||||||
"requires": {
|
|
||||||
"semver": "^5.6.0"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"semver": {
|
|
||||||
"version": "5.7.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
|
|
||||||
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"react-dev-utils": {
|
"react-dev-utils": {
|
||||||
"version": "12.0.0",
|
"version": "12.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz",
|
||||||
|
|
@ -25837,17 +25713,6 @@
|
||||||
"workbox-webpack-plugin": "^6.4.1"
|
"workbox-webpack-plugin": "^6.4.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"react-transition-group": {
|
|
||||||
"version": "4.4.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
|
|
||||||
"integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
|
|
||||||
"requires": {
|
|
||||||
"@babel/runtime": "^7.5.5",
|
|
||||||
"dom-helpers": "^5.0.1",
|
|
||||||
"loose-envify": "^1.4.0",
|
|
||||||
"prop-types": "^15.6.2"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"readable-stream": {
|
"readable-stream": {
|
||||||
"version": "3.6.0",
|
"version": "3.6.0",
|
||||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
|
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
|
||||||
|
|
|
||||||
11
package.json
11
package.json
|
|
@ -6,21 +6,18 @@
|
||||||
"@testing-library/jest-dom": "^5.16.1",
|
"@testing-library/jest-dom": "^5.16.1",
|
||||||
"@testing-library/react": "^12.1.2",
|
"@testing-library/react": "^12.1.2",
|
||||||
"@testing-library/user-event": "^13.5.0",
|
"@testing-library/user-event": "^13.5.0",
|
||||||
"canvas-confetti": "^1.5.1",
|
|
||||||
"customize-cra": "^1.0.0",
|
|
||||||
"polished": "^4.1.3",
|
"polished": "^4.1.3",
|
||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
"react-app-rewired": "^2.2.1",
|
|
||||||
"react-dom": "^17.0.2",
|
"react-dom": "^17.0.2",
|
||||||
"react-router-dom": "^6.2.1",
|
"react-router-dom": "^6.2.1",
|
||||||
"react-scripts": "5.0.0",
|
"react-scripts": "5.0.0",
|
||||||
"react-transition-group": "^4.4.2",
|
|
||||||
"styled-components": "^5.3.3"
|
"styled-components": "^5.3.3"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "react-app-rewired start",
|
"start": "react-scripts start",
|
||||||
"build": "react-app-rewired build",
|
"build": "react-scripts build",
|
||||||
"test": "react-app-rewired test"
|
"test": "react-scripts test",
|
||||||
|
"eject": "react-scripts eject"
|
||||||
},
|
},
|
||||||
"eslintConfig": {
|
"eslintConfig": {
|
||||||
"extends": [
|
"extends": [
|
||||||
|
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
import { useRef, useCallback, useEffect } from 'react';
|
|
||||||
import confetti from 'canvas-confetti';
|
|
||||||
|
|
||||||
const commonOptions = (tier) => ({
|
|
||||||
ticks: 400,
|
|
||||||
particleCount: 25 * tier,
|
|
||||||
});
|
|
||||||
|
|
||||||
const delay = 1000;
|
|
||||||
|
|
||||||
export default function useZoom(count, tier) {
|
|
||||||
const canvasRef = useRef();
|
|
||||||
|
|
||||||
const doAnimation = useCallback(() => {
|
|
||||||
const confettiCannon = confetti.create(canvasRef.current, { useWorker: true });
|
|
||||||
let remainCount = count;
|
|
||||||
|
|
||||||
const pop = () => {
|
|
||||||
confettiCannon({
|
|
||||||
origin: { x: 0, y: 1 },
|
|
||||||
angle: 45,
|
|
||||||
drift: -0.5,
|
|
||||||
...commonOptions(tier),
|
|
||||||
});
|
|
||||||
confettiCannon({
|
|
||||||
origin: { x: 1, y: 1 },
|
|
||||||
angle: 135,
|
|
||||||
drift: 0.5,
|
|
||||||
...commonOptions(tier),
|
|
||||||
});
|
|
||||||
remainCount -= 1;
|
|
||||||
|
|
||||||
if (remainCount > 0) {
|
|
||||||
setTimeout(pop, Math.max(delay / remainCount, 200));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
pop();
|
|
||||||
}, [canvasRef]);
|
|
||||||
|
|
||||||
return [canvasRef, doAnimation];
|
|
||||||
}
|
|
||||||
|
|
@ -1,79 +0,0 @@
|
||||||
import { useRef, useCallback, useEffect } from 'react';
|
|
||||||
import XTERM_COLORS from '../xterm';
|
|
||||||
|
|
||||||
const RAIDERS_PER_SECOND = 5;
|
|
||||||
const MAX_SECONDS = 10;
|
|
||||||
const FPS_CAP = 120;
|
|
||||||
const LINE_HEIGHT = 5;
|
|
||||||
const LINE_WIDTH = 700;
|
|
||||||
// Speed is in "seconds to cross card width"
|
|
||||||
const START_SPEED = 0.06;
|
|
||||||
const MIN_SPEED = 0.2;
|
|
||||||
|
|
||||||
export default function useZoom(count) {
|
|
||||||
const canvasRef = useRef();
|
|
||||||
|
|
||||||
const doAnimation = useCallback(() => {
|
|
||||||
const canvas = canvasRef.current;
|
|
||||||
const ctx = canvas.getContext('2d');
|
|
||||||
const height = canvas.height;
|
|
||||||
const width = canvas.width;
|
|
||||||
|
|
||||||
let delay = count / RAIDERS_PER_SECOND;
|
|
||||||
if (delay > MAX_SECONDS) { delay = MAX_SECONDS };
|
|
||||||
const lines = Array(count).fill(null).map(() => ({
|
|
||||||
y: Math.floor(Math.random() * height),
|
|
||||||
x: width + LINE_WIDTH,
|
|
||||||
offset: Math.floor(Math.random() * delay * 1000),
|
|
||||||
speed: width / START_SPEED,
|
|
||||||
decel: Math.random() * (width / (MIN_SPEED - START_SPEED)),
|
|
||||||
color: XTERM_COLORS[118 + Math.floor(Math.random() * 24)],
|
|
||||||
}));
|
|
||||||
|
|
||||||
const fpsInterval = FPS_CAP / 1000;
|
|
||||||
const start = Date.now();
|
|
||||||
let then = Date.now();
|
|
||||||
let now, dt, elapsed;
|
|
||||||
let animationFrameId = requestAnimationFrame(animStep);
|
|
||||||
|
|
||||||
function animStep() {
|
|
||||||
ctx.clearRect(0, 0, width, height);
|
|
||||||
animationFrameId = requestAnimationFrame(animStep);
|
|
||||||
|
|
||||||
let alive = false;
|
|
||||||
now = Date.now();
|
|
||||||
dt = now - then;
|
|
||||||
if (dt < fpsInterval) return;
|
|
||||||
then = now - (dt % fpsInterval);
|
|
||||||
elapsed = now - start;
|
|
||||||
dt = dt / 1000;
|
|
||||||
|
|
||||||
lines.forEach((line, i) => {
|
|
||||||
if (line.x < 0) { return; }
|
|
||||||
alive = true;
|
|
||||||
if (line.offset > elapsed) return;
|
|
||||||
|
|
||||||
const nextX = line.x - (dt * line.speed);
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.lineWidth = LINE_HEIGHT;
|
|
||||||
ctx.strokeStyle = line.color;
|
|
||||||
ctx.moveTo(line.x, line.y);
|
|
||||||
ctx.lineTo(nextX - LINE_WIDTH, line.y);
|
|
||||||
ctx.stroke();
|
|
||||||
ctx.closePath();
|
|
||||||
|
|
||||||
line.x = nextX;
|
|
||||||
if (line.speed - line.decel > (width / MIN_SPEED)) {
|
|
||||||
line.speed -= line.decel;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!alive) {
|
|
||||||
cancelAnimationFrame(animationFrameId);
|
|
||||||
ctx.clearRect(0, 0, width, height);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}, [canvasRef, count]);
|
|
||||||
|
|
||||||
return [canvasRef, doAnimation];
|
|
||||||
}
|
|
||||||
|
|
@ -5,6 +5,14 @@ import ChatLog from '../chat-log';
|
||||||
|
|
||||||
const maxsize = 25;
|
const maxsize = 25;
|
||||||
|
|
||||||
|
const retryLoop = async (func) => {
|
||||||
|
try {
|
||||||
|
return await func();
|
||||||
|
} catch (error) {
|
||||||
|
retryLoop(func);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [messages, setMessages] = useState(Array(maxsize).fill(null));
|
const [messages, setMessages] = useState(Array(maxsize).fill(null));
|
||||||
const query = useQuery();
|
const query = useQuery();
|
||||||
|
|
@ -13,16 +21,12 @@ function App() {
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const websocketAddress = query.get('ws') ?? 'ws://127.0.0.1:8080';
|
const websocketAddress = query.get('ws') ?? 'ws://127.0.0.1:8080';
|
||||||
const attemptConnect = () => {
|
const attemptConnect = async () => {
|
||||||
try {
|
|
||||||
const ws = new WebSocket(websocketAddress);
|
const ws = new WebSocket(websocketAddress);
|
||||||
socket.current = ws;
|
|
||||||
ws.addEventListener('message', onEvent);
|
ws.addEventListener('message', onEvent);
|
||||||
ws.addEventListener('error', onDiscconect);
|
ws.addEventListener('error', onDiscconect);
|
||||||
ws.addEventListener('close', onDiscconect);
|
ws.addEventListener('close', onDiscconect);
|
||||||
} catch (error) {
|
socket.current = ws
|
||||||
setTimeout(attemptConnect, 100);
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const onEvent = function (event) {
|
const onEvent = function (event) {
|
||||||
|
|
@ -34,20 +38,16 @@ function App() {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
const onDiscconect = function (event) {
|
const onDiscconect = function (event) {
|
||||||
socket.current?.removeEventListener('message', onEvent);
|
retryLoop(attemptConnect);
|
||||||
socket.current?.removeEventListener('error', onDiscconect);
|
}
|
||||||
socket.current?.removeEventListener('close', onDiscconect);
|
|
||||||
socket.current?.close();
|
|
||||||
attemptConnect();
|
|
||||||
};
|
|
||||||
|
|
||||||
attemptConnect();
|
onDiscconect();
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
socket.current?.removeEventListener('message', onEvent);
|
socket.current.removeEventListener('message', onEvent);
|
||||||
socket.current?.removeEventListener('error', onDiscconect);
|
socket.current.removeEventListener('error', onDiscconect);
|
||||||
socket.current?.removeEventListener('close', onDiscconect);
|
socket.current.removeEventListener('close', onDiscconect);
|
||||||
socket.current?.close();
|
socket.current.close();
|
||||||
}
|
}
|
||||||
}, [socket, maxsize, setMessages, query]);
|
}, [socket, maxsize, setMessages, query]);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
import { useRef, useLayoutEffect } from 'react';
|
import { useRef, useEffect } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import Message from './message';
|
import Message from './message';
|
||||||
import Raid from './event-card/raid';
|
import Raid from './raid';
|
||||||
import Subscription from './event-card/sub';
|
import Subscription from './sub';
|
||||||
import Follow from './event-card/follow';
|
import Follow from './follow';
|
||||||
|
|
||||||
import { List, Spacer } from './chat-log.style';
|
import { List, Spacer } from './chat-log.style';
|
||||||
|
|
||||||
|
|
@ -31,7 +31,7 @@ function ChatLog({
|
||||||
return [event, renderer, deemphasize];
|
return [event, renderer, deemphasize];
|
||||||
}).filter(([event, renderer, deemphasize]) => !!renderer);
|
}).filter(([event, renderer, deemphasize]) => !!renderer);
|
||||||
|
|
||||||
useLayoutEffect(() => {
|
useEffect(() => {
|
||||||
listRef.current.scrollTop = -1;
|
listRef.current.scrollTop = -1;
|
||||||
}, [renderableEvents]);
|
}, [renderableEvents]);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
import styled, { css } from 'styled-components';
|
|
||||||
import XTERM_COLORS from '../../../xterm';
|
|
||||||
|
|
||||||
export const Root = styled.div`
|
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
|
||||||
background-color: ${XTERM_COLORS[236]};
|
|
||||||
text-align: center;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const Foreground = styled.div`
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 1;
|
|
||||||
padding: 12px;
|
|
||||||
|
|
||||||
span {
|
|
||||||
text-shadow: 0 0 4px rgba(0, 0, 0, 60%);
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const Background = styled.div`
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
`;
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
import { Root, Foreground, Channel } from './follow.style';
|
|
||||||
|
|
||||||
const Follow = ({
|
|
||||||
user_name,
|
|
||||||
}) => (
|
|
||||||
<Root>
|
|
||||||
<Foreground>
|
|
||||||
<Channel>{user_name}</Channel>
|
|
||||||
<span>joins the roost~</span>
|
|
||||||
</Foreground>
|
|
||||||
</Root>
|
|
||||||
);
|
|
||||||
|
|
||||||
export default Follow;
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
import styled from 'styled-components';
|
|
||||||
import XTERM_COLORS from '@/xterm';
|
|
||||||
|
|
||||||
export { Root, Background, Foreground } from '../common.styles';
|
|
||||||
|
|
||||||
export const Channel = styled.span`
|
|
||||||
color: ${XTERM_COLORS[6]};
|
|
||||||
`;
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
import React, { useRef, useCallback, useEffect } from 'react';
|
|
||||||
|
|
||||||
import { Root, Foreground, Background, Channel } from './raid.style';
|
|
||||||
import Canvas from '@components/responsive-canvas';
|
|
||||||
|
|
||||||
import useZoom from '@/animations/useZoom';
|
|
||||||
|
|
||||||
const Raid = ({
|
|
||||||
from_channel, user_count,
|
|
||||||
}) => {
|
|
||||||
const [canvasRef, doAnimation] = useZoom(user_count);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Root>
|
|
||||||
<Foreground>
|
|
||||||
<Channel>{from_channel}</Channel>
|
|
||||||
<span>soars in with their {user_count}-odd flock!</span>
|
|
||||||
</Foreground>
|
|
||||||
<Background>
|
|
||||||
<Canvas ref={canvasRef} onResize={doAnimation} />
|
|
||||||
</Background>
|
|
||||||
</Root>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Raid;
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
import styled from 'styled-components';
|
|
||||||
import XTERM_COLORS from '@/xterm';
|
|
||||||
|
|
||||||
export { Root, Background, Foreground } from '../common.styles';
|
|
||||||
|
|
||||||
export const Channel = styled.span`
|
|
||||||
color: ${XTERM_COLORS[223]};
|
|
||||||
font-size: 28px;
|
|
||||||
`;
|
|
||||||
|
|
@ -1,47 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
import {
|
|
||||||
Root, Foreground, Background,
|
|
||||||
Channel, Streak,
|
|
||||||
} from './sub.style';
|
|
||||||
import Canvas from '@components/responsive-canvas';
|
|
||||||
|
|
||||||
import useConfetti from '@/animations/useConfetti';
|
|
||||||
|
|
||||||
|
|
||||||
const Sub = ({
|
|
||||||
user_name, gifted_to, streak,
|
|
||||||
}) => {
|
|
||||||
const [canvasRef, doAnimation] = useConfetti(gifted_to?.length ?? 1, 1);
|
|
||||||
|
|
||||||
let msg;
|
|
||||||
if (gifted_to?.length) {
|
|
||||||
msg = (
|
|
||||||
<>
|
|
||||||
<Channel>{user_name}</Channel>
|
|
||||||
<span>gifted {gifted_to.length} subscriptions!</span>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
msg = (
|
|
||||||
<>
|
|
||||||
<Channel>{user_name}</Channel>
|
|
||||||
<span>has subscribed!</span>
|
|
||||||
{streak > 1 ? (
|
|
||||||
<Streak>{streak} times and counting!</Streak>
|
|
||||||
) : null}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Root>
|
|
||||||
<Foreground>{msg}</Foreground>
|
|
||||||
<Background>
|
|
||||||
<Canvas ref={canvasRef} onResize={doAnimation} />
|
|
||||||
</Background>
|
|
||||||
</Root>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Sub;
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
import styled from 'styled-components';
|
|
||||||
import XTERM_COLORS from '@/xterm';
|
|
||||||
|
|
||||||
export { Root, Background, Foreground } from '../common.styles';
|
|
||||||
|
|
||||||
export const Channel = styled.span`
|
|
||||||
color: ${XTERM_COLORS[6]};
|
|
||||||
font-size: 28px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const Streak = styled.span`
|
|
||||||
color: ${XTERM_COLORS[247]};
|
|
||||||
font-size: 16px;
|
|
||||||
`;
|
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import { Root, Channel } from './follow.style';
|
||||||
|
|
||||||
|
const Follow = ({
|
||||||
|
user_name,
|
||||||
|
}) => (
|
||||||
|
<Root>
|
||||||
|
<span>Thank you</span>
|
||||||
|
<Channel>{user_name}</Channel>
|
||||||
|
<span>for the follow~</span>
|
||||||
|
</Root>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default Follow;
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import { XTERM_COLORS } from '../../../index.style';
|
||||||
|
|
||||||
|
export const Root = styled.div`
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
background-color: ${XTERM_COLORS[255]};
|
||||||
|
padding: 8px;
|
||||||
|
gap: 1em;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const Channel = styled.span`
|
||||||
|
color: ${XTERM_COLORS[6]};
|
||||||
|
`;
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import { useMemo } from 'react';
|
import { useMemo } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
import XTERM_COLORS from '../../../xterm';
|
import { XTERM_COLORS } from '../../../index.style';
|
||||||
|
|
||||||
import { Wrapper, Author, Body, Emote, Attachments } from './message.style';
|
import { Wrapper, Author, Body, Emote, Attachments } from './message.style';
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import styled, { css } from 'styled-components';
|
import styled, { css } from 'styled-components';
|
||||||
import { toColorString, getContrast, rgbToColorString } from 'polished';
|
import { toColorString, getContrast, rgbToColorString } from 'polished';
|
||||||
import XTERM_COLORS from '../../../xterm';
|
import { XTERM_COLORS } from '../../../index.style';
|
||||||
|
|
||||||
export const Author = styled.div`
|
export const Author = styled.div`
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
|
|
@ -69,6 +69,18 @@ export const Wrapper = styled.div`
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow-wrap: break-word;
|
overflow-wrap: break-word;
|
||||||
|
|
||||||
|
@keyframes fade {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
animation: 420s fade cubic-bezier(.6,.04,.98,.34);
|
||||||
|
animation-fill-mode: forwards;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const Attachments = styled.div`
|
export const Attachments = styled.div`
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import { Root, Channel } from './raid.style';
|
||||||
|
|
||||||
|
const Raid = ({
|
||||||
|
from_channel, user_count,
|
||||||
|
}) => (
|
||||||
|
<Root>
|
||||||
|
<Channel>{from_channel}</Channel>
|
||||||
|
<span>has raided with a party of {user_count}!</span>
|
||||||
|
</Root>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default Raid;
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import { XTERM_COLORS } from '../../../index.style';
|
||||||
|
|
||||||
|
export const Root = styled.div`
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
background-color: ${XTERM_COLORS[255]};
|
||||||
|
padding: 8px;
|
||||||
|
gap: 1em;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const Channel = styled.span`
|
||||||
|
color: ${XTERM_COLORS[6]};
|
||||||
|
`;
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import { Root, Channel } from './sub.style';
|
||||||
|
|
||||||
|
const Raid = ({
|
||||||
|
user_name, gifted_to,
|
||||||
|
}) => {
|
||||||
|
if (gifted_to?.length) {
|
||||||
|
return (
|
||||||
|
<Root>
|
||||||
|
<Channel>{user_name}</Channel>
|
||||||
|
<span>just gifted {gifted_to.length} subscriptions!</span>
|
||||||
|
</Root>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Root>
|
||||||
|
<span>Thank you</span>
|
||||||
|
<Channel>{user_name}</Channel>
|
||||||
|
<span>for the subscription!</span>
|
||||||
|
</Root>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Raid;
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import { XTERM_COLORS } from '../../../index.style';
|
||||||
|
|
||||||
|
export const Root = styled.div`
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
background-color: ${XTERM_COLORS[255]};
|
||||||
|
padding: 8px;
|
||||||
|
gap: 1em;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const Channel = styled.span`
|
||||||
|
color: ${XTERM_COLORS[6]};
|
||||||
|
`;
|
||||||
|
|
@ -1,39 +0,0 @@
|
||||||
/* Copyright 2018 Ross Zurowski
|
|
||||||
* Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
||||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
||||||
*/
|
|
||||||
// via https://github.com/rosszurowski/react-responsive-canvas/blob/master/src/get-size.js
|
|
||||||
|
|
||||||
const parseNumber = prop => parseFloat(prop) || 0;
|
|
||||||
|
|
||||||
const getSize = (el: Element) => {
|
|
||||||
if (el === window || el === document.body) {
|
|
||||||
return [window.innerWidth, window.innerHeight];
|
|
||||||
}
|
|
||||||
|
|
||||||
let temporary = false;
|
|
||||||
|
|
||||||
if (!el.parentNode && document.body) {
|
|
||||||
temporary = true;
|
|
||||||
document.body.appendChild(el);
|
|
||||||
}
|
|
||||||
|
|
||||||
const rect = el.getBoundingClientRect();
|
|
||||||
const styles = getComputedStyle(el);
|
|
||||||
const height =
|
|
||||||
(rect.height | 0) +
|
|
||||||
parseNumber(styles.getPropertyValue('margin-top')) +
|
|
||||||
parseNumber(styles.getPropertyValue('margin-bottom'));
|
|
||||||
const width =
|
|
||||||
(rect.width | 0) +
|
|
||||||
parseNumber(styles.getPropertyValue('margin-left')) +
|
|
||||||
parseNumber(styles.getPropertyValue('margin-right'));
|
|
||||||
|
|
||||||
if (temporary && document.body) {
|
|
||||||
document.body.removeChild(el);
|
|
||||||
}
|
|
||||||
|
|
||||||
return [width, height];
|
|
||||||
};
|
|
||||||
|
|
||||||
export default getSize;
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export { default } from './responsive-canvas';
|
|
||||||
|
|
@ -1,56 +0,0 @@
|
||||||
import React, {
|
|
||||||
useEffect, useState, useCallback, useRef, useImperativeHandle, forwardRef,
|
|
||||||
} from 'react';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
|
|
||||||
import getSize from './get-size';
|
|
||||||
|
|
||||||
const ResponsiveCanvas = forwardRef(({ scale, onResize }, ref) => {
|
|
||||||
const [width, setWidth] = useState(null);
|
|
||||||
const [height, setHeight] = useState(null);
|
|
||||||
const canvasRef = useRef();
|
|
||||||
|
|
||||||
useImperativeHandle(ref, () => canvasRef.current);
|
|
||||||
|
|
||||||
const handleResize = useCallback(() => {
|
|
||||||
const parent = canvasRef.current.parentElement;
|
|
||||||
if (!parent) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const [width, height] = getSize(parent);
|
|
||||||
setWidth(width);
|
|
||||||
setHeight(height);
|
|
||||||
}, [canvasRef]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
window.addEventListener('resize', handleResize, false);
|
|
||||||
handleResize();
|
|
||||||
return () => window.removeEventListener('resize', handleResize, false);
|
|
||||||
}, [handleResize]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (onResize && width !== null && height !== null) onResize();
|
|
||||||
}, [width, height, onResize]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<canvas
|
|
||||||
ref={canvasRef}
|
|
||||||
width={width * scale}
|
|
||||||
height={height * scale}
|
|
||||||
style={{ width, height }}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
ResponsiveCanvas.propTypes = {
|
|
||||||
onResize: PropTypes.func,
|
|
||||||
scale: PropTypes.number,
|
|
||||||
};
|
|
||||||
|
|
||||||
const defaultScale = typeof window !== 'undefined' ? window.devicePixelRatio : 1;
|
|
||||||
ResponsiveCanvas.defaultProps = {
|
|
||||||
onResize: undefined,
|
|
||||||
scale: defaultScale,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ResponsiveCanvas;
|
|
||||||
|
|
@ -62,3 +62,262 @@ export const GlobalStyle = createGlobalStyle`
|
||||||
overflow: none;
|
overflow: none;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
export const XTERM_COLORS = [
|
||||||
|
rgb(0, 0, 0), // #000000
|
||||||
|
rgb(128, 0, 0), // #800000
|
||||||
|
rgb(0, 128, 0), // #008000
|
||||||
|
rgb(128, 128, 0), // #808000
|
||||||
|
rgb(0, 0, 128), // #000080
|
||||||
|
rgb(128, 0, 128), // #800080
|
||||||
|
rgb(0, 128, 128), // #008080
|
||||||
|
rgb(192, 192, 192), // #c0c0c0
|
||||||
|
rgb(128, 128, 128), // #808080
|
||||||
|
rgb(255, 0, 0), // #ff0000
|
||||||
|
rgb(0, 255, 0), // #00ff00
|
||||||
|
rgb(255, 255, 0), // #ffff00
|
||||||
|
rgb(0, 0, 255), // #0000ff
|
||||||
|
rgb(255, 0, 255), // #ff00ff
|
||||||
|
rgb(0, 255, 255), // #00ffff
|
||||||
|
rgb(255, 255, 255), // #ffffff
|
||||||
|
rgb(0, 0, 0), // #000000
|
||||||
|
rgb(0, 0, 95), // #00005f
|
||||||
|
rgb(0, 0, 135), // #000087
|
||||||
|
rgb(0, 0, 175), // #0000af
|
||||||
|
rgb(0, 0, 215), // #0000d7
|
||||||
|
rgb(0, 0, 255), // #0000ff
|
||||||
|
rgb(0, 95, 0), // #005f00
|
||||||
|
rgb(0, 95, 95), // #005f5f
|
||||||
|
rgb(0, 95, 135), // #005f87
|
||||||
|
rgb(0, 95, 175), // #005faf
|
||||||
|
rgb(0, 95, 215), // #005fd7
|
||||||
|
rgb(0, 95, 255), // #005fff
|
||||||
|
rgb(0, 135, 0), // #008700
|
||||||
|
rgb(0, 135, 95), // #00875f
|
||||||
|
rgb(0, 135, 135), // #008787
|
||||||
|
rgb(0, 135, 175), // #0087af
|
||||||
|
rgb(0, 135, 215), // #0087d7
|
||||||
|
rgb(0, 135, 255), // #0087ff
|
||||||
|
rgb(0, 175, 0), // #00af00
|
||||||
|
rgb(0, 175, 95), // #00af5f
|
||||||
|
rgb(0, 175, 135), // #00af87
|
||||||
|
rgb(0, 175, 175), // #00afaf
|
||||||
|
rgb(0, 175, 215), // #00afd7
|
||||||
|
rgb(0, 175, 255), // #00afff
|
||||||
|
rgb(0, 215, 0), // #00d700
|
||||||
|
rgb(0, 215, 95), // #00d75f
|
||||||
|
rgb(0, 215, 135), // #00d787
|
||||||
|
rgb(0, 215, 175), // #00d7af
|
||||||
|
rgb(0, 215, 215), // #00d7d7
|
||||||
|
rgb(0, 215, 255), // #00d7ff
|
||||||
|
rgb(0, 255, 0), // #00ff00
|
||||||
|
rgb(0, 255, 95), // #00ff5f
|
||||||
|
rgb(0, 255, 135), // #00ff87
|
||||||
|
rgb(0, 255, 175), // #00ffaf
|
||||||
|
rgb(0, 255, 215), // #00ffd7
|
||||||
|
rgb(0, 255, 255), // #00ffff
|
||||||
|
rgb(95, 0, 0), // #5f0000
|
||||||
|
rgb(95, 0, 95), // #5f005f
|
||||||
|
rgb(95, 0, 135), // #5f0087
|
||||||
|
rgb(95, 0, 175), // #5f00af
|
||||||
|
rgb(95, 0, 215), // #5f00d7
|
||||||
|
rgb(95, 0, 255), // #5f00ff
|
||||||
|
rgb(95, 95, 0), // #5f5f00
|
||||||
|
rgb(95, 95, 95), // #5f5f5f
|
||||||
|
rgb(95, 95, 135), // #5f5f87
|
||||||
|
rgb(95, 95, 175), // #5f5faf
|
||||||
|
rgb(95, 95, 215), // #5f5fd7
|
||||||
|
rgb(95, 95, 255), // #5f5fff
|
||||||
|
rgb(95, 135, 0), // #5f8700
|
||||||
|
rgb(95, 135, 95), // #5f875f
|
||||||
|
rgb(95, 135, 135), // #5f8787
|
||||||
|
rgb(95, 135, 175), // #5f87af
|
||||||
|
rgb(95, 135, 215), // #5f87d7
|
||||||
|
rgb(95, 135, 255), // #5f87ff
|
||||||
|
rgb(95, 175, 0), // #5faf00
|
||||||
|
rgb(95, 175, 95), // #5faf5f
|
||||||
|
rgb(95, 175, 135), // #5faf87
|
||||||
|
rgb(95, 175, 175), // #5fafaf
|
||||||
|
rgb(95, 175, 215), // #5fafd7
|
||||||
|
rgb(95, 175, 255), // #5fafff
|
||||||
|
rgb(95, 215, 0), // #5fd700
|
||||||
|
rgb(95, 215, 95), // #5fd75f
|
||||||
|
rgb(95, 215, 135), // #5fd787
|
||||||
|
rgb(95, 215, 175), // #5fd7af
|
||||||
|
rgb(95, 215, 215), // #5fd7d7
|
||||||
|
rgb(95, 215, 255), // #5fd7ff
|
||||||
|
rgb(95, 255, 0), // #5fff00
|
||||||
|
rgb(95, 255, 95), // #5fff5f
|
||||||
|
rgb(95, 255, 135), // #5fff87
|
||||||
|
rgb(95, 255, 175), // #5fffaf
|
||||||
|
rgb(95, 255, 215), // #5fffd7
|
||||||
|
rgb(95, 255, 255), // #5fffff
|
||||||
|
rgb(135, 0, 0), // #870000
|
||||||
|
rgb(135, 0, 95), // #87005f
|
||||||
|
rgb(135, 0, 135), // #870087
|
||||||
|
rgb(135, 0, 175), // #8700af
|
||||||
|
rgb(135, 0, 215), // #8700d7
|
||||||
|
rgb(135, 0, 255), // #8700ff
|
||||||
|
rgb(135, 95, 0), // #875f00
|
||||||
|
rgb(135, 95, 95), // #875f5f
|
||||||
|
rgb(135, 95, 135), // #875f87
|
||||||
|
rgb(135, 95, 175), // #875faf
|
||||||
|
rgb(135, 95, 215), // #875fd7
|
||||||
|
rgb(135, 95, 255), // #875fff
|
||||||
|
rgb(135, 135, 0), // #878700
|
||||||
|
rgb(135, 135, 95), // #87875f
|
||||||
|
rgb(135, 135, 135), // #878787
|
||||||
|
rgb(135, 135, 175), // #8787af
|
||||||
|
rgb(135, 135, 215), // #8787d7
|
||||||
|
rgb(135, 135, 255), // #8787ff
|
||||||
|
rgb(135, 175, 0), // #87af00
|
||||||
|
rgb(135, 175, 95), // #87af5f
|
||||||
|
rgb(135, 175, 135), // #87af87
|
||||||
|
rgb(135, 175, 175), // #87afaf
|
||||||
|
rgb(135, 175, 215), // #87afd7
|
||||||
|
rgb(135, 175, 255), // #87afff
|
||||||
|
rgb(135, 215, 0), // #87d700
|
||||||
|
rgb(135, 215, 95), // #87d75f
|
||||||
|
rgb(135, 215, 135), // #87d787
|
||||||
|
rgb(135, 215, 175), // #87d7af
|
||||||
|
rgb(135, 215, 215), // #87d7d7
|
||||||
|
rgb(135, 215, 255), // #87d7ff
|
||||||
|
rgb(135, 255, 0), // #87ff00
|
||||||
|
rgb(135, 255, 95), // #87ff5f
|
||||||
|
rgb(135, 255, 135), // #87ff87
|
||||||
|
rgb(135, 255, 175), // #87ffaf
|
||||||
|
rgb(135, 255, 215), // #87ffd7
|
||||||
|
rgb(135, 255, 255), // #87ffff
|
||||||
|
rgb(175, 0, 0), // #af0000
|
||||||
|
rgb(175, 0, 95), // #af005f
|
||||||
|
rgb(175, 0, 135), // #af0087
|
||||||
|
rgb(175, 0, 175), // #af00af
|
||||||
|
rgb(175, 0, 215), // #af00d7
|
||||||
|
rgb(175, 0, 255), // #af00ff
|
||||||
|
rgb(175, 95, 0), // #af5f00
|
||||||
|
rgb(175, 95, 95), // #af5f5f
|
||||||
|
rgb(175, 95, 135), // #af5f87
|
||||||
|
rgb(175, 95, 175), // #af5faf
|
||||||
|
rgb(175, 95, 215), // #af5fd7
|
||||||
|
rgb(175, 95, 255), // #af5fff
|
||||||
|
rgb(175, 135, 0), // #af8700
|
||||||
|
rgb(175, 135, 95), // #af875f
|
||||||
|
rgb(175, 135, 135), // #af8787
|
||||||
|
rgb(175, 135, 175), // #af87af
|
||||||
|
rgb(175, 135, 215), // #af87d7
|
||||||
|
rgb(175, 135, 255), // #af87ff
|
||||||
|
rgb(175, 175, 0), // #afaf00
|
||||||
|
rgb(175, 175, 95), // #afaf5f
|
||||||
|
rgb(175, 175, 135), // #afaf87
|
||||||
|
rgb(175, 175, 175), // #afafaf
|
||||||
|
rgb(175, 175, 215), // #afafd7
|
||||||
|
rgb(175, 175, 255), // #afafff
|
||||||
|
rgb(175, 215, 0), // #afd700
|
||||||
|
rgb(175, 215, 95), // #afd75f
|
||||||
|
rgb(175, 215, 135), // #afd787
|
||||||
|
rgb(175, 215, 175), // #afd7af
|
||||||
|
rgb(175, 215, 215), // #afd7d7
|
||||||
|
rgb(175, 215, 255), // #afd7ff
|
||||||
|
rgb(175, 255, 0), // #afff00
|
||||||
|
rgb(175, 255, 95), // #afff5f
|
||||||
|
rgb(175, 255, 135), // #afff87
|
||||||
|
rgb(175, 255, 175), // #afffaf
|
||||||
|
rgb(175, 255, 215), // #afffd7
|
||||||
|
rgb(175, 255, 255), // #afffff
|
||||||
|
rgb(215, 0, 0), // #d70000
|
||||||
|
rgb(215, 0, 95), // #d7005f
|
||||||
|
rgb(215, 0, 135), // #d70087
|
||||||
|
rgb(215, 0, 175), // #d700af
|
||||||
|
rgb(215, 0, 215), // #d700d7
|
||||||
|
rgb(215, 0, 255), // #d700ff
|
||||||
|
rgb(215, 95, 0), // #d75f00
|
||||||
|
rgb(215, 95, 95), // #d75f5f
|
||||||
|
rgb(215, 95, 135), // #d75f87
|
||||||
|
rgb(215, 95, 175), // #d75faf
|
||||||
|
rgb(215, 95, 215), // #d75fd7
|
||||||
|
rgb(215, 95, 255), // #d75fff
|
||||||
|
rgb(215, 135, 0), // #d78700
|
||||||
|
rgb(215, 135, 95), // #d7875f
|
||||||
|
rgb(215, 135, 135), // #d78787
|
||||||
|
rgb(215, 135, 175), // #d787af
|
||||||
|
rgb(215, 135, 215), // #d787d7
|
||||||
|
rgb(215, 135, 255), // #d787ff
|
||||||
|
rgb(215, 175, 0), // #d7af00
|
||||||
|
rgb(215, 175, 95), // #d7af5f
|
||||||
|
rgb(215, 175, 135), // #d7af87
|
||||||
|
rgb(215, 175, 175), // #d7afaf
|
||||||
|
rgb(215, 175, 215), // #d7afd7
|
||||||
|
rgb(215, 175, 255), // #d7afff
|
||||||
|
rgb(215, 215, 0), // #d7d700
|
||||||
|
rgb(215, 215, 95), // #d7d75f
|
||||||
|
rgb(215, 215, 135), // #d7d787
|
||||||
|
rgb(215, 215, 175), // #d7d7af
|
||||||
|
rgb(215, 215, 215), // #d7d7d7
|
||||||
|
rgb(215, 215, 255), // #d7d7ff
|
||||||
|
rgb(215, 255, 0), // #d7ff00
|
||||||
|
rgb(215, 255, 95), // #d7ff5f
|
||||||
|
rgb(215, 255, 135), // #d7ff87
|
||||||
|
rgb(215, 255, 175), // #d7ffaf
|
||||||
|
rgb(215, 255, 215), // #d7ffd7
|
||||||
|
rgb(215, 255, 255), // #d7ffff
|
||||||
|
rgb(255, 0, 0), // #ff0000
|
||||||
|
rgb(255, 0, 95), // #ff005f
|
||||||
|
rgb(255, 0, 135), // #ff0087
|
||||||
|
rgb(255, 0, 175), // #ff00af
|
||||||
|
rgb(255, 0, 215), // #ff00d7
|
||||||
|
rgb(255, 0, 255), // #ff00ff
|
||||||
|
rgb(255, 95, 0), // #ff5f00
|
||||||
|
rgb(255, 95, 95), // #ff5f5f
|
||||||
|
rgb(255, 95, 135), // #ff5f87
|
||||||
|
rgb(255, 95, 175), // #ff5faf
|
||||||
|
rgb(255, 95, 215), // #ff5fd7
|
||||||
|
rgb(255, 95, 255), // #ff5fff
|
||||||
|
rgb(255, 135, 0), // #ff8700
|
||||||
|
rgb(255, 135, 95), // #ff875f
|
||||||
|
rgb(255, 135, 135), // #ff8787
|
||||||
|
rgb(255, 135, 175), // #ff87af
|
||||||
|
rgb(255, 135, 215), // #ff87d7
|
||||||
|
rgb(255, 135, 255), // #ff87ff
|
||||||
|
rgb(255, 175, 0), // #ffaf00
|
||||||
|
rgb(255, 175, 95), // #ffaf5f
|
||||||
|
rgb(255, 175, 135), // #ffaf87
|
||||||
|
rgb(255, 175, 175), // #ffafaf
|
||||||
|
rgb(255, 175, 215), // #ffafd7
|
||||||
|
rgb(255, 175, 255), // #ffafff
|
||||||
|
rgb(255, 215, 0), // #ffd700
|
||||||
|
rgb(255, 215, 95), // #ffd75f
|
||||||
|
rgb(255, 215, 135), // #ffd787
|
||||||
|
rgb(255, 215, 175), // #ffd7af
|
||||||
|
rgb(255, 215, 215), // #ffd7d7
|
||||||
|
rgb(255, 215, 255), // #ffd7ff
|
||||||
|
rgb(255, 255, 0), // #ffff00
|
||||||
|
rgb(255, 255, 95), // #ffff5f
|
||||||
|
rgb(255, 255, 135), // #ffff87
|
||||||
|
rgb(255, 255, 175), // #ffffaf
|
||||||
|
rgb(255, 255, 215), // #ffffd7
|
||||||
|
rgb(255, 255, 255), // #ffffff
|
||||||
|
rgb(8, 8, 8), // #080808
|
||||||
|
rgb(18, 18, 18), // #121212
|
||||||
|
rgb(28, 28, 28), // #1c1c1c
|
||||||
|
rgb(38, 38, 38), // #262626
|
||||||
|
rgb(48, 48, 48), // #303030
|
||||||
|
rgb(58, 58, 58), // #3a3a3a
|
||||||
|
rgb(68, 68, 68), // #444444
|
||||||
|
rgb(78, 78, 78), // #4e4e4e
|
||||||
|
rgb(88, 88, 88), // #585858
|
||||||
|
rgb(98, 98, 98), // #626262
|
||||||
|
rgb(108, 108, 108), // #6c6c6c
|
||||||
|
rgb(118, 118, 118), // #767676
|
||||||
|
rgb(128, 128, 128), // #808080
|
||||||
|
rgb(138, 138, 138), // #8a8a8a
|
||||||
|
rgb(148, 148, 148), // #949494
|
||||||
|
rgb(158, 158, 158), // #9e9e9e
|
||||||
|
rgb(168, 168, 168), // #a8a8a8
|
||||||
|
rgb(178, 178, 178), // #b2b2b2
|
||||||
|
rgb(188, 188, 188), // #bcbcbc
|
||||||
|
rgb(198, 198, 198), // #c6c6c6
|
||||||
|
rgb(208, 208, 208), // #d0d0d0
|
||||||
|
rgb(218, 218, 218), // #dadada
|
||||||
|
rgb(228, 228, 228), // #e4e4e4
|
||||||
|
rgb(238, 238, 238), // #eeeeee
|
||||||
|
];
|
||||||
|
|
|
||||||
257
src/xterm.js
257
src/xterm.js
|
|
@ -1,257 +0,0 @@
|
||||||
import { rgb } from 'polished'; export default [ rgb(0, 0, 0), // #000000
|
|
||||||
rgb(128, 0, 0), // #800000
|
|
||||||
rgb(0, 128, 0), // #008000
|
|
||||||
rgb(128, 128, 0), // #808000
|
|
||||||
rgb(0, 0, 128), // #000080
|
|
||||||
rgb(128, 0, 128), // #800080
|
|
||||||
rgb(0, 128, 128), // #008080
|
|
||||||
rgb(192, 192, 192), // #c0c0c0
|
|
||||||
rgb(128, 128, 128), // #808080
|
|
||||||
rgb(255, 0, 0), // #ff0000
|
|
||||||
rgb(0, 255, 0), // #00ff00
|
|
||||||
rgb(255, 255, 0), // #ffff00
|
|
||||||
rgb(0, 0, 255), // #0000ff
|
|
||||||
rgb(255, 0, 255), // #ff00ff
|
|
||||||
rgb(0, 255, 255), // #00ffff
|
|
||||||
rgb(255, 255, 255), // #ffffff
|
|
||||||
rgb(0, 0, 0), // #000000
|
|
||||||
rgb(0, 0, 95), // #00005f
|
|
||||||
rgb(0, 0, 135), // #000087
|
|
||||||
rgb(0, 0, 175), // #0000af
|
|
||||||
rgb(0, 0, 215), // #0000d7
|
|
||||||
rgb(0, 0, 255), // #0000ff
|
|
||||||
rgb(0, 95, 0), // #005f00
|
|
||||||
rgb(0, 95, 95), // #005f5f
|
|
||||||
rgb(0, 95, 135), // #005f87
|
|
||||||
rgb(0, 95, 175), // #005faf
|
|
||||||
rgb(0, 95, 215), // #005fd7
|
|
||||||
rgb(0, 95, 255), // #005fff
|
|
||||||
rgb(0, 135, 0), // #008700
|
|
||||||
rgb(0, 135, 95), // #00875f
|
|
||||||
rgb(0, 135, 135), // #008787
|
|
||||||
rgb(0, 135, 175), // #0087af
|
|
||||||
rgb(0, 135, 215), // #0087d7
|
|
||||||
rgb(0, 135, 255), // #0087ff
|
|
||||||
rgb(0, 175, 0), // #00af00
|
|
||||||
rgb(0, 175, 95), // #00af5f
|
|
||||||
rgb(0, 175, 135), // #00af87
|
|
||||||
rgb(0, 175, 175), // #00afaf
|
|
||||||
rgb(0, 175, 215), // #00afd7
|
|
||||||
rgb(0, 175, 255), // #00afff
|
|
||||||
rgb(0, 215, 0), // #00d700
|
|
||||||
rgb(0, 215, 95), // #00d75f
|
|
||||||
rgb(0, 215, 135), // #00d787
|
|
||||||
rgb(0, 215, 175), // #00d7af
|
|
||||||
rgb(0, 215, 215), // #00d7d7
|
|
||||||
rgb(0, 215, 255), // #00d7ff
|
|
||||||
rgb(0, 255, 0), // #00ff00
|
|
||||||
rgb(0, 255, 95), // #00ff5f
|
|
||||||
rgb(0, 255, 135), // #00ff87
|
|
||||||
rgb(0, 255, 175), // #00ffaf
|
|
||||||
rgb(0, 255, 215), // #00ffd7
|
|
||||||
rgb(0, 255, 255), // #00ffff
|
|
||||||
rgb(95, 0, 0), // #5f0000
|
|
||||||
rgb(95, 0, 95), // #5f005f
|
|
||||||
rgb(95, 0, 135), // #5f0087
|
|
||||||
rgb(95, 0, 175), // #5f00af
|
|
||||||
rgb(95, 0, 215), // #5f00d7
|
|
||||||
rgb(95, 0, 255), // #5f00ff
|
|
||||||
rgb(95, 95, 0), // #5f5f00
|
|
||||||
rgb(95, 95, 95), // #5f5f5f
|
|
||||||
rgb(95, 95, 135), // #5f5f87
|
|
||||||
rgb(95, 95, 175), // #5f5faf
|
|
||||||
rgb(95, 95, 215), // #5f5fd7
|
|
||||||
rgb(95, 95, 255), // #5f5fff
|
|
||||||
rgb(95, 135, 0), // #5f8700
|
|
||||||
rgb(95, 135, 95), // #5f875f
|
|
||||||
rgb(95, 135, 135), // #5f8787
|
|
||||||
rgb(95, 135, 175), // #5f87af
|
|
||||||
rgb(95, 135, 215), // #5f87d7
|
|
||||||
rgb(95, 135, 255), // #5f87ff
|
|
||||||
rgb(95, 175, 0), // #5faf00
|
|
||||||
rgb(95, 175, 95), // #5faf5f
|
|
||||||
rgb(95, 175, 135), // #5faf87
|
|
||||||
rgb(95, 175, 175), // #5fafaf
|
|
||||||
rgb(95, 175, 215), // #5fafd7
|
|
||||||
rgb(95, 175, 255), // #5fafff
|
|
||||||
rgb(95, 215, 0), // #5fd700
|
|
||||||
rgb(95, 215, 95), // #5fd75f
|
|
||||||
rgb(95, 215, 135), // #5fd787
|
|
||||||
rgb(95, 215, 175), // #5fd7af
|
|
||||||
rgb(95, 215, 215), // #5fd7d7
|
|
||||||
rgb(95, 215, 255), // #5fd7ff
|
|
||||||
rgb(95, 255, 0), // #5fff00
|
|
||||||
rgb(95, 255, 95), // #5fff5f
|
|
||||||
rgb(95, 255, 135), // #5fff87
|
|
||||||
rgb(95, 255, 175), // #5fffaf
|
|
||||||
rgb(95, 255, 215), // #5fffd7
|
|
||||||
rgb(95, 255, 255), // #5fffff
|
|
||||||
rgb(135, 0, 0), // #870000
|
|
||||||
rgb(135, 0, 95), // #87005f
|
|
||||||
rgb(135, 0, 135), // #870087
|
|
||||||
rgb(135, 0, 175), // #8700af
|
|
||||||
rgb(135, 0, 215), // #8700d7
|
|
||||||
rgb(135, 0, 255), // #8700ff
|
|
||||||
rgb(135, 95, 0), // #875f00
|
|
||||||
rgb(135, 95, 95), // #875f5f
|
|
||||||
rgb(135, 95, 135), // #875f87
|
|
||||||
rgb(135, 95, 175), // #875faf
|
|
||||||
rgb(135, 95, 215), // #875fd7
|
|
||||||
rgb(135, 95, 255), // #875fff
|
|
||||||
rgb(135, 135, 0), // #878700
|
|
||||||
rgb(135, 135, 95), // #87875f
|
|
||||||
rgb(135, 135, 135), // #878787
|
|
||||||
rgb(135, 135, 175), // #8787af
|
|
||||||
rgb(135, 135, 215), // #8787d7
|
|
||||||
rgb(135, 135, 255), // #8787ff
|
|
||||||
rgb(135, 175, 0), // #87af00
|
|
||||||
rgb(135, 175, 95), // #87af5f
|
|
||||||
rgb(135, 175, 135), // #87af87
|
|
||||||
rgb(135, 175, 175), // #87afaf
|
|
||||||
rgb(135, 175, 215), // #87afd7
|
|
||||||
rgb(135, 175, 255), // #87afff
|
|
||||||
rgb(135, 215, 0), // #87d700
|
|
||||||
rgb(135, 215, 95), // #87d75f
|
|
||||||
rgb(135, 215, 135), // #87d787
|
|
||||||
rgb(135, 215, 175), // #87d7af
|
|
||||||
rgb(135, 215, 215), // #87d7d7
|
|
||||||
rgb(135, 215, 255), // #87d7ff
|
|
||||||
rgb(135, 255, 0), // #87ff00
|
|
||||||
rgb(135, 255, 95), // #87ff5f
|
|
||||||
rgb(135, 255, 135), // #87ff87
|
|
||||||
rgb(135, 255, 175), // #87ffaf
|
|
||||||
rgb(135, 255, 215), // #87ffd7
|
|
||||||
rgb(135, 255, 255), // #87ffff
|
|
||||||
rgb(175, 0, 0), // #af0000
|
|
||||||
rgb(175, 0, 95), // #af005f
|
|
||||||
rgb(175, 0, 135), // #af0087
|
|
||||||
rgb(175, 0, 175), // #af00af
|
|
||||||
rgb(175, 0, 215), // #af00d7
|
|
||||||
rgb(175, 0, 255), // #af00ff
|
|
||||||
rgb(175, 95, 0), // #af5f00
|
|
||||||
rgb(175, 95, 95), // #af5f5f
|
|
||||||
rgb(175, 95, 135), // #af5f87
|
|
||||||
rgb(175, 95, 175), // #af5faf
|
|
||||||
rgb(175, 95, 215), // #af5fd7
|
|
||||||
rgb(175, 95, 255), // #af5fff
|
|
||||||
rgb(175, 135, 0), // #af8700
|
|
||||||
rgb(175, 135, 95), // #af875f
|
|
||||||
rgb(175, 135, 135), // #af8787
|
|
||||||
rgb(175, 135, 175), // #af87af
|
|
||||||
rgb(175, 135, 215), // #af87d7
|
|
||||||
rgb(175, 135, 255), // #af87ff
|
|
||||||
rgb(175, 175, 0), // #afaf00
|
|
||||||
rgb(175, 175, 95), // #afaf5f
|
|
||||||
rgb(175, 175, 135), // #afaf87
|
|
||||||
rgb(175, 175, 175), // #afafaf
|
|
||||||
rgb(175, 175, 215), // #afafd7
|
|
||||||
rgb(175, 175, 255), // #afafff
|
|
||||||
rgb(175, 215, 0), // #afd700
|
|
||||||
rgb(175, 215, 95), // #afd75f
|
|
||||||
rgb(175, 215, 135), // #afd787
|
|
||||||
rgb(175, 215, 175), // #afd7af
|
|
||||||
rgb(175, 215, 215), // #afd7d7
|
|
||||||
rgb(175, 215, 255), // #afd7ff
|
|
||||||
rgb(175, 255, 0), // #afff00
|
|
||||||
rgb(175, 255, 95), // #afff5f
|
|
||||||
rgb(175, 255, 135), // #afff87
|
|
||||||
rgb(175, 255, 175), // #afffaf
|
|
||||||
rgb(175, 255, 215), // #afffd7
|
|
||||||
rgb(175, 255, 255), // #afffff
|
|
||||||
rgb(215, 0, 0), // #d70000
|
|
||||||
rgb(215, 0, 95), // #d7005f
|
|
||||||
rgb(215, 0, 135), // #d70087
|
|
||||||
rgb(215, 0, 175), // #d700af
|
|
||||||
rgb(215, 0, 215), // #d700d7
|
|
||||||
rgb(215, 0, 255), // #d700ff
|
|
||||||
rgb(215, 95, 0), // #d75f00
|
|
||||||
rgb(215, 95, 95), // #d75f5f
|
|
||||||
rgb(215, 95, 135), // #d75f87
|
|
||||||
rgb(215, 95, 175), // #d75faf
|
|
||||||
rgb(215, 95, 215), // #d75fd7
|
|
||||||
rgb(215, 95, 255), // #d75fff
|
|
||||||
rgb(215, 135, 0), // #d78700
|
|
||||||
rgb(215, 135, 95), // #d7875f
|
|
||||||
rgb(215, 135, 135), // #d78787
|
|
||||||
rgb(215, 135, 175), // #d787af
|
|
||||||
rgb(215, 135, 215), // #d787d7
|
|
||||||
rgb(215, 135, 255), // #d787ff
|
|
||||||
rgb(215, 175, 0), // #d7af00
|
|
||||||
rgb(215, 175, 95), // #d7af5f
|
|
||||||
rgb(215, 175, 135), // #d7af87
|
|
||||||
rgb(215, 175, 175), // #d7afaf
|
|
||||||
rgb(215, 175, 215), // #d7afd7
|
|
||||||
rgb(215, 175, 255), // #d7afff
|
|
||||||
rgb(215, 215, 0), // #d7d700
|
|
||||||
rgb(215, 215, 95), // #d7d75f
|
|
||||||
rgb(215, 215, 135), // #d7d787
|
|
||||||
rgb(215, 215, 175), // #d7d7af
|
|
||||||
rgb(215, 215, 215), // #d7d7d7
|
|
||||||
rgb(215, 215, 255), // #d7d7ff
|
|
||||||
rgb(215, 255, 0), // #d7ff00
|
|
||||||
rgb(215, 255, 95), // #d7ff5f
|
|
||||||
rgb(215, 255, 135), // #d7ff87
|
|
||||||
rgb(215, 255, 175), // #d7ffaf
|
|
||||||
rgb(215, 255, 215), // #d7ffd7
|
|
||||||
rgb(215, 255, 255), // #d7ffff
|
|
||||||
rgb(255, 0, 0), // #ff0000
|
|
||||||
rgb(255, 0, 95), // #ff005f
|
|
||||||
rgb(255, 0, 135), // #ff0087
|
|
||||||
rgb(255, 0, 175), // #ff00af
|
|
||||||
rgb(255, 0, 215), // #ff00d7
|
|
||||||
rgb(255, 0, 255), // #ff00ff
|
|
||||||
rgb(255, 95, 0), // #ff5f00
|
|
||||||
rgb(255, 95, 95), // #ff5f5f
|
|
||||||
rgb(255, 95, 135), // #ff5f87
|
|
||||||
rgb(255, 95, 175), // #ff5faf
|
|
||||||
rgb(255, 95, 215), // #ff5fd7
|
|
||||||
rgb(255, 95, 255), // #ff5fff
|
|
||||||
rgb(255, 135, 0), // #ff8700
|
|
||||||
rgb(255, 135, 95), // #ff875f
|
|
||||||
rgb(255, 135, 135), // #ff8787
|
|
||||||
rgb(255, 135, 175), // #ff87af
|
|
||||||
rgb(255, 135, 215), // #ff87d7
|
|
||||||
rgb(255, 135, 255), // #ff87ff
|
|
||||||
rgb(255, 175, 0), // #ffaf00
|
|
||||||
rgb(255, 175, 95), // #ffaf5f
|
|
||||||
rgb(255, 175, 135), // #ffaf87
|
|
||||||
rgb(255, 175, 175), // #ffafaf
|
|
||||||
rgb(255, 175, 215), // #ffafd7
|
|
||||||
rgb(255, 175, 255), // #ffafff
|
|
||||||
rgb(255, 215, 0), // #ffd700
|
|
||||||
rgb(255, 215, 95), // #ffd75f
|
|
||||||
rgb(255, 215, 135), // #ffd787
|
|
||||||
rgb(255, 215, 175), // #ffd7af
|
|
||||||
rgb(255, 215, 215), // #ffd7d7
|
|
||||||
rgb(255, 215, 255), // #ffd7ff
|
|
||||||
rgb(255, 255, 0), // #ffff00
|
|
||||||
rgb(255, 255, 95), // #ffff5f
|
|
||||||
rgb(255, 255, 135), // #ffff87
|
|
||||||
rgb(255, 255, 175), // #ffffaf
|
|
||||||
rgb(255, 255, 215), // #ffffd7
|
|
||||||
rgb(255, 255, 255), // #ffffff
|
|
||||||
rgb(8, 8, 8), // #080808
|
|
||||||
rgb(18, 18, 18), // #121212
|
|
||||||
rgb(28, 28, 28), // #1c1c1c
|
|
||||||
rgb(38, 38, 38), // #262626
|
|
||||||
rgb(48, 48, 48), // #303030
|
|
||||||
rgb(58, 58, 58), // #3a3a3a
|
|
||||||
rgb(68, 68, 68), // #444444
|
|
||||||
rgb(78, 78, 78), // #4e4e4e
|
|
||||||
rgb(88, 88, 88), // #585858
|
|
||||||
rgb(98, 98, 98), // #626262
|
|
||||||
rgb(108, 108, 108), // #6c6c6c
|
|
||||||
rgb(118, 118, 118), // #767676
|
|
||||||
rgb(128, 128, 128), // #808080
|
|
||||||
rgb(138, 138, 138), // #8a8a8a
|
|
||||||
rgb(148, 148, 148), // #949494
|
|
||||||
rgb(158, 158, 158), // #9e9e9e
|
|
||||||
rgb(168, 168, 168), // #a8a8a8
|
|
||||||
rgb(178, 178, 178), // #b2b2b2
|
|
||||||
rgb(188, 188, 188), // #bcbcbc
|
|
||||||
rgb(198, 198, 198), // #c6c6c6
|
|
||||||
rgb(208, 208, 208), // #d0d0d0
|
|
||||||
rgb(218, 218, 218), // #dadada
|
|
||||||
rgb(228, 228, 228), // #e4e4e4
|
|
||||||
rgb(238, 238, 238), // #eeeeee
|
|
||||||
];
|
|
||||||
Loading…
Reference in New Issue