Skip to content

Commit

Permalink
feat: section one mobile done
Browse files Browse the repository at this point in the history
  • Loading branch information
RasenGUY committed Nov 6, 2023
1 parent ff876ab commit 1b449da
Show file tree
Hide file tree
Showing 20 changed files with 721 additions and 32 deletions.
71 changes: 71 additions & 0 deletions src/assets/icons/VersusIcon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import * as React from "react"
import { SVGProps } from "react"
const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
<svg
width={74}
height={54}
viewBox="0 0 74 54"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g filter="url(#filter0_d_4753_12611)">
<path
d="M11 10.799C13.9285 17.6322 16.3083 25.1532 20.331 31.4107C20.491 31.6596 20.7597 32.1482 21.0892 31.7821C21.5382 31.2832 21.7581 30.4328 21.9867 29.8478C23.0426 27.1459 24.2598 24.5432 25.6077 21.9714C28.6901 16.09 31.9328 10.1153 35.9754 4.82596C36.376 4.30186 36.8667 3.29712 37.4609 3"
stroke="#FDFDFD"
strokeWidth={5.91946}
strokeLinecap="round"
/>
<path
d="M34.3968 31.9677C35.1928 32.0672 33.1822 33.3604 32.6018 33.3604C31.6038 33.3604 33.0688 31.5382 33.3136 31.3642C34.1504 30.7697 35.1158 30.737 35.7895 31.4107"
stroke="#FDFDFD"
strokeWidth={5.91946}
strokeLinecap="round"
/>
<path
d="M62.3466 3.2466C60.3503 3.2466 57.2621 3.23218 55.3961 3.98651C53.9193 4.58349 52.2736 5.96589 51.3599 7.17706C49.5304 9.60228 49.0271 8.88689 48.49 11.8791C48.0519 14.3203 49.8698 17.7166 51.7623 17.9935C54.8256 18.4418 58.6526 17.9709 61.0004 20.423C68.428 28.1808 46.3933 33.4706 42.5706 34.9997"
stroke="#FDFDFD"
strokeWidth={5.91946}
strokeLinecap="round"
/>
</g>
<defs>
<filter
id="filter0_d_4753_12611"
x={0.146933}
y={0.0395508}
width={73.2244}
height={53.7059}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset dy={7.89262} />
<feGaussianBlur stdDeviation={3.94631} />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
/>
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow_4753_12611"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_4753_12611"
result="shape"
/>
</filter>
</defs>
</svg>
)
export default SvgComponent
1 change: 1 addition & 0 deletions src/assets/icons/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,3 +33,4 @@ export { default as RestartIcon } from './RestartIcon';
export { default as DownloadIcon } from './DownloadIcon';
export { default as XIcon } from './XIcon'
export { default as TelegramIcon } from './TelegramIcon'
export { default as VersusIcon } from './VersusIcon'
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 18 additions & 0 deletions src/components/Dice/animations.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,4 +23,22 @@ export function useRoll(diceRef: any,) {
}, [trigger]);

return triggerRoll;
}

export function useAutoRoll(diceRef: any,) {
function roll() {
const tl = gsap.timeline();
tl.to("g#all-sides", {
repeatDelay: 1.5,
repeat: -1,
ease: Power3.easeInOut,
y: "-500",
})
}
useLayoutEffect(()=> {
const ctx = gsap.context(() => {
roll();
}, diceRef);
return () => ctx.revert();
});
}
16 changes: 13 additions & 3 deletions src/components/Dice/index.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,21 @@
import { SVGProps } from 'react';
import { DiceContainer } from './types';
import WegaDice from './images/WegaDice';
import "twin.macro";

