From 1c0dfb2ded471bbfbb8d4eabc9abe90a22a10cbe Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Wed, 3 Jun 2026 15:54:30 +0100
Subject: [PATCH 1/3] Initial commit

---
 .../head-to-head-v2/components/centre.tsx     |  4 +-
 .../components/fixture-time.tsx               | 37 +++++++++++++----
 .../head-to-head-v2/helpers/localise-time.ts  | 41 +++++++++++++++++++
 3 files changed, 72 insertions(+), 10 deletions(-)
 create mode 100644 src/app/components-webcore/SportDataHeader/head-to-head-v2/helpers/localise-time.ts

diff --git a/src/app/components-webcore/SportDataHeader/head-to-head-v2/components/centre.tsx b/src/app/components-webcore/SportDataHeader/head-to-head-v2/components/centre.tsx
index e8a035d0c57..c4aaaff8de4 100644
--- a/src/app/components-webcore/SportDataHeader/head-to-head-v2/components/centre.tsx
+++ b/src/app/components-webcore/SportDataHeader/head-to-head-v2/components/centre.tsx
@@ -40,9 +40,9 @@ const Centre = ({ data, maxScoreLength }: CentreProps) => {
   return (
     <div css={styles.centre(maxScoreLength)}>
       {shouldShowScores(status) ? (
-        <Played data={data} />
+        <Time date={data.date} time={data.time} />
       ) : (
-        <Time time={data.time} />
+        <Time date={data.date} time={data.time} />
       )}
     </div>
   );
diff --git a/src/app/components-webcore/SportDataHeader/head-to-head-v2/components/fixture-time.tsx b/src/app/components-webcore/SportDataHeader/head-to-head-v2/components/fixture-time.tsx
index efa3d9ba4d3..f4a4a513c30 100644
--- a/src/app/components-webcore/SportDataHeader/head-to-head-v2/components/fixture-time.tsx
+++ b/src/app/components-webcore/SportDataHeader/head-to-head-v2/components/fixture-time.tsx
@@ -1,5 +1,8 @@
+import { useEffect, useState } from 'react';
+// import onClient from '#app/lib/utilities/onClient';
 import VisuallyHiddenText from '../../../../components/VisuallyHiddenText';
 import styles from '../index.styles';
+import getLocalisedTime from '../helpers/localise-time';
 
 interface TimeData {
   displayTimeUK: string;
@@ -7,16 +10,34 @@ interface TimeData {
 }
 
 interface TimeProps {
+  date: string;
   time: TimeData;
 }
 
-const Time = ({ time }: TimeProps) => (
-  <>
-    <time css={styles.fixtureTime} aria-hidden="true">
-      {time.displayTimeUK}
-    </time>
-    <VisuallyHiddenText>{time.accessibleTime}</VisuallyHiddenText>
-  </>
-);
+const Time = ({ date, time }: TimeProps) => {
+  const [localisedTime, setLocalisedTime] = useState<string | null>(null);
+
+  useEffect(() => {
+    setLocalisedTime(getLocalisedTime(date, time.displayTimeUK));
+  }, [date, time.displayTimeUK]);
+
+  const displayedTime = localisedTime ?? time.displayTimeUK;
+
+  return (
+    <>
+      <time
+        css={styles.fixtureTime}
+        aria-hidden="true"
+        suppressHydrationWarning
+      >
+        {displayedTime}
+      </time>
+
+      <VisuallyHiddenText suppressHydrationWarning>
+        {displayedTime}
+      </VisuallyHiddenText>
+    </>
+  );
+};
 
 export default Time;
diff --git a/src/app/components-webcore/SportDataHeader/head-to-head-v2/helpers/localise-time.ts b/src/app/components-webcore/SportDataHeader/head-to-head-v2/helpers/localise-time.ts
new file mode 100644
index 00000000000..5713f2f6208
--- /dev/null
+++ b/src/app/components-webcore/SportDataHeader/head-to-head-v2/helpers/localise-time.ts
@@ -0,0 +1,41 @@
+const getLocalisedTime = (inputDate, inputTime) => {
+  const [, day, monthName, year] = inputDate.split(' ');
+  const [hour, minute] = inputTime.split(':').map(Number);
+
+  const monthIndex =
+    [
+      'Jan',
+      'Feb',
+      'Mar',
+      'Apr',
+      'May',
+      'Jun',
+      'Jul',
+      'Aug',
+      'Sep',
+      'Oct',
+      'Nov',
+      'Dec',
+    ].indexOf(monthName) + 1;
+
+  // Build a London zoned datetime
+  const ukTemporalDateTime = Temporal.ZonedDateTime.from({
+    timeZone: 'Europe/London',
+    year: Number(year),
+    month: monthIndex,
+    day: Number(day),
+    hour,
+    minute,
+  });
+
+  // Convert to a real JS Date (UTC internally)
+  return new Date(ukTemporalDateTime.epochMilliseconds).toLocaleTimeString(
+    undefined,
+    {
+      hour: '2-digit',
+      minute: '2-digit',
+    },
+  );
+};
+
+export default getLocalisedTime;

From 28d69a5d206aa5d1d4b8bdfba1ca9cf711eb857c Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Wed, 3 Jun 2026 16:57:11 +0100
Subject: [PATCH 2/3] Use state to prevent hydration errors

---
 .../components/fixture-time.tsx               | 22 ++++++-------------
 .../head-to-head-v2/helpers/localise-time.ts  | 19 ++++++++--------
 2 files changed, 16 insertions(+), 25 deletions(-)

diff --git a/src/app/components-webcore/SportDataHeader/head-to-head-v2/components/fixture-time.tsx b/src/app/components-webcore/SportDataHeader/head-to-head-v2/components/fixture-time.tsx
index f4a4a513c30..55e6e5d0331 100644
--- a/src/app/components-webcore/SportDataHeader/head-to-head-v2/components/fixture-time.tsx
+++ b/src/app/components-webcore/SportDataHeader/head-to-head-v2/components/fixture-time.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-// import onClient from '#app/lib/utilities/onClient';
 import VisuallyHiddenText from '../../../../components/VisuallyHiddenText';
 import styles from '../index.styles';
 import getLocalisedTime from '../helpers/localise-time';
@@ -15,27 +14,20 @@ interface TimeProps {
 }
 
 const Time = ({ date, time }: TimeProps) => {
-  const [localisedTime, setLocalisedTime] = useState<string | null>(null);
+  const [localisedTime, setLocalisedTime] = useState(time.displayTimeUK);
 
   useEffect(() => {
-    setLocalisedTime(getLocalisedTime(date, time.displayTimeUK));
-  }, [date, time.displayTimeUK]);
-
-  const displayedTime = localisedTime ?? time.displayTimeUK;
+    const clientTime = getLocalisedTime(date, time.displayTimeUK);
+    setLocalisedTime(clientTime);
+  }, []);
 
   return (
     <>
-      <time
-        css={styles.fixtureTime}
-        aria-hidden="true"
-        suppressHydrationWarning
-      >
-        {displayedTime}
+      <time css={styles.fixtureTime} aria-hidden="true">
+        {localisedTime}
       </time>
 
-      <VisuallyHiddenText suppressHydrationWarning>
-        {displayedTime}
-      </VisuallyHiddenText>
+      <VisuallyHiddenText>{localisedTime}</VisuallyHiddenText>
     </>
   );
 };
