Added current score to leaderboard (#131)

cere-io · Sep 25, 2023 · f821a9f · f821a9f
1 parent 838dbec
commit f821a9f
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 2 deletions.
diff --git a/packages/sdk/src/GameSdk.ts b/packages/sdk/src/GameSdk.ts
@@ -25,6 +25,7 @@ type ShowLeaderboardOptions = {
   onBeforeLoad?: () => AsyncResult;
   withTopWidget?: boolean;
   onShowSignUp?: () => void;
+  currentScore?: number;
 } & ConnectWalletOptions;
 
 type ShowPreloaderOptions = {
@@ -330,7 +331,14 @@ export class GamesSDK {
     };
   }
 
-  showLeaderboard({ onPlayAgain, onBeforeLoad, withTopWidget, onComplete, onConnect }: ShowLeaderboardOptions = {}) {
+  showLeaderboard({
+    onPlayAgain,
+    onBeforeLoad,
+    withTopWidget,
+    onComplete,
+    onConnect,
+    currentScore,
+  }: ShowLeaderboardOptions = {}) {
     const { open, ...modal } = UI.createFullscreenModal(
       async () => {
         const leaderboard = document.createElement('cere-leaderboard');
@@ -369,6 +377,7 @@ export class GamesSDK {
             modal.close();
           },
           serviceUrl: GAME_SERVICE_URL[this.env],
+          currentScore: currentScore,
         });
 
         return leaderboard;
@@ -435,6 +444,7 @@ export class GamesSDK {
       this.showLeaderboard({
         onConnect: save,
         onComplete: resolve,
+        currentScore: score,
       }),
     );
   }

diff --git a/packages/ui/src/widgets/Leaderboard/Leaderboard.tsx b/packages/ui/src/widgets/Leaderboard/Leaderboard.tsx
@@ -31,6 +31,7 @@ export type LeaderboardProps = Pick<TableProps, 'data'> & {
   serviceUrl: string;
   withTopWidget?: boolean;
   onShowSignUp?: () => void;
+  currentScore?: number;
 };
 
 const LeaderboardTitle = styled(Typography)({
@@ -85,7 +86,14 @@ const Alerts = styled.div({
   gridRowGap: '5px',
 });
 
-export const Leaderboard = ({ data, activeTournament, onPlayAgain, onTweet, withTopWidget }: LeaderboardProps) => {
+export const Leaderboard = ({
+  data,
+  activeTournament,
+  onPlayAgain,
+  onTweet,
+  withTopWidget,
+  currentScore,
+}: LeaderboardProps) => {
   const { sessionPrice, sdkUrl: cdnUrl } = useConfigContext();
   const { address, balance = 0 } = useWalletContext();
   const playerData = useMemo(() => data.find((row) => row.address === address), [data, address]);
@@ -123,6 +131,7 @@ Be top-3 player and share a prize"
           onTweet={onTweet}
           disabled={balance < sessionPrice}
           score={playerData?.score}
+          currentScore={currentScore}
           rank={playerData?.rank}
         />
       )}

diff --git a/packages/ui/src/widgets/Leaderboard/TopWidget.tsx b/packages/ui/src/widgets/Leaderboard/TopWidget.tsx
@@ -15,6 +15,7 @@ type TopWidgetProps = {
   onTweet?: (score: number) => Promise<{ tweetBody: string }>;
   score?: number;
   rank?: number;
+  currentScore?: number;
 };
 
 const WidgetWrapper = styled(ModalWrapper)(({ tournament }: { tournament?: boolean }) => ({
@@ -207,6 +208,7 @@ export const TopWidget = ({
   onTweet,
   score,
   rank,
+  currentScore,
 }: TopWidgetProps): JSX.Element => {
   const { sdkUrl: cdnUrl, gamePortalUrl } = useConfigContext();
   const { address, isReady } = useWalletContext();
@@ -246,6 +248,11 @@ export const TopWidget = ({
               <img src={`${cdnUrl}/assets/third-place-reward.svg`} alt="Third place reward" />
             </RewardColumn>
           </RewardsRow>
+          {!address && currentScore && (
+            <Typography align="center">
+              Your score <Rank>{currentScore}</Rank>
+            </Typography>
+          )}
           {address && (
             <Typography align="center">
               Your rank <Rank>{rank}</Rank>

diff --git a/playground/src/Playground.tsx b/playground/src/Playground.tsx
@@ -62,6 +62,7 @@ export const Playground = () => {
 
     const modal = sdk.showLeaderboard({
       onPlayAgain: () => modal.close(),
+      currentScore: 25,
     });
   }, [sdk]);