Textual Clock

/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const BOARD = [ "T","W","E","N","T","Y","T","E","N", "S","Q","U","A","R","T","E","R","Y", "F","I","V","E","R","T","O","N","E", "H","A","L","F","U","P","A","S","T", "T","W","E","L","V","E","S","I","X", "T","W","O","N","E","I","G","H","T", "T","H","R","E","E","F","I","V","E", "N","I","N","E","L","E","V","E","N", "F","O","U","R","S","E","V","E","N" ]; const HOURS_INDICES = [ [48, 49, 50], [46, 47, 48], [55, 56, 57, 58, 59], [73, 74, 75, 76], [60, 61, 62, 63], [43, 44, 45], [77, 78, 79, 80, 81], [50, 51, 52, 53, 54], [64, 65, 66, 67], [54, 63, 72], [67, 68, 69, 70, 71, 72], [37, 38, 39, 40, 41, 42] ].map(group => group.map(n => n - 1)); // Convert to 0-based index const MINUTES_INDICES = [ [19, 20, 21, 22], [7, 8, 9], [11, 12, 13, 14, 15, 16, 17], [1, 2, 3, 4, 5, 6], [1, 2, 3, 4, 5, 6, 19, 20, 21, 22], [28, 29, 30, 31] ].map(group => group.map(n => n - 1)); // Convert to 0-based index const CONNECTOR_INDICES = [ [33, 34, 35, 36], [24, 25] ].map(group => group.map(n => n - 1)); // Convert to 0-based index function findNearestFiveMinuteMark(minutes: number): number { return Math.round(minutes / 5) * 5; } function TextualClock() { const [highlightedIndices, setHighlightedIndices] = useState([]); useEffect(() => { const updateClock = () => { const now = new Date(); const hours = now.getHours(); const minutes = now.getMinutes(); const nearestFiveMinuteMark = findNearestFiveMinuteMark(minutes); const highlightIndices: number[] = []; // Hour logic let hourIndex: number; if (nearestFiveMinuteMark === 0 || nearestFiveMinuteMark >= 5 && nearestFiveMinuteMark < 35) { hourIndex = (hours % 12 || 12) - 1; } else if (nearestFiveMinuteMark >= 35 && nearestFiveMinuteMark < 60) { hourIndex = ((hours + 1) % 12 || 12) - 1; } else { // Fallback case setHighlightedIndices([]); return; } // Minute logic let minuteGroupIndex: number | undefined; let connectorIndex: number | undefined; if (nearestFiveMinuteMark === 0) { // On the hour, highlight hour without connector highlightIndices.push(...HOURS_INDICES[hourIndex]); } else if (nearestFiveMinuteMark >= 5 && nearestFiveMinuteMark < 35) { minuteGroupIndex = Math.floor(nearestFiveMinuteMark / 5) - 1; connectorIndex = 0; // First connector group } else if (nearestFiveMinuteMark >= 35 && nearestFiveMinuteMark < 60) { minuteGroupIndex = Math.floor((60 - nearestFiveMinuteMark) / 5) - 1; connectorIndex = 1; // Second connector group } // Collect indices to highlight if (minuteGroupIndex !== undefined) { highlightIndices.push( ...HOURS_INDICES[hourIndex], ...MINUTES_INDICES[minuteGroupIndex] ); } if (connectorIndex !== undefined) { highlightIndices.push(...CONNECTOR_INDICES[connectorIndex]); } setHighlightedIndices(highlightIndices); }; updateClock(); // Immediately update on first render const timer = setInterval(updateClock, 1000); // Update every second for more precise tracking return () => clearInterval(timer); }, []); return (

{BOARD.map((letter, index) => (

{letter}

))}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Textual Clock

`, { headers: { "content-type": "text/html" } }); } const css = ` body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; font-family: monospace; } .textual-clock { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; background-color: #333; padding: 10px; border-radius: 10px; } .letter { width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; background-color: #555; color: #999; transition: all 0.3s ease; } .letter.highlight { background-color: yellow; color: #000; font-weight: bold; } `;

wordclock