From cb39e71b3b53c4fbaa13227ae484f0790318d095 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Tue, 17 May 2022 12:23:17 +0300
Subject: [PATCH] style: vote button shake effect, radial fill

---
 src/Components/VoteButton/VoteButton.tsx    | 50 ++++++++++-----
 src/Components/VoteButton/styles.module.css | 68 +++++++++++++++++++--
 2 files changed, 98 insertions(+), 20 deletions(-)

diff --git a/src/Components/VoteButton/VoteButton.tsx b/src/Components/VoteButton/VoteButton.tsx
index 8880e0f..1cb1c20 100644
--- a/src/Components/VoteButton/VoteButton.tsx
+++ b/src/Components/VoteButton/VoteButton.tsx
@@ -1,7 +1,6 @@
 import { MdLocalFireDepartment } from 'react-icons/md'
 import Button from 'src/Components/Button/Button'
 import { useAppSelector, usePressHolder } from 'src/utils/hooks'
-import _throttle from 'lodash.throttle'
 import { ComponentProps, useRef, useState } from 'react'
 import styles from './styles.module.css'
 import { random, randomItem } from 'src/utils/helperFunctions'
@@ -21,8 +20,9 @@ interface Particle {
 type Props = {
     initVotes: number,
     onVote: (Vote: number) => void,
-    fillType: 'leftRight' | 'upDown' | "background"
+    fillType: 'leftRight' | 'upDown' | "background" | 'radial'
     disableCounter?: boolean
+    disableShake?: boolean
 } & Omit<ComponentProps<typeof Button>, 'children'>
 
 export default function VoteButton({
@@ -123,29 +123,47 @@ export default function VoteButton({
             onTouchStart={handlePressDown}
             onTouchEnd={handlePressUp}
 
-            color='none'
-            className={`p-10 rounded-lg text-gray-600 !border-0 bg-white hover:bg-gray-50  relative  noselect active:scale-95`}
+            className={`${styles.vote_button} relative  noselect border-0`}
+            style={{
+                "--increments": incrementsCount,
+                "--offset": `${(incrementsCount ? (incrementsCount % 5 === 0 ? 5 : incrementsCount % 5) : 0) * 20}%`,
+                "--bg-color": fillType !== 'background' ?
+                    'hsl(0deg 86% max(calc((93 - var(--increments) / 3) * 1%), 68%))'
+                    :
+                    "hsl(0deg 86% max(calc((100 - var(--increments) / 2) * 1%), 68%))",
+            } as any}
             {...props}
         >
+
             <div
                 className={`
+                ${styles.btn_content} 
+                relative p-10 rounded-lg text-gray-600 bg-white hover:bg-gray-50 
+                 ${incrementsCount && 'outline'} active:outline outline-1 outline-red-500  `}
+                onClick={e => {
+                    const btn = e.currentTarget
+                    if (btn.classList.contains(styles.clicked_2)) {
+                        btn.classList.remove(styles.clicked_2)
+                        btn.classList.add(styles.clicked_1)
+                    } else {
+                        btn.classList.remove(styles.clicked_1)
+                        btn.classList.add(styles.clicked_2)
+                    }
+                }}
+            >
+                <div
+                    className={`
                 ${styles.color_overlay}
                 ${fillType === 'upDown' && styles.color_overlay__upDown}
                 ${fillType === 'leftRight' && styles.color_overlay__leftRight}
                 ${fillType === 'background' && styles.color_overlay__background}
+                ${fillType === 'radial' && styles.color_overlay__radial}
                 `}
-                style={{
-                    "--increments": incrementsCount,
-                    "--offset": `${(incrementsCount ? (incrementsCount % 5 === 0 ? 5 : incrementsCount % 5) : 0) * 20}%`,
-                    "--bg-color": fillType !== 'background' ?
-                        'hsl(0deg 86% max(calc((93 - var(--increments) / 3) * 1%), 68%))'
-                        :
-                        "hsl(0deg 86% max(calc((100 - var(--increments) / 2) * 1%), 68%))",
-                } as any}
-            >
-            </div>
-            <div className={`relative z-10 ${incrementsCount ? "text-red-600" : "text-gray-600"}`}>
-                <MdLocalFireDepartment className='' /><span className="align-middle"> {initVotes + voteCnt}</span>
+                >
+                </div>
+                <div className={`relative z-10 ${incrementsCount ? "text-red-600" : "text-gray-600"}`}>
+                    <MdLocalFireDepartment className='' /><span className="align-middle"> {initVotes + voteCnt}</span>
+                </div>
             </div>
             {increments.map(increment => <span
                 key={increment.id}
diff --git a/src/Components/VoteButton/styles.module.css b/src/Components/VoteButton/styles.module.css
index 5bf9509..2bed088 100644
--- a/src/Components/VoteButton/styles.module.css
+++ b/src/Components/VoteButton/styles.module.css
@@ -1,9 +1,56 @@
 .vote_button {
   --scale: 0;
+  --increments: 0;
+  --offset: 0;
+  --bg-color: hsl(0deg 86% max(calc((93 - var(--increments) / 3) * 1%), 68%));
   /* transition: background-color 1s; */
   /* background-color: hsl(25, 100%, max(calc((95 - var(--scale) / 4) * 1%), 63%)); */
 }
 
+.btn_content.clicked_1 {
+  animation: shake_1 0.2s 1 ease-out;
+}
+/* Same animation, two classes so that the animation restarts between clicks */
+.btn_content.clicked_2 {
+  animation: shake_2 0.2s 1 ease-out;
+}
+
+@keyframes shake_1 {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  33% {
+    transform: rotate(calc(clamp(10, var(--increments) / 2, 30) * 1deg));
+  }
+
+  66% {
+    transform: rotate(calc(-1 * clamp(10, var(--increments) / 2, 30) * 1deg));
+  }
+
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+@keyframes shake_2 {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  33% {
+    transform: rotate(calc(clamp(10, var(--increments) / 2, 30) * 1deg));
+  }
+
+  66% {
+    transform: rotate(calc(-1 * clamp(10, var(--increments) / 2, 30) * 1deg));
+  }
+
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
 .vote_counter {
   position: absolute;
   left: 50%;
@@ -17,14 +64,11 @@
 }
 
 .color_overlay {
-  --increments: 0;
-  --offset: 0;
-  --bg-color: hsl(0deg 86% max(calc((93 - var(--increments) / 3) * 1%), 68%));
-
   position: absolute;
   border-radius: inherit;
   inset: 0;
   overflow: hidden;
+  transition: all 0.1s;
 }
 
 .color_overlay::before {
@@ -52,6 +96,22 @@
   transform: translateY(calc(-1 * var(--offset)));
 }
 
+@property --offset {
+  syntax: "<number>"; /* <- defined as type number for the transition to work */
+  initial-value: 0%;
+  inherits: false;
+}
+
+.color_overlay__radial::before {
+  top: 0;
+  right: 0;
+  background: radial-gradient(
+    circle at center,
+    var(--bg-color) var(--offset),
+    transparent calc(var(--offset) * 1.1)
+  );
+}
+
 @keyframes fly_value {
   0% {
     transform: translate(-50%, 0) scale(0.5);