Layout fixes (#119)

cere-io · Sep 18, 2023 · 03caf42 · 03caf42
1 parent 2fbbc73
commit 03caf42
Show file tree

Hide file tree

Showing 7 changed files with 154 additions and 106 deletions.
diff --git 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<EarnScreenOptions, 'onConnect' | 'onComplete'>;
@@ -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
@@ -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
@@ -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
@@ -123,7 +123,7 @@ Be top-3 player and share a prize"
       {withTopWidget && (
         <TopWidget
           hasActiveTournament={Boolean(activeTournament)}
-          tournamentTitle={`${activeTournament ? activeTournament.title : 'Weekly'} tournament`}
+          tournamentTitle={`${activeTournament ? activeTournament.title : 'Weekly tournament'}`}
           tournamentSubtitle={activeTournament ? activeTournament.subtitle : 'TOP 20 WINS UNIQUE NFT'}
           amountOfDaysLeft={dayDifference ? dayDifference : 1}
           onPlayAgain={handlePlayAgain}

diff --git a/packages/ui/src/widgets/Leaderboard/TopWidget.tsx b/packages/ui/src/widgets/Leaderboard/TopWidget.tsx
@@ -1,10 +1,12 @@
 import styled from '@emotion/styled';
 import { useCallback } from 'react';
 
-import { ModalWrapper, RadialGradientBackGround, Content, Typography, Button, Stack } from '../../components';
+import { ModalWrapper, RadialGradientBackGround, Content, Typography, Button } from '../../components';
 import { useConfigContext, useGameInfo, useWalletContext } from '../../hooks';
 import { RepeatIcon, TwitterIcon } from '../../icons';
 
+const DISCORD_URL = '';
+
 type TopWidgetProps = {
   amountOfDaysLeft?: number;
   onPlayAgain: () => 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,14 +219,18 @@ 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`;
     window.open(`https://twitter.com/intent/tweet?${tweetBody}`, '_system', 'width=600,height=600');
   }, [address, gameInfo.name, onTweet, score]);
 
   return (
-    <WidgetWrapper layer={`${cdnUrl}/assets/layer.svg`} padding={[3, 3, 3, 3]}>
+    <WidgetWrapper layer={`${cdnUrl}/assets/layer.svg`} padding={[3, 3, 3, 3]} tournament={hasActiveTournament}>
       <RadialGradientBackGround />
       <Content>
         {!hasActiveTournament ? (
@@ -237,9 +261,11 @@ export const TopWidget = ({
           </>
         ) : (
           <>
+            <UniqueNFT align="center" tournament>
+              {tournamentSubtitle}
+            </UniqueNFT>
             <Typography align="center">{tournamentTitle}</Typography>
             <DaysLeft tournament={hasActiveTournament}>{amountOfDaysLeft} day left</DaysLeft>
-            <UniqueNFT align="center">{tournamentSubtitle}</UniqueNFT>
             <RewardsRow>
               <RewardColumn>
                 <span>1st prize</span>
@@ -277,8 +303,8 @@ export const TopWidget = ({
                 Share
               </TweetButton>
             </Row>
-            <GamePortalButton tournament={hasActiveTournament} onClick={handleOpenGamePortal}>
-              Go to Cere game portal →
+            <GamePortalButton tournament={hasActiveTournament} onClick={handleOpenDiscord}>
+              Learn more on Discord →
             </GamePortalButton>
           </>
         )}

diff --git 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?.();
   }