Merge branch 'release/0.6.4'

cere-io · Sep 21, 2023 · d032691 · d032691
2 parents b9023fb + 81fa79f
commit d032691
Show file tree

Hide file tree

Showing 17 changed files with 76 additions and 97 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,11 @@
 
 -
 
+### v0.6.4
+
+- [[Bug]](https://www.notion.so/cere/Score-doesn-t-update-on-Leaderboard-156d4e51984c4c9c9eabca01e7c8955e?pvs=4) Fix
+  user session on playAgain
+
 ### v0.6.3
 
 - [[Feature](https://www.notion.so/Release-September-18-604831108ac940268f4c52bad61a9421?pvs=21)] Added new logic for

diff --git a/lerna.json b/lerna.json
@@ -1,3 +1,3 @@
 {
-  "version": "0.6.3"
+  "version": "0.6.4"
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/eslint-config/package.json b/packages/eslint-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cere/eslint-config-games-sdk",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "main": "index.js",
   "private": true,
   "dependencies": {

diff --git a/packages/sdk/package.json b/packages/sdk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cere/games-sdk",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "description": "Cere Games SDK to integrate games with CERE infrastructure",
   "sideEffects": false,
   "main": "dist/bundle.umd.js",
@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@cere/embed-wallet": "0.12.0",
-    "@cere/games-sdk-ui": "0.6.3",
+    "@cere/games-sdk-ui": "0.6.4",
     "react-gtm-module": "^2.0.11"
   },
   "devDependencies": {

diff --git a/packages/sdk/src/GameSdk.ts b/packages/sdk/src/GameSdk.ts
@@ -238,6 +238,7 @@ export class GamesSDK {
         modal.close();
         this.showLeaderboard({
           onPlayAgain: async (close?: () => void) => {
+            this.startSession(); // Create and store game session in background
             await onPlayAgain?.();
             close?.();
           },
@@ -430,8 +431,7 @@ export class GamesSDK {
     }
 
     await new Promise<void>((resolve) =>
-      this.earnScreen({
-        score,
+      this.showLeaderboard({
         onConnect: save,
         onComplete: resolve,
       }),

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cere/games-sdk-ui",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "description": "Cere Games SDK UI Elements",
   "sideEffects": false,
   "main": "dist/bundle.umd.js",

diff --git a/packages/ui/src/components/Table/Table.tsx b/packages/ui/src/components/Table/Table.tsx
@@ -84,17 +84,19 @@ export const Table = ({ data, activeAddress, hasTournament }: TableProps) => {
   };
   return (
     <Container ref={containerRef} role="table">
-      <TableHeader columns={['Rank', 'Player', 'Prize', 'Score']} />
+      <TableHeader columns={['Rank', 'Player', 'Prize', 'Score']} active={Boolean(activeAddress)} />
       {activeRow && (
         <TableDataRow
           hasReward={activeRow.rank <= (hasTournament ? MAX_RANK_WITH_GIFT_WITH_TOURNAMENT : MAX_RANK_WITH_GIFT)}
           active
+          activeAddress
           shouldChangeStyle={shouldChangeStyle}
           data={activeRow}
         />
       )}
       {rows.map((row) => (
         <TableDataRow
+          activeAddress={Boolean(activeAddress)}
           key={row.address}
           data={row}
           hasReward={row.rank <= (hasTournament ? MAX_RANK_WITH_GIFT_WITH_TOURNAMENT : MAX_RANK_WITH_GIFT)}

diff --git a/packages/ui/src/components/Table/TableDataRow.tsx b/packages/ui/src/components/Table/TableDataRow.tsx
@@ -19,6 +19,7 @@ export type TableDataRowProps = {
   data: Data;
   hasReward?: boolean;
   shouldChangeStyle?: boolean;
+  activeAddress?: boolean;
 };
 
 const Wrapper = styled.div<Pick<TableDataRowProps, 'active' | 'shouldChangeStyle'>>(
@@ -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) => {
   const isMobile = useMediaQuery('(max-width: 600px)');
 
   const rewardTsx = useMemo(() => {
@@ -73,6 +74,7 @@ export const TableDataRow = ({ data, active, hasReward, shouldChangeStyle }: Tab
   return (
     <Wrapper active={active} shouldChangeStyle={shouldChangeStyle} role="row" aria-selected={active}>
       <TableRow
+        active={Boolean(activeAddress)}
         columns={[
           <Rank rankColor={rankColors[data.rank - 1]}>{data.rank}</Rank>,
           <Typography variant="body2">

diff --git a/packages/ui/src/components/Table/TableHeader.tsx b/packages/ui/src/components/Table/TableHeader.tsx
@@ -3,9 +3,10 @@ import { TableRow, TableRowProps } from './TableRow';
 
 export type TableHeaderProps = TableRowProps;
 
-export const TableHeader = ({ columns }: TableHeaderProps) => (
+export const TableHeader = ({ columns, active }: TableHeaderProps) => (
   <TableRow
     header
+    active
     columns={columns.map((column, index) => (
       <Typography color="secondary" variant="caption">
         {column}

diff --git a/packages/ui/src/components/Table/TableRow.tsx b/packages/ui/src/components/Table/TableRow.tsx
@@ -7,23 +7,25 @@ import { Stack } from '../Stack';
 export type TableRowProps = {
   header?: boolean;
   columns: ReactNode[];
+  active?: boolean;
 };
 
 const Column = styled.div({
   display: 'flex',
 });
 
-const Row = styled(Stack)(({ theme }) => ({
+const Row = styled(Stack)<{ active?: boolean }>(({ theme, active }) => ({
   height: 44,
   padding: theme.spacing(0, 2),
+  filter: active ? 'none' : 'blur(5px)',
 }));
 
-export const TableRow = ({ columns, header = false }: TableRowProps) => {
+export const TableRow = ({ columns, header = false, active }: TableRowProps) => {
   const isMobile = useMediaQuery('(max-width: 440px)');
   const columnRole: AriaRole = header ? 'columnheader' : 'cell';
 
   return (
-    <Row role="row" direction="row" align="center">
+    <Row role="row" active={active} direction="row" align="center">
       <Column role={columnRole} style={{ width: 90 }}>
         {columns[0]}
       </Column>

diff --git a/packages/ui/src/widgets/Leaderboard/Leaderboard.tsx b/packages/ui/src/widgets/Leaderboard/Leaderboard.tsx
@@ -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,
@@ -85,14 +85,7 @@ const Alerts = styled.div({
   gridRowGap: '5px',
 });
 
-export const Leaderboard = ({
-  data,
-  activeTournament,
-  onPlayAgain,
-  onTweet,
-  withTopWidget,
-  onShowSignUp,
-}: LeaderboardProps) => {
+export const Leaderboard = ({ data, activeTournament, onPlayAgain, onTweet, withTopWidget }: LeaderboardProps) => {
   const { sessionPrice, sdkUrl: cdnUrl } = useConfigContext();
   const { address, balance = 0 } = useWalletContext();
   const playerData = useMemo(() => data.find((row) => row.address === address), [data, address]);
@@ -136,19 +129,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)} />

diff --git a/packages/ui/src/widgets/Leaderboard/TopWidget.tsx b/packages/ui/src/widgets/Leaderboard/TopWidget.tsx
@@ -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' }}>
@@ -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>
   );

diff --git a/packages/ui/src/widgets/Preloader/Preloader.tsx b/packages/ui/src/widgets/Preloader/Preloader.tsx
@@ -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?.();
   }
 

diff --git a/playground/package.json b/playground/package.json
@@ -1,12 +1,12 @@
 {
   "name": "@cere-games-sdk/playground",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "private": true,
   "scripts": {
     "start": "craco start"
   },
   "dependencies": {
-    "@cere/games-sdk": "0.6.3",
+    "@cere/games-sdk": "0.6.4",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/lab": "^5.0.0-alpha.119",