Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: quick logic fix #123

Merged
merged 3 commits into from
Sep 20, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions packages/sdk/src/GameSdk.ts
Original file line number Diff line number Diff line change
Expand Up @@ -430,8 +430,7 @@ export class GamesSDK {
}

await new Promise<void>((resolve) =>
this.earnScreen({
score,
this.showLeaderboard({
onConnect: save,
onComplete: resolve,
}),
Expand Down
2 changes: 2 additions & 0 deletions packages/ui/src/components/Table/Table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -89,12 +89,14 @@ export const Table = ({ data, activeAddress, hasTournament }: TableProps) => {
<TableDataRow
hasReward={activeRow.rank <= (hasTournament ? MAX_RANK_WITH_GIFT_WITH_TOURNAMENT : MAX_RANK_WITH_GIFT)}
active
activeAddress={activeAddress}
shouldChangeStyle={shouldChangeStyle}
data={activeRow}
/>
)}
{rows.map((row) => (
<TableDataRow
activeAddress={activeAddress}
key={row.address}
data={row}
hasReward={row.rank <= (hasTournament ? MAX_RANK_WITH_GIFT_WITH_TOURNAMENT : MAX_RANK_WITH_GIFT)}
Expand Down
4 changes: 3 additions & 1 deletion packages/ui/src/components/Table/TableDataRow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export type TableDataRowProps = {
data: Data;
hasReward?: boolean;
shouldChangeStyle?: boolean;
activeAddress?: string;
};

const Wrapper = styled.div<Pick<TableDataRowProps, 'active' | 'shouldChangeStyle'>>(
Expand Down Expand Up @@ -60,7 +61,7 @@ const EmptySpace = styled.div({

const rankColors: RankProps['rankColor'][] = ['gold', 'silver', 'bronze'];

export const TableDataRow = ({ data, active, hasReward, shouldChangeStyle }: TableDataRowProps) => {
export const TableDataRow = ({ data, active, hasReward, shouldChangeStyle, activeAddress }: TableDataRowProps) => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You don't need new prop here activeAddress. Active adderess is in active prop

const isMobile = useMediaQuery('(max-width: 600px)');

const rewardTsx = useMemo(() => {
Expand All @@ -73,6 +74,7 @@ export const TableDataRow = ({ data, active, hasReward, shouldChangeStyle }: Tab
return (
<Wrapper active={active} shouldChangeStyle={shouldChangeStyle} role="row" aria-selected={active}>
<TableRow
activeAddress={Boolean(activeAddress)}
columns={[
<Rank rankColor={rankColors[data.rank - 1]}>{data.rank}</Rank>,
<Typography variant="body2">
Expand Down
1 change: 1 addition & 0 deletions packages/ui/src/components/Table/TableHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export type TableHeaderProps = TableRowProps;
export const TableHeader = ({ columns }: TableHeaderProps) => (
<TableRow
header
activeAddress
columns={columns.map((column, index) => (
<Typography color="secondary" variant="caption">
{column}
Expand Down
8 changes: 5 additions & 3 deletions packages/ui/src/components/Table/TableRow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,23 +7,25 @@ import { Stack } from '../Stack';
export type TableRowProps = {
header?: boolean;
columns: ReactNode[];
activeAddress?: boolean;
};

const Column = styled.div({
display: 'flex',
});

const Row = styled(Stack)(({ theme }) => ({
const Row = styled(Stack)<{ activeAddress?: boolean }>(({ theme, activeAddress }) => ({
height: 44,
padding: theme.spacing(0, 2),
filter: activeAddress ? 'none' : 'blur(5px)',
}));

export const TableRow = ({ columns, header = false }: TableRowProps) => {
export const TableRow = ({ columns, header = false, activeAddress }: TableRowProps) => {
const isMobile = useMediaQuery('(max-width: 440px)');
const columnRole: AriaRole = header ? 'columnheader' : 'cell';

return (
<Row role="row" direction="row" align="center">
<Row role="row" activeAddress={activeAddress} direction="row" align="center">
<Column role={columnRole} style={{ width: 90 }}>
{columns[0]}
</Column>
Expand Down
10 changes: 4 additions & 6 deletions packages/ui/src/widgets/Leaderboard/Leaderboard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -56,11 +56,11 @@ const Address = styled.div({
});

const SignUpButton = styled.button({
width: 229,
width: 141,
height: 52,
borderRadius: 4,
border: '1px solid #F32758',
background: '#1B0B2A',
background: 'rgba(243, 39, 88, 1)',
padding: '15px 16px',
fontFamily: 'Lexend',
fontSize: 15,
Expand Down Expand Up @@ -136,19 +136,17 @@ Be top-3 player and share a prize"
<ModalWrapper layer={`${cdnUrl}/assets/layer.svg`}>
<RadialGradientBackGround />
<Content>
{playerData ? (
{playerData && (
<Stack direction="row" spacing="space-between">
<LeaderboardTitle>leaderboard</LeaderboardTitle>
<Address>
<Truncate text={playerData.address} maxLength={8} />
</Address>
</Stack>
) : (
<LeaderboardTitle>leaderboard</LeaderboardTitle>
)}
{!playerData && (
<Stack align="center">
<SignUpButton onClick={onShowSignUp}>Sign Up to unlock score</SignUpButton>
<SignUpButton onClick={handlePlayAgain}>Sign Up Now!</SignUpButton>
</Stack>
)}
<Table data={data} activeAddress={address} hasTournament={Boolean(activeTournament)} />
Expand Down
86 changes: 31 additions & 55 deletions packages/ui/src/widgets/Leaderboard/TopWidget.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -227,59 +227,35 @@ export const TopWidget = ({
<WidgetWrapper layer={`${cdnUrl}/assets/layer.svg`} padding={[3, 3, 3, 3]} tournament={hasActiveTournament}>
<RadialGradientBackGround />
<Content>
{!hasActiveTournament ? (
<>
<DaysLeft>{amountOfDaysLeft} day left</DaysLeft>
<NFTImage src={`${cdnUrl}/assets/nft.png`} />
<Text>
<Typography>{tournamentTitle}</Typography>
<UniqueNFT>{tournamentSubtitle}</UniqueNFT>
</Text>
<Row columns={'146px 99px'} columnGap={8}>
<PlayAgain onClick={onPlayAgain}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<RepeatIcon />
<PlayAgainText>Play Again</PlayAgainText>
</div>
</PlayAgain>
<TweetButton
disabled={!isReady || !address}
icon={<TwitterIcon color="#FFF" />}
variant="outlined"
onClick={handleShareClick}
>
Share
</TweetButton>
</Row>
<GamePortalButton onClick={handleOpenGamePortal}>Go to Cere game portal →</GamePortalButton>
</>
) : (
<>
<UniqueNFT align="center" tournament>
{tournamentSubtitle}
</UniqueNFT>
<Typography align="center">{tournamentTitle}</Typography>
<DaysLeft tournament={hasActiveTournament}>{amountOfDaysLeft} day left</DaysLeft>
<RewardsRow>
<RewardColumn>
<span>1st prize</span>
<img src={`${cdnUrl}/assets/first-place-reward.svg`} alt="First place reward" />
<span>USDT</span>
</RewardColumn>
<RewardColumn>
<span>2nd prize</span>
<img src={`${cdnUrl}/assets/second-place-reward.svg`} alt="Second place reward" />
<span>USDT</span>
</RewardColumn>
<RewardColumn>
<span>3rd prize</span>
<img src={`${cdnUrl}/assets/third-place-reward.svg`} alt="Third place reward" />
<span>USDT</span>
</RewardColumn>
</RewardsRow>
<>
<UniqueNFT align="center" tournament>
{tournamentSubtitle}
</UniqueNFT>
<Typography align="center">{tournamentTitle}</Typography>
<DaysLeft tournament={hasActiveTournament}>{amountOfDaysLeft} day left</DaysLeft>
<RewardsRow>
<RewardColumn>
<span>1st prize</span>
<img src={`${cdnUrl}/assets/first-place-reward.svg`} alt="First place reward" />
<span>USDT</span>
</RewardColumn>
<RewardColumn>
<span>2nd prize</span>
<img src={`${cdnUrl}/assets/second-place-reward.svg`} alt="Second place reward" />
<span>USDT</span>
</RewardColumn>
<RewardColumn>
<span>3rd prize</span>
<img src={`${cdnUrl}/assets/third-place-reward.svg`} alt="Third place reward" />
<span>USDT</span>
</RewardColumn>
</RewardsRow>
{rank && (
<Typography align="center">
Your rank <Rank>{rank}</Rank>
</Typography>
)}
{address && (
<Row columns={'130px 130px'} columnGap={6} justify="center">
<PlayAgain onClick={onPlayAgain} tournament={hasActiveTournament}>
<div style={{ display: 'flex', alignItems: 'center' }}>
Expand All @@ -297,11 +273,11 @@ export const TopWidget = ({
Share
</TweetButton>
</Row>
<GamePortalButton tournament={hasActiveTournament} onClick={handleOpenGamePortal}>
Go to Cere game portal →
</GamePortalButton>
</>
)}
)}
<GamePortalButton tournament={hasActiveTournament} onClick={handleOpenGamePortal}>
Go to Cere game portal →
</GamePortalButton>
</>
</Content>
</WidgetWrapper>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/widgets/Preloader/Preloader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ export const Preloader = ({ ready = false, onStartClick, navigateLeaderBoardWidg
return;
}, [name]);

if (lsInfo && lsInfo.name === name && (address || lsInfo.address)) {
if (lsInfo && lsInfo.name === name && address && lsInfo.address) {
navigateLeaderBoardWidget?.();
}

Expand Down
Loading