From 03caf42bd4be52cb515ad04817d3912612c48f1c Mon Sep 17 00:00:00 2001 From: Anton Mazhuto <125869076+mazhutoanton@users.noreply.github.com> Date: Mon, 18 Sep 2023 17:14:14 +0300 Subject: [PATCH] Layout fixes (#119) --- packages/sdk/src/GameSdk.ts | 12 +- packages/ui/src/components/Alert/Alert.tsx | 8 +- .../FullScreenBackDrop/FullScreenBackDrop.tsx | 1 - .../src/widgets/Leaderboard/Leaderboard.tsx | 2 +- .../ui/src/widgets/Leaderboard/TopWidget.tsx | 56 ++++-- .../ui/src/widgets/Preloader/Preloader.tsx | 12 +- web/examples/metaverse-dash-run/index.html | 169 +++++++++--------- 7 files changed, 154 insertions(+), 106 deletions(-) diff --git a/packages/sdk/src/GameSdk.ts b/packages/sdk/src/GameSdk.ts index faa7ec72..8e8b27a3 100644 --- a/packages/sdk/src/GameSdk.ts +++ b/packages/sdk/src/GameSdk.ts @@ -29,6 +29,7 @@ type ShowLeaderboardOptions = { type ShowPreloaderOptions = { onStart?: () => AsyncResult; + onPlayAgain?: () => AsyncResult; }; type ConnectWalletOptions = Pick; @@ -220,7 +221,7 @@ export class GamesSDK { this.sessionEvents.push({ timestamp: Date.now(), ...event }); } - showPreloader({ onStart }: ShowPreloaderOptions = {}) { + showPreloader({ onStart, onPlayAgain }: ShowPreloaderOptions = {}) { const preloader = document.createElement('cere-preloader'); const { open, ...modal } = UI.createModal(preloader); @@ -237,7 +238,7 @@ export class GamesSDK { modal.close(); this.showLeaderboard({ onPlayAgain: async (close?: () => void) => { - await onStart?.(); + await onPlayAgain?.(); close?.(); }, }); @@ -262,7 +263,11 @@ export class GamesSDK { this.ui.wallet.isNewUser = isNewUser; if (this.ui.wallet.address) { - localStorage.setItem('userAddress', this.ui.wallet.address); + const gameInfo = { + address: this.ui.wallet.address, + name: this.ui.gameInfo.name, + }; + localStorage.setItem(`game-info-${this.ui.gameInfo.name}`, JSON.stringify(gameInfo)); } await onConnect?.(accounts, isNewUser); @@ -332,6 +337,7 @@ export class GamesSDK { this.analytics.trackEvent(ANALYTICS_EVENTS.clickPlayAgain, { userEmail: email }); await this.payForSession(); await onPlayAgain?.(modal.close); + modal.close(); } else { const { open } = this.showInsertCoin(); open(); diff --git a/packages/ui/src/components/Alert/Alert.tsx b/packages/ui/src/components/Alert/Alert.tsx index 30456c22..82156e63 100644 --- a/packages/ui/src/components/Alert/Alert.tsx +++ b/packages/ui/src/components/Alert/Alert.tsx @@ -27,7 +27,13 @@ const Container = styled.div<{ visible: boolean; skin?: AlertProps['skin'] }>( width: '100%', }, }, - ({ skin }) => skin === 'signUp' && { width: '322px', justifySelf: 'end' }, + ({ skin }) => + skin === 'signUp' && { + width: '322px', + justifySelf: 'end', + padding: '24px 20px 20px 20px', + whiteSpace: 'pre-wrap', + }, ({ visible }) => ({ visibility: visible ? 'visible' : 'hidden', }), diff --git a/packages/ui/src/components/FullScreenBackDrop/FullScreenBackDrop.tsx b/packages/ui/src/components/FullScreenBackDrop/FullScreenBackDrop.tsx index e61722e3..2b59510f 100644 --- a/packages/ui/src/components/FullScreenBackDrop/FullScreenBackDrop.tsx +++ b/packages/ui/src/components/FullScreenBackDrop/FullScreenBackDrop.tsx @@ -17,7 +17,6 @@ const Overlay = styled.div({ WebkitTapHighlightColor: 'transparent', overscrollBehavior: 'contain', zIndex: 999, - overflow: 'hidden', }); const Content = styled.div(({ theme }) => ({ diff --git a/packages/ui/src/widgets/Leaderboard/Leaderboard.tsx b/packages/ui/src/widgets/Leaderboard/Leaderboard.tsx index dff67301..e68403e9 100644 --- a/packages/ui/src/widgets/Leaderboard/Leaderboard.tsx +++ b/packages/ui/src/widgets/Leaderboard/Leaderboard.tsx @@ -123,7 +123,7 @@ Be top-3 player and share a prize" {withTopWidget && ( void; @@ -17,14 +19,15 @@ type TopWidgetProps = { rank?: number; }; -const WidgetWrapper = styled(ModalWrapper)({ +const WidgetWrapper = styled(ModalWrapper)(({ tournament }: { tournament?: boolean }) => ({ + padding: '36px 24px 32px 24px', width: 490, minHeight: 265, '@media (max-width: 600px)': { width: 'auto', - maxHeight: 325, + maxHeight: tournament ? '100%' : 325, }, -}); +})); const DaysLeft = styled.div(({ tournament }: { tournament?: boolean }) => ({ padding: '7px 15px 7px 32px', @@ -46,11 +49,11 @@ const DaysLeft = styled.div(({ tournament }: { tournament?: boolean }) => ({ top: '0', left: '0', width: '151px', - margin: '4px auto 24px auto', + margin: '4px auto 14px auto', } : {}), '@media (max-width: 600px)': { - left: '-30px', + left: tournament ? '0px' : '-30px', }, })); @@ -63,16 +66,19 @@ const Text = styled.div({ }, }); -const UniqueNFT = styled(Typography)({ +const UniqueNFT = styled(Typography)(({ tournament }: { tournament?: boolean }) => ({ fontFamily: 'Yapari-SemiBold', fontWeight: 600, fontSize: 24, + ...(tournament && { + textTransform: 'uppercase', + }), '@media (max-width: 600px)': { - width: 186, - height: 72, + width: 287, fontSize: 19, + margin: '0 auto', }, -}); +})); const PlayAgain = styled(Button)(({ tournament }: { tournament?: boolean }) => ({ marginTop: tournament ? '20px!important' : '37px!important', @@ -84,6 +90,12 @@ const PlayAgain = styled(Button)(({ tournament }: { tournament?: boolean }) => ( borderRadius: 4, padding: 0, background: 'rgba(243, 39, 88, 1)', + ...(tournament && { + whiteSpace: 'nowrap', + '@media (max-width: 600px)': { + marginTop: '14px!important', + }, + }), })); const PlayAgainText = styled(Typography)({ @@ -102,7 +114,15 @@ const TweetButton = styled(Button)(({ tournament }: { tournament?: boolean }) => borderRadius: 4, '& > div': { padding: '0 6px', + ...(tournament && { + whiteSpace: 'nowrap', + }), }, + ...(tournament && { + '@media (max-width: 600px)': { + marginTop: '14px!important', + }, + }), })); const GamePortalButton = styled(Typography)(({ tournament }: { tournament?: boolean }) => ({ @@ -138,7 +158,7 @@ const RewardsRow = styled.div({ gridTemplateColumns: 'repeat(3, 1fr)', alignItems: 'center', justifyContent: 'space-between', - marginTop: '18px', + marginTop: '14px', marginBottom: '20px', '& > div': { justifySelf: 'center', @@ -199,6 +219,10 @@ export const TopWidget = ({ window.open(gamePortalUrl, '_blank')?.focus(); }, [gamePortalUrl]); + const handleOpenDiscord = useCallback(() => { + window.open(DISCORD_URL, '_blank')?.focus(); + }, []); + const handleShareClick = useCallback(async () => { await onTweet?.(score as number); const tweetBody = `text=Do you think you can beat my ${gameInfo.name} high-score?%0a%0a${address}%0a%0aMy score: ${score}%0a%0aPlay it straight from your browser here: ${window.location.href}%0a%0a&hashtags=metaversadash,web3,gamer`; @@ -206,7 +230,7 @@ export const TopWidget = ({ }, [address, gameInfo.name, onTweet, score]); return ( - + {!hasActiveTournament ? ( @@ -237,9 +261,11 @@ export const TopWidget = ({ ) : ( <> + + {tournamentSubtitle} + {tournamentTitle} {amountOfDaysLeft} day left - {tournamentSubtitle} 1st prize @@ -277,8 +303,8 @@ export const TopWidget = ({ Share - - Go to Cere game portal → + + Learn more on Discord → )} diff --git a/packages/ui/src/widgets/Preloader/Preloader.tsx b/packages/ui/src/widgets/Preloader/Preloader.tsx index 12c01269..91fa7f12 100644 --- a/packages/ui/src/widgets/Preloader/Preloader.tsx +++ b/packages/ui/src/widgets/Preloader/Preloader.tsx @@ -1,4 +1,5 @@ import styled from '@emotion/styled'; +import { useMemo } from 'react'; import { Button, ProgressiveImg, Stack, Typography, Steps } from '../../components'; import { useAsyncCallback, useConfigContext, useGameInfo, useMediaQuery, useWalletContext } from '../../hooks'; @@ -63,11 +64,18 @@ export type PreloaderProps = { export const Preloader = ({ ready = false, onStartClick, navigateLeaderBoardWidget }: PreloaderProps) => { const isLandscape = useMediaQuery('(max-height: 440px)'); const [handleStartClick, isBusy] = useAsyncCallback(onStartClick); - const { loading, preloader } = useGameInfo(); + const { loading, preloader, name } = useGameInfo(); const { sdkUrl: cdnUrl } = useConfigContext(); const { address } = useWalletContext(); + const lsInfo = useMemo(() => { + const info = localStorage.getItem(`game-info-${name}`); + if (info) { + return JSON.parse(info); + } + return; + }, [name]); - if (address || localStorage.getItem('userAddress')) { + if (lsInfo && lsInfo.name === name && (address || lsInfo.address)) { navigateLeaderBoardWidget?.(); } diff --git a/web/examples/metaverse-dash-run/index.html b/web/examples/metaverse-dash-run/index.html index a66b5c64..c2c36e94 100644 --- a/web/examples/metaverse-dash-run/index.html +++ b/web/examples/metaverse-dash-run/index.html @@ -1,83 +1,86 @@ - - - - Metaverse Dash Run - - - - - - - - - - - - - - - - - - -
-
- -
-
- - - -
- - - - - - - + + + + Metaverse Dash Run + + + + + + + + + + + + + + + + + + +
+
+ +
+
+ + + +
+ + + + + + +