diff --git a/.gitignore b/.gitignore index 1437c53..43667f9 100644 --- a/.gitignore +++ b/.gitignore @@ -18,6 +18,7 @@ # misc .DS_Store *.pem +.vscode # debug npm-debug.log* diff --git a/animation/base/pixi_app.js b/animation/base/pixi_app.js new file mode 100644 index 0000000..52ea94f --- /dev/null +++ b/animation/base/pixi_app.js @@ -0,0 +1,175 @@ +import * as PIXI from 'pixi.js' +import { debounce, getWindowSize, mapRange, backgroundContain, backgroundSize } from './utils/helpers' +import Fantasy from '../elements/fantasy.js' +import MolochFight from '../elements/moloch-fight.js' +import BackgroundClouds from '../elements/background.js' +import { gsap } from 'gsap' + +const pixi_app = new PIXI.Application({ + width: window.innerWidth, + height: window.innerHeight, + backgroundColor: 0x000000, +}) + +pixi_app.loader + .add('spray_circ', '/animation/img/spray_circ.png') + .add('rf_purple', '/animation/img/raid__fantasy__purple.png') + .add('rf_yellow', '/animation/img/raid__fantasy__red.png') + .add('rf_red', '/animation/img/raid__fantasy__silver.png') + .add('rf_silver', '/animation/img/raid__fantasy__yellow.png') + .add('red_warrior', '/animation/img/red_warrior-color.png') + .add('red_warrior_2', '/animation/img/red_warrior_2-color.png') + .add('red_sticks', '/animation/img/red_sticks-color.png') + .add('red_sticks_2', '/animation/img/red_sticks_2-color.png') + .add('red_archer', '/animation/img/red_archer-color.png') + .add('red_archer_2', '/animation/img/red_archer_2-color.png') + .add('red_wizard', '/animation/img/red_wizard-color.png') + .add('red_wizard_2', '/animation/img/red_wizard_2-color.png') + .add('red_sword', '/animation/img/red_sword-color.png') + .add('red_sword_2', '/animation/img/red_sword_2-color.png') + .add('moloch_horns', '/animation/img/moloch__horns.png') + .add('moloch_face', '/animation/img/moloch__face_2-color.png') + .add('moloch_guide', '/animation/img/moloch-scene.png') + .add('clouds', '/animation/img/clouds.png') + .load((loader, resources) => {}) + +const colors = { + yellow: 0xfcfb75, + red: 0xff3864, + purp: 0xb66ad6, + grey: 0x2b2c34, + black: 0x000000, + g1: 0x24003a, + g2: 0x170011, + g3: 0x130000, + g4: 0x330f00, +} + +const fighter_element = document.getElementById('raid-banner') +const fantasy_element = document.getElementById('raid-fantasy') +const clouds_element = document.getElementById('portfolio') +const placeholder = document.getElementById('raid-banner-placeholder') + +// gsap.to(placeholder, { alpha: 1, duration: 0.5 }) + +pixi_app.loader.onComplete.add(() => { + const scene_container = new PIXI.Container() + scene_container.interactive = true + scene_container.on('mousemove', onPointerMove).on('touchmove', onPointerMove) + scene_container.alpha = 0 + gsap.killTweensOf(placeholder) + gsap.to(placeholder, { alpha: 0, scale: 0, duration: 0.5 }) + gsap.to(scene_container, { alpha: 1, duration: 1.5, delay: 0.25 }) + + pixi_app.stage.addChild(scene_container) + + // Define background gradient + const background_clouds = new BackgroundClouds() + + // Define Moloch fight + const fighters = new MolochFight() + + // Define and init Moloch Fantasy graphic + const fantasy = new Fantasy() + fantasy.init() + + // Define clouds + const clouds = new PIXI.Sprite(pixi_app.loader.resources.clouds.texture) + clouds.anchor.set(0.5) + clouds.x = pixi_app.renderer.width / 2 + + // Define displacement + let displace_move_timeout + let displace_can_move = true + let displace_speed_x = 1 + let displace_speed_y = 1 + const displacer = new PIXI.Sprite(pixi_app.loader.resources.spray_circ.texture) + displacer.anchor.set(0.5) + displacer.scale.set(0.1, 0.1) + displacer.x = pixi_app.renderer.width / 2 + displacer.y = pixi_app.renderer.height / 2 + const displacementFilter = new PIXI.filters.DisplacementFilter(displacer) + scene_container.filters = [displacementFilter] + + // Arrange Scene layers + scene_container.addChild(background_clouds) + scene_container.addChild(fighters) + scene_container.addChild(fantasy) + scene_container.addChild(clouds) + scene_container.addChild(displacer) + + function onPointerMove(eventData) { + clearTimeout(displace_move_timeout) + displace_can_move = false + gsap.to(displacer, { duration: 1, x: eventData.data.global.x, y: eventData.data.global.y }) + const cloud_mover_x = mapRange(eventData.data.global.x, 0, pixi_app.renderer.width, pixi_app.renderer.width / 2 + 50, pixi_app.renderer.width / 2 - 50) + gsap.to(clouds, { x: cloud_mover_x, duration: 15 }) + displace_move_timeout = setTimeout(() => { + displace_can_move = true + }, 1000) + } + + pixi_app.ticker.add((delta) => { + const fighter_position = fighter_element.getBoundingClientRect() + fighters.x = fighter_position.x + fighters.y = fighter_position.y + + const fantasy_position = fantasy_element.getBoundingClientRect() + fantasy.x = fantasy_position.x + fantasy.y = fantasy_position.y + + const clouds_position = clouds_element.getBoundingClientRect() + clouds.y = clouds_position.y + clouds_position.height / 2 + if (displace_can_move) { + displacer.x = displacer.x + displace_speed_x + displacer.y = displacer.y + displace_speed_y + + if (displacer.x > pixi_app.renderer.width || displacer.x < 0) { + displace_speed_x = -displace_speed_x + } + + if (displacer.y > pixi_app.renderer.height || displacer.y < 0) { + displace_speed_y = -displace_speed_y + } + } + }) + + const scale_elements = () => { + const fantasy_scale = backgroundContain( + fantasy_element.offsetWidth, + fantasy_element.offsetHeight, + pixi_app.loader.resources.rf_yellow.texture.baseTexture.width, + pixi_app.loader.resources.rf_yellow.texture.baseTexture.height + ) + fantasy.scale.set(fantasy_scale.scale) + + const fighters_scale = backgroundContain(fighter_element.offsetWidth, fighter_element.offsetHeight, 3125, 3125) + fighters.scale.set(fighters_scale.scale) + + const clouds_scale = backgroundSize( + clouds_element.offsetWidth, + clouds_element.offsetHeight, + pixi_app.loader.resources.clouds.texture.baseTexture.width, + pixi_app.loader.resources.clouds.texture.baseTexture.height + ) + clouds.scale.set(clouds_scale.scale * 1.2) + } + scale_elements() + window.addEventListener( + 'resize', + debounce((e) => { + const size = getWindowSize() + const w = size.width + const h = size.height + + pixi_app.renderer.view.style.width = w + 'px' + pixi_app.renderer.view.style.height = h + 'px' + pixi_app.renderer.resize(w, h) + + scale_elements() + clouds.x = pixi_app.renderer.width / 2 + }, 10) + ) +}) + +export default pixi_app diff --git a/animation/base/utils/helpers.js b/animation/base/utils/helpers.js new file mode 100644 index 0000000..40f0876 --- /dev/null +++ b/animation/base/utils/helpers.js @@ -0,0 +1,98 @@ +const shuffleArray = function (array) { + var currentIndex = array.length, + temporaryValue, + randomIndex + + while (0 !== currentIndex) { + randomIndex = Math.floor(Math.random() * currentIndex) + currentIndex -= 1 + + temporaryValue = array[currentIndex] + array[currentIndex] = array[randomIndex] + array[randomIndex] = temporaryValue + } + + return array +} + +function getWindowSize() { + const wWidth = window.innerWidth + const wHeight = window.innerHeight + const data = { + width: wWidth, + height: wHeight, + } + return data +} + +const debounce = function (func, time = 100) { + var timer + return function (event) { + if (timer) clearTimeout(timer) + timer = setTimeout(func, time, event) + } +} + +const mapRange = function (the_numb, in_min, in_max, out_min, out_max) { + return ((the_numb - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min +} + +const boxRatio = function (w, h) { + return w / h +} + +const backgroundSize = function (containerW, containerH, imgW, imgH) { + let newDims = { + w: null, + h: null, + scale: null, + } + const imgRatio = imgW / imgH + if (containerW / imgRatio < containerH) { + // Image is 100% wide and shorter than container + // new dims must be contaier heigh + newDims.h = containerH + newDims.w = containerH * imgRatio + //newDims.scale = newDims.h / imgH; + } else { + // Image is 100% wide and taller than container + + newDims.w = containerW + newDims.h = containerW / imgRatio + //newDims.scale = newDims.w / imgW; + } + newDims.scale = newDims.w / imgW + return newDims +} + +const backgroundContain = function (containerW, containerH, imgW, imgH) { + let newDims = { + w: null, + h: null, + scale: null, + } + const imgRatio = imgW / imgH + if (containerW / imgRatio < containerH) { + // Image is 100% wide and shorter than container + // new dims must be contaier heigh + // newDims.h = containerH; + // newDims.w = containerH * imgRatio; + + newDims.w = containerW + newDims.h = containerW * imgRatio + } else { + // Image is 100% wide and taller than container + // newDims.w = containerW; + // newDims.h = containerW / imgRatio; + + newDims.h = containerH + newDims.w = containerH * imgRatio + } + newDims.scale = newDims.w / imgW + return newDims +} +function getRandomFromRange(min, max) { + return Math.random() * (max - min) + min +} + +export { shuffleArray, getWindowSize, debounce, mapRange, boxRatio, backgroundSize, backgroundContain, getRandomFromRange } diff --git a/animation/elements/_bolierplate b/animation/elements/_bolierplate new file mode 100644 index 0000000..2646df9 --- /dev/null +++ b/animation/elements/_bolierplate @@ -0,0 +1,23 @@ +import * as PIXI from 'pixi.js' +import pixi_app from '../base/pixi_app.js' +import { debounce, backgroundSize } from '../base/utils/helpers' +import { gsap } from 'gsap' + +export default class ELEMENT extends PIXI.Container { + constructor() { + super() + } + init() { + //pixi_app.ticker.add(() => {}) + + window.addEventListener( + 'resize', + debounce((e) => { + this.size() + }, 1500) + ) + this.size() + } + mousemove(x, y) {} + size() {} +} diff --git a/animation/elements/background.js b/animation/elements/background.js new file mode 100644 index 0000000..1388112 --- /dev/null +++ b/animation/elements/background.js @@ -0,0 +1,92 @@ +import * as PIXI from 'pixi.js' +import pixi_app from '../base/pixi_app.js' +import { debounce, mapRange, backgroundSize } from '../base/utils/helpers' +import { gsap } from 'gsap' + +const colors = { + yellow: 0xfcfb75, + red: 0xff3864, + purp: 0xb66ad6, + grey: 0x2b2c34, + black: 0x000000, + g1: 0x24003a, + g2: 0x170011, + g3: 0x130000, + g4: 0x330f00 +} + +export default class BackgroundClouds extends PIXI.Container { + constructor() { + super() + + const clouds = [] + + const positions = [ + [ + [0, 0], + [0, pixi_app.renderer.height], + [pixi_app.renderer.width, pixi_app.renderer.height / 2], + ], + [ + [pixi_app.renderer.width / 2, 0], + [0, pixi_app.renderer.height], + [pixi_app.renderer.width, pixi_app.renderer.height], + ], + [ + [0, pixi_app.renderer.height / 2], + [pixi_app.renderer.width, pixi_app.renderer.height], + [pixi_app.renderer.width, 0], + ], + [ + [pixi_app.renderer.width / 2, pixi_app.renderer.height], + [0, 0], + [pixi_app.renderer.width, 0], + ], + ] + + const color_cloud_scale = backgroundSize( + pixi_app.renderer.width, + pixi_app.renderer.height, + pixi_app.loader.resources.spray_circ.texture.baseTexture.width, + pixi_app.loader.resources.spray_circ.texture.baseTexture.height + ) + + const color_cloud_1 = new PIXI.Sprite(pixi_app.loader.resources.spray_circ.texture) + color_cloud_1.tint = colors.g1 + clouds.push(color_cloud_1) + + const color_cloud_2 = new PIXI.Sprite(pixi_app.loader.resources.spray_circ.texture) + color_cloud_2.tint = colors.g2 + + clouds.push(color_cloud_2) + + const color_cloud_3 = new PIXI.Sprite(pixi_app.loader.resources.spray_circ.texture) + color_cloud_3.tint = colors.g4 + + clouds.push(color_cloud_3) + + for (let index = 0; index < clouds.length; index++) { + const cloud = clouds[index] + cloud.scale.set(color_cloud_scale.scale * 2) + cloud.anchor.set(0.5) + cloud.alpha = 1 + } + gsap.set(color_cloud_1, { x: positions[2][0][0], y: positions[2][0][1] }) + gsap.set(color_cloud_2, { x: positions[2][1][0], y: positions[2][1][1] }) + gsap.set(color_cloud_3, { x: positions[2][2][0], y: positions[2][2][1] }) + let loop_index = 0 + setInterval(() => { + loop_index = (loop_index + 1) % positions.length + gsap.to(color_cloud_1, { duration: 10, ease: 'back.out(1.7)', x: positions[loop_index][0][0], y: positions[loop_index][0][1] }) + gsap.to(color_cloud_2, { duration: 10, ease: 'back.out(1.7)', x: positions[loop_index][1][0], y: positions[loop_index][1][1] }) + gsap.to(color_cloud_3, { duration: 10, ease: 'back.out(1.7)', x: positions[loop_index][2][0], y: positions[loop_index][2][1] }) + }, 10000) + this.addChild(color_cloud_3) + this.addChild(color_cloud_1) + this.addChild(color_cloud_2) + } + init() {} + mousemove(eventData) { + } + size() {} +} diff --git a/animation/elements/fantasy.js b/animation/elements/fantasy.js new file mode 100644 index 0000000..2d5c9bd --- /dev/null +++ b/animation/elements/fantasy.js @@ -0,0 +1,62 @@ +import * as PIXI from 'pixi.js' +import pixi_app from '../base/pixi_app.js' +import { debounce, mapRange } from '../base/utils/helpers' +import { gsap } from 'gsap' + +export default class Fantasy extends PIXI.Container { + constructor() { + super() + this.slices = [] + this.textures = [ + pixi_app.loader.resources.rf_yellow.texture, + pixi_app.loader.resources.rf_purple.texture, + pixi_app.loader.resources.rf_red.texture, + pixi_app.loader.resources.rf_silver.texture, + ] + this.interactive = true + this.on('mousemove', this.mousemove).on('touchmove', this.mousemove) + } + init() { + this.gfx = new PIXI.Graphics() + this.gfx.beginFill(0x000000, 0) + this.gfx.drawRect(0, 0, pixi_app.loader.resources.rf_yellow.texture.baseTexture.width, pixi_app.loader.resources.rf_yellow.texture.baseTexture.height) + this.gfx.endFill() + this.addChild(this.gfx) + // this.width = pixi_app.loader.resources.rf_yellow.texture.baseTexture.width + // this.height = pixi_app.loader.resources.rf_yellow.texture.baseTexture.height + for (let i = 0; i < this.textures.length; i++) { + const slice = new PIXI.Sprite(this.textures[i]) + slice.anchor.set(0.5) + slice.alpha = 0 + slice.x = this.width / 2 + slice.y = this.height / 2 + this.addChild(slice) + this.slices.push(slice) + } + + gsap.to(this.slices, { alpha: 1, stagger: 0.23, duration: 0.03 }) + //pixi_app.ticker.add(() => {}) + + window.addEventListener( + 'resize', + debounce((e) => { + this.size() + }, 1500) + ) + this.size() + } + mousemove(eventData) { + const moverX = mapRange(eventData.data.global.x, 0, pixi_app.renderer.width, 0.9, 1.1) + for (let i = 0; i < this.slices.length; i++) { + const slice = this.slices[i] + gsap.to(slice.scale, { + x: moverX, + y: moverX, + delay: i * 0.1, + duration: 0.1, + ease: 'rough({ template: none.out, strength: 1, points: 20, taper: none, randomize: true, clamp: false})', + }) + } + } + size() {} +} diff --git a/animation/elements/fighter.js b/animation/elements/fighter.js new file mode 100644 index 0000000..a3cea93 --- /dev/null +++ b/animation/elements/fighter.js @@ -0,0 +1,24 @@ +import * as PIXI from 'pixi.js' +import pixi_app from '../base/pixi_app.js' +import { debounce, backgroundSize } from '../base/utils/helpers' +import { gsap } from 'gsap' + +export default class Fighter extends PIXI.Sprite { + constructor(tex1, tex2) { + super() + this.textures = [tex1, tex2] + this.texture = this.textures[0] + this.interactive = true + this.on('click', () => { + this.strike() + }) + } + strike() { + this.texture = this.textures[1] + setTimeout(() => { + this.texture = this.textures[0] + }, 200) + } + mousemove(x, y) {} + size() {} +} diff --git a/animation/elements/moloch-fight.js b/animation/elements/moloch-fight.js new file mode 100644 index 0000000..c5a50d1 --- /dev/null +++ b/animation/elements/moloch-fight.js @@ -0,0 +1,86 @@ +import * as PIXI from 'pixi.js' +import pixi_app from '../base/pixi_app.js' +import { debounce, mapRange } from '../base/utils/helpers' +import { gsap } from 'gsap' +import Fighter from './fighter.js' + +export default class MolochFight extends PIXI.Container { + constructor() { + super() + this.scene_height = 3125 + this.scene_width = 3152 + // this.gfx = new PIXI.Graphics() + // this.gfx.beginFill(0x000000) + // this.gfx.drawRect(0, 0, this.scene_width, this.scene_height) + // this.gfx.endFill() + // this.addChild(this.gfx) + // this.guide = new PIXI.Sprite(pixi_app.loader.resources.moloch_guide.texture) + // this.guide.tint = 0x00ff00 + // this.addChild(this.guide) + + this.fighters = [] + this.textures = [ + [pixi_app.loader.resources.red_archer.texture, pixi_app.loader.resources.red_archer_2.texture, 2220, 2140], + [pixi_app.loader.resources.red_sticks.texture, pixi_app.loader.resources.red_sticks_2.texture, 25, 1770], + [pixi_app.loader.resources.red_wizard.texture, pixi_app.loader.resources.red_wizard_2.texture, 1030, 2050], + [pixi_app.loader.resources.red_sword.texture, pixi_app.loader.resources.red_sword_2.texture, 430, 2270], + [pixi_app.loader.resources.red_warrior.texture, pixi_app.loader.resources.red_warrior_2.texture, 1550, 2140], + ] + for (let i = 0; i < this.textures.length; i++) { + const fighter = new Fighter(this.textures[i][0], this.textures[i][1]) + fighter.x = this.textures[i][2] + fighter.y = this.textures[i][3] + fighter.home = [this.textures[i][2], this.textures[i][3]] + this.fighters.push(fighter) + this.addChild(fighter) + } + this.moloch_face = new PIXI.Sprite(pixi_app.loader.resources.moloch_face.texture) + this.moloch_horns = new PIXI.Sprite(pixi_app.loader.resources.moloch_horns.texture) + this.moloch_face.x = 220 + this.moloch_horns.anchor.set(0.5) + + this.moloch_horns.x = 1760 + this.moloch_horns.y = 930 + + this.addChild(this.moloch_face) + this.addChild(this.moloch_horns) + this.interactive = true + this.on('mousemove', this.mousemove).on('touchmove', this.mousemove) + document.addEventListener('click', (event) => { + for (let i = 0; i < this.fighters.length; i++) { + const fighter = this.fighters[i] + const bounds = fighter.getBounds() + if (bounds.x <= event.clientX && event.clientX <= (bounds.x + bounds.width) && bounds.y <= event.clientY && event.clientY <= (bounds.y + bounds.height)) { + fighter.strike(); + } + } + }, + false + ) + setInterval(() => { + this.strike() + }, 10000) + } + strike() { + + for (let i = 0; i < this.fighters.length; i++) { + const fighter = this.fighters[i] + const rando = Math.floor(Math.random() * 2) + 1 + setTimeout(() => { + for (let j = 0; j < rando; j++) { + setTimeout(() => { + fighter.strike() + }, j * 300) + } + }, i * 30) + } + } + init() {} + mousemove(eventData) { + const moverX = mapRange(eventData.data.global.x, 0, pixi_app.renderer.width, -100, 100) + const rotator = mapRange(eventData.data.global.x, 0, pixi_app.renderer.width, -0.15, 0.15) + gsap.to(this.moloch_face, { duration: 1, x: 220 + moverX }) + gsap.to(this.moloch_horns, { duration: 10, rotation: rotator }) + } + size() {} +} diff --git a/package-lock.json b/package-lock.json index 4f7e271..b2c09ad 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,9 +18,11 @@ "ethers": "^5.5.1", "fake-tag": "^3.0.0", "framer-motion": "^4.1.11", + "gsap": "^3.9.0", "jsonwebtoken": "^8.5.1", "next": "^12.1.5", "nprogress": "^0.2.0", + "pixi.js": "^6.2.0", "react": "^17.0.2", "react-dom": "^17.0.2", "urql": "^2.1.3", @@ -2406,6 +2408,376 @@ "node": ">= 10" } }, + "node_modules/@pixi/accessibility": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/accessibility/-/accessibility-6.3.2.tgz", + "integrity": "sha512-JLDuSGITGEOmR7s0d1Wxj7a3yIp4hP6w2h6ku6iu3clE/bmVtnvhqMX1D1lhjRW/uWUfpVT4U+8CG+LgSsEZ1g==", + "peerDependencies": { + "@pixi/core": "6.3.2", + "@pixi/display": "6.3.2", + "@pixi/utils": "6.3.2" + } + }, + "node_modules/@pixi/app": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/app/-/app-6.3.2.tgz", + "integrity": "sha512-V1jnhL92OPiquXtLxUeSZiVDd1mtjRnYpBKA958w29MrIRBx3Y6dgnvsaFZGGWBvSL//WRYV23iZKVL/jRGmmQ==", + "peerDependencies": { + "@pixi/core": "6.3.2", + "@pixi/display": "6.3.2" + } + }, + "node_modules/@pixi/compressed-textures": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/compressed-textures/-/compressed-textures-6.3.2.tgz", + "integrity": "sha512-E/T9WsWcTstnCaDo3GQZUsvX2bE1tZwJ+rUVQ6ad+9MLI6mpUKJFUy5XXlnZw0uiKU5Hipi1ASPQ8/EQ7kKebA==", + "peerDependencies": { + "@pixi/constants": "6.3.2", + "@pixi/core": "6.3.2", + "@pixi/loaders": "6.3.2", + "@pixi/utils": "6.3.2" + } + }, + "node_modules/@pixi/constants": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/constants/-/constants-6.3.2.tgz", + "integrity": "sha512-sUE8QEJNl4vWUybS0YqpVUBWoOyLkr5bSj1+3mpmbWJTMVmLB2voFXo7XpSNCBlLH1SBN5flcgJlUWOCgNyATg==" + }, + "node_modules/@pixi/core": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/core/-/core-6.3.2.tgz", + "integrity": "sha512-91Fw0CbFpPtMKo5TG1wdaZGgR99lX87l15F7kgge7FM7ZR4EghLiJHU8whQ19f/UNOd8AG7mHD84lUB1VXXfoA==", + "dependencies": { + "@types/offscreencanvas": "^2019.6.4" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/pixijs" + }, + "peerDependencies": { + "@pixi/constants": "6.3.2", + "@pixi/math": "6.3.2", + "@pixi/runner": "6.3.2", + "@pixi/settings": "6.3.2", + "@pixi/ticker": "6.3.2", + "@pixi/utils": "6.3.2" + } + }, + "node_modules/@pixi/display": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/display/-/display-6.3.2.tgz", + "integrity": "sha512-D+WiM0BcyPK91RYxl7TXXVNz/5lOGs8Q6jtCMcWgTHwCXxWPOHFnNZ4KPJZpUQ7me8Tl2u+c9hfB5Oh1+17r/Q==", + "peerDependencies": { + "@pixi/math": "6.3.2", + "@pixi/settings": "6.3.2", + "@pixi/utils": "6.3.2" + } + }, + "node_modules/@pixi/extract": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/extract/-/extract-6.3.2.tgz", + "integrity": "sha512-9DT3EG5dE/+HlSsbWLZ28/+YwGzHwgOPIMLB8AHxDsWYKzDg+SDK53IUE2UIeEiV8AFHwaDT2K+/qPFUUcS0Bw==", + "peerDependencies": { + "@pixi/core": "6.3.2", + "@pixi/math": "6.3.2", + "@pixi/utils": "6.3.2" + } + }, + "node_modules/@pixi/filter-alpha": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/filter-alpha/-/filter-alpha-6.3.2.tgz", + "integrity": "sha512-EhFnGuzUnQ94tosInBlMEOtiDtTAm4ZbWtoSYrH3GP7WORCQB5asWTFsOZv/QxwEbloRbxsDOATVIwS5ZcgNOg==", + "peerDependencies": { + "@pixi/core": "6.3.2" + } + }, + "node_modules/@pixi/filter-blur": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/filter-blur/-/filter-blur-6.3.2.tgz", + "integrity": "sha512-408Z/Rc2LJRg8AaBfzStAph18G0pT3LdLowdTOqPI2s007jgT7wLr9CyWdRe6DdSmPikgnn50R3QG9YeOPWONw==", + "peerDependencies": { + "@pixi/core": "6.3.2", + "@pixi/settings": "6.3.2" + } + }, + "node_modules/@pixi/filter-color-matrix": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/filter-color-matrix/-/filter-color-matrix-6.3.2.tgz", + "integrity": "sha512-PRrQWRRUJ3qDqHhqYNcZ8H3tjXyFbIoUGdTOgB1uCNBHmzJ7Cirhs4lWYBBTvtduboUSGvLMpkv0sgFwodPw4Q==", + "peerDependencies": { + "@pixi/core": "6.3.2" + } + }, + "node_modules/@pixi/filter-displacement": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/filter-displacement/-/filter-displacement-6.3.2.tgz", + "integrity": "sha512-Bda8jY3lVBwlG1GZadYPGXQPO7O+nTt64/KTXQgLtaKB+xj6Me5L7l9IDWtkHEoUTtQK4yCsbkdqKgLKKmNFYg==", + "peerDependencies": { + "@pixi/core": "6.3.2", + "@pixi/math": "6.3.2" + } + }, + "node_modules/@pixi/filter-fxaa": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/filter-fxaa/-/filter-fxaa-6.3.2.tgz", + "integrity": "sha512-C5Ga5MJlBFoZUa5oOZEsEEByPzpa+JTRVT7+qQ01g4khU1Mnk/p8JvNm6DYUqw9Y821OR80AmHm2O+r5MkLhcQ==", + "peerDependencies": { + "@pixi/core": "6.3.2" + } + }, + "node_modules/@pixi/filter-noise": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/filter-noise/-/filter-noise-6.3.2.tgz", + "integrity": "sha512-8lZdccDdlKTNktbD+8aeYfceayV6Rzq1P6NLpbvzFZbxH6JoaaNQb2TQgU+Vl/ZcssBB+IJ8MvJZbLuWKC4CmQ==", + "peerDependencies": { + "@pixi/core": "6.3.2" + } + }, + "node_modules/@pixi/graphics": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/graphics/-/graphics-6.3.2.tgz", + "integrity": "sha512-GaykoXJr0pV0e9TB1yOcgvJf9i/fIF/cgT+DnGz82uninWMo31aFJSvhLbZOcEPQRfdHXdFfUkQAAMTICAp7+Q==", + "peerDependencies": { + "@pixi/constants": "6.3.2", + "@pixi/core": "6.3.2", + "@pixi/display": "6.3.2", + "@pixi/math": "6.3.2", + "@pixi/sprite": "6.3.2", + "@pixi/utils": "6.3.2" + } + }, + "node_modules/@pixi/interaction": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/interaction/-/interaction-6.3.2.tgz", + "integrity": "sha512-HZyflufAW1B1cQmQBvzv4IxwcHbqQ0zhHiabSVtwPUHW/nCSpw09hL+k4HR/aFyCdRI/99JcvW5QJp1ldA6OBw==", + "peerDependencies": { + "@pixi/core": "6.3.2", + "@pixi/display": "6.3.2", + "@pixi/math": "6.3.2", + "@pixi/ticker": "6.3.2", + "@pixi/utils": "6.3.2" + } + }, + "node_modules/@pixi/loaders": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/loaders/-/loaders-6.3.2.tgz", + "integrity": "sha512-kkm1pynWTslQsh+h+Tw17MdeRMQ37Ht72xiZetyWbxadRAnzj+x1I9juEKEFK62mw8K/bGBcNPhu7edgmQwkvw==", + "peerDependencies": { + "@pixi/constants": "6.3.2", + "@pixi/core": "6.3.2", + "@pixi/utils": "6.3.2" + } + }, + "node_modules/@pixi/math": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/math/-/math-6.3.2.tgz", + "integrity": "sha512-REXrCKQaT2shJ3p2Rpq1ZYV4iUeAOUFKnLN2KteQWtB5HQpB8b+w5xBGI+TcnY0FUhx92fbKPYTTvCftNZF4Jw==" + }, + "node_modules/@pixi/mesh": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/mesh/-/mesh-6.3.2.tgz", + "integrity": "sha512-zhfagRDGkJx+H4a+Im3wQbCeS0Av1FyHzvPeBXXQ7LP/giwTnvJhItlhGMwgFllNEAIB47An0ffFEe5CmTcyKw==", + "peerDependencies": { + "@pixi/constants": "6.3.2", + "@pixi/core": "6.3.2", + "@pixi/display": "6.3.2", + "@pixi/math": "6.3.2", + "@pixi/settings": "6.3.2", + "@pixi/utils": "6.3.2" + } + }, + "node_modules/@pixi/mesh-extras": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/mesh-extras/-/mesh-extras-6.3.2.tgz", + "integrity": "sha512-lODKYkoHqynMK8QxE9ttZ1D+3LnHFG13YL4Yf1W9MGgy1N9G0E5DNB8/Z1BApbRxnRPRg8fsoP2bk5Bn9boWyw==", + "peerDependencies": { + "@pixi/constants": "6.3.2", + "@pixi/core": "6.3.2", + "@pixi/math": "6.3.2", + "@pixi/mesh": "6.3.2", + "@pixi/utils": "6.3.2" + } + }, + "node_modules/@pixi/mixin-cache-as-bitmap": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/mixin-cache-as-bitmap/-/mixin-cache-as-bitmap-6.3.2.tgz", + "integrity": "sha512-Obqnf3Y2JBOtdewkaGb2oa8SDw3+JZCaOB+x0+pBqDivXpwX2eibS4PaYuGVTIa9FdcrGm9SyLOQlL5irEeEqA==", + "peerDependencies": { + "@pixi/core": "6.3.2", + "@pixi/display": "6.3.2", + "@pixi/math": "6.3.2", + "@pixi/settings": "6.3.2", + "@pixi/sprite": "6.3.2", + "@pixi/utils": "6.3.2" + } + }, + "node_modules/@pixi/mixin-get-child-by-name": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/mixin-get-child-by-name/-/mixin-get-child-by-name-6.3.2.tgz", + "integrity": "sha512-R6RJzd1aQ5up5N7uO0boOp99gkSZVEbYKofJNRn1pFdzOmuVCgSqERAv9pQnjp5bBD8JvcKN+PYHPn+k+nTprQ==", + "peerDependencies": { + "@pixi/display": "6.3.2" + } + }, + "node_modules/@pixi/mixin-get-global-position": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/mixin-get-global-position/-/mixin-get-global-position-6.3.2.tgz", + "integrity": "sha512-R7F1sH68fiIvB723doEzE0+k8OfhM5N0H+Ncp8iwLwXxfUDSHVj40nIngMtdK4bLSk29TTczOeXOzXkOAEVXhA==", + "peerDependencies": { + "@pixi/display": "6.3.2", + "@pixi/math": "6.3.2" + } + }, + "node_modules/@pixi/particle-container": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/particle-container/-/particle-container-6.3.2.tgz", + "integrity": "sha512-iEHtE2AWQ0NZxv57VzfsBbEEp5WXAt91+l2lNvXf1SbzEm/bqjE56Q5bftx9tl3MJlDmOEfPzzKSwIUcZT+T6w==", + "peerDependencies": { + "@pixi/constants": "6.3.2", + "@pixi/core": "6.3.2", + "@pixi/display": "6.3.2", + "@pixi/math": "6.3.2", + "@pixi/utils": "6.3.2" + } + }, + "node_modules/@pixi/polyfill": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/polyfill/-/polyfill-6.3.2.tgz", + "integrity": "sha512-LTKqL/de7TrBoJNh9netkQofwGBIO3NwwQbqBmP6rHXeaHBx9904Pkuf7GJspIFY09TOo5fnctYnJ1F7LfTljg==", + "dependencies": { + "object-assign": "^4.1.1", + "promise-polyfill": "^8.2.0" + } + }, + "node_modules/@pixi/prepare": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/prepare/-/prepare-6.3.2.tgz", + "integrity": "sha512-HFV0jUgr5arNBlgctTRqMCgG42vq48J9QLBCZMCRObJQC5325nEXC1toeEekdzqNcGu5bO8/GKeb6+Km2XK2qA==", + "peerDependencies": { + "@pixi/core": "6.3.2", + "@pixi/display": "6.3.2", + "@pixi/graphics": "6.3.2", + "@pixi/settings": "6.3.2", + "@pixi/text": "6.3.2", + "@pixi/ticker": "6.3.2" + } + }, + "node_modules/@pixi/runner": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/runner/-/runner-6.3.2.tgz", + "integrity": "sha512-Sspv4VTiV51GwoIg+WudHZHpT3ad5ukW20OLOR+eDOSLbgQEMfj4cTVRg27TvM/QZ/5LxeN3FqwWV+kiWpqCnw==" + }, + "node_modules/@pixi/settings": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/settings/-/settings-6.3.2.tgz", + "integrity": "sha512-i5cLDUWFnRub3LPa3x7IzkH8MjSwPHyHWzIZKG5t8RiCfbhVfhWGEdKO9AYp8yO/xcf7AqtPK4mikXziL48tXA==", + "dependencies": { + "ismobilejs": "^1.1.0" + } + }, + "node_modules/@pixi/sprite": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/sprite/-/sprite-6.3.2.tgz", + "integrity": "sha512-T1KJ8l2f8Otn6Se6h4b2pz2nrUSe59Pnmj2WIzgBisM245h7dGATs05MisMaLV6Lg/3gTBTxsLBmKsbDSQqbNw==", + "peerDependencies": { + "@pixi/constants": "6.3.2", + "@pixi/core": "6.3.2", + "@pixi/display": "6.3.2", + "@pixi/math": "6.3.2", + "@pixi/settings": "6.3.2", + "@pixi/utils": "6.3.2" + } + }, + "node_modules/@pixi/sprite-animated": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/sprite-animated/-/sprite-animated-6.3.2.tgz", + "integrity": "sha512-fSY64i5BqbOmtFKhgOWf9iML4gId7l5hcniUT/s95+eIZiyYss+jxeekVH22DrAyCOAIdsLEClvGCHGj8iXTFw==", + "peerDependencies": { + "@pixi/core": "6.3.2", + "@pixi/sprite": "6.3.2", + "@pixi/ticker": "6.3.2" + } + }, + "node_modules/@pixi/sprite-tiling": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/sprite-tiling/-/sprite-tiling-6.3.2.tgz", + "integrity": "sha512-13zsz0xyxMvobEaSXQghSD44+MpSwpbQJYjPVPb7ItqETqQBaZgHpC5uF6vxFR6Hou8Ca8laxRuwgpn3lA095g==", + "peerDependencies": { + "@pixi/constants": "6.3.2", + "@pixi/core": "6.3.2", + "@pixi/display": "6.3.2", + "@pixi/math": "6.3.2", + "@pixi/sprite": "6.3.2", + "@pixi/utils": "6.3.2" + } + }, + "node_modules/@pixi/spritesheet": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/spritesheet/-/spritesheet-6.3.2.tgz", + "integrity": "sha512-OCi2BUqcBbh2vvbrnLLBOwxFZMQS+rvjW3udBUNbbqUL+NHy74w8N5Ed8pcxXpdfHbApGG6TVJprCGahtmEfJw==", + "peerDependencies": { + "@pixi/core": "6.3.2", + "@pixi/loaders": "6.3.2", + "@pixi/math": "6.3.2", + "@pixi/utils": "6.3.2" + } + }, + "node_modules/@pixi/text": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/text/-/text-6.3.2.tgz", + "integrity": "sha512-YiPnUBmgZ0WzF0+XMm07iRg0jOyPbIjGmXJ+1srU5L9c3cCzvtg5QuYL0lPHS0Z6gyxhj/6ncePhBGO87RIKnA==", + "peerDependencies": { + "@pixi/core": "6.3.2", + "@pixi/math": "6.3.2", + "@pixi/settings": "6.3.2", + "@pixi/sprite": "6.3.2", + "@pixi/utils": "6.3.2" + } + }, + "node_modules/@pixi/text-bitmap": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/text-bitmap/-/text-bitmap-6.3.2.tgz", + "integrity": "sha512-jvMeIxoAGDlSn5rHimISI9F6fTk8D+GXG0YQraRT9oXb1Ugy/bFJph3XOTe46s4oZ5R5QeCLQmo6k7TUIvbSkA==", + "peerDependencies": { + "@pixi/constants": "6.3.2", + "@pixi/core": "6.3.2", + "@pixi/display": "6.3.2", + "@pixi/loaders": "6.3.2", + "@pixi/math": "6.3.2", + "@pixi/mesh": "6.3.2", + "@pixi/settings": "6.3.2", + "@pixi/text": "6.3.2", + "@pixi/utils": "6.3.2" + } + }, + "node_modules/@pixi/ticker": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/ticker/-/ticker-6.3.2.tgz", + "integrity": "sha512-Au9IO85zCOOCz50aJALFxJ2C8gbgxvD0dSNm7A5FauanJbxDcctIyrW6I51nNyHyeLIUFEkuD2jE/DmcXsXnpw==", + "peerDependencies": { + "@pixi/settings": "6.3.2" + } + }, + "node_modules/@pixi/utils": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/utils/-/utils-6.3.2.tgz", + "integrity": "sha512-VpB403kfqwXK9w7Qb6ex0aW0g6pWI/t43F2Z8CA/lAfYcN3O0XoxDucvmkLTQWsMtYn+Yf7YhAcLV5SemKwP0A==", + "dependencies": { + "@types/earcut": "^2.1.0", + "earcut": "^2.2.2", + "eventemitter3": "^3.1.0", + "url": "^0.11.0" + }, + "peerDependencies": { + "@pixi/constants": "6.3.2", + "@pixi/settings": "6.3.2" + } + }, + "node_modules/@pixi/utils/node_modules/eventemitter3": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz", + "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==" + }, "node_modules/@popperjs/core": { "version": "2.4.4", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.4.4.tgz", @@ -2484,6 +2856,11 @@ "@types/node": "*" } }, + "node_modules/@types/earcut": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@types/earcut/-/earcut-2.1.1.tgz", + "integrity": "sha512-w8oigUCDjElRHRRrMvn/spybSMyX8MTkKA5Dv+tS1IE/TgmNZPqUYtvYBXGY8cieSE66gm+szeK+bnbxC2xHTQ==" + }, "node_modules/@types/lodash": { "version": "4.14.168", "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.168.tgz", @@ -2502,6 +2879,11 @@ "resolved": "https://registry.npmjs.org/@types/node/-/node-15.12.2.tgz", "integrity": "sha512-zjQ69G564OCIWIOHSXyQEEDpdpGl+G348RAKY0XXy9Z5kU9Vzv1GMNnkar/ZJ8dzXB3COzD9Mo9NtRZ4xfgUww==" }, + "node_modules/@types/offscreencanvas": { + "version": "2019.6.4", + "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.6.4.tgz", + "integrity": "sha512-u8SAgdZ8ROtkTF+mfZGOscl0or6BSj9A4g37e6nvxDc+YB/oDut0wHkK2PBBiC2bNR8TS0CPV+1gAk4fNisr1Q==" + }, "node_modules/@types/parse-json": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", @@ -4044,6 +4426,11 @@ "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz", "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=" }, + "node_modules/earcut": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.3.tgz", + "integrity": "sha512-iRDI1QeCQIhMCZk48DRDMVgQSSBDmbzzNhnxIo+pwx3swkfjMh6vh0nWLq1NdvGHLKH6wIrAM3vQWeTj6qeoug==" + }, "node_modules/ecc-jsbn": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz", @@ -5210,6 +5597,11 @@ "node": "^12.22.0 || ^14.16.0 || >=16.0.0" } }, + "node_modules/gsap": { + "version": "3.10.4", + "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.10.4.tgz", + "integrity": "sha512-6QatdkKxXCMfvCW4rM++0RqyLQAzFX5nwl3yHS0XPgkZBkiSEY3VZVbMltrdtsbER/xZonLtyHt684wRp4erlQ==" + }, "node_modules/har-schema": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz", @@ -5707,6 +6099,11 @@ "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=" }, + "node_modules/ismobilejs": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/ismobilejs/-/ismobilejs-1.1.1.tgz", + "integrity": "sha512-VaFW53yt8QO61k2WJui0dHf4SlL8lxBofUuUmwBo0ljPk0Drz2TiuDW4jo3wDcv41qy/SxrJ+VAzJ/qYqsmzRw==" + }, "node_modules/isstream": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz", @@ -6813,6 +7210,52 @@ "node": ">=4" } }, + "node_modules/pixi.js": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-6.3.2.tgz", + "integrity": "sha512-XEF59IQRouXCkTSCwNrNvr08/FY3Dai4lwNdrgh5SLeS4Hmn+lNURq2auM+4lYPfsXtQdpZNdJ5iYrFwP41JvA==", + "dependencies": { + "@pixi/accessibility": "6.3.2", + "@pixi/app": "6.3.2", + "@pixi/compressed-textures": "6.3.2", + "@pixi/constants": "6.3.2", + "@pixi/core": "6.3.2", + "@pixi/display": "6.3.2", + "@pixi/extract": "6.3.2", + "@pixi/filter-alpha": "6.3.2", + "@pixi/filter-blur": "6.3.2", + "@pixi/filter-color-matrix": "6.3.2", + "@pixi/filter-displacement": "6.3.2", + "@pixi/filter-fxaa": "6.3.2", + "@pixi/filter-noise": "6.3.2", + "@pixi/graphics": "6.3.2", + "@pixi/interaction": "6.3.2", + "@pixi/loaders": "6.3.2", + "@pixi/math": "6.3.2", + "@pixi/mesh": "6.3.2", + "@pixi/mesh-extras": "6.3.2", + "@pixi/mixin-cache-as-bitmap": "6.3.2", + "@pixi/mixin-get-child-by-name": "6.3.2", + "@pixi/mixin-get-global-position": "6.3.2", + "@pixi/particle-container": "6.3.2", + "@pixi/polyfill": "6.3.2", + "@pixi/prepare": "6.3.2", + "@pixi/runner": "6.3.2", + "@pixi/settings": "6.3.2", + "@pixi/sprite": "6.3.2", + "@pixi/sprite-animated": "6.3.2", + "@pixi/sprite-tiling": "6.3.2", + "@pixi/spritesheet": "6.3.2", + "@pixi/text": "6.3.2", + "@pixi/text-bitmap": "6.3.2", + "@pixi/ticker": "6.3.2", + "@pixi/utils": "6.3.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/pixijs" + } + }, "node_modules/pngjs": { "version": "3.4.0", "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz", @@ -6903,6 +7346,11 @@ "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==" }, + "node_modules/promise-polyfill": { + "version": "8.2.3", + "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-8.2.3.tgz", + "integrity": "sha512-Og0+jCRQetV84U8wVjMNccfGCnMQ9mGs9Hv78QFe+pSDD3gWTpz0y+1QCuxy5d/vBFuZ3iwP2eycAkvqIMPmWg==" + }, "node_modules/promise-to-callback": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/promise-to-callback/-/promise-to-callback-1.0.0.tgz", @@ -7028,6 +7476,15 @@ "node": ">=0.10.0" } }, + "node_modules/querystring": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz", + "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=", + "deprecated": "The querystring API is considered Legacy. new code should use the URLSearchParams API instead.", + "engines": { + "node": ">=0.4.x" + } + }, "node_modules/randombytes": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", @@ -7974,6 +8431,15 @@ "punycode": "^2.1.0" } }, + "node_modules/url": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz", + "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=", + "dependencies": { + "punycode": "1.3.2", + "querystring": "0.2.0" + } + }, "node_modules/url-parse-lax": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz", @@ -7998,6 +8464,11 @@ "node": ">= 4" } }, + "node_modules/url/node_modules/punycode": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz", + "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=" + }, "node_modules/urql": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/urql/-/urql-2.1.3.tgz", @@ -10510,6 +10981,232 @@ "integrity": "sha512-/SoXW1Ntpmpw3AXAzfDRaQidnd8kbZ2oSni8u5z0yw6t4RwJvmdZy1eOaAADRThWKV+2oU90++LSnXJIwBRWYQ==", "optional": true }, + "@pixi/accessibility": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/accessibility/-/accessibility-6.3.2.tgz", + "integrity": "sha512-JLDuSGITGEOmR7s0d1Wxj7a3yIp4hP6w2h6ku6iu3clE/bmVtnvhqMX1D1lhjRW/uWUfpVT4U+8CG+LgSsEZ1g==", + "requires": {} + }, + "@pixi/app": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/app/-/app-6.3.2.tgz", + "integrity": "sha512-V1jnhL92OPiquXtLxUeSZiVDd1mtjRnYpBKA958w29MrIRBx3Y6dgnvsaFZGGWBvSL//WRYV23iZKVL/jRGmmQ==", + "requires": {} + }, + "@pixi/compressed-textures": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/compressed-textures/-/compressed-textures-6.3.2.tgz", + "integrity": "sha512-E/T9WsWcTstnCaDo3GQZUsvX2bE1tZwJ+rUVQ6ad+9MLI6mpUKJFUy5XXlnZw0uiKU5Hipi1ASPQ8/EQ7kKebA==", + "requires": {} + }, + "@pixi/constants": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/constants/-/constants-6.3.2.tgz", + "integrity": "sha512-sUE8QEJNl4vWUybS0YqpVUBWoOyLkr5bSj1+3mpmbWJTMVmLB2voFXo7XpSNCBlLH1SBN5flcgJlUWOCgNyATg==" + }, + "@pixi/core": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/core/-/core-6.3.2.tgz", + "integrity": "sha512-91Fw0CbFpPtMKo5TG1wdaZGgR99lX87l15F7kgge7FM7ZR4EghLiJHU8whQ19f/UNOd8AG7mHD84lUB1VXXfoA==", + "requires": { + "@types/offscreencanvas": "^2019.6.4" + } + }, + "@pixi/display": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/display/-/display-6.3.2.tgz", + "integrity": "sha512-D+WiM0BcyPK91RYxl7TXXVNz/5lOGs8Q6jtCMcWgTHwCXxWPOHFnNZ4KPJZpUQ7me8Tl2u+c9hfB5Oh1+17r/Q==", + "requires": {} + }, + "@pixi/extract": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/extract/-/extract-6.3.2.tgz", + "integrity": "sha512-9DT3EG5dE/+HlSsbWLZ28/+YwGzHwgOPIMLB8AHxDsWYKzDg+SDK53IUE2UIeEiV8AFHwaDT2K+/qPFUUcS0Bw==", + "requires": {} + }, + "@pixi/filter-alpha": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/filter-alpha/-/filter-alpha-6.3.2.tgz", + "integrity": "sha512-EhFnGuzUnQ94tosInBlMEOtiDtTAm4ZbWtoSYrH3GP7WORCQB5asWTFsOZv/QxwEbloRbxsDOATVIwS5ZcgNOg==", + "requires": {} + }, + "@pixi/filter-blur": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/filter-blur/-/filter-blur-6.3.2.tgz", + "integrity": "sha512-408Z/Rc2LJRg8AaBfzStAph18G0pT3LdLowdTOqPI2s007jgT7wLr9CyWdRe6DdSmPikgnn50R3QG9YeOPWONw==", + "requires": {} + }, + "@pixi/filter-color-matrix": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/filter-color-matrix/-/filter-color-matrix-6.3.2.tgz", + "integrity": "sha512-PRrQWRRUJ3qDqHhqYNcZ8H3tjXyFbIoUGdTOgB1uCNBHmzJ7Cirhs4lWYBBTvtduboUSGvLMpkv0sgFwodPw4Q==", + "requires": {} + }, + "@pixi/filter-displacement": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/filter-displacement/-/filter-displacement-6.3.2.tgz", + "integrity": "sha512-Bda8jY3lVBwlG1GZadYPGXQPO7O+nTt64/KTXQgLtaKB+xj6Me5L7l9IDWtkHEoUTtQK4yCsbkdqKgLKKmNFYg==", + "requires": {} + }, + "@pixi/filter-fxaa": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/filter-fxaa/-/filter-fxaa-6.3.2.tgz", + "integrity": "sha512-C5Ga5MJlBFoZUa5oOZEsEEByPzpa+JTRVT7+qQ01g4khU1Mnk/p8JvNm6DYUqw9Y821OR80AmHm2O+r5MkLhcQ==", + "requires": {} + }, + "@pixi/filter-noise": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/filter-noise/-/filter-noise-6.3.2.tgz", + "integrity": "sha512-8lZdccDdlKTNktbD+8aeYfceayV6Rzq1P6NLpbvzFZbxH6JoaaNQb2TQgU+Vl/ZcssBB+IJ8MvJZbLuWKC4CmQ==", + "requires": {} + }, + "@pixi/graphics": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/graphics/-/graphics-6.3.2.tgz", + "integrity": "sha512-GaykoXJr0pV0e9TB1yOcgvJf9i/fIF/cgT+DnGz82uninWMo31aFJSvhLbZOcEPQRfdHXdFfUkQAAMTICAp7+Q==", + "requires": {} + }, + "@pixi/interaction": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/interaction/-/interaction-6.3.2.tgz", + "integrity": "sha512-HZyflufAW1B1cQmQBvzv4IxwcHbqQ0zhHiabSVtwPUHW/nCSpw09hL+k4HR/aFyCdRI/99JcvW5QJp1ldA6OBw==", + "requires": {} + }, + "@pixi/loaders": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/loaders/-/loaders-6.3.2.tgz", + "integrity": "sha512-kkm1pynWTslQsh+h+Tw17MdeRMQ37Ht72xiZetyWbxadRAnzj+x1I9juEKEFK62mw8K/bGBcNPhu7edgmQwkvw==", + "requires": {} + }, + "@pixi/math": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/math/-/math-6.3.2.tgz", + "integrity": "sha512-REXrCKQaT2shJ3p2Rpq1ZYV4iUeAOUFKnLN2KteQWtB5HQpB8b+w5xBGI+TcnY0FUhx92fbKPYTTvCftNZF4Jw==" + }, + "@pixi/mesh": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/mesh/-/mesh-6.3.2.tgz", + "integrity": "sha512-zhfagRDGkJx+H4a+Im3wQbCeS0Av1FyHzvPeBXXQ7LP/giwTnvJhItlhGMwgFllNEAIB47An0ffFEe5CmTcyKw==", + "requires": {} + }, + "@pixi/mesh-extras": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/mesh-extras/-/mesh-extras-6.3.2.tgz", + "integrity": "sha512-lODKYkoHqynMK8QxE9ttZ1D+3LnHFG13YL4Yf1W9MGgy1N9G0E5DNB8/Z1BApbRxnRPRg8fsoP2bk5Bn9boWyw==", + "requires": {} + }, + "@pixi/mixin-cache-as-bitmap": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/mixin-cache-as-bitmap/-/mixin-cache-as-bitmap-6.3.2.tgz", + "integrity": "sha512-Obqnf3Y2JBOtdewkaGb2oa8SDw3+JZCaOB+x0+pBqDivXpwX2eibS4PaYuGVTIa9FdcrGm9SyLOQlL5irEeEqA==", + "requires": {} + }, + "@pixi/mixin-get-child-by-name": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/mixin-get-child-by-name/-/mixin-get-child-by-name-6.3.2.tgz", + "integrity": "sha512-R6RJzd1aQ5up5N7uO0boOp99gkSZVEbYKofJNRn1pFdzOmuVCgSqERAv9pQnjp5bBD8JvcKN+PYHPn+k+nTprQ==", + "requires": {} + }, + "@pixi/mixin-get-global-position": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/mixin-get-global-position/-/mixin-get-global-position-6.3.2.tgz", + "integrity": "sha512-R7F1sH68fiIvB723doEzE0+k8OfhM5N0H+Ncp8iwLwXxfUDSHVj40nIngMtdK4bLSk29TTczOeXOzXkOAEVXhA==", + "requires": {} + }, + "@pixi/particle-container": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/particle-container/-/particle-container-6.3.2.tgz", + "integrity": "sha512-iEHtE2AWQ0NZxv57VzfsBbEEp5WXAt91+l2lNvXf1SbzEm/bqjE56Q5bftx9tl3MJlDmOEfPzzKSwIUcZT+T6w==", + "requires": {} + }, + "@pixi/polyfill": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/polyfill/-/polyfill-6.3.2.tgz", + "integrity": "sha512-LTKqL/de7TrBoJNh9netkQofwGBIO3NwwQbqBmP6rHXeaHBx9904Pkuf7GJspIFY09TOo5fnctYnJ1F7LfTljg==", + "requires": { + "object-assign": "^4.1.1", + "promise-polyfill": "^8.2.0" + } + }, + "@pixi/prepare": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/prepare/-/prepare-6.3.2.tgz", + "integrity": "sha512-HFV0jUgr5arNBlgctTRqMCgG42vq48J9QLBCZMCRObJQC5325nEXC1toeEekdzqNcGu5bO8/GKeb6+Km2XK2qA==", + "requires": {} + }, + "@pixi/runner": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/runner/-/runner-6.3.2.tgz", + "integrity": "sha512-Sspv4VTiV51GwoIg+WudHZHpT3ad5ukW20OLOR+eDOSLbgQEMfj4cTVRg27TvM/QZ/5LxeN3FqwWV+kiWpqCnw==" + }, + "@pixi/settings": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/settings/-/settings-6.3.2.tgz", + "integrity": "sha512-i5cLDUWFnRub3LPa3x7IzkH8MjSwPHyHWzIZKG5t8RiCfbhVfhWGEdKO9AYp8yO/xcf7AqtPK4mikXziL48tXA==", + "requires": { + "ismobilejs": "^1.1.0" + } + }, + "@pixi/sprite": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/sprite/-/sprite-6.3.2.tgz", + "integrity": "sha512-T1KJ8l2f8Otn6Se6h4b2pz2nrUSe59Pnmj2WIzgBisM245h7dGATs05MisMaLV6Lg/3gTBTxsLBmKsbDSQqbNw==", + "requires": {} + }, + "@pixi/sprite-animated": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/sprite-animated/-/sprite-animated-6.3.2.tgz", + "integrity": "sha512-fSY64i5BqbOmtFKhgOWf9iML4gId7l5hcniUT/s95+eIZiyYss+jxeekVH22DrAyCOAIdsLEClvGCHGj8iXTFw==", + "requires": {} + }, + "@pixi/sprite-tiling": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/sprite-tiling/-/sprite-tiling-6.3.2.tgz", + "integrity": "sha512-13zsz0xyxMvobEaSXQghSD44+MpSwpbQJYjPVPb7ItqETqQBaZgHpC5uF6vxFR6Hou8Ca8laxRuwgpn3lA095g==", + "requires": {} + }, + "@pixi/spritesheet": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/spritesheet/-/spritesheet-6.3.2.tgz", + "integrity": "sha512-OCi2BUqcBbh2vvbrnLLBOwxFZMQS+rvjW3udBUNbbqUL+NHy74w8N5Ed8pcxXpdfHbApGG6TVJprCGahtmEfJw==", + "requires": {} + }, + "@pixi/text": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/text/-/text-6.3.2.tgz", + "integrity": "sha512-YiPnUBmgZ0WzF0+XMm07iRg0jOyPbIjGmXJ+1srU5L9c3cCzvtg5QuYL0lPHS0Z6gyxhj/6ncePhBGO87RIKnA==", + "requires": {} + }, + "@pixi/text-bitmap": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/text-bitmap/-/text-bitmap-6.3.2.tgz", + "integrity": "sha512-jvMeIxoAGDlSn5rHimISI9F6fTk8D+GXG0YQraRT9oXb1Ugy/bFJph3XOTe46s4oZ5R5QeCLQmo6k7TUIvbSkA==", + "requires": {} + }, + "@pixi/ticker": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/ticker/-/ticker-6.3.2.tgz", + "integrity": "sha512-Au9IO85zCOOCz50aJALFxJ2C8gbgxvD0dSNm7A5FauanJbxDcctIyrW6I51nNyHyeLIUFEkuD2jE/DmcXsXnpw==", + "requires": {} + }, + "@pixi/utils": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@pixi/utils/-/utils-6.3.2.tgz", + "integrity": "sha512-VpB403kfqwXK9w7Qb6ex0aW0g6pWI/t43F2Z8CA/lAfYcN3O0XoxDucvmkLTQWsMtYn+Yf7YhAcLV5SemKwP0A==", + "requires": { + "@types/earcut": "^2.1.0", + "earcut": "^2.2.2", + "eventemitter3": "^3.1.0", + "url": "^0.11.0" + }, + "dependencies": { + "eventemitter3": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz", + "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==" + } + } + }, "@popperjs/core": { "version": "2.4.4", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.4.4.tgz", @@ -10566,6 +11263,11 @@ "@types/node": "*" } }, + "@types/earcut": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@types/earcut/-/earcut-2.1.1.tgz", + "integrity": "sha512-w8oigUCDjElRHRRrMvn/spybSMyX8MTkKA5Dv+tS1IE/TgmNZPqUYtvYBXGY8cieSE66gm+szeK+bnbxC2xHTQ==" + }, "@types/lodash": { "version": "4.14.168", "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.168.tgz", @@ -10584,6 +11286,11 @@ "resolved": "https://registry.npmjs.org/@types/node/-/node-15.12.2.tgz", "integrity": "sha512-zjQ69G564OCIWIOHSXyQEEDpdpGl+G348RAKY0XXy9Z5kU9Vzv1GMNnkar/ZJ8dzXB3COzD9Mo9NtRZ4xfgUww==" }, + "@types/offscreencanvas": { + "version": "2019.6.4", + "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.6.4.tgz", + "integrity": "sha512-u8SAgdZ8ROtkTF+mfZGOscl0or6BSj9A4g37e6nvxDc+YB/oDut0wHkK2PBBiC2bNR8TS0CPV+1gAk4fNisr1Q==" + }, "@types/parse-json": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", @@ -11909,6 +12616,11 @@ "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz", "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=" }, + "earcut": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.3.tgz", + "integrity": "sha512-iRDI1QeCQIhMCZk48DRDMVgQSSBDmbzzNhnxIo+pwx3swkfjMh6vh0nWLq1NdvGHLKH6wIrAM3vQWeTj6qeoug==" + }, "ecc-jsbn": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz", @@ -12952,6 +13664,11 @@ "integrity": "sha512-xm+ANmA16BzCT5pLjuXySbQVFwH3oJctUVdy81w1sV0vBU0KgDdBGtxQOUd5zqOBk/JayAFeG8Dlmeq74rjm/A==", "peer": true }, + "gsap": { + "version": "3.10.4", + "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.10.4.tgz", + "integrity": "sha512-6QatdkKxXCMfvCW4rM++0RqyLQAzFX5nwl3yHS0XPgkZBkiSEY3VZVbMltrdtsbER/xZonLtyHt684wRp4erlQ==" + }, "har-schema": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz", @@ -13278,6 +13995,11 @@ "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=" }, + "ismobilejs": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/ismobilejs/-/ismobilejs-1.1.1.tgz", + "integrity": "sha512-VaFW53yt8QO61k2WJui0dHf4SlL8lxBofUuUmwBo0ljPk0Drz2TiuDW4jo3wDcv41qy/SxrJ+VAzJ/qYqsmzRw==" + }, "isstream": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz", @@ -14193,6 +14915,48 @@ "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=" }, + "pixi.js": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-6.3.2.tgz", + "integrity": "sha512-XEF59IQRouXCkTSCwNrNvr08/FY3Dai4lwNdrgh5SLeS4Hmn+lNURq2auM+4lYPfsXtQdpZNdJ5iYrFwP41JvA==", + "requires": { + "@pixi/accessibility": "6.3.2", + "@pixi/app": "6.3.2", + "@pixi/compressed-textures": "6.3.2", + "@pixi/constants": "6.3.2", + "@pixi/core": "6.3.2", + "@pixi/display": "6.3.2", + "@pixi/extract": "6.3.2", + "@pixi/filter-alpha": "6.3.2", + "@pixi/filter-blur": "6.3.2", + "@pixi/filter-color-matrix": "6.3.2", + "@pixi/filter-displacement": "6.3.2", + "@pixi/filter-fxaa": "6.3.2", + "@pixi/filter-noise": "6.3.2", + "@pixi/graphics": "6.3.2", + "@pixi/interaction": "6.3.2", + "@pixi/loaders": "6.3.2", + "@pixi/math": "6.3.2", + "@pixi/mesh": "6.3.2", + "@pixi/mesh-extras": "6.3.2", + "@pixi/mixin-cache-as-bitmap": "6.3.2", + "@pixi/mixin-get-child-by-name": "6.3.2", + "@pixi/mixin-get-global-position": "6.3.2", + "@pixi/particle-container": "6.3.2", + "@pixi/polyfill": "6.3.2", + "@pixi/prepare": "6.3.2", + "@pixi/runner": "6.3.2", + "@pixi/settings": "6.3.2", + "@pixi/sprite": "6.3.2", + "@pixi/sprite-animated": "6.3.2", + "@pixi/sprite-tiling": "6.3.2", + "@pixi/spritesheet": "6.3.2", + "@pixi/text": "6.3.2", + "@pixi/text-bitmap": "6.3.2", + "@pixi/ticker": "6.3.2", + "@pixi/utils": "6.3.2" + } + }, "pngjs": { "version": "3.4.0", "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz", @@ -14254,6 +15018,11 @@ "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==" }, + "promise-polyfill": { + "version": "8.2.3", + "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-8.2.3.tgz", + "integrity": "sha512-Og0+jCRQetV84U8wVjMNccfGCnMQ9mGs9Hv78QFe+pSDD3gWTpz0y+1QCuxy5d/vBFuZ3iwP2eycAkvqIMPmWg==" + }, "promise-to-callback": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/promise-to-callback/-/promise-to-callback-1.0.0.tgz", @@ -14362,6 +15131,11 @@ "strict-uri-encode": "^1.0.0" } }, + "querystring": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz", + "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=" + }, "randombytes": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", @@ -15070,6 +15844,22 @@ "punycode": "^2.1.0" } }, + "url": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz", + "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=", + "requires": { + "punycode": "1.3.2", + "querystring": "0.2.0" + }, + "dependencies": { + "punycode": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz", + "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=" + } + } + }, "url-parse-lax": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz", diff --git a/package.json b/package.json index 92da235..b80612a 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,8 @@ "react-dom": "^17.0.2", "urql": "^2.1.3", "web3": "^1.6.1", - "web3modal": "^1.9.4" + "web3modal": "^1.9.4", + "gsap": "^3.9.0", + "pixi.js": "^6.2.0" } } diff --git a/pages/index.js b/pages/index.js index 5e81669..6deef85 100644 --- a/pages/index.js +++ b/pages/index.js @@ -9,6 +9,12 @@ import { SectionFour } from '../views/landing/SectionFour'; import { SectionFive } from '../views/landing/SectionFive'; import { SectionSix } from '../views/landing/SectionSix'; import { Footer } from '../shared/Footer'; +import { Animation } from '../views/animation/animation'; + +const wrapper_style = { + position: 'relative', + zIndex: 100, +} export default function Home() { const [windowWidth, setWindowWidth] = useState(''); @@ -22,26 +28,21 @@ export default function Home() { }, []); return ( - + +
+ + + + + + - - - - - - - - {windowWidth > 500 && ( - - )} + {windowWidth > 500 && } -
+
+
+ - ); + ) } diff --git a/public/animation/img/clouds.png b/public/animation/img/clouds.png new file mode 100644 index 0000000..9931338 Binary files /dev/null and b/public/animation/img/clouds.png differ diff --git a/public/animation/img/moloch-scene.png b/public/animation/img/moloch-scene.png new file mode 100644 index 0000000..c854f26 Binary files /dev/null and b/public/animation/img/moloch-scene.png differ diff --git a/public/animation/img/moloch__eyes-color.png b/public/animation/img/moloch__eyes-color.png new file mode 100644 index 0000000..9485bf6 Binary files /dev/null and b/public/animation/img/moloch__eyes-color.png differ diff --git a/public/animation/img/moloch__face_2-color.png b/public/animation/img/moloch__face_2-color.png new file mode 100644 index 0000000..1127520 Binary files /dev/null and b/public/animation/img/moloch__face_2-color.png differ diff --git a/public/animation/img/moloch__horns.png b/public/animation/img/moloch__horns.png new file mode 100644 index 0000000..152585c Binary files /dev/null and b/public/animation/img/moloch__horns.png differ diff --git a/public/animation/img/raid__fantasy__purple.png b/public/animation/img/raid__fantasy__purple.png new file mode 100644 index 0000000..8c00409 Binary files /dev/null and b/public/animation/img/raid__fantasy__purple.png differ diff --git a/public/animation/img/raid__fantasy__red.png b/public/animation/img/raid__fantasy__red.png new file mode 100644 index 0000000..ead54db Binary files /dev/null and b/public/animation/img/raid__fantasy__red.png differ diff --git a/public/animation/img/raid__fantasy__silver.png b/public/animation/img/raid__fantasy__silver.png new file mode 100644 index 0000000..d1cec98 Binary files /dev/null and b/public/animation/img/raid__fantasy__silver.png differ diff --git a/public/animation/img/raid__fantasy__yellow.png b/public/animation/img/raid__fantasy__yellow.png new file mode 100644 index 0000000..6a9a5c8 Binary files /dev/null and b/public/animation/img/raid__fantasy__yellow.png differ diff --git a/public/animation/img/raid__valhalla.png b/public/animation/img/raid__valhalla.png new file mode 100644 index 0000000..7a4a409 Binary files /dev/null and b/public/animation/img/raid__valhalla.png differ diff --git a/public/animation/img/red_archer-color.png b/public/animation/img/red_archer-color.png new file mode 100644 index 0000000..0978721 Binary files /dev/null and b/public/animation/img/red_archer-color.png differ diff --git a/public/animation/img/red_archer_2-color.png b/public/animation/img/red_archer_2-color.png new file mode 100644 index 0000000..6887ae2 Binary files /dev/null and b/public/animation/img/red_archer_2-color.png differ diff --git a/public/animation/img/red_sticks-color.png b/public/animation/img/red_sticks-color.png new file mode 100644 index 0000000..e311775 Binary files /dev/null and b/public/animation/img/red_sticks-color.png differ diff --git a/public/animation/img/red_sticks_2-color.png b/public/animation/img/red_sticks_2-color.png new file mode 100644 index 0000000..451dd4b Binary files /dev/null and b/public/animation/img/red_sticks_2-color.png differ diff --git a/public/animation/img/red_sword-color.png b/public/animation/img/red_sword-color.png new file mode 100644 index 0000000..2aa5eb1 Binary files /dev/null and b/public/animation/img/red_sword-color.png differ diff --git a/public/animation/img/red_sword_2-color.png b/public/animation/img/red_sword_2-color.png new file mode 100644 index 0000000..488ceb0 Binary files /dev/null and b/public/animation/img/red_sword_2-color.png differ diff --git a/public/animation/img/red_warrior-color.png b/public/animation/img/red_warrior-color.png new file mode 100644 index 0000000..5e4dbaf Binary files /dev/null and b/public/animation/img/red_warrior-color.png differ diff --git a/public/animation/img/red_warrior_2-color.png b/public/animation/img/red_warrior_2-color.png new file mode 100644 index 0000000..e618c49 Binary files /dev/null and b/public/animation/img/red_warrior_2-color.png differ diff --git a/public/animation/img/red_wizard-color.png b/public/animation/img/red_wizard-color.png new file mode 100644 index 0000000..b2d2b43 Binary files /dev/null and b/public/animation/img/red_wizard-color.png differ diff --git a/public/animation/img/red_wizard_2-color.png b/public/animation/img/red_wizard_2-color.png new file mode 100644 index 0000000..942d6b4 Binary files /dev/null and b/public/animation/img/red_wizard_2-color.png differ diff --git a/public/animation/img/spray_circ.png b/public/animation/img/spray_circ.png new file mode 100644 index 0000000..6b3d5ac Binary files /dev/null and b/public/animation/img/spray_circ.png differ diff --git a/views/animation/animation.js b/views/animation/animation.js new file mode 100644 index 0000000..f71f6f4 --- /dev/null +++ b/views/animation/animation.js @@ -0,0 +1,23 @@ +import React, { useRef, useEffect } from 'react' +// import * as PIXI from 'pixi.js' +const styles = { + position: 'fixed', + top: 0, + left: 0, + width: '100vw', + zIndex: 1, +} + +export const Animation = () => { + const canvas = useRef(null) + + useEffect(async () => { + if (!process.browser) return + const pixi_app = (await import('../../animation/base/pixi_app')).default + canvas.current.appendChild(pixi_app.view) + return () => { + pixi_app.destroy(true, true) + } + }, []) + return
+} diff --git a/views/landing/SectionFour.jsx b/views/landing/SectionFour.jsx index dd5a195..aeb05e0 100644 --- a/views/landing/SectionFour.jsx +++ b/views/landing/SectionFour.jsx @@ -16,7 +16,7 @@ export const SectionFour = () => { return ( diff --git a/views/landing/SectionOne.jsx b/views/landing/SectionOne.jsx index 133ea06..03e23a3 100644 --- a/views/landing/SectionOne.jsx +++ b/views/landing/SectionOne.jsx @@ -1,6 +1,7 @@ import { Flex, SimpleGrid, Box } from '@chakra-ui/react'; import Link from 'next/link'; import Image from 'next/image'; +import styled from '@emotion/styled' import { Header } from '../../shared/Header'; @@ -10,64 +11,127 @@ import { StyledPrimaryHeading } from '../../themes/styled'; -import raidBanner from '../../public/assets/illustrations/raid__banner.webp'; + +const StyledAnimationReferenceElement = styled('div')` + width: 550px; + position: relative; + > div { + width: 100%; + padding-bottom: 114%; + } + #raid-banner-placeholder { + position: absolute; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + @media only screen and (max-width: 600px) { + width: 80%; + margin: 0 auto; + } + + .lds-ellipsis { + display: inline-block; + position: relative; + width: 80px; + height: 80px; + opacity: 0.3; + } + .lds-ellipsis div { + position: absolute; + top: 33px; + width: 10px; + height: 10px; + border-radius: 50%; + background: #ff3864; + animation-timing-function: cubic-bezier(0, 1, 1, 0); + } + .lds-ellipsis div:nth-child(1) { + left: 8px; + animation: lds-ellipsis1 0.6s infinite; + } + .lds-ellipsis div:nth-child(2) { + left: 8px; + animation: lds-ellipsis2 0.6s infinite; + } + .lds-ellipsis div:nth-child(3) { + left: 32px; + animation: lds-ellipsis2 0.6s infinite; + } + .lds-ellipsis div:nth-child(4) { + left: 56px; + animation: lds-ellipsis3 0.6s infinite; + } + @keyframes lds-ellipsis1 { + 0% { + transform: scale(0); + } + 100% { + transform: scale(1); + } + } + @keyframes lds-ellipsis3 { + 0% { + transform: scale(1); + } + 100% { + transform: scale(0); + } + } + @keyframes lds-ellipsis2 { + 0% { + transform: translate(0, 0); + } + 100% { + transform: translate(24px, 0); + } + } +` export const SectionOne = ({ windowWidth }) => { return (
- - - - A Decentralized Collective of Mercenaries Ready to Slay Your Web3 - Product Demons. + + + + A Decentralized Collective of Mercenaries Ready to Slay Your Web3 Product Demons. - - - + + + Hire Us - - + + Join Us - - raid-banner - + +
+
+
+
+
+
+
{' '} +
+
+ - ); + ) }; diff --git a/views/landing/SectionTwo.jsx b/views/landing/SectionTwo.jsx index 89e4fc7..585b63e 100644 --- a/views/landing/SectionTwo.jsx +++ b/views/landing/SectionTwo.jsx @@ -7,7 +7,21 @@ import { StyledBodyText } from '../../themes/styled'; -import raidFantasy from '../../public/assets/illustrations/raid__fantasy.webp'; +import styled from '@emotion/styled' + +const StyledAnimationReferenceElement = styled('div')` + width: 400px; + margin-left: -5%; + + > div { + width: 100%; + padding-bottom: 146%; + margin-left: 5%; + } + @media only screen and (max-width: 600px) { + width: 250px; + } +` export const SectionTwo = () => { return ( @@ -19,9 +33,8 @@ export const SectionTwo = () => { mb='0' placeItems='center' > - - raid fantasy - +
+ Manifesto