Textual Clock

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

\n {letter}\n

\n ))}\n

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

\n \n \n \n \n `, {\n headers: { \"content-type\": \"text/html\" }\n });\n}\n\nconst css = `\nbody {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n background-color: #f0f0f0;\n font-family: monospace;\n}\n\n.textual-clock {\n display: grid;\n grid-template-columns: repeat(9, 1fr);\n gap: 5px;\n background-color: #333;\n padding: 10px;\n border-radius: 10px;\n}\n\n.letter {\n width: 40px;\n height: 40px;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: #555;\n color: #999;\n transition: all 0.3s ease;\n}\n\n.letter.highlight {\n background-color: yellow;\n color: #000;\n font-weight: bold;\n}\n`;","createdAt",["D",1733043583111],"version",11,"currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_129":130,"_131":132},"handle","manyone","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycDFBVGp4VFZhajRoZHRFT3M1eE1aMWdtQ0UifQ","forkedVal","interval","slug","manyone/wordclock","description","versions",[140,143,147,151,155,159,163,167,171,175,178,182],{"_118":119,"_141":-5,"_116":142,"_113":111},"prId",["D",1733043583111],{"_118":144,"_141":-5,"_116":145,"_113":146},10,["D",1731977787141],"1b1fc188-a611-11ef-b9b3-e6cdfca9ef9f",{"_118":148,"_141":-5,"_116":149,"_113":150},9,["D",1731971177979],"b7c23ee0-a601-11ef-bec8-e6cdfca9ef9f",{"_118":152,"_141":-5,"_116":153,"_113":154},8,["D",1731970647260],"7b6caf3a-a600-11ef-be92-e6cdfca9ef9f",{"_118":156,"_141":-5,"_116":157,"_113":158},7,["D",1731970482532],"193d666a-a600-11ef-9cae-e6cdfca9ef9f",{"_118":160,"_141":-5,"_116":161,"_113":162},6,["D",1731970428524],"f90bec9a-a5ff-11ef-b55c-e6cdfca9ef9f",{"_118":164,"_141":-5,"_116":165,"_113":166},5,["D",1731970274801],"9d6f24b0-a5ff-11ef-aacb-e6cdfca9ef9f",{"_118":168,"_141":-5,"_116":169,"_113":170},4,["D",1731970186741],"68eef4c2-a5ff-11ef-883a-e6cdfca9ef9f",{"_118":172,"_141":-5,"_116":173,"_113":174},3,["D",1731970083470],"2b60f254-a5ff-11ef-b419-e6cdfca9ef9f",{"_118":90,"_141":-5,"_116":176,"_113":177},["D",1731969919527],"c9a9812a-a5fe-11ef-89db-e6cdfca9ef9f",{"_118":179,"_141":-5,"_116":180,"_113":181},1,["D",1731969809166],"87e18bb6-a5fe-11ef-9f90-e6cdfca9ef9f",{"_118":31,"_141":-5,"_116":183,"_113":184},["D",1731968496467],"7975317a-a5fb-11ef-a620-e6cdfca9ef9f","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":192,"_193":194,"_94":195},"single","redirect","/v/manyone/wordclock/versions",{"_113":166,"_114":196,"_118":164,"_116":197,"_198":99,"_100":101,"_108":109,"_129":130,"_11":96,"_199":-5,"_200":-5,"_201":-5,"_189":26,"_135":136},"/** @jsxImportSource https://esm.sh/react */\nimport React, { useState, useEffect } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\nconst BOARD = [\n \"T\",\"W\",\"E\",\"N\",\"T\",\"Y\",\"T\",\"E\",\"N\",\n \"S\",\"Q\",\"U\",\"A\",\"R\",\"T\",\"E\",\"R\",\"Y\",\n \"F\",\"I\",\"V\",\"E\",\"R\",\"T\",\"O\",\"N\",\"E\",\n \"H\",\"A\",\"L\",\"F\",\"U\",\"P\",\"A\",\"S\",\"T\",\n \"T\",\"W\",\"E\",\"L\",\"V\",\"E\",\"S\",\"I\",\"X\",\n \"T\",\"W\",\"O\",\"N\",\"E\",\"I\",\"G\",\"H\",\"T\",\n \"T\",\"H\",\"R\",\"E\",\"E\",\"F\",\"I\",\"V\",\"E\",\n \"N\",\"I\",\"N\",\"E\",\"L\",\"E\",\"V\",\"E\",\"N\",\n \"F\",\"O\",\"U\",\"R\",\"S\",\"E\",\"V\",\"E\",\"N\"\n];\n\nconst HOURS_INDICES = [\n [48, 49, 50],\n [46, 47, 48],\n [55, 56, 57, 58, 59],\n [73, 74, 75, 76],\n [60, 61, 62, 63],\n [43, 44, 45],\n [77, 78, 79, 80, 81],\n [50, 51, 52, 53, 54],\n [64, 65, 66, 67],\n [54, 63, 72],\n [67, 68, 69, 70, 71, 72],\n [37, 38, 39, 40, 41, 42]\n].map(group => group.map(n => n - 1)); // Convert to 0-based index\n\nconst MINUTES_INDICES = [\n [19, 20, 21, 22],\n [7, 8, 9],\n [11, 12, 13, 14, 15, 16, 17],\n [1, 2, 3, 4, 5, 6],\n [1, 2, 3, 4, 5, 6, 19, 20, 21, 22],\n [28, 29, 30, 31]\n].map(group => group.map(n => n - 1)); // Convert to 0-based index\n\nconst CONNECTOR_INDICES = [\n [33, 34, 35, 36],\n [24, 25]\n].map(group => group.map(n => n - 1)); // Convert to 0-based index\n\nfunction findNearestFiveMinuteMark(minutes: number): number {\n return Math.round(minutes / 5) * 5;\n}\n\nfunction WordClock() {\n const [highlightedIndices, setHighlightedIndices] = useState([]);\n\n useEffect(() => {\n const updateClock = () => {\n const now = new Date();\n const hours = now.getHours();\n const minutes = now.getMinutes();\n const nearestFiveMinuteMark = findNearestFiveMinuteMark(minutes);\n const highlightIndices: number[] = [];\n\n // Hour logic\n let hourIndex: number;\n if (nearestFiveMinuteMark >= 5 && nearestFiveMinuteMark < 35) {\n hourIndex = (hours % 12 || 12) - 1;\n } else if (nearestFiveMinuteMark >= 35 && nearestFiveMinuteMark < 60) {\n hourIndex = ((hours + 1) % 12 || 12) - 1;\n } else {\n // On the hour, no additional highlighting\n setHighlightedIndices([]);\n return;\n }\n\n // Minute logic\n let minuteGroupIndex: number;\n let connectorIndex: number;\n\n if (nearestFiveMinuteMark >= 5 && nearestFiveMinuteMark < 35) {\n minuteGroupIndex = Math.floor(nearestFiveMinuteMark / 5) - 1;\n connectorIndex = 0; // First connector group\n } else if (nearestFiveMinuteMark >= 35 && nearestFiveMinuteMark < 60) {\n minuteGroupIndex = Math.floor((60 - nearestFiveMinuteMark) / 5) - 1;\n connectorIndex = 1; // Second connector group\n } else {\n // On the hour, no additional highlighting\n setHighlightedIndices([]);\n return;\n }\n\n // Collect indices to highlight\n highlightIndices.push(\n ...HOURS_INDICES[hourIndex],\n ...MINUTES_INDICES[minuteGroupIndex],\n ...CONNECTOR_INDICES[connectorIndex]\n );\n\n setHighlightedIndices(highlightIndices);\n };\n\n updateClock(); // Immediately update on first render\n const timer = setInterval(updateClock, 5000); // Update every 5 minutes\n return () => clearInterval(timer);\n }, []);\n\n return (\n

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

\n {letter}\n

\n ))}\n

