From 42f4c2e4072775d9e2b4bb43c8be81a287584e93 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Thu, 20 Aug 2020 05:29:03 -0230 Subject: [PATCH] MetaMask mascot support for provided directions targets and toggling followMouse (#9166) * MetaMask mascot support for provided directions targets and toggling followMouse * Fixes for mascot.component.js * Update metamask-logo version to 2.4.0 * Lint fix * Fix mouse follow updating Co-authored-by: Mark Stacey * Improve mascot story name Co-authored-by: Mark Stacey * Update package.json Co-authored-by: Mark Stacey * Lint fix Co-authored-by: Mark Stacey --- package.json | 2 +- .../components/ui/mascot/mascot.component.js | 51 +++++++++- ui/app/components/ui/mascot/mascot.stories.js | 98 +++++++++++++++++++ yarn.lock | 8 +- 4 files changed, 152 insertions(+), 7 deletions(-) create mode 100644 ui/app/components/ui/mascot/mascot.stories.js diff --git a/package.json b/package.json index f7efb8c73..76a051acf 100644 --- a/package.json +++ b/package.json @@ -127,7 +127,7 @@ "lodash": "^4.17.19", "loglevel": "^1.4.1", "luxon": "^1.24.1", - "metamask-logo": "^2.1.4", + "metamask-logo": "^2.4.1", "multihashes": "^0.4.12", "nanoid": "^2.1.6", "nonce-tracker": "^1.0.0", diff --git a/ui/app/components/ui/mascot/mascot.component.js b/ui/app/components/ui/mascot/mascot.component.js index db2037cdf..8768f92b7 100644 --- a/ui/app/components/ui/mascot/mascot.component.js +++ b/ui/app/components/ui/mascot/mascot.component.js @@ -3,20 +3,43 @@ import React, { createRef, Component } from 'react' import metamaskLogo from 'metamask-logo' import { debounce } from 'lodash' +const directionTargetGenerator = ({ top, left, height, width }) => { + const horizontalMiddle = left + (width / 2) + const verticalMiddle = top + (height / 2) + return { + up: { x: horizontalMiddle, y: top - height }, + down: { x: horizontalMiddle, y: top + (height * 2) }, + left: { x: left - width, y: verticalMiddle }, + right: { x: left + (width * 2), y: verticalMiddle }, + middle: { x: horizontalMiddle, y: verticalMiddle }, + } +} + export default class Mascot extends Component { static propTypes = { animationEventEmitter: PropTypes.object.isRequired, width: PropTypes.string, height: PropTypes.string, + followMouse: PropTypes.bool, + lookAtTarget: PropTypes.object, + lookAtDirection: PropTypes.oneOf(['up', 'down', 'left', 'right', 'middle']), + } + + static defaultProps = { + width: '200', + height: '200', + followMouse: true, + lookAtTarget: {}, + lookAtDirection: '', } constructor (props) { super(props) - const { width = '200', height = '200' } = props + const { width, height, followMouse } = props this.logo = metamaskLogo({ - followMouse: true, + followMouse, pxNotRatio: true, width, height, @@ -46,6 +69,30 @@ export default class Mascot extends Component { componentDidMount () { this.mascotContainer.current.appendChild(this.logo.container) + this.directionTargetMap = directionTargetGenerator(this.mascotContainer.current.getBoundingClientRect()) + + const { lookAtTarget, lookAtDirection } = this.props + + if (lookAtTarget?.x && lookAtTarget?.y) { + this.logo.lookAtAndRender(lookAtTarget) + } else if (lookAtDirection) { + this.logo.lookAtAndRender(this.directionTargetMap[lookAtDirection]) + } + } + + componentDidUpdate (prevProps) { + const { lookAtTarget: prevTarget = {}, lookAtDirection: prevDirection = '', followMouse: prevFollowMouse } = prevProps + const { lookAtTarget = {}, followMouse, lookAtDirection } = this.props + + if (lookAtDirection && prevDirection !== lookAtDirection) { + this.logo.lookAtAndRender(this.directionTargetMap[lookAtDirection]) + } else if (lookAtTarget?.x !== prevTarget?.x || lookAtTarget?.y !== prevTarget?.y) { + this.logo.lookAtAndRender(lookAtTarget) + } + if (prevFollowMouse !== followMouse) { + this.unfollowMouse() + followMouse && this.refollowMouse() + } } componentWillUnmount () { diff --git a/ui/app/components/ui/mascot/mascot.stories.js b/ui/app/components/ui/mascot/mascot.stories.js new file mode 100644 index 000000000..0ce1ab09a --- /dev/null +++ b/ui/app/components/ui/mascot/mascot.stories.js @@ -0,0 +1,98 @@ +import EventEmitter from 'events' +import React, { useState } from 'react' +import Button from '../button' +import ButtonGroup from '../button-group' +import Mascot from './mascot.component' + +const animationEventEmitter = new EventEmitter() + +const containerStyle = { + height: '600px', + width: '357px', + border: '1px solid black', + display: 'flex', + flexFlow: 'column', + justifyContent: 'center', + alignItems: 'center', +} + +const buttonStyle = { + marginTop: '16px', +} + +export default { + title: 'Mascot', +} + +export function Demo () { + const [lookAtDirection, setLookAtDirection] = useState(null) + const [followMouseMode, setFollowMouseMode] = useState(false) + const [clickToLookMode, setClickToLookMode] = useState(false) + const [clickedTarget, setClickedTarget] = useState(null) + + const createDirectionOnClick = (direction) => () => { + setFollowMouseMode(false) + setClickToLookMode(false) + setLookAtDirection(direction) + } + + return ( +
{ + const isButtonClick = event.target.classList.contains('button-group__button') + if (clickToLookMode && !isButtonClick) { + setLookAtDirection(null) + setClickedTarget({ x: event.clientX, y: event.clientY }) + } + }} + > + +
+ + + + + + + + + +
+
+ ) +} diff --git a/yarn.lock b/yarn.lock index b7398dd72..bc5b64645 100644 --- a/yarn.lock +++ b/yarn.lock @@ -18044,10 +18044,10 @@ mersenne-twister@^1.0.1, mersenne-twister@^1.1.0: resolved "https://registry.yarnpkg.com/mersenne-twister/-/mersenne-twister-1.1.0.tgz#f916618ee43d7179efcf641bec4531eb9670978a" integrity sha1-+RZhjuQ9cXnvz2Qb7EUx65Zwl4o= -metamask-logo@^2.1.4: - version "2.1.4" - resolved "https://registry.yarnpkg.com/metamask-logo/-/metamask-logo-2.1.4.tgz#0612b2b0ffc7eeb6be480c310785426ad9599e3c" - integrity sha512-hg/FzMfijpzGgLdZWH+KJKS56cRYaMEwcOq8UcnL/MznpgK4OMlJEaIfO8lg7P2F4Z74Ki+ulrTrFW6jf9L2bw== +metamask-logo@^2.4.1: + version "2.4.1" + resolved "https://registry.yarnpkg.com/metamask-logo/-/metamask-logo-2.4.1.tgz#7b51456358e2d8b4576a1487640b7da304ddae87" + integrity sha512-JPMCLs/p3RTL/pLpbofV69kPn/AKJrpIdtFBZd9d+3p3f/HydT9tply2SWBr+8RjnsUaNmUoaBBZilvlPzcTDg== dependencies: gl-mat4 "1.1.4" gl-vec3 "1.0.3"