diff --git a/package.json b/package.json
index 5f47cb8..c7f1cfc 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
"css-doodle": "^0.12.0",
"lodash": "^4.17.21",
"mousetrap": "^1.6.5",
+ "nody-greeter-types": "^1.0.7",
"nouislider": "^14.6.3",
"parallax-js": "^3.1.0",
"vue": "^2.6.12",
@@ -27,8 +28,8 @@
"@types/lodash": "^4.14.178",
"@types/mousetrap": "^1.6.9",
"@types/node": "14.10.0",
- "@typescript-eslint/eslint-plugin": "^2.33.0",
- "@typescript-eslint/parser": "^2.33.0",
+ "@typescript-eslint/eslint-plugin": "3.3.0",
+ "@typescript-eslint/parser": "3.10.1",
"@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
diff --git a/src/assets/images/themes/agida/index.png b/src/assets/images/themes/agida/index.png
new file mode 100644
index 0000000..7c7b708
Binary files /dev/null and b/src/assets/images/themes/agida/index.png differ
diff --git a/src/components/base/BackgroundImage.tsx b/src/components/base/BackgroundImage.tsx
index 12d222f..625c8d0 100644
--- a/src/components/base/BackgroundImage.tsx
+++ b/src/components/base/BackgroundImage.tsx
@@ -3,8 +3,9 @@ import { CreateElement } from 'vue/types/umd'
import { AppModule } from '@/store/app'
import { PageModule } from '@/store/page'
+import { AppTheme } from '@/models/app'
-const components: { [k: string]: any } = {}
+const components: { [k: string]: Vue } = {}
const requireComponent = require.context(
'@/components/themes', true, /\.(vue|tsx)$/
@@ -24,18 +25,18 @@ requireComponent.keys().forEach(fileName => {
@Component({ components })
export default class BackgroundImage extends Vue {
- get theme() {
+ get theme(): AppTheme {
return AppModule.activeTheme
}
- get isOpenLogin() {
+ get isOpenLogin(): boolean {
return PageModule.isOpenBlock('login')
}
- render(h: CreateElement) {
+ render(h: CreateElement): JSX.Element {
const body = h(components[this.theme.component ?? 'random'])
- return
+ return
diff --git a/src/components/themes/agida/index.tsx b/src/components/themes/agida/index.tsx
index af52dc3..f1bb0fd 100644
--- a/src/components/themes/agida/index.tsx
+++ b/src/components/themes/agida/index.tsx
@@ -1,8 +1,7 @@
import { Component, Vue } from 'vue-property-decorator'
import { AppModule } from '@/store/app'
-import { waveInit } from './lib'
-import { Debounce } from '@/utils/helper'
import { Wavery } from './lib/wave'
+import { Debounce } from '@/utils/helper'
import { changeHsl, hexToRgb, rgbToHsl } from '@/utils/color'
export const OPACITY_ARR = [0.265, 0.4, 0.53, 1]
@@ -11,10 +10,9 @@ export const bottomColors = ['#9C1EFF', '#8518E9', '#6F12D3', '#590ABD']
export const MAX_WAVES = 4
@Component
-export default class DestructionTheme extends Vue {
+export default class AgidaTheme extends Vue {
iconWidth = 667
iconHeight = 684
- test = 1
wave = {
height: 300,
@@ -24,7 +22,7 @@ export default class DestructionTheme extends Vue {
variance: 1,
animation: {
steps: 2,
- time: 40000
+ time: 4000
}
}
@@ -33,44 +31,142 @@ export default class DestructionTheme extends Vue {
height: window.innerHeight
}
- get topColor() {
- return '#03C79C'
+ get topColor(): string {
+ return AppModule.getThemeInput('top-color')?.value as string || '#00CC99'
}
- get bottomColor() {
- return '#9C1EFF'
+ get bottomColor(): string {
+ return AppModule.getThemeInput('bottom-color')?.value as string || '#6600FF'
}
- get topColors() {
- return this.generateArrayColors(this.topColor)
+ get animationSpeed(): number {
+ return AppModule.getThemeInput('animation-speed')?.value as number || 40
}
- get bottomColors() {
- return this.generateArrayColors(this.bottomColor)
+ get topColors(): string[] {
+ const initHSL = rgbToHsl(hexToRgb(this.topColor))
+ const second = changeHsl(initHSL, 10, -3, -5)
+ const third = changeHsl(initHSL, 25, -3, -10)
+ const fourth = changeHsl(initHSL, 33, -3, -20)
+
+ return [initHSL, second, third, fourth]
}
- generateArrayColors(color: string) {
- const initHSL = rgbToHsl(hexToRgb(color))
- const second = changeHsl(initHSL, 17, 3, -5)
- const third = changeHsl(initHSL, 26, 3, -8)
- const thourd = changeHsl(initHSL, 35, 3, -12)
+ get bottomColors(): string[] {
+ const initHSL = rgbToHsl(hexToRgb(this.bottomColor))
+ const second = changeHsl(initHSL, 10, -3, 5)
+ const third = changeHsl(initHSL, 25, -3, 10)
+ const fourth = changeHsl(initHSL, 33, -3, 20)
- return [initHSL, second, third, thourd]
+ return [initHSL, second, third, fourth]
}
- get animationSpeed() {
- return AppModule.getThemeInput('animation-speed')?.value as number || 40
+ get bottomActiveColor(): string {
+ return this.bottomColor // this.bottomColors[3]
+ }
+
+ get knifeSVG(): JSX.Element {
+ return
+
+
+
+ }
+
+ get agidaSVG(): JSX.Element {
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+
+ get yinYangSVG(): JSX.Element {
+ return
+
+
+
+ }
+
+ get activeFragment() {
+ return this.knifeSVG
}
- get width() {
+ get width(): number {
return this.screen.width
}
- get height() {
+ get height(): number {
return this.screen.height
}
- get viewBox() {
+ get viewBox(): string {
return `0 0 ${this.width} ${this.height}`
}
@@ -102,10 +198,11 @@ export default class DestructionTheme extends Vue {
generateWave(type: 'bottom' | 'top') {
const wavery = new Wavery(this.wave)
const waveSvg = wavery.generateSvg()
+ console.log('GENERATE WAVE')
const { height, width, xmlns, paths } = waveSvg.svg
const isTop = type === 'top'
- const colorsArray = isTop ? topColors : bottomColors
+ const colorsArray = isTop ? this.topColors : this.bottomColors
const angle = Math.atan(window.innerHeight / window.innerWidth) * (180 / Math.PI) * 1.1
return