From 9ec7960ea7142b27c2f5cb9a619db188768ba034 Mon Sep 17 00:00:00 2001 From: lw Date: Wed, 30 Oct 2024 16:00:56 +0700 Subject: [PATCH] Update events screen --- .../Popup/Home/Events/EventListContainer.tsx | 63 +++++++++++++++---- .../src/Popup/Home/Events/index.tsx | 6 +- .../src/Popup/Home/MissionTemp/TaskItem.tsx | 3 +- .../src/Popup/Home/index.tsx | 4 +- .../Mythical/Common/CallToAction.tsx | 3 +- .../Mythical/Common/EmptyListContent.tsx | 54 ++++++++++++++++ .../components/Mythical/Common/MythButton.tsx | 9 ++- .../src/components/Mythical/Common/index.tsx | 1 + .../components/Mythical/Event/EventItem.tsx | 4 -- .../Mythical/Leaderboard/TopAccountItem.tsx | 7 +++ 10 files changed, 128 insertions(+), 26 deletions(-) create mode 100644 packages/extension-koni-ui/src/components/Mythical/Common/EmptyListContent.tsx diff --git a/packages/extension-koni-ui/src/Popup/Home/Events/EventListContainer.tsx b/packages/extension-koni-ui/src/Popup/Home/Events/EventListContainer.tsx index ebcd225ed8..4e81bbebbb 100644 --- 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([]); // 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 (
{ - eventItems.map((item) => ( + !eventItems.length && ( + + ) + } + + { + !!eventItems.length && eventItems.map((item) => ( (({ 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 index 7c3a226b33..42948a8ef9 100644 --- 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 (
diff --git a/packages/extension-koni-ui/src/Popup/Home/MissionTemp/TaskItem.tsx b/packages/extension-koni-ui/src/Popup/Home/MissionTemp/TaskItem.tsx index 5d90933764..69c531f9ad 100644 --- 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)(({ 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 index 03d28b3766..f4a9c2ea15 100644 --- 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)(({ 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 index 8341007085..418b0db935 100644 --- 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)(({ 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 new file mode 100644 index 0000000000..43aab8e4cc --- /dev/null +++ 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 ( +
+
+ {title} +
+ +
+ {content} +
+
+ ); +}; + +const EmptyListContent = styled(Component)(({ 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 index 9e7f0ddc5b..13f9051e05 100644 --- 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)(({ 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)(({ 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 index 8f3d8ec2e0..62fc79f73f 100644 --- 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 index c2800f0156..51cdbaa720 100644 --- 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)(({ 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 index 39bff4cda5..26ae539048 100644 --- 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)(({ 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'