feat(calendar): display different scores

src/components/Calendar/Calendar.tsx

@@ -12,6 +12,8 @@ import { Button } from "@/components/UI/Button/Button";
 import { Select } from "../UI/Select/Select";
 import { Navigate } from "react-router-dom";
 import config from "@/config";
+import { LiveIcon } from "../UI/AnimatedIcon/AnimatedIcon";
+import { calendarLiveScoreComponent } from "@/lib/helpers";
 
 type CalendarProps = {
 	weekId: number
@@ -39,7 +41,7 @@ export const Calendar = (props: CalendarProps) => {
 		weekId: props.weekId
 	});
 
-	useEffect(() => setState({...state, weekId: props.weekId}), [props]);
+	useEffect(() => setState({ ...state, weekId: props.weekId }), [props]);
 
 	const onFilterChange = (name: string, value: string | number) => {
 		const filters: any = Object.assign({}, state.filters, { [name]: value });
@@ -84,9 +86,9 @@ export const Calendar = (props: CalendarProps) => {
 			render: (homeId: any, record: any) => {
 				const clubBadge = `${props.assetsCdn}/badges/${record.home.id}.png`;
 
-				return <ClubDetails left>
-					<ClubName className="team-name" fullName={record.home.name} shortName={record.home.short}></ClubName>
+				return <ClubDetails>
 					<ClubBadgeBg src={clubBadge} />
+					<ClubName className="team-name" fullName={record.home.name} shortName={record.home.short}></ClubName>
 				</ClubDetails>;
 			}
 		},
@@ -96,11 +98,13 @@ export const Calendar = (props: CalendarProps) => {
 			dateIndex: "date",
 			width: "20%",
 			render: (txt: any, record: any) => {
-				const matchDate = dayjs(record.date);
-				const matchToStart = dayjs().isBefore(matchDate);
-				return <b className={`score ${matchToStart ? "scheduled" : "started"}`}>
-					{matchToStart ? dayjs(record.date).format("HH:mm") : `${record.homeScore} - ${record.awayScore}`}
-				</b>;
+				// const matchDate = dayjs(record.date);
+				// const matchToStart = dayjs().isBefore(matchDate);
+				// return <b className={`score ${matchToStart ? "scheduled" : "started"}`}>
+				// 	<LiveIcon />
+				// 	{matchToStart ? dayjs(record.date).format("HH:mm") : `${record.homeScore} - ${record.awayScore}`}
+				// </b>;
+				return calendarLiveScoreComponent(record);
 			}
 		},
 		{

src/components/Calendar/CalendarStyle.tsx

@@ -49,22 +49,28 @@ table {
         }
 
         .score {
-            &.started {
+            font-size: 18px;
+            display: flex;
+            justify-content: center;
+            
+            &.created, &.played, &.statsimported {
+                color:gray;
             }
         }
     }
 }
 `;
 
-export const ClubDetails = styled.div<{left?: boolean}>`
+export const ClubDetails = styled.div`
     display: flex;
+    flex-direction: column;
     padding: 5px;
-    justify-content: ${(props: any) => props.left ? "flex-end": "flex-start"};
+    justify-content: center;
     align-items: center;
 `;
 
 export const ClubBadgeBg = styled.img`
-	max-width: 25px;
+	max-width: 50px;
 	display: inline-block;
 	margin: 5px;
 ` as any;

src/components/UI/AnimatedIcon/AnimatedIcon.tsx

@@ -0,0 +1,14 @@
+/* eslint-disable react/no-unknown-property */
+import { LiveIconStyle } from "./AnimatedIconStyle";
+
+export const LiveIcon = () => {
+	return (
+		<LiveIconStyle>
+			<svg xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+				<circle cx="50" cy="50" r="0" fill="none" stroke="#e90c0c" stroke-width="27">
+					<animate attributeName="r" repeatCount="indefinite" dur="2s" values="4;10;4" begin="0s"></animate>
+				</circle>
+			</svg>
+		</LiveIconStyle>
+	);
+};

src/components/UI/AnimatedIcon/AnimatedIconStyle.tsx

@@ -0,0 +1,7 @@
+import styled from "@/styles/styled-components";
+
+export const LiveIconStyle = styled.div`
+.svg {
+	margin:auto;background:#fff;display:block;
+}
+`;

src/lib/helpers.tsx

@@ -5,6 +5,8 @@ import React from "react";
 import { toast } from "react-toastify";
 import { UserOutlined, DownloadOutlined, SyncOutlined, CheckCircleOutlined, ClockCircleOutlined } from "@ant-design/icons";
 import { TFunction } from "i18next";
+import dayjs from "dayjs";
+import { LiveIcon } from "@/components/UI/AnimatedIcon/AnimatedIcon";
 
 declare type RowToPos = {
 	rowNumber: number,
@@ -225,4 +227,26 @@ export const getPointsOverviewList = (player: any, t: TFunction<"translation", u
 			}
 		});
 	return pointsOverview;
+};
+
+export const calendarLiveScoreComponent = (match: Match) => {
+	const matchDate = dayjs(match.date);
+	let text = null;
+	let icon = null;
+	let className = "";
+	if(dayjs().isBefore(matchDate)) {
+		text = matchDate.format("HH:mm");
+	} else {
+		if(dayjs().isBefore(matchDate.add(2, "hour"))) {
+			className = "live";
+			text = "live";
+			icon = <LiveIcon />;
+		} else {
+			className = match.status.toLowerCase().replace("_","");
+			text = `${match.awayScore} - ${match.homeScore}`;
+		}
+	}
+
+
+	return <b className={`score ${className}`}>{icon?icon:null} {text}</b>;
 };

src/pages/Points/Points.tsx

@@ -24,6 +24,7 @@ import { Stats } from "@/components/Stats/Stats";
 import { PointsStats } from "@/components/PointsStats/PointsStats";
 import teamBackground from "./../../assets/img/fpl-pitch-no-boarding.svg";
 import { MatchdaySelector } from "@/components/MatchdaySelector/MatchdaySelector";
+import { Spin } from "antd";
 
 export const _TeamPoints = (props: AbstractTeamType) => {
 	const { id } = useParams();
@@ -183,8 +184,8 @@ export const _TeamPoints = (props: AbstractTeamType) => {
 	const isPublicRoute = location.pathname.includes("public");
 
 	return (
-		clubsSuccess && playersSuccess && matchesSuccess && teamSuccess && deadlineInfoSuccess &&
-		<React.Fragment>
+		// clubsSuccess && playersSuccess && matchesSuccess && teamSuccess && deadlineInfoSuccess &&
+		<Spin spinning={clubsLoading || playersLoading || teamLoading || matchesLoading || deadlineInfoLoading} delay={0}>
 			{
 				(initializedExternally && visibleWeekId &&
 					<Row style={{ margin: 0 }}>
@@ -297,7 +298,7 @@ export const _TeamPoints = (props: AbstractTeamType) => {
 					</Row>
 				)
 			}
-		</React.Fragment >
+		</Spin >
 	);
 };