\n \n \n \n \n `, {\n headers: { \"content-type\": \"text/html\" }\n });\n}\n\nconst css = `\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nbody {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n background-color: #f0f0f0;\n font-family: monospace;\n padding: 1rem;\n}\n\n.word-clock {\n display: grid;\n grid-template-columns: repeat(9, 1fr);\n gap: min(0.5vw, 5px);\n background-color: #333;\n padding: min(1vw, 10px);\n border-radius: 10px;\n max-width: 100%;\n width: 100%;\n max-height: 90vh;\n}\n\n.letter {\n aspect-ratio: 1 / 1;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: #555;\n color: #999;\n font-size: min(2.5vw, 1.2rem);\n transition: all 0.3s ease;\n border-radius: 5px;\n overflow: hidden;\n}\n\n.letter.highlight {\n background-color: #ffff00;\n color: #000;\n font-weight: bold;\n}\n\n@media (max-width: 600px) {\n .word-clock {\n gap: 3px;\n padding: 5px;\n }\n\n .letter {\n font-size: min(4vw, 1rem);\n }\n}\n\n@media (max-width: 400px) {\n .word-clock {\n gap: 2px;\n padding: 3px;\n }\n\n .letter {\n font-size: min(5vw, 0.8rem);\n }\n}\n`;",["D",1731970274801],"valName","deletedAt","messageId","threadId","routes/_app","actionData","errors"]

wordclock

Version 5