Skip to content

Commit

Permalink
Merge pull request #98 from NEARBuilders/main
Browse files Browse the repository at this point in the history
Dev Updates
  • Loading branch information
BenKurrek authored Sep 13, 2024
2 parents 3389cb6 + f54ee07 commit 10c7274
Show file tree
Hide file tree
Showing 45 changed files with 1,947 additions and 3,207 deletions.
201 changes: 201 additions & 0 deletions ;
Original file line number Diff line number Diff line change
@@ -0,0 +1,201 @@
import { useState, useRef, useEffect } from "react";
import { Box, Heading, Image, VStack, Text } from "@chakra-ui/react";
import { useSwipeable } from "react-swipeable";
import Boxes from "/assets/boxes-background.webp";
import { HelpIcon, ArrowIcon } from "@/components/icons";
import { ExtDropData } from "@/lib/event";

interface HiddenProps {
foundItem: ExtDropData;
numFound: number;
numRequired: number;
onReveal: () => void;
}

export function Hidden({
foundItem,
onReveal,
numFound,
numRequired,
}: HiddenProps) {
const [swipeProgress, setSwipeProgress] = useState(0);
const requestRef = useRef<number | null>(null);

const isNFT = foundItem.type === "nft";
const rewardMessage = () => {
if (numFound !== numRequired) {
return "a Piece";
}

if (isNFT) {
return "a POAP";
}

return "some SOV3";
};

const ctaMessage = () => {
if (numFound !== numRequired) {
return "Swipe to reveal";
}

return "Swipe to reveal and claim";
};

const maxSwipeDistance = 300; // Maximum swipe distance

// To handle smooth updates via requestAnimationFrame
const animateSwipeProgress = (newProgress: number) => {
if (requestRef.current) {
cancelAnimationFrame(requestRef.current);
}
requestRef.current = requestAnimationFrame(() => {
setSwipeProgress(newProgress);
});
};

const handlers = useSwipeable({
onSwiping: (eventData) => {
const newProgress = Math.min(
Math.max(0, eventData.deltaX),
maxSwipeDistance,
);
animateSwipeProgress(newProgress);
},
onSwipedRight: () => {
if (swipeProgress >= maxSwipeDistance) {
onReveal();
}
},
trackTouch: true,
trackMouse: false,
});

useEffect(() => {
// Prevent default touchmove events to stop the page from scrolling or refreshing
const preventTouchMove = (e: TouchEvent) => {
e.preventDefault();
};

// Add event listener for touchmove to prevent page scroll and refresh
document.addEventListener("touchmove", preventTouchMove, {
passive: false,
});

// Clean up on component unmount
return () => {
document.removeEventListener("touchmove", preventTouchMove);
};
}, []);

return (
<Box mt="64px" position="relative" p={4}>
<Image
src={Boxes}
width="100%"
height="100%"
objectFit={"cover"}
loading="eager"
minH="476px"
/>
<VStack
position="absolute"
top="50%"
left="50%"
transform="translate(-50%, -50%)"
width={"100%"}
p={4}
spacing={8}
{...handlers}
style={{ touchAction: "none" }} // Disable touch-action to prevent default behaviors like scrolling or refreshing
>
<Box
bg="bg.primary"
width={"170px"}
height={"170px"}
display={"flex"}
alignItems={"center"}
justifyContent={"center"}
>
<HelpIcon
width={128}
height={128}
color={"var(--chakra-colors-brand-400)"}
/>
</Box>
<VStack alignItems="flex-start" gap={0} width={"100%"}>
<Heading
as="h3"
fontSize="5xl"
fontFamily="mono"
fontWeight="bold"
color="white"
bg="bg.primary"
textAlign="left"
px={2}
>
Congrats!
</Heading>
<Text
fontFamily="mono"
color="brand.400"
bg="bg.primary"
textAlign="right"
alignSelf={"flex-end"}
fontSize="xl"
px={2}
textTransform={"uppercase"}
>
You've found {rewardMessage()}
</Text>
</VStack>
<Box p={4} width={"100%"}>
<Box
width={"100%"}
bg="bg.primary"
fontFamily={"mono"}
textTransform={"uppercase"}
display={"flex"}
alignItems={"center"}
justifyContent={"space-between"}
height={"48px"}
color={"white"}
fontSize="sm"
borderRadius={"0"}
position={"relative"}
_before={{
content: '""',
position: "absolute",
width: "57px",
height: "37px",
left: -4,
top: -4,
zIndex: -1,
background: "black",
}}
>
{/* Sliding progress */}
<Box
position="absolute"
bg="var(--chakra-colors-brand-400)"
height="100%"
width={`${(swipeProgress / maxSwipeDistance) * 100}%`}
transition="width 0.05s ease-out"
left={0}
top={0}
/>
<Box zIndex={1} position="relative" width="100%">
<span>Swipe to reveal and claim</span>
<ArrowIcon
width={24}
direction="right"
height={24}
color={"var(--chakra-colors-brand-400)"}
/>
</Box>
</Box>
</Box>
</VStack>
</Box>
);
}
4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,10 @@
"@near-wallet-selector/core": "^8.9.5",
"@tanstack/react-query": "^5.52.2",
"@yudiel/react-qr-scanner": "^2.0.8",
"bs58": "^4.0.0",
"bs58": "^6.0.0",
"date-fns": "^3.6.0",
"framer-motion": "^11.3.28",
"headbreaker": "^3.0.0",
"luxon": "^3.5.0",
"near-api-js": "^2.1.3",
"qrcode": "^1.5.4",
Expand All @@ -39,6 +40,7 @@
"react-error-boundary": "^4.0.13",
"react-qr-code": "^2.0.11",
"react-router-dom": "^6.26.1",
"react-swipeable": "^7.0.1",
"tweetnacl": "^1.0.3",
"tweetnacl-util": "^0.15.1",
"zustand": "^4.5.5"
Expand Down
44 changes: 42 additions & 2 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 10c7274

Please sign in to comment.