export const Dice: React.FC<{ diceRef: any }> = ({ diceRef }: { diceRef: any }) => {
type DiceProps = {
diceRef: any;
svgProps?: SVGProps<SVGSVGElement>;
} & React.Attributes & React.AllHTMLAttributes<HTMLDivElement>

export const Dice: React.FC<DiceProps> = ({
diceRef,
svgProps,
...props
}: DiceProps) => {
return (
<DiceContainer>
<WegaDice ref={diceRef} />
<DiceContainer { ...props }>
<WegaDice ref={diceRef} { ...svgProps } />
</DiceContainer>
)
}
Expand Down
32 changes: 30 additions & 2 deletions src/components/LandingHeroPlayerCard/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import leftAvatarSource from '../../assets/images/hero-left-player-image.png';
import rightAvatarSource from '../../assets/images/hero-right-player-image.png';
import leftWidget from '../../assets/images/hero-left-widget.png';
import rightWidget from '../../assets/images/hero-right-widget.png';
import rightWidgetImage from '../../assets/images/landing-hero-right-widget-mobile-image.png';
import leftWidgetImage from '../../assets/images/landing-hero-left-widget-mobile-image.png';

import {
PlayerCardContainer,
Expand All @@ -29,7 +31,33 @@ export const LeftPlayerCard = () => {
<img src={leftWidget} alt="left-wager"/>
</div>
</div>
<SmallText tw="text-blanc text-left w-full font-light leading-[7.5px]">Launch the app to start</SmallText>
{/* <SmallText tw="text-blanc text-left w-full font-light leading-[7.5px]">Launch the app to start</SmallText> */}
</PlayerCardContainer>
)
}
export const LeftPlayerCardMobile = () => {
return (
<PlayerCardContainer tw="flex flex-row justify-end min-w-[261.36px] min-h-[unset] gap-x-[10px] p-[8px] rounded-[8px] border border-[1px] border-shinishi">
<div tw="flex h-full flex-col gap-y-[10px] items-end justify-center">
<NormalText tw="font-primary">#392</NormalText>
<SmallText tw="font-primary">BAYC</SmallText>
<NormalText tw="font-primary">38.1 ETH</NormalText>
<SmallText tw="font-primary">(~73.00 USD)</SmallText>
</div>
<img src={leftWidgetImage} alt="left-wager"/>
</PlayerCardContainer>
)
}
export const RightPlayerCardMobile = () => {
return (
<PlayerCardContainer tw="flex flex-row justify-start min-w-[261.36px] min-h-[unset] gap-x-[10px] p-[8px] rounded-[8px] border border-[1px] border-shinishi">
<img src={rightWidgetImage} alt="left-wager"/>
<div tw="flex flex-col h-full gap-y-[10px] items-start justify-center">
<NormalText tw="font-primary">#392</NormalText>
<SmallText tw="font-primary">Noun</SmallText>
<NormalText tw="font-primary">38.0 ETH</NormalText>
<SmallText tw="font-primary">(~73.200 USD)</SmallText>
</div>
</PlayerCardContainer>
)
}
Expand All @@ -51,7 +79,7 @@ export const RightPlayerCard = () => {
<img src={rightWidget} alt="right-wager"/>
</div>
</div>
<SmallText tw="text-blanc text-left w-full font-light leading-[7.5px]">Awaiting opponent</SmallText>
{/* <SmallText tw="text-blanc text-left w-full font-light leading-[7.5px]">Awaiting opponent</SmallText> */}
</PlayerCardContainer>
)
}
28 changes: 28 additions & 0 deletions src/components/LandingPageHero/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { useRef } from 'react';
import { PlayGameContainer } from "../LandingPageHeroSection/types";
import { Dice } from "../Dice";
import { useRoll, useAutoRoll } from "../Dice/animations";
import { LeftPlayerCard, RightPlayerCard } from "../LandingHeroPlayerCard";
import Button from "../Button";
import { SectionHeader } from '../../common/Section/types';
import 'twin.macro';

const LandingPageHero = () => {
const diceRef = useRef<any>(null);
const triggerDice = useRoll(diceRef);
useAutoRoll(diceRef);

return ( <>
<PlayGameContainer tw="flex flex-col gap-[20.66px]">
<div tw="flex gap-x-[20.657px] items-center justify-center">
<LeftPlayerCard />
<Dice diceRef={diceRef} />
<RightPlayerCard />
</div>
<Button buttonType="primary" tw="py-[9.92px] px-[19.83px] min-w-[162px] min-h-[35px]" onClick={() => triggerDice()}>
Roll
</Button>
</PlayGameContainer>
<SectionHeader tw="w-full text-center pt-[32px]">Play multiple P2P betting games with your NFTs.</SectionHeader> </> )
}
export default LandingPageHero;
29 changes: 29 additions & 0 deletions src/components/LandingPageHeroMobile/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { useRef } from 'react';
import { Dice } from "../Dice";
import { useAutoRoll } from "../Dice/animations";
import { LeftPlayerCardMobile, RightPlayerCardMobile} from "../LandingHeroPlayerCard";
import Button from "../Button";

import { VersusIcon } from '../../assets/icons';
import 'twin.macro';

const LandingPageHeroMobile = () => {
const diceRef = useRef<any>(null);
useAutoRoll(diceRef);

return (
<div tw="relative flex flex-col items-center mt-[85px]" >
<VersusIcon tw="relative top-0 mt-[-3rem] mx-auto mb-[-1.5rem] z-[20]" />
<div tw="relative flex gap-x-[8.5px] self-center">
<LeftPlayerCardMobile />
<RightPlayerCardMobile />
</div>
<Dice tw="rounded-[15px] w-[115px] h-[115px] p-[14px] border-[2.5px] mt-[-0.75rem]" diceRef={diceRef} />
<Button
buttonType="primary" tw="shadow-primary-button py-[9.92px] px-[19.83px] min-w-[162px] min-h-[35px] mt-[5rem]" >
Coming soon
</Button>
</div>
)
}
export default LandingPageHeroMobile;
27 changes: 4 additions & 23 deletions src/components/LandingPageHeroSection/index.tsx
Original file line number Diff line number Diff line change
@@ -1,19 +1,10 @@
import { useRef } from 'react';
import Section from "../../common/Section"
import { SectionHeaderContainer, SectionHeaderTitleLarge, SectionHeader } from "../../common/Section/types"
import { PlayGameContainer } from './types'
import { LeftPlayerCard, RightPlayerCard } from '../LandingHeroPlayerCard';
import { SectionHeaderContainer, SectionHeaderTitleLarge } from "../../common/Section/types"
import { FloatingOrbs } from '../../common/FloatingOrbs';
import Button from "../Button";
import { Dice } from "../Dice";
import { useRoll } from "../Dice/animations";
import { useMediaQuery } from '../../hooks';
import LandingPageHero from '../LandingPageHero';
import 'twin.macro';

