From 5924982a9b47a85f9f80015f0ba94bb0a5267533 Mon Sep 17 00:00:00 2001 From: colbr Date: Wed, 4 Sep 2024 15:53:08 +0200 Subject: [PATCH 01/14] chore: add MEOWs feature flag --- src/lib/feature-flags.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/lib/feature-flags.ts b/src/lib/feature-flags.ts index 08d1bbd45..a45c20e13 100644 --- a/src/lib/feature-flags.ts +++ b/src/lib/feature-flags.ts @@ -129,6 +129,14 @@ export class FeatureFlags { set enableAddWallets(value: boolean) { this._setBoolean('enableAddWallets', value); } + + get enableMeows() { + return this._getBoolean('enableMeows', false); + } + + set enableMeows(value: boolean) { + this._setBoolean('enableMeows', value); + } } export const featureFlags = new FeatureFlags(); From 4c9433d02dd14fe74d57f78928d3f17dc37e2bcf Mon Sep 17 00:00:00 2001 From: colbr Date: Wed, 4 Sep 2024 16:01:35 +0200 Subject: [PATCH 02/14] feat: add simple MEOW action --- .../messenger/feed/components/post/index.tsx | 5 +++++ .../messenger/feed/components/post/meow-action.tsx | 14 ++++++++++++++ 2 files changed, 19 insertions(+) create mode 100644 src/components/messenger/feed/components/post/meow-action.tsx diff --git a/src/components/messenger/feed/components/post/index.tsx b/src/components/messenger/feed/components/post/index.tsx index 34f312174..6fa80f0f9 100644 --- a/src/components/messenger/feed/components/post/index.tsx +++ b/src/components/messenger/feed/components/post/index.tsx @@ -1,9 +1,11 @@ import { Name, Post as ZUIPost } from '@zero-tech/zui/components/Post'; import { Timestamp } from '@zero-tech/zui/components/Post/components/Timestamp'; import { Avatar } from '@zero-tech/zui/components'; +import { MeowAction } from './meow-action'; import styles from './styles.module.scss'; import { useMemo } from 'react'; +import { featureFlags } from '../../../../../lib/feature-flags'; export interface PostProps { avatarUrl?: string; @@ -14,6 +16,8 @@ export interface PostProps { } export const Post = ({ avatarUrl, text, nickname, author, timestamp }: PostProps) => { + const isMeowsEnabled = featureFlags.enableMeows; + const multilineText = useMemo( () => text.split('\n').map((line, index) => ( @@ -49,6 +53,7 @@ export const Post = ({ avatarUrl, text, nickname, author, timestamp }: PostProps } options={} + actions={isMeowsEnabled && } /> ); diff --git a/src/components/messenger/feed/components/post/meow-action.tsx b/src/components/messenger/feed/components/post/meow-action.tsx new file mode 100644 index 000000000..4be8c53ad --- /dev/null +++ b/src/components/messenger/feed/components/post/meow-action.tsx @@ -0,0 +1,14 @@ +import { Action } from '@zero-tech/zui/components/Post'; + +export const MeowAction = () => { + return ( + + + + + + ); +}; From af66368b10f99ac0732e680058f0f93e3257b9ca Mon Sep 17 00:00:00 2001 From: colbr Date: Wed, 4 Sep 2024 17:18:58 +0200 Subject: [PATCH 03/14] feat: click and hold MEOW --- .../feed/components/post/meow-action.tsx | 86 +++++++++++++++++-- 1 file changed, 78 insertions(+), 8 deletions(-) diff --git a/src/components/messenger/feed/components/post/meow-action.tsx b/src/components/messenger/feed/components/post/meow-action.tsx index 4be8c53ad..365cdffa7 100644 --- a/src/components/messenger/feed/components/post/meow-action.tsx +++ b/src/components/messenger/feed/components/post/meow-action.tsx @@ -1,14 +1,84 @@ +import { useRef, useState } from 'react'; +import { motion, useSpring } from 'framer-motion'; import { Action } from '@zero-tech/zui/components/Post'; +interface MeowActionConfig { + increments: number; + options: number; + msBetweenIncrements: number; +} + +const CONFIG: MeowActionConfig = { + increments: 10, + options: 3, + msBetweenIncrements: 1000, +}; + +const MAX = CONFIG.increments * CONFIG.options; + export const MeowAction = () => { + const { amount, stop, start, scale } = useMeowAction(); + return ( - - - - - + + + + + + {amount && {amount}} + + ); }; + +const useMeowAction = () => { + const intervalRef = useRef(null); + const [amount, setAmount] = useState(null); + const scale = useSpring(1, { stiffness: 300, damping: 7 }); + + const start = () => { + if (amount === null) { + setAmount(CONFIG.increments); + scale.set(getScale(CONFIG.increments, CONFIG.increments, MAX)); + } + intervalRef.current = setInterval(() => { + setAmount((prevAmount) => { + const newAmount = (prevAmount ?? 0) + CONFIG.increments; + + if (newAmount > MAX) { + return prevAmount; + } + + scale.set(getScale(newAmount, CONFIG.increments, MAX)); + return newAmount; + }); + }, CONFIG.msBetweenIncrements); + }; + + const stop = () => { + intervalRef.current && clearInterval(intervalRef.current); + setAmount(null); + scale.set(1); + }; + + return { + amount, + stop, + start, + scale, + }; +}; + +const getScale = (amount: number, increments: number, max: number): number => { + const scaleStep = 0.05; + const scaleBase = 1; + + if (amount > max) { + return scaleBase + (max / increments) * scaleStep; + } + + return scaleBase + (amount / increments) * scaleStep; +}; From d63260e67ffae88b218ce51b4e299e31f5f9c6ad Mon Sep 17 00:00:00 2001 From: colbr Date: Wed, 4 Sep 2024 17:23:42 +0200 Subject: [PATCH 04/14] feat: add simple text entry animation --- .../messenger/feed/components/post/meow-action.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/messenger/feed/components/post/meow-action.tsx b/src/components/messenger/feed/components/post/meow-action.tsx index 365cdffa7..b440df4bb 100644 --- a/src/components/messenger/feed/components/post/meow-action.tsx +++ b/src/components/messenger/feed/components/post/meow-action.tsx @@ -1,5 +1,5 @@ import { useRef, useState } from 'react'; -import { motion, useSpring } from 'framer-motion'; +import { AnimatePresence, motion, useSpring } from 'framer-motion'; import { Action } from '@zero-tech/zui/components/Post'; interface MeowActionConfig { @@ -28,7 +28,13 @@ export const MeowAction = () => { fill='#01F4CB' /> - {amount && {amount}} + + {amount && ( + + {amount} + + )} + ); From dbfa1e4d20bb8135f0901ef9005c6fada33d5f0b Mon Sep 17 00:00:00 2001 From: colbr Date: Wed, 4 Sep 2024 17:37:36 +0200 Subject: [PATCH 05/14] feat: background opacity grow --- .../feed/components/post/meow-action.module.scss | 13 +++++++++++++ .../feed/components/post/meow-action.tsx | 16 +++++++++++++++- 2 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 src/components/messenger/feed/components/post/meow-action.module.scss diff --git a/src/components/messenger/feed/components/post/meow-action.module.scss b/src/components/messenger/feed/components/post/meow-action.module.scss new file mode 100644 index 000000000..410137c78 --- /dev/null +++ b/src/components/messenger/feed/components/post/meow-action.module.scss @@ -0,0 +1,13 @@ +.Container > *:active { + background: none !important; +} + +.Wash { + background: var(--color-secondary-5); + height: 120%; + left: 0; + position: absolute; + top: 0; + width: 100%; + z-index: -1; +} diff --git a/src/components/messenger/feed/components/post/meow-action.tsx b/src/components/messenger/feed/components/post/meow-action.tsx index b440df4bb..2d567d35b 100644 --- a/src/components/messenger/feed/components/post/meow-action.tsx +++ b/src/components/messenger/feed/components/post/meow-action.tsx @@ -2,6 +2,8 @@ import { useRef, useState } from 'react'; import { AnimatePresence, motion, useSpring } from 'framer-motion'; import { Action } from '@zero-tech/zui/components/Post'; +import styles from './meow-action.module.scss'; + interface MeowActionConfig { increments: number; options: number; @@ -19,9 +21,21 @@ const MAX = CONFIG.increments * CONFIG.options; export const MeowAction = () => { const { amount, stop, start, scale } = useMeowAction(); + console.log('opacity', (1 / MAX) * amount); + return ( - + + + {!!amount && ( + + )} + Date: Wed, 4 Sep 2024 17:37:48 +0200 Subject: [PATCH 06/14] chore: remove `console.log` --- src/components/messenger/feed/components/post/meow-action.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/messenger/feed/components/post/meow-action.tsx b/src/components/messenger/feed/components/post/meow-action.tsx index 2d567d35b..12d593208 100644 --- a/src/components/messenger/feed/components/post/meow-action.tsx +++ b/src/components/messenger/feed/components/post/meow-action.tsx @@ -21,8 +21,6 @@ const MAX = CONFIG.increments * CONFIG.options; export const MeowAction = () => { const { amount, stop, start, scale } = useMeowAction(); - console.log('opacity', (1 / MAX) * amount); - return ( From f1a0f0f6113a091c0af566bf084818aaf3443aad Mon Sep 17 00:00:00 2001 From: colbr Date: Wed, 4 Sep 2024 17:40:28 +0200 Subject: [PATCH 07/14] feat: handle cancel and stop --- .../feed/components/post/meow-action.tsx | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/src/components/messenger/feed/components/post/meow-action.tsx b/src/components/messenger/feed/components/post/meow-action.tsx index 12d593208..c516d3416 100644 --- a/src/components/messenger/feed/components/post/meow-action.tsx +++ b/src/components/messenger/feed/components/post/meow-action.tsx @@ -19,10 +19,10 @@ const CONFIG: MeowActionConfig = { const MAX = CONFIG.increments * CONFIG.options; export const MeowAction = () => { - const { amount, stop, start, scale } = useMeowAction(); + const { amount, cancel, stop, start, scale } = useMeowAction(); return ( - + {!!amount && ( @@ -76,7 +76,22 @@ const useMeowAction = () => { }, CONFIG.msBetweenIncrements); }; + /** + * Successfully trigger MEOW + */ const stop = () => { + // Send data to matrix, then reset + resetValues(); + }; + + /** + * Cancel the MEOW action + */ + const cancel = () => { + resetValues(); + }; + + const resetValues = () => { intervalRef.current && clearInterval(intervalRef.current); setAmount(null); scale.set(1); @@ -84,6 +99,7 @@ const useMeowAction = () => { return { amount, + cancel, stop, start, scale, From be80c1e3f40d49601e36e9a80b43e70bc7586a72 Mon Sep 17 00:00:00 2001 From: colbr Date: Wed, 4 Sep 2024 17:41:27 +0200 Subject: [PATCH 08/14] feat: add `+` to amount --- src/components/messenger/feed/components/post/meow-action.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/messenger/feed/components/post/meow-action.tsx b/src/components/messenger/feed/components/post/meow-action.tsx index c516d3416..3219e4763 100644 --- a/src/components/messenger/feed/components/post/meow-action.tsx +++ b/src/components/messenger/feed/components/post/meow-action.tsx @@ -43,7 +43,7 @@ export const MeowAction = () => { {amount && ( - {amount} + +{amount} )} From 3671712ea373ce49ee109b67760c3d31355d29c7 Mon Sep 17 00:00:00 2001 From: colbr Date: Wed, 4 Sep 2024 17:51:18 +0200 Subject: [PATCH 09/14] feat: add to MEOW count --- .../messenger/feed/components/post/index.tsx | 3 ++- .../feed/components/post/meow-action.tsx | 18 +++++++++++++++--- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/src/components/messenger/feed/components/post/index.tsx b/src/components/messenger/feed/components/post/index.tsx index 6fa80f0f9..1264a0db5 100644 --- a/src/components/messenger/feed/components/post/index.tsx +++ b/src/components/messenger/feed/components/post/index.tsx @@ -53,7 +53,8 @@ export const Post = ({ avatarUrl, text, nickname, author, timestamp }: PostProps } options={} - actions={isMeowsEnabled && } + // @note: This has no backend, so we're mocking MEOWs + actions={isMeowsEnabled && } /> ); diff --git a/src/components/messenger/feed/components/post/meow-action.tsx b/src/components/messenger/feed/components/post/meow-action.tsx index 3219e4763..2e3fcbf9f 100644 --- a/src/components/messenger/feed/components/post/meow-action.tsx +++ b/src/components/messenger/feed/components/post/meow-action.tsx @@ -18,8 +18,12 @@ const CONFIG: MeowActionConfig = { const MAX = CONFIG.increments * CONFIG.options; -export const MeowAction = () => { - const { amount, cancel, stop, start, scale } = useMeowAction(); +export interface MeowActionProps { + meows?: number; +} + +export const MeowAction = ({ meows = 0 }: MeowActionProps) => { + const { amount, cancel, isActive, stop, start, scale, userAmount } = useMeowAction(); return ( @@ -40,8 +44,9 @@ export const MeowAction = () => { fill='#01F4CB' /> + {!isActive && {meows + userAmount}} - {amount && ( + {amount && isActive && ( +{amount} @@ -55,9 +60,12 @@ export const MeowAction = () => { const useMeowAction = () => { const intervalRef = useRef(null); const [amount, setAmount] = useState(null); + const [isActive, setIsActive] = useState(false); const scale = useSpring(1, { stiffness: 300, damping: 7 }); + const [userAmount, setUserAmount] = useState(0); const start = () => { + setIsActive(true); if (amount === null) { setAmount(CONFIG.increments); scale.set(getScale(CONFIG.increments, CONFIG.increments, MAX)); @@ -81,6 +89,7 @@ const useMeowAction = () => { */ const stop = () => { // Send data to matrix, then reset + setUserAmount(amount); resetValues(); }; @@ -92,6 +101,7 @@ const useMeowAction = () => { }; const resetValues = () => { + setIsActive(false); intervalRef.current && clearInterval(intervalRef.current); setAmount(null); scale.set(1); @@ -100,9 +110,11 @@ const useMeowAction = () => { return { amount, cancel, + isActive, stop, start, scale, + userAmount, }; }; From 9100ecb04ce25c0d2c14e9f8a084e31e94618930 Mon Sep 17 00:00:00 2001 From: colbr Date: Thu, 5 Sep 2024 15:06:43 +0200 Subject: [PATCH 10/14] feat: + amount animation --- .../feed/components/post/meow-action.module.scss | 4 ++++ .../messenger/feed/components/post/meow-action.tsx | 11 ++++++++--- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/components/messenger/feed/components/post/meow-action.module.scss b/src/components/messenger/feed/components/post/meow-action.module.scss index 410137c78..1e7c647f2 100644 --- a/src/components/messenger/feed/components/post/meow-action.module.scss +++ b/src/components/messenger/feed/components/post/meow-action.module.scss @@ -11,3 +11,7 @@ width: 100%; z-index: -1; } + +.Amount { + font-size: 8px !important; +} diff --git a/src/components/messenger/feed/components/post/meow-action.tsx b/src/components/messenger/feed/components/post/meow-action.tsx index 2e3fcbf9f..2096bdd57 100644 --- a/src/components/messenger/feed/components/post/meow-action.tsx +++ b/src/components/messenger/feed/components/post/meow-action.tsx @@ -44,12 +44,17 @@ export const MeowAction = ({ meows = 0 }: MeowActionProps) => { fill='#01F4CB' /> - {!isActive && {meows + userAmount}} + {meows + (amount ?? userAmount)} {amount && isActive && ( - + +{amount} - + )} From 42fe00abf7185046913c0ff80f01d2e27213e0f3 Mon Sep 17 00:00:00 2001 From: colbr Date: Thu, 5 Sep 2024 15:12:28 +0200 Subject: [PATCH 11/14] refactor: clean up --- .../feed/components/post/meow-action.tsx | 56 +++++++++++-------- 1 file changed, 33 insertions(+), 23 deletions(-) diff --git a/src/components/messenger/feed/components/post/meow-action.tsx b/src/components/messenger/feed/components/post/meow-action.tsx index 2096bdd57..602ceda4b 100644 --- a/src/components/messenger/feed/components/post/meow-action.tsx +++ b/src/components/messenger/feed/components/post/meow-action.tsx @@ -6,14 +6,14 @@ import styles from './meow-action.module.scss'; interface MeowActionConfig { increments: number; - options: number; msBetweenIncrements: number; + options: number; } const CONFIG: MeowActionConfig = { increments: 10, - options: 3, msBetweenIncrements: 1000, + options: 3, }; const MAX = CONFIG.increments * CONFIG.options; @@ -23,28 +23,23 @@ export interface MeowActionProps { } export const MeowAction = ({ meows = 0 }: MeowActionProps) => { - const { amount, cancel, isActive, stop, start, scale, userAmount } = useMeowAction(); + const { amount, backgroundOpacity, cancel, isActive, scale, start, stop, totalMeows } = useMeowAction(meows); return ( - {!!amount && ( + {amount && ( )} - - - - {meows + (amount ?? userAmount)} + + {totalMeows} {amount && isActive && ( { ); }; -const useMeowAction = () => { +const useMeowAction = (meows?: number) => { const intervalRef = useRef(null); + const scale = useSpring(1, { stiffness: 300, damping: 7 }); + const [amount, setAmount] = useState(null); const [isActive, setIsActive] = useState(false); - const scale = useSpring(1, { stiffness: 300, damping: 7 }); const [userAmount, setUserAmount] = useState(0); + /** + * Starts the MEOW action + * Creates a timer which increments the amount at a set interval + * Stops when the amount reaches the maximum + * Also stops when cancel is called + */ const start = () => { setIsActive(true); + if (amount === null) { setAmount(CONFIG.increments); scale.set(getScale(CONFIG.increments, CONFIG.increments, MAX)); } + intervalRef.current = setInterval(() => { setAmount((prevAmount) => { const newAmount = (prevAmount ?? 0) + CONFIG.increments; @@ -114,22 +118,28 @@ const useMeowAction = () => { return { amount, + backgroundOpacity: (1 / MAX) * amount, cancel, isActive, - stop, - start, scale, + start, + stop, + totalMeows: meows + (amount ?? userAmount), userAmount, }; }; const getScale = (amount: number, increments: number, max: number): number => { - const scaleStep = 0.05; - const scaleBase = 1; - - if (amount > max) { - return scaleBase + (max / increments) * scaleStep; - } + return 1 + (Math.min(amount, max) / increments) * 0.05; +}; - return scaleBase + (amount / increments) * scaleStep; +const MeowIcon = () => { + return ( + + + + ); }; From d94c1e20d1d80a4d421e0229413adb61eec9ceca Mon Sep 17 00:00:00 2001 From: colbr Date: Thu, 5 Sep 2024 15:14:27 +0200 Subject: [PATCH 12/14] refactor: more tidy up --- .../post/{meow-action.module.scss => actions/meow.module.scss} | 2 +- .../feed/components/post/{meow-action.tsx => actions/meow.tsx} | 2 +- src/components/messenger/feed/components/post/index.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) rename src/components/messenger/feed/components/post/{meow-action.module.scss => actions/meow.module.scss} (93%) rename src/components/messenger/feed/components/post/{meow-action.tsx => actions/meow.tsx} (98%) diff --git a/src/components/messenger/feed/components/post/meow-action.module.scss b/src/components/messenger/feed/components/post/actions/meow.module.scss similarity index 93% rename from src/components/messenger/feed/components/post/meow-action.module.scss rename to src/components/messenger/feed/components/post/actions/meow.module.scss index 1e7c647f2..83a29b4f4 100644 --- a/src/components/messenger/feed/components/post/meow-action.module.scss +++ b/src/components/messenger/feed/components/post/actions/meow.module.scss @@ -4,7 +4,7 @@ .Wash { background: var(--color-secondary-5); - height: 120%; + height: 100%; left: 0; position: absolute; top: 0; diff --git a/src/components/messenger/feed/components/post/meow-action.tsx b/src/components/messenger/feed/components/post/actions/meow.tsx similarity index 98% rename from src/components/messenger/feed/components/post/meow-action.tsx rename to src/components/messenger/feed/components/post/actions/meow.tsx index 602ceda4b..ed01356b7 100644 --- a/src/components/messenger/feed/components/post/meow-action.tsx +++ b/src/components/messenger/feed/components/post/actions/meow.tsx @@ -2,7 +2,7 @@ import { useRef, useState } from 'react'; import { AnimatePresence, motion, useSpring } from 'framer-motion'; import { Action } from '@zero-tech/zui/components/Post'; -import styles from './meow-action.module.scss'; +import styles from './meow.module.scss'; interface MeowActionConfig { increments: number; diff --git a/src/components/messenger/feed/components/post/index.tsx b/src/components/messenger/feed/components/post/index.tsx index 1264a0db5..f4829fb02 100644 --- a/src/components/messenger/feed/components/post/index.tsx +++ b/src/components/messenger/feed/components/post/index.tsx @@ -1,7 +1,7 @@ import { Name, Post as ZUIPost } from '@zero-tech/zui/components/Post'; import { Timestamp } from '@zero-tech/zui/components/Post/components/Timestamp'; import { Avatar } from '@zero-tech/zui/components'; -import { MeowAction } from './meow-action'; +import { MeowAction } from './actions/meow'; import styles from './styles.module.scss'; import { useMemo } from 'react'; From d9e575bbcaff08d91eac76cec05108d748d8e754 Mon Sep 17 00:00:00 2001 From: colbr Date: Thu, 5 Sep 2024 15:19:18 +0200 Subject: [PATCH 13/14] refactor: better file placement --- .../feed/components/post/actions/meow.tsx | 145 ------------------ .../components/post/actions/meow/icon.tsx | 10 ++ .../components/post/actions/meow/index.ts | 1 + .../feed/components/post/actions/meow/lib.ts | 21 +++ .../meow-action.module.scss} | 0 .../post/actions/meow/meow-action.tsx | 46 ++++++ .../components/post/actions/meow/useMeow.ts | 75 +++++++++ 7 files changed, 153 insertions(+), 145 deletions(-) delete mode 100644 src/components/messenger/feed/components/post/actions/meow.tsx create mode 100644 src/components/messenger/feed/components/post/actions/meow/icon.tsx create mode 100644 src/components/messenger/feed/components/post/actions/meow/index.ts create mode 100644 src/components/messenger/feed/components/post/actions/meow/lib.ts rename src/components/messenger/feed/components/post/actions/{meow.module.scss => meow/meow-action.module.scss} (100%) create mode 100644 src/components/messenger/feed/components/post/actions/meow/meow-action.tsx create mode 100644 src/components/messenger/feed/components/post/actions/meow/useMeow.ts diff --git a/src/components/messenger/feed/components/post/actions/meow.tsx b/src/components/messenger/feed/components/post/actions/meow.tsx deleted file mode 100644 index ed01356b7..000000000 --- a/src/components/messenger/feed/components/post/actions/meow.tsx +++ /dev/null @@ -1,145 +0,0 @@ -import { useRef, useState } from 'react'; -import { AnimatePresence, motion, useSpring } from 'framer-motion'; -import { Action } from '@zero-tech/zui/components/Post'; - -import styles from './meow.module.scss'; - -interface MeowActionConfig { - increments: number; - msBetweenIncrements: number; - options: number; -} - -const CONFIG: MeowActionConfig = { - increments: 10, - msBetweenIncrements: 1000, - options: 3, -}; - -const MAX = CONFIG.increments * CONFIG.options; - -export interface MeowActionProps { - meows?: number; -} - -export const MeowAction = ({ meows = 0 }: MeowActionProps) => { - const { amount, backgroundOpacity, cancel, isActive, scale, start, stop, totalMeows } = useMeowAction(meows); - - return ( - - - - {amount && ( - - )} - - - {totalMeows} - - {amount && isActive && ( - - +{amount} - - )} - - - - ); -}; - -const useMeowAction = (meows?: number) => { - const intervalRef = useRef(null); - const scale = useSpring(1, { stiffness: 300, damping: 7 }); - - const [amount, setAmount] = useState(null); - const [isActive, setIsActive] = useState(false); - const [userAmount, setUserAmount] = useState(0); - - /** - * Starts the MEOW action - * Creates a timer which increments the amount at a set interval - * Stops when the amount reaches the maximum - * Also stops when cancel is called - */ - const start = () => { - setIsActive(true); - - if (amount === null) { - setAmount(CONFIG.increments); - scale.set(getScale(CONFIG.increments, CONFIG.increments, MAX)); - } - - intervalRef.current = setInterval(() => { - setAmount((prevAmount) => { - const newAmount = (prevAmount ?? 0) + CONFIG.increments; - - if (newAmount > MAX) { - return prevAmount; - } - - scale.set(getScale(newAmount, CONFIG.increments, MAX)); - return newAmount; - }); - }, CONFIG.msBetweenIncrements); - }; - - /** - * Successfully trigger MEOW - */ - const stop = () => { - // Send data to matrix, then reset - setUserAmount(amount); - resetValues(); - }; - - /** - * Cancel the MEOW action - */ - const cancel = () => { - resetValues(); - }; - - const resetValues = () => { - setIsActive(false); - intervalRef.current && clearInterval(intervalRef.current); - setAmount(null); - scale.set(1); - }; - - return { - amount, - backgroundOpacity: (1 / MAX) * amount, - cancel, - isActive, - scale, - start, - stop, - totalMeows: meows + (amount ?? userAmount), - userAmount, - }; -}; - -const getScale = (amount: number, increments: number, max: number): number => { - return 1 + (Math.min(amount, max) / increments) * 0.05; -}; - -const MeowIcon = () => { - return ( - - - - ); -}; diff --git a/src/components/messenger/feed/components/post/actions/meow/icon.tsx b/src/components/messenger/feed/components/post/actions/meow/icon.tsx new file mode 100644 index 000000000..aa6f64b01 --- /dev/null +++ b/src/components/messenger/feed/components/post/actions/meow/icon.tsx @@ -0,0 +1,10 @@ +export const MeowIcon = () => { + return ( + + + + ); +}; diff --git a/src/components/messenger/feed/components/post/actions/meow/index.ts b/src/components/messenger/feed/components/post/actions/meow/index.ts new file mode 100644 index 000000000..3f63ba59f --- /dev/null +++ b/src/components/messenger/feed/components/post/actions/meow/index.ts @@ -0,0 +1 @@ +export * from './meow-action'; diff --git a/src/components/messenger/feed/components/post/actions/meow/lib.ts b/src/components/messenger/feed/components/post/actions/meow/lib.ts new file mode 100644 index 000000000..b6a8f7b48 --- /dev/null +++ b/src/components/messenger/feed/components/post/actions/meow/lib.ts @@ -0,0 +1,21 @@ +const INCREMENTS = 10; +const MS_BETWEEN_INCREMENTS = 1000; +const OPTIONS = 3; + +interface MeowActionConfig { + increments: number; + msBetweenIncrements: number; + options: number; + max: number; +} + +export const CONFIG: MeowActionConfig = { + increments: INCREMENTS, + msBetweenIncrements: MS_BETWEEN_INCREMENTS, + options: OPTIONS, + max: INCREMENTS * OPTIONS, +}; + +export const getScale = (amount: number, increments: number, max: number): number => { + return 1 + (Math.min(amount, max) / increments) * 0.05; +}; diff --git a/src/components/messenger/feed/components/post/actions/meow.module.scss b/src/components/messenger/feed/components/post/actions/meow/meow-action.module.scss similarity index 100% rename from src/components/messenger/feed/components/post/actions/meow.module.scss rename to src/components/messenger/feed/components/post/actions/meow/meow-action.module.scss diff --git a/src/components/messenger/feed/components/post/actions/meow/meow-action.tsx b/src/components/messenger/feed/components/post/actions/meow/meow-action.tsx new file mode 100644 index 000000000..42ad97cc7 --- /dev/null +++ b/src/components/messenger/feed/components/post/actions/meow/meow-action.tsx @@ -0,0 +1,46 @@ +import { AnimatePresence, motion } from 'framer-motion'; +import { Action } from '@zero-tech/zui/components/Post'; + +import { MeowIcon } from './icon'; +import { useMeowAction } from './useMeow'; + +import styles from './meow.module.scss'; + +export interface MeowActionProps { + meows?: number; +} + +export const MeowAction = ({ meows = 0 }: MeowActionProps) => { + const { amount, backgroundOpacity, cancel, isActive, scale, start, stop, totalMeows } = useMeowAction(meows); + + return ( + + + + {amount && ( + + )} + + + {totalMeows} + + {amount && isActive && ( + + +{amount} + + )} + + + + ); +}; diff --git a/src/components/messenger/feed/components/post/actions/meow/useMeow.ts b/src/components/messenger/feed/components/post/actions/meow/useMeow.ts new file mode 100644 index 000000000..7a0962d1a --- /dev/null +++ b/src/components/messenger/feed/components/post/actions/meow/useMeow.ts @@ -0,0 +1,75 @@ +import { useRef, useState } from 'react'; +import { useSpring } from 'framer-motion'; +import { CONFIG, getScale } from './lib'; + +export const useMeowAction = (meows?: number) => { + const intervalRef = useRef(null); + const scale = useSpring(1, { stiffness: 300, damping: 7 }); + + const [amount, setAmount] = useState(null); + const [isActive, setIsActive] = useState(false); + const [userAmount, setUserAmount] = useState(0); + + /** + * Starts the MEOW action + * Creates a timer which increments the amount at a set interval + * Stops when the amount reaches the maximum + * Also stops when cancel is called + */ + const start = () => { + setIsActive(true); + + if (amount === null) { + setAmount(CONFIG.increments); + scale.set(getScale(CONFIG.increments, CONFIG.increments, CONFIG.max)); + } + + intervalRef.current = setInterval(() => { + setAmount((prevAmount) => { + const newAmount = (prevAmount ?? 0) + CONFIG.increments; + + if (newAmount > CONFIG.max) { + return prevAmount; + } + + scale.set(getScale(newAmount, CONFIG.increments, CONFIG.max)); + return newAmount; + }); + }, CONFIG.msBetweenIncrements); + }; + + /** + * Successfully trigger MEOW + */ + const stop = () => { + // Send data to matrix, then reset + setUserAmount(amount); + resetValues(); + }; + + /** + * Cancel the MEOW action + */ + const cancel = () => { + resetValues(); + }; + + const resetValues = () => { + setIsActive(false); + intervalRef.current && clearInterval(intervalRef.current); + setAmount(null); + scale.set(1); + }; + + return { + amount, + backgroundOpacity: (1 / CONFIG.max) * amount, + cancel, + isActive, + scale, + start, + stop, + totalMeows: meows + (amount ?? userAmount), + userAmount, + }; +}; From be7b24922371e7fb40111b143124badc98b2b15d Mon Sep 17 00:00:00 2001 From: colbr Date: Thu, 5 Sep 2024 15:23:27 +0200 Subject: [PATCH 14/14] fix: incorrect style import --- .../messenger/feed/components/post/actions/meow/meow-action.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/messenger/feed/components/post/actions/meow/meow-action.tsx b/src/components/messenger/feed/components/post/actions/meow/meow-action.tsx index 42ad97cc7..a6ca3d473 100644 --- a/src/components/messenger/feed/components/post/actions/meow/meow-action.tsx +++ b/src/components/messenger/feed/components/post/actions/meow/meow-action.tsx @@ -4,7 +4,7 @@ import { Action } from '@zero-tech/zui/components/Post'; import { MeowIcon } from './icon'; import { useMeowAction } from './useMeow'; -import styles from './meow.module.scss'; +import styles from './meow-action.module.scss'; export interface MeowActionProps { meows?: number;