Make orb selection instant per OMSI request (#1123)

hackoregon · Oct 28, 2019 · da949e1 · da949e1
1 parent 4fabdba
commit da949e1
Showing 1 changed file with 14 additions and 27 deletions.
diff --git a/packages/2019-disaster-game/src/components/atoms/Orb.js b/packages/2019-disaster-game/src/components/atoms/Orb.js
@@ -36,7 +36,7 @@ const defaultState = {
   hasAnimated: false
 };
 
-const pressSuccessDuration = 1;
+const pressSuccessDuration = 0.5;
 
 export default class Orb extends PureComponent {
   constructor(props) {
@@ -75,21 +75,16 @@ export default class Orb extends PureComponent {
   }
 
   incrementGauge = () => {
-    const timer = setTimeout(() => {
-      const { isActive } = this.state;
-      if (isActive) {
-        this.setState({ isComplete: true });
-        clearTimeout(timer);
-      } else {
-        this.setState({ isActive: false });
-        clearTimeout(timer);
-      }
-    }, pressSuccessDuration * 1000);
+    const { isActive } = this.state;
+    if (isActive) {
+      this.setState({ isComplete: true });
+    }
   };
 
-  handleOrbPress = () => {
+  handleOrbRelease = () => {
     const { isComplete } = this.state;
     const { orbId, setOrbTouched } = this.props;
+
     // if already pressed, do nothing
     if (isComplete) return;
 
@@ -99,12 +94,6 @@ export default class Orb extends PureComponent {
     setOrbTouched(orbId, true);
   };
 
-  handleOrbRelease = () => {
-    this.setState({ isActive: false });
-    const { orbId, setOrbTouched } = this.props;
-    setOrbTouched(orbId, false);
-  };
-
   render() {
     const { isActive, isComplete } = this.state;
     // eslint-disable-next-line no-unused-vars
@@ -121,8 +110,7 @@ export default class Orb extends PureComponent {
 
       &.circle-complete-item-style {
         transition: filter 0.5s ease-in-out;
-        transition: opacity 3s cubic-bezier(0.95, 0.05, 0.795, 0.035);
-        // filter: grayscale(100%);
+        transition: opacity 2s cubic-bezier(0.95, 0.05, 0.795, 0.035);
         opacity: 0;
       }
     `;
@@ -138,8 +126,7 @@ export default class Orb extends PureComponent {
 
       &.circle-complete-item-style {
         transition: filter 0.5s ease-in-out;
-        transition: opacity 3s cubic-bezier(0.95, 0.05, 0.795, 0.035);
-        // filter: grayscale(100%);
+        transition: opacity 2s cubic-bezier(0.95, 0.05, 0.795, 0.035);
         opacity: 0;
       }
     `;
@@ -149,18 +136,17 @@ export default class Orb extends PureComponent {
     if (isComplete) orbClass = "circle-complete-item-style";
 
     /* eslint-disable jsx-a11y/no-static-element-interactions */
+    /* eslint-disable jsx-a11y/click-events-have-key-events */
     return (
       <div
         ref={this.orbRef}
         css={css`
           ${orbContainerStyle};
           ${sizeStyle};
         `}
-        onMouseDown={this.handleOrbPress}
-        onMouseUp={this.handleOrbRelease}
-        onMouseLeave={this.handleOrbRelease}
-        onTouchStart={this.handleOrbPress}
-        onTouchEnd={this.handleOrbRelease}
+        onMouseDown={this.handleOrbRelease}
+        onTouchStart={this.handleOrbRelease}
+        onClick={this.handleOrbRelease}
       >
         <div css={absoluteStyle} className={orbClass}>
           <RadialGauge
@@ -181,6 +167,7 @@ export default class Orb extends PureComponent {
       </div>
     );
     /* eslint-enable jsx-a11y/no-static-element-interactions */
+    /* eslint-enable jsx-a11y/click-events-have-key-events */
   }
 }