refactor: port BootCell TimeUnit algorithm, add className/onEnd props, move cell styles to CSS

Agent-Logs-Url: https://github.com/Open-Source-Bazaar/Open-Source-Bazaar.github.io/sessions/28a4703b-d5c6-4dc4-8076-10f2873c9ddf

Co-authored-by: TechQuery <19969570+TechQuery@users.noreply.github.com>

Author: Copilot

components/Activity/Hackathon/Countdown.tsx

@@ -2,50 +2,90 @@ import { computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { ObservedComponent, reaction } from 'mobx-react-helper';
 
-import styles from './Hero.module.less';
+export interface TimeUnit {
+  scale: number;
+  label: string;
+}
+
+interface TimeSection {
+  value: number;
+  label: string;
+}
 
 export interface CountdownProps {
-  countdownTo?: string;
-  unitLabels: string[];
+  className?: string;
+  endTime?: string | Date | number;
+  onEnd?: () => void;
+  units: TimeUnit[];
 }
 
 @observer
 export class Countdown extends ObservedComponent<CountdownProps> {
   @observable
-  accessor rest: number | null = null;
+  accessor rest = 0;
 
   private timer?: number;
 
   private get target() {
-    const { countdownTo } = this.observedProps;
-    const value = countdownTo ? new Date(countdownTo).getTime() : NaN;
+    const { endTime } = this.observedProps;
 
-    return Number.isFinite(value) ? value : NaN;
-  }
-
-  @computed
-  get sections() {
-    const { rest } = this;
+    if (!endTime) return NaN;
 
-    if (rest === null) return ['--', '--', '--', '--'];
+    const ms =
+      typeof endTime === 'number'
+        ? endTime
+        : endTime instanceof Date
+          ? endTime.getTime()
+          : new Date(endTime).getTime();
 
-    const totalSeconds = Math.floor(Math.max(0, rest) / 1000);
-    const days = Math.floor(totalSeconds / 86400);
-    const hours = Math.floor((totalSeconds % 86400) / 3600);
-    const minutes = Math.floor((totalSeconds % 3600) / 60);
-    const seconds = totalSeconds % 60;
+    return Number.isFinite(ms) ? ms : NaN;
+  }
 
-    return [days, hours, minutes, seconds].map(value => String(value).padStart(2, '0'));
+  @computed
+  get timeSections(): TimeSection[] {
+    const { units } = this.observedProps;
+    let { rest } = this;
+
+    return units.reduce(
+      (list, { label }, index) => {
+        const scale = units
+          .slice(index)
+          .map(({ scale }) => scale)
+          .reduce((sum, scale) => sum * scale, 1);
+
+        const value = ~~(rest / scale);
+        rest -= value * scale;
+
+        list.push({ value, label });
+        return list;
+      },
+      [] as TimeSection[],
+    );
   }
 
   tick = () => {
-    this.rest = Math.max(0, this.target - Date.now());
+    const rest = this.target - Date.now();
+
+    if (rest > 0) {
+      this.rest = rest;
+    } else {
+      this.rest = 0;
+
+      if (this.timer) {
+        window.clearInterval(this.timer);
+        this.timer = undefined;
+        this.props.onEnd?.();
+      }
+    }
   };
 
-  @reaction((_this: Countdown) => _this.observedProps.countdownTo)
   componentDidMount() {
     super.componentDidMount();
+    this.initTimer();
+  }
 
+  @reaction((_this: Countdown) => _this.observedProps.endTime)
+  initTimer() {
     if (this.timer) {
       window.clearInterval(this.timer);
       this.timer = undefined;
@@ -62,18 +102,18 @@ export class Countdown extends ObservedComponent<CountdownProps> {
   }
 
   render() {
-    const { unitLabels } = this.observedProps;
-    const { sections } = this;
+    const { className } = this.props;
+    const { timeSections } = this;
 
     return (
-      <ol className={`list-unstyled ${styles.countdownGrid} m-0`}>
-        {sections.map((value, index) => (
+      <ol className={`list-unstyled${className ? ` ${className}` : ''} m-0`}>
+        {timeSections.map(({ value, label }, index) => (
           <li
-            key={`${index}-${unitLabels[index]}`}
-            className={`${styles.countdownCell} d-flex flex-column justify-content-center align-items-center`}
+            key={`${index}-${label}`}
+            className="d-flex flex-column justify-content-center align-items-center"
           >
-            <strong>{value}</strong>
-            <span>{unitLabels[index]}</span>
+            <strong>{String(value).padStart(2, '0')}</strong>
+            <span>{label}</span>
           </li>
         ))}
       </ol>

components/Activity/Hackathon/Hero.module.less

@@ -197,32 +197,32 @@
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 0.8rem;
-}
 
-.countdownCell {
-  gap: 0.7rem;
-  box-shadow:
-    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
-    0 0 26px rgba(44, 232, 255, 0.08);
-  border: 1px solid rgba(44, 232, 255, 0.26);
-  border-radius: 18px;
-  background: linear-gradient(180deg, rgba(44, 232, 255, 0.08), rgba(44, 232, 255, 0.03));
-  min-height: 120px;
+  li {
+    gap: 0.7rem;
+    box-shadow:
+      inset 0 0 0 1px rgba(255, 255, 255, 0.03),
+      0 0 26px rgba(44, 232, 255, 0.08);
+    border: 1px solid rgba(44, 232, 255, 0.26);
+    border-radius: 18px;
+    background: linear-gradient(180deg, rgba(44, 232, 255, 0.08), rgba(44, 232, 255, 0.03));
+    min-height: 120px;
 
-  strong {
-    color: #fff;
-    font-size: clamp(2.3rem, 4vw, 3.8rem);
-    line-height: 1;
-    font-family: @heading;
-    letter-spacing: 0.08em;
-  }
+    strong {
+      color: #fff;
+      font-size: clamp(2.3rem, 4vw, 3.8rem);
+      line-height: 1;
+      font-family: @heading;
+      letter-spacing: 0.08em;
+    }
 
-  span {
-    color: rgba(255, 255, 255, 0.72);
-    font-size: 0.82rem;
-    font-family: @heading;
-    letter-spacing: 0.2em;
-    text-transform: uppercase;
+    span {
+      color: rgba(255, 255, 255, 0.72);
+      font-size: 0.82rem;
+      font-family: @heading;
+      letter-spacing: 0.2em;
+      text-transform: uppercase;
+    }
   }
 }
 
@@ -445,13 +445,13 @@
 
   .countdownGrid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
 
-  .countdownCell {
-    min-height: 96px;
+    li {
+      min-height: 96px;
 
-    strong {
-      font-size: 2rem;
+      strong {
+        font-size: 2rem;
+      }
     }
   }
 }

components/Activity/Hackathon/Hero.tsx

@@ -3,7 +3,7 @@ import { FC } from 'react';
 import { Container } from 'react-bootstrap';
 
 import { LarkImage } from '../../LarkImage';
-import { Countdown } from './Countdown';
+import { Countdown, TimeUnit } from './Countdown';
 import styles from './Hero.module.less';
 
 export type HackathonHeroNavItem = Record<'label' | 'href', string>;
@@ -43,6 +43,8 @@ const BadgeToneClass = [
   styles.heroBadgeRose,
 ];
 
+const DEFAULT_UNIT_SCALES: TimeUnit['scale'][] = [24, 60, 60, 1000];
+
 const HeroLink: FC<{
   action: HackathonHeroAction;
   variant: 'ghost' | 'primary';
@@ -165,7 +167,14 @@ export const HackathonHero: FC<HackathonHeroProps> = ({
                 {countdownLabel && (
                   <p className={`${styles.countdownLabel} m-0`}>{countdownLabel}</p>
                 )}
-                <Countdown countdownTo={countdownTo} unitLabels={countdownUnitLabels} />
+                <Countdown
+                  className={styles.countdownGrid}
+                  endTime={countdownTo}
+                  units={countdownUnitLabels.map((label, i) => ({
+                    scale: DEFAULT_UNIT_SCALES[i] ?? 1,
+                    label,
+                  }))}
+                />
               </div>
             )}