feat: datetime

app/react/components/dom/date.jsx

@@ -0,0 +1,40 @@
+import {useState} from 'react';
+
+import styles from './date.module.css';
+
+export function Date({season, date}) {
+  const seasonLabel = (() => {
+    switch (season) {
+      case 0: return 'Spring';
+      case 1: return 'Summer';
+      case 2: return 'Autumn';
+      case 3: return 'Winter';
+    }
+  })();
+  const dateLabel = (() => {
+    if (date >= 10 && date < 13) {
+      return <><span className={styles.number}>{date + 1}</span>th</>;
+    }
+    switch (date % 10) {
+      case 0: return <><span className={styles.number}>{date + 1}</span>st</>;
+      case 1: return <><span className={styles.number}>{date + 1}</span>nd</>;
+      case 2: return <><span className={styles.number}>{date + 1}</span>rd</>;
+      default: return <><span className={styles.number}>{date + 1}</span>th</>;
+    }
+  })();
+  return (
+    <div className={styles.date}>
+      {seasonLabel}
+      &nbsp;
+      {dateLabel}
+    </div>
+  );
+}
+
+function ConnectedDate() {
+  const [season, setSeason] = useState(0);
+  const [date, setDate] = useState(0);
+  return <Date season={season} date={date} />;
+}
+
+export default ConnectedDate;

app/react/components/dom/date.module.css

@@ -0,0 +1,11 @@
+.date {
+  align-items: center;
+  display: flex;
+  font-family: Cookbook, Georgia, 'Times New Roman', Times, serif;
+  font-size: 16px;
+  text-shadow: 1px 0 0 black, 0 1px 0 black, -1px 0 0 black, 0 -1px 0 black;
+}
+
+.number {
+  font-family: 'Courier New', Courier, monospace;
+}

app/react/components/dom/datetime.jsx

@@ -0,0 +1,15 @@
+import Date from './date.jsx';
+import Time from './time.jsx';
+
+import styles from './datetime.module.css';
+
+function DateTime() {
+  return (
+    <div className={styles.datetime}>
+      <Date />
+      <Time />
+    </div>
+  )
+}
+
+export default DateTime;

app/react/components/dom/datetime.module.css

@@ -0,0 +1,12 @@
+.datetime {
+  align-items: center;
+  color: white;
+  display: flex;
+  gap: 6px;
+  position: absolute;
+  right: 10px;
+  top: 4px;
+  div:first-child:not(:last-child):after {
+    content: ', ';
+  }
+}

app/react/components/dom/time.jsx

@@ -0,0 +1,37 @@
+import {useCallback, useState} from 'react';
+
+import {useEcsTick} from '@/react/context/ecs.js';
+
+import styles from './time.module.css';
+
+export function Time({hour, minute}) {
+  const formatter = new Intl.DateTimeFormat(undefined, {timeStyle: 'short'});
+  const {hour12} = formatter.resolvedOptions();
+  const formatted = formatter.format(new Date(2012, 11, 20, hour, minute));
+  return (
+    <div className={styles.time}>
+      {
+        hour12
+          ? <>{formatted.slice(0, -3)}<span className={styles.meridian}>{formatted.slice(-2)}</span></>
+          : formatted
+      }
+    </div>
+  );
+}
+
+function ConnectedTime() {
+  const [hour, setHour] = useState(-1);
+  const [minute, setMinute] = useState(0);
+  useEcsTick(useCallback((paylaod, ecs) => {
+    const {Time: {hour}} = ecs.get(1);
+    const wholeHour = Math.floor(hour);
+    setHour(wholeHour);
+    setMinute(Math.floor(60 * (hour - wholeHour)));
+  }, []));
+  if (-1 === hour) {
+    return false;
+  }
+  return <Time hour={hour} minute={minute} />;
+}
+
+export default ConnectedTime;

app/react/components/dom/time.module.css

@@ -0,0 +1,14 @@
+.time {
+  align-items: center;
+  display: flex;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 12px;
+  text-shadow: 1px 0 0 black, 0 1px 0 black, -1px 0 0 black, 0 -1px 0 black;
+}
+
+.meridian {
+  align-self: self-end;
+  font-family: Cookbook, Georgia, 'Times New Roman', Times, serif;
+  font-size: 10px;
+  padding-left: 2px;
+}

app/react/components/ui.jsx

@@ -11,6 +11,7 @@ import addKeyListener from './add-key-listener.js';
 import Disconnected from './dom/disconnected.jsx';
 import Chat from './dom/chat/chat.jsx';
 import Bag from './dom/bag.jsx';
+import DateTime from './dom/datetime.jsx';
 import Dom from './dom/dom.jsx';
 import Entities from './dom/entities.jsx';
 import External from './dom/external.jsx';
@@ -548,6 +549,7 @@ function Ui({disconnected}) {
           {showDisconnected && (
             <Disconnected />
           )}
+          <DateTime />
         </Dom>
       </div>
       {devtoolsIsOpen && (