diff --git a/src/app/components-webcore/SportDataHeader/head-to-head-v2/helpers/localise-time.ts b/src/app/components-webcore/SportDataHeader/head-to-head-v2/helpers/localise-time.ts
index 5713f2f6208..48ecd877c32 100644
--- a/src/app/components-webcore/SportDataHeader/head-to-head-v2/helpers/localise-time.ts
+++ b/src/app/components-webcore/SportDataHeader/head-to-head-v2/helpers/localise-time.ts
@@ -1,3 +1,5 @@
+import 'temporal-polyfill/global';
+
 const getLocalisedTime = (inputDate, inputTime) => {
   const [, day, monthName, year] = inputDate.split(' ');
   const [hour, minute] = inputTime.split(':').map(Number);
@@ -18,24 +20,21 @@ const getLocalisedTime = (inputDate, inputTime) => {
       'Dec',
     ].indexOf(monthName) + 1;
 
-  // Build a London zoned datetime
-  const ukTemporalDateTime = Temporal.ZonedDateTime.from({
+  const ukDateTime = Temporal.ZonedDateTime.from({
     timeZone: 'Europe/London',
     year: Number(year),
     month: monthIndex,
     day: Number(day),
     hour,
     minute,
+  }).withTimeZone(Temporal.Now.timeZoneId());
+
+  const userLocalDateTime = ukDateTime.toLocaleString(undefined, {
+    hour: '2-digit',
+    minute: '2-digit',
   });
 
-  // Convert to a real JS Date (UTC internally)
-  return new Date(ukTemporalDateTime.epochMilliseconds).toLocaleTimeString(
-    undefined,
-    {
-      hour: '2-digit',
-      minute: '2-digit',
-    },
-  );
+  return userLocalDateTime;
 };
 
 export default getLocalisedTime;

From 49f3a7c69ff4de996721a9c6aabde33343e8c483 Mon Sep 17 00:00:00 2001
From: hotinglok <hotinglok@gmail.com>
Date: Thu, 4 Jun 2026 10:02:46 +0100
Subject: [PATCH 3/3] Use latin numerals, minor refactoring

---
 .../head-to-head-v2/helpers/localise-time.ts  | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/app/components-webcore/SportDataHeader/head-to-head-v2/helpers/localise-time.ts b/src/app/components-webcore/SportDataHeader/head-to-head-v2/helpers/localise-time.ts
index 48ecd877c32..3fdb59f169a 100644
--- a/src/app/components-webcore/SportDataHeader/head-to-head-v2/helpers/localise-time.ts
+++ b/src/app/components-webcore/SportDataHeader/head-to-head-v2/helpers/localise-time.ts
@@ -20,6 +20,8 @@ const getLocalisedTime = (inputDate, inputTime) => {
       'Dec',
     ].indexOf(monthName) + 1;
 
+  console.log(inputDate, inputTime, 'original input');
+
   const ukDateTime = Temporal.ZonedDateTime.from({
     timeZone: 'Europe/London',
     year: Number(year),
@@ -27,13 +29,21 @@ const getLocalisedTime = (inputDate, inputTime) => {
     day: Number(day),
     hour,
     minute,
-  }).withTimeZone(Temporal.Now.timeZoneId());
-
-  const userLocalDateTime = ukDateTime.toLocaleString(undefined, {
-    hour: '2-digit',
-    minute: '2-digit',
   });
 
+  console.log(ukDateTime.toString(), 'temporal time');
+
+  const userLocalDateTime = ukDateTime
+    .withTimeZone(Temporal.Now.timeZoneId())
+    .toLocaleString(undefined, {
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false,
+      numberingSystem: 'latn',
+    });
+
+  console.log(userLocalDateTime, 'user local time (only hours)');
+
   return userLocalDateTime;
 };