Update events screen

Koniverse · Oct 30, 2024 · 9ec7960 · 9ec7960
1 parent e2b4db8
commit 9ec7960
Show file tree

Hide file tree

Showing 10 changed files with 128 additions and 26 deletions.
diff --git a/packages/extension-koni-ui/src/Popup/Home/Events/EventListContainer.tsx b/packages/extension-koni-ui/src/Popup/Home/Events/EventListContainer.tsx
@@ -1,12 +1,13 @@
 // Copyright 2019-2022 @subwallet/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { EventDifficulty, EventItem, EventItemType, EventState } from '@subwallet/extension-koni-ui/components/Mythical';
+import { EmptyListContent, EventDifficulty, EventItem, EventItemType, EventState } from '@subwallet/extension-koni-ui/components/Mythical';
 import { GameEvent } from '@subwallet/extension-koni-ui/connector/booka/types';
 import { EventTab } from '@subwallet/extension-koni-ui/Popup/Home/Events/shared';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { customFormatDate } from '@subwallet/extension-koni-ui/utils';
 import React, { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
 type Props = ThemeProps & {
@@ -27,8 +28,17 @@ function getEventDifficult (difficult: number): EventDifficulty {
   return EventDifficulty.EASY;
 }
 
-// todo: update logic for ongoing event (filter the completed game)
+function isEventCompleted (gameEvent: GameEvent, dateNow: number): boolean {
+  const endTime = new Date(gameEvent.endTime).getTime();
+
+  return dateNow >= endTime || (gameEvent.gamePlays?.length >= gameEvent.tossUpInfo.gameplayPerEvent);
+}
+
 function isEventOngoing (gameEvent: GameEvent, dateNow: number): boolean {
+  if (isEventCompleted(gameEvent, dateNow)) {
+    return false;
+  }
+
   const startTime = new Date(gameEvent.startTime).getTime();
   const endTime = new Date(gameEvent.endTime).getTime();
 
@@ -41,11 +51,6 @@ function isEventUpcoming (gameEvent: GameEvent, dateNow: number): boolean {
   return dateNow < startTime;
 }
 
-// todo: update logic for completed event (with score)
-function isEventCompleted (gameEvent: GameEvent, dateNow: number): boolean {
-  return gameEvent.gamePlays?.length >= gameEvent.tossUpInfo.gameplayPerEvent;
-}
-
 function getEventState (gameEvent: GameEvent, dateNow: number): EventState {
   if (isEventCompleted(gameEvent, dateNow)) {
     return EventState.COMPLETED;
@@ -87,7 +92,18 @@ function getTimeRemaining (dateNow: number, targetTime: string): string {
   }
 }
 
+function getEventEndTime (gameEvent: GameEvent) {
+  const latestGamePlay = gameEvent.gamePlays?.length ? gameEvent.gamePlays[gameEvent.gamePlays.length - 1] : undefined;
+
+  if (latestGamePlay) {
+    return latestGamePlay.endTime || latestGamePlay.startTime;
+  }
+
+  return gameEvent.endTime;
+}
+
 const Component = ({ className, gameEvents, onPlayEvent, selectedTab }: Props): React.ReactElement => {
+  const { t } = useTranslation();
   const [eventItems, setEventItems] = useState<EventItemType[]>([]);
 
   // get gameEvents that is sorted and filtered
@@ -150,7 +166,7 @@ const Component = ({ className, gameEvents, onPlayEvent, selectedTab }: Props):
 
       _completedItems.sort((a: GameEvent, b: GameEvent) => {
         // most recently completed events appear first
-        return new Date(b.endTime).getTime() - new Date(a.endTime).getTime();
+        return new Date(getEventEndTime(b)).getTime() - new Date(getEventEndTime(a)).getTime();
       });
 
       return [
@@ -180,12 +196,22 @@ const Component = ({ className, gameEvents, onPlayEvent, selectedTab }: Props):
         }
 
         if (eventState === EventState.COMPLETED) {
-          return customFormatDate(eventInfo.endTime, '#MM#/#DD#/#YY# #hh#:#mm#');
+          return customFormatDate(getEventEndTime(eventInfo), '#MM#/#DD#/#YY# #hh#:#mm#');
         }
 
         return '---';
       })();
 
+      const score = (() => {
+        if (eventState === EventState.COMPLETED && eventInfo.gamePlays) {
+          return eventInfo.gamePlays.reduce((totalScore, game) => {
+            return totalScore + (game.point || 0);
+          }, 0);
+        }
+
+        return undefined;
+      })();
+
       result.push({
         id: eventInfo.id,
         difficulty: getEventDifficult(eventInfo.tossUpInfo.difficulty),
@@ -196,7 +222,8 @@ const Component = ({ className, gameEvents, onPlayEvent, selectedTab }: Props):
         datetime,
         bonusText: eventInfo.description,
         name: eventInfo.name,
-        onPlayEvent
+        onPlayEvent,
+        score
       });
     });
 
@@ -218,7 +245,17 @@ const Component = ({ className, gameEvents, onPlayEvent, selectedTab }: Props):
   return (
     <div className={className}>
       {
-        eventItems.map((item) => (
+        !eventItems.length && (
+          <EmptyListContent
+            className={'empty-list-content'}
+            content={t('Look for ongoing events in the “All Events” tab')}
+            title={t('oops! no events found')}
+          />
+        )
+      }
+
+      {
+        !!eventItems.length && eventItems.map((item) => (
           <EventItem
             {...item}
             className={'event-item'}
@@ -232,6 +269,10 @@ const Component = ({ className, gameEvents, onPlayEvent, selectedTab }: Props):
 
 export const EventListContainer = styled(Component)<ThemeProps>(({ theme: { extendToken, token } }: ThemeProps) => {
   return {
+    '.empty-list-content': {
+      paddingTop: 136
+    },
+
     '.event-item + .event-item': {
       marginTop: 12
     }

diff --git a/packages/extension-koni-ui/src/Popup/Home/Events/index.tsx b/packages/extension-koni-ui/src/Popup/Home/Events/index.tsx
@@ -186,13 +186,15 @@ const Component = ({ className }: Props): React.ReactElement => {
     };
   }, []);
 
+  const showGame = !!currentGame;
+
   useEffect(() => {
-    setContainerClass('events-screen-wrapper');
+    setContainerClass(showGame ? 'events-screen-wrapper -show-game' : 'events-screen-wrapper');
 
     return () => {
       setContainerClass(undefined);
     };
-  }, [setContainerClass]);
+  }, [setContainerClass, showGame]);
 
   return (
     <div className={className}>

diff --git a/packages/extension-koni-ui/src/Popup/Home/MissionTemp/TaskItem.tsx b/packages/extension-koni-ui/src/Popup/Home/MissionTemp/TaskItem.tsx
@@ -172,8 +172,7 @@ export const TaskItem = styled(Component)<ThemeProps>(({ theme: { extendToken, t
       paddingRight: 2,
 
       '.__button-content': {
-        color: extendToken.mythColorDark,
-        paddingBottom: 6
+        color: extendToken.mythColorDark
       },
 
       '.__button-background': {

diff --git a/packages/extension-koni-ui/src/Popup/Home/index.tsx b/packages/extension-koni-ui/src/Popup/Home/index.tsx
@@ -94,12 +94,12 @@ const Home = styled(Component)<Props>(({ theme: { token } }: Props) => {
       }
     },
 
-    '&.game-screen-wrapper.-show-game': {
+    '&.events-screen-wrapper.-show-game': {
       '.ant-sw-screen-layout-body-inner': {
         position: 'static'
       },
 
-      '.ant-sw-screen-layout-footer, .layout-background-image': {
+      '.ant-sw-screen-layout-footer': {
         opacity: 0,
         pointerEvents: 'none'
       }

diff --git a/packages/extension-koni-ui/src/components/Mythical/Common/CallToAction.tsx b/packages/extension-koni-ui/src/components/Mythical/Common/CallToAction.tsx
@@ -91,8 +91,7 @@ const CallToAction = styled(Component)<ThemeProps>(({ theme: { extendToken, toke
       paddingRight: 2,
 
       '.__button-content': {
-        color: extendToken.mythColorDark,
-        paddingBottom: 6
+        color: extendToken.mythColorDark
       },
 
       '.__button-background': {

diff --git a/packages/extension-koni-ui/src/components/Mythical/Common/EmptyListContent.tsx b/packages/extension-koni-ui/src/components/Mythical/Common/EmptyListContent.tsx
@@ -0,0 +1,54 @@
+// Copyright 2019-2022 @subwallet/extension-ui authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { ThemeProps } from '@subwallet/extension-koni-ui/types';
+import React from 'react';
+import styled from 'styled-components';
+
+type Props = ThemeProps & {
+  title: string;
+  content?: React.ReactNode
+};
+
+const Component = ({ className, content, title }: Props): React.ReactElement => {
+  return (
+    <div className={className}>
+      <div className='__title'>
+        {title}
+      </div>
+
+      <div className='__content'>
+        {content}
+      </div>
+    </div>
+  );
+};
+
+const EmptyListContent = styled(Component)<ThemeProps>(({ theme: { extendToken, token } }: ThemeProps) => {
+  return {
+    textAlign: 'center',
+
+    '.__title': {
+      color: token.colorWhite,
+      fontFamily: extendToken.fontDruk,
+      fontSize: '20px',
+      fontStyle: 'italic',
+      fontWeight: 500,
+      lineHeight: '22px',
+      letterSpacing: '-0.6px',
+      textTransform: 'uppercase'
+    },
+
+    '.__content': {
+      color: token.colorWhite,
+      fontFamily: extendToken.fontBarlowCondensed,
+      fontSize: '16px',
+      fontStyle: 'normal',
+      fontWeight: 400,
+      lineHeight: '18px',
+      letterSpacing: '0.32px'
+    }
+  };
+});
+
+export default EmptyListContent;
diff --git a/packages/extension-koni-ui/src/components/Mythical/Common/MythButton.tsx b/packages/extension-koni-ui/src/components/Mythical/Common/MythButton.tsx
@@ -45,12 +45,14 @@ const MythButton = styled(Component)<ThemeProps>(({ theme: { extendToken, token
     outline: 'none',
     padding: 0,
     cursor: 'pointer',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
 
     '.__button-inner': {
       display: 'flex',
       position: 'relative',
-      zIndex: 2,
-      justifyContent: 'center'
+      zIndex: 2
     },
 
     '.__button-content': {
@@ -59,7 +61,8 @@ const MythButton = styled(Component)<ThemeProps>(({ theme: { extendToken, token
       fontStyle: 'italic',
       fontWeight: 500,
       lineHeight: '22px',
-      textTransform: 'uppercase'
+      textTransform: 'uppercase',
+      paddingBottom: 6
     },
 
     '.__button-background': {

diff --git a/packages/extension-koni-ui/src/components/Mythical/Common/index.tsx b/packages/extension-koni-ui/src/components/Mythical/Common/index.tsx
@@ -6,3 +6,4 @@ export { default as CallToAction } from './CallToAction';
 export { default as TimeRemaining } from './TimeRemaining';
 export { default as MainScreenHeader } from './MainScreenHeader';
 export { default as SubScreenHeader } from './SubScreenHeader';
+export { default as EmptyListContent } from './EmptyListContent';
diff --git a/packages/extension-koni-ui/src/components/Mythical/Event/EventItem.tsx b/packages/extension-koni-ui/src/components/Mythical/Event/EventItem.tsx
@@ -468,10 +468,6 @@ export const EventItem = styled(Component)<Props>(({ difficulty,
       width: '100%',
       height: 40,
 
-      '.__button-content': {
-        paddingBottom: 5
-      },
-
       '.__button-background': {
         filter: 'drop-shadow(2px 3px 0px #000)'
       },

diff --git a/packages/extension-koni-ui/src/components/Mythical/Leaderboard/TopAccountItem.tsx b/packages/extension-koni-ui/src/components/Mythical/Leaderboard/TopAccountItem.tsx
@@ -107,6 +107,13 @@ const TopAccountItem = styled(Component)<ThemeProps>(({ theme: { extendToken, to
 
     '.__token-Value': {
       color: token.colorWhite,
+      textAlign: 'center',
+      fontFamily: extendToken.fontBarlowCondensed,
+      fontSize: '14px',
+      fontStyle: 'normal',
+      fontWeight: 400,
+      lineHeight: '16px',
+      letterSpacing: '0.28px',
       borderRadius: 100,
       backgroundImage: 'linear-gradient(75deg, #363535 25.94%, #191919 63.11%)',
       padding: '4px 12px'