Skip to content

Commit

Permalink
Fix HideShowGame Timer (#806)
Browse files Browse the repository at this point in the history
  • Loading branch information
@youngkidwarrior
youngkidwarrior authored Oct 26, 2024
2 parents a862280 + dcc23be commit 26df5b1
Show file tree
Hide file tree
Showing 5 changed files with 215 additions and 57 deletions.
49 changes: 19 additions & 30 deletions packages/app/features/home/TokenBalanceCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,14 @@ import {
BigHeading,
styled,
AnimatePresence,
View,
type XStackProps,
} from '@my/ui'
import { EyeOff, Eye } from '@tamagui/lucide-icons'
import formatAmount from 'app/utils/formatAmount'
import { useSendAccountBalances } from 'app/utils/useSendAccountBalances'
import AsyncStorage from '@react-native-async-storage/async-storage'
import { useEffect, useState } from 'react'
import { type Timer, useStopwatch } from 'react-use-precision-timer'

const GreenSquare = styled(Stack, {
name: 'Surface',
Expand All @@ -39,7 +39,8 @@ export const TokenBalanceCard = () => {
const formattedBalance = formatAmount(totalBalance, 9, 0)

const { isPriceHidden, toggleIsPriceHidden } = useIsPriceHidden()
const { isGameVisible, presses, increaseScore, time } = useShowHideGame()
const timer = useStopwatch()
const { isGameVisible, presses, increaseScore } = useShowHideGame(timer)

const onShowHidePress = () => {
toggleIsPriceHidden()
Expand Down Expand Up @@ -77,7 +78,7 @@ export const TokenBalanceCard = () => {
<Paragraph fontSize={'$6'} fontWeight={'500'} zIndex={1} color={'$color10'}>
{presses}
</Paragraph>
<ShowHideGameStopwatch time={time} />
<ShowHideGameStopwatch timer={timer} />
</XStack>
)}
</YStack>
Expand Down Expand Up @@ -171,47 +172,35 @@ const useIsPriceHidden = () => {
return { isPriceHidden, toggleIsPriceHidden }
}

const useShowHideGame = () => {
const useShowHideGame = (timer: Timer) => {
const countToStop = 100
const countToVisible = 10

const [isGameVisible, setIsGameVisible] = useState<boolean>(false)
const [presses, setPresses] = useState<number>(0)

const [isPaused, setIsPaused] = useState(false)
const [time, setTime] = useState(0)

useEffect(() => {
if (presses >= countToVisible) {
setIsGameVisible(true)
}
if (presses >= countToStop) {
setIsPaused(true)
const onPress = () => {
if (!timer.isRunning() && presses < countToStop) {
timer.start()
setPresses(presses + 1)
return
}

let interval: NodeJS.Timeout | undefined = undefined
if (isPaused === false) {
interval = setInterval(() => {
setTime((time) => time + 10)
}, 10)
} else {
clearInterval(interval)
}
return () => {
clearInterval(interval)
if (presses >= countToStop) {
timer.pause()
return
}
}, [presses, isPaused])

const onPress = () => {
if (isPaused === false) {
setPresses(presses + 1)
if (presses >= countToVisible && !isGameVisible) {
setIsGameVisible(true)
}
setPresses(presses + 1)
}

return { isGameVisible, presses, increaseScore: onPress, time }
return { isGameVisible, presses, increaseScore: onPress }
}

const ShowHideGameStopwatch = ({ time, ...props }: XStackProps & { time: number }) => {
const ShowHideGameStopwatch = ({ timer, ...props }: XStackProps & { timer: Timer }) => {
const time = timer.getElapsedRunningTime()
return (
<XStack {...props}>
<Paragraph
Expand Down
185 changes: 158 additions & 27 deletions packages/app/features/home/__snapshots__/screen.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,35 +96,24 @@ exports[`HomeScreen 1`] = `
"flexDirection": "column",
"gap": 18,
"justifyContent": "center",
"width": "100%",
}
}
>
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
"flexDirection": "column",
"gap": 10,
"width": "fit-content",
}
}
>
<View
style={
{
"backgroundColor": "#40FB50",
"height": 11,
"width": 11,
}
}
/>
<Text
cancelable={true}
disabled={false}
focusable={true}
id=":r1:"
minPressDuration={0}
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
onPress={[Function]}
Expand All @@ -133,22 +122,164 @@ exports[`HomeScreen 1`] = `
style={
{
"alignItems": "center",
"backgroundColor": "transparent",
"color": "#B2B2B2",
"display": "flex",
"fontFamily": "System",
"fontSize": 16.8,
"fontWeight": "500",
"lineHeight": 0,
"textTransform": "uppercase",
"userSelect": "none",
"zIndex": 1,
"flexDirection": "row",
"gap": 10,
"width": "100%",
}
}
suppressHighlighting={true}
>
Total Balance
</Text>
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
"gap": 10,
}
}
>
<View
style={
{
"backgroundColor": "#40FB50",
"height": 11,
"width": 11,
}
}
/>
<Text
cancelable={true}
disabled={false}
focusable={true}
id=":r2:"
minPressDuration={0}
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
onPress={[Function]}
onPressIn={[Function]}
onPressOut={[Function]}
style={
{
"alignItems": "center",
"backgroundColor": "transparent",
"color": "#B2B2B2",
"display": "flex",
"fontFamily": "System",
"fontSize": 16.8,
"fontWeight": "500",
"lineHeight": 0,
"textTransform": "uppercase",
"userSelect": "none",
"zIndex": 1,
}
}
suppressHighlighting={true}
>
Total Balance
</Text>
</View>
<RNSVGSvgView
align="xMidYMid"
bbHeight={20}
bbWidth={20}
fill="none"
focusable={false}
height={20}
meetOrSlice={0}
minX={0}
minY={0}
stroke="#FFFFFF"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
style={
[
{
"backgroundColor": "transparent",
"borderWidth": 0,
},
{
"color": "#FFFFFF",
},
{
"flex": 0,
"height": 20,
"width": 20,
},
]
}
tintColor="#FFFFFF"
vbHeight={24}
vbWidth={24}
width={20}
>
<RNSVGGroup
fill={null}
propList={
[
"fill",
"stroke",
"strokeWidth",
"strokeLinecap",
"strokeLinejoin",
]
}
stroke={
{
"payload": 4294967295,
"type": 0,
}
}
strokeLinecap={1}
strokeLinejoin={1}
strokeWidth="2"
>
<RNSVGPath
d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"
fill={
{
"payload": 4278190080,
"type": 0,
}
}
propList={
[
"stroke",
]
}
stroke={
{
"payload": 4294967295,
"type": 0,
}
}
/>
<RNSVGCircle
cx="12"
cy="12"
fill={
{
"payload": 4278190080,
"type": 0,
}
}
propList={
[
"stroke",
]
}
r="3"
stroke={
{
"payload": 4294967295,
"type": 0,
}
}
/>
</RNSVGGroup>
</RNSVGSvgView>
</View>
</View>
<View
style={
Expand Down
14 changes: 14 additions & 0 deletions packages/app/features/home/screen.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,20 @@ jest.mock('app/routers/params', () => ({
useNav: jest.fn().mockReturnValue([undefined, jest.fn()]),
}))

jest.mock('@react-native-async-storage/async-storage', () => ({
getItem: jest.fn().mockReturnValue(Promise.resolve(null)),
setItem: jest.fn().mockReturnValue(Promise.resolve()),
}))

jest.mock('react-use-precision-timer', () => ({
useStopwatch: jest.fn().mockReturnValue({
isRunning: jest.fn().mockReturnValue(false),
start: jest.fn(),
pause: jest.fn(),
getElapsedRunningTime: jest.fn().mockReturnValue(0),
}),
}))

jest.mock('solito', () => {
// console.log('mock solito')
const mockCreateParam = jest.fn(() => {
Expand Down
1 change: 1 addition & 0 deletions packages/app/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@
"react-native": "0.74.1",
"react-native-safe-area-context": "4.8.2",
"react-native-svg": "15.2.0",
"react-use-precision-timer": "^3.5.5",
"solito": "^4.0.1",
"superjson": "^1.13.1",
"viem": "^2.18.2",
Expand Down
23 changes: 23 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14230,6 +14230,7 @@ __metadata:
react-native-safe-area-context: "npm:4.8.2"
react-native-svg: "npm:15.2.0"
react-test-renderer: "npm:^18.3.1"
react-use-precision-timer: "npm:^3.5.5"
solito: "npm:^4.0.1"
superjson: "npm:^1.13.1"
typescript: "npm:^5.5.3"
Expand Down Expand Up @@ -30129,6 +30130,16 @@ __metadata:
languageName: node
linkType: hard

"react-sub-unsub@npm:^2.2.2":
version: 2.2.7
resolution: "react-sub-unsub@npm:2.2.7"
peerDependencies:
react: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0
react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0
checksum: 10/684f9ec88af0be9e27c3112480e47ef54060af13e5adb0cf7988ac2599bf29e12fcbeca3e8067270216b1add805a063cbd6abae20f1dd0b65b5d689afd3b66d7
languageName: node
linkType: hard

"react-test-renderer@npm:18.2.0":
version: 18.2.0
resolution: "react-test-renderer@npm:18.2.0"
Expand All @@ -30155,6 +30166,18 @@ __metadata:
languageName: node
linkType: hard

"react-use-precision-timer@npm:^3.5.5":
version: 3.5.5
resolution: "react-use-precision-timer@npm:3.5.5"
dependencies:
react-sub-unsub: "npm:^2.2.2"
peerDependencies:
react: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0
react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0
checksum: 10/e0abf3fc915207ac57b58b7eb2df0ed178b399dc8b082443cbb44177756e2d480193d07c99bc2fe1de6d254deb68d9f08e940f2473069f233b6ac08653041451
languageName: node
linkType: hard

"react@npm:^18.2.0":
version: 18.2.0
resolution: "react@npm:18.2.0"
Expand Down

0 comments on commit 26df5b1

Please sign in to comment.