const LandingPageHeroSection = () => {
const diceRef = useRef<any>(null);
const triggerDice = useRoll(diceRef);
const { isMobile } = useMediaQuery();
return (
<>
<FloatingOrbs tw="translate-y-[-32%] flex justify-center items-center" />
Expand All @@ -23,21 +14,11 @@ const LandingPageHeroSection = () => {
hdr={
<SectionHeaderContainer tw="flex-col items-center ">
<SectionHeaderTitleLarge tw="max-w-[803px] font-primary leading-[68px]">
{isMobile ? "Your NFTs’ Playground" : "Your NFTs’ Favourite Playground"}<span tw="text-oranjo">.</span>
{"Your NFTs’ Favourite Playground"}<span tw="text-oranjo">.</span>
</SectionHeaderTitleLarge>
</SectionHeaderContainer>
}>
<PlayGameContainer tw="flex flex-col gap-[20.66px]">
<div tw="flex gap-x-[20.657px] items-center justify-center">
<LeftPlayerCard />
<Dice diceRef={diceRef} />
<RightPlayerCard />
</div>
<Button buttonType="primary" tw="font-secondary py-[9.92px] px-[19.83px] min-w-[162px] min-h-[35px]" onClick={() => triggerDice()}>
Roll
</Button>
</PlayGameContainer>
<SectionHeader tw="w-full text-center pt-[32px]">Play multiple P2P betting games with your NFTs.</SectionHeader>
<LandingPageHero />
</Section>
</>
)
Expand Down
27 changes: 27 additions & 0 deletions src/components/LandingPageHeroSectionMobile/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import Section from "../../common/Section"
import { SectionHeaderContainer, SectionHeaderTitleLarge, SectionHeader } from "../../common/Section/types"
import { FloatingOrbs } from '../../common/FloatingOrbs';
import 'twin.macro';
import LandingPageHeroMobile from "../LandingPageHeroMobile";

const LandingPageHeroSectionMobile = () => {
return (
<>
<FloatingOrbs tw="translate-y-[-32%] flex justify-center items-center" />
<Section
direction='col'
tw="relative w-full"
hdr={
<SectionHeaderContainer tw="flex-col items-center gap-y-[32px] mb-[unset]">
<SectionHeaderTitleLarge tw="text-start font-primary leading-[68px] pb-[unset]">
{"Your NFTs’ Playground"}<span tw="text-oranjo">.</span>
</SectionHeaderTitleLarge>
<SectionHeader tw="w-full break-words text-start text-[#D9D9D9]">Play multiple P2P betting games with your NFTs.</SectionHeader>
</SectionHeaderContainer>
}>
<LandingPageHeroMobile />
</Section>
</>
)
}
export default LandingPageHeroSectionMobile;
2 changes: 1 addition & 1 deletion src/components/MainContainer/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import 'twin.macro';

const MainContainer: React.FC<MainPropsContainerProps> = ({ children, ...rest }: MainPropsContainerProps) => {
return (
<main tw="relative z-[-5] container mt-10 sm:mt-20 md:mt-36 flex flex-col items-center w-full mx-auto lg:px-[unset]" {...rest}>
<main tw="relative z-[-5] container mt-10 max-w-[100vw] sm:max-w-full md:max-w-full sm:mt-20 md:mt-36 flex flex-col items-center mx-auto lg:px-[unset]" {...rest}>
{children}
</main>
)
Expand Down
60 changes: 60 additions & 0 deletions src/components/cards/NFTCard.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import {
NFTProps,
CardWrapper,
RequestProps
} from './types';
import { SVGComponent } from '../svg';
import { Link } from 'react-router-dom';
import { TransactionState } from '../../listing'

export type NFTCardProps = {
listButton?: boolean;
tradeButton?: boolean;
offersButton?: boolean;
listed?: boolean;
isOfferMaker?: boolean;
nft: NFTProps,
request?: RequestProps;
}

const NFTCard: React.FC<NFTCardProps> = ({
offersButton,
isOfferMaker,
listButton,
request,
listed,
tradeButton,
nft,
}) => {
return (
<CardWrapper>
<header>
<SVGComponent svgString={nft.svgString as string}/>
{ /* add banner that shows if an nft is listed or unlisted */}
</header>
<div>
<h5>{nft.nftName}</h5>
<h6>price: {nft.ethPrice} ETH</h6>
</div>
{
listButton && !listed &&
<footer>
<Link to={`/list`}>
<button type="button">
List
</button>
</Link>
</footer>
}
{
tradeButton && request && request.state === TransactionState.OPEN &&
<Link to="/trade">
<button type="button">
Make an offer
</button>
</Link>
}
</CardWrapper>
)
}
export default NFTCard;
Loading

0 comments on commit 1b449da

Please sign in to comment.