import React, { useState, useEffect } from 'react'; // --- Configuration & Patterns --- // SHAPES define the target angles for the Hour (h) and Minute (m) hands. // 0 = Up, 90 = Right, 180 = Down, 270 = Left const SHAPES = { // --- Standard Lines & Corners --- '|': { h: 180, m: 0 }, // Vertical '-': { h: 270, m: 90 }, // Horizontal 'tl': { h: 180, m: 90 }, // Top-Left Corner ┌ 'tr': { h: 180, m: 270 }, // Top-Right Corner ┐ 'bl': { h: 0, m: 90 }, // Bottom-Left Corner └ 'br': { h: 0, m: 270 }, // Bottom-Right Corner ┘ ' ': { h: 225, m: 225 }, // Resting (Now DL - Both Down-Left) // --- Diagonals --- 'd1': { h: 225, m: 45 }, // / 'd2': { h: 315, m: 135 }, // \ 'v': { h: 315, m: 45 }, // v Shape '^': { h: 225, m: 135 }, // ^ Shape '<': { h: 225, m: 315 }, // < Shape (Left Arrow) '>': { h: 135, m: 45 }, // > Shape (Right Arrow) // --- Mixed Vertical/Diagonal --- 'udl': { h: 0, m: 225 }, // Up + Down-Left 'udr': { h: 0, m: 135 }, // Up + Down-Right 'dul': { h: 180, m: 315 }, // Down + Up-Left 'dur': { h: 180, m: 45 }, // Down + Up-Right // --- Mixed Horizontal/Diagonal (e.g. Ur+l) --- 'url': { h: 45, m: 270 }, // Up-Right + Left 'ull': { h: 315, m: 270 }, // Up-Left + Left 'drl': { h: 135, m: 270 }, // Down-Right + Left 'dll': { h: 225, m: 270 }, // Down-Left + Left 'urr': { h: 45, m: 90 }, // Up-Right + Right 'ulr': { h: 315, m: 90 }, // Up-Left + Right 'drr': { h: 135, m: 90 }, // Down-Right + Right 'dlr': { h: 225, m: 90 }, // Down-Left + Right // --- Smooth Vertical Curves (Vertical + Adjacent Diagonal) --- 'uur': { h: 0, m: 45 }, // Up + Up-Right 'uul': { h: 0, m: 315 }, // Up + Up-Left 'ddr': { h: 180, m: 135 }, // Down + Down-Right 'ddl': { h: 180, m: 225 }, // Down + Down-Left // --- Mixed Horizontal/Diagonal (L+UR etc.) --- 'lur': { h: 270, m: 45 }, // Left + Up-Right 'ldr': { h: 270, m: 135 }, // Left + Down-Right 'rul': { h: 90, m: 315 }, // Right + Up-Left 'rdl': { h: 90, m: 225 }, // Right + Down-Left // --- Folded Hands (Essential for 6x10 caps/ends) --- 'u': { h: 0, m: 0 }, // Both Up ↑ 'd': { h: 180, m: 180 }, // Both Down ↓ 'l': { h: 270, m: 270 }, // Both Left ← 'r': { h: 90, m: 90 }, // Both Right → 'ur': { h: 45, m: 45 }, // ↗ 'dr': { h: 135, m: 135 }, // ↘ 'dl': { h: 225, m: 225 }, // ↙ 'ul': { h: 315, m: 315 }, // ↖ }; // 4x6 Grid Patterns (DIGITS) const DIGITS = { 0: [['tl','-','-','tr'],['|','tl','tr','|'],['|','|','|','|'],['|','|','|','|'],['|','bl','br','|'],['bl','-','-','br']], 1: [['tl','-','tr','tr'],['bl','tr','|','tr'],['tl','|','|','tr'],['tl','|','|','tr'],['tl','br','bl','tr'],['bl','-','-','br']], 2: [['tl','-','-','tr'],['bl','-','tr','|'],['tl','-','br','|'],['|','tl','-','br'],['|','bl','-','tr'],['bl','-','-','br']], 3: [['tl','-','-','tr'],['bl','-','tr','|'],[' ','tl','br','|'],[' ','bl','tr','|'],['tl','-','br','|'],['bl','-','-','br']], 4: [['tl','tr','tl','tr'],['|','|','|','|'],['|','bl','br','|'],['bl','-','tr','|'],[' ',' ','|','|'],[' ',' ','bl','br']], 5: [['tl','-','-','tr'],['|','tl','-','br'],['|','bl','-','tr'],['bl','-','tr','|'],['tl','-','br','|'],['bl','-','-','br']], 6: [['tl','-','-','tr'],['|','tl','-','br'],['|','bl','-','tr'],['|','tl','tr','|'],['|','bl','br','|'],['bl','-','-','br']], 7: [['tl','-','-','tr'],['bl','-','tr','|'],[' ',' ','|','|'],[' ',' ','|','|'],[' ',' ','|','|'],[' ',' ','bl','br']], 8: [['tl','-','-','tr'],['|','tl','tr','|'],['|','bl','br','|'],['|','tl','tr','|'],['|','bl','br','|'],['bl','-','-','br']], 9: [['tl','-','-','tr'],['|','tl','tr','|'],['|','bl','br','|'],['bl','-','tr','|'],['tl','-','br','|'],['bl','-','-','br']], }; // 4x6 Grid Patterns (LETTERS) const LETTERS = { A: [ ['tl', '-', '-', 'tr'], ['|', 'tl', 'tr', '|'], ['|', 'bl', 'br', '|'], ['|', 'tl', 'tr', '|'], ['|', '|', '|', '|'], ['bl', 'br', 'bl', 'br'] ], B: [ ['tl', '-', 'drl', ' '], ['|', 'tl', 'tr', 'dul'], ['|', 'bl', 'br', 'udl'], ['|', 'tl', 'tr', 'dul'], ['|', 'bl', 'br', 'udl'], ['bl', '-', 'url', ' '] ], C: [ ['tl', '-', '-', 'tr'], ['|', 'tl', '-', 'br'], ['|', '|', ' ', ' '], ['|', '|', ' ', ' '], ['|', 'bl', '-', 'tr'], ['bl', '-', '-', 'br'] ], D: [ ['tl', '-', 'drl', ' '], ['|', 'tl', 'tr', 'dul'], ['|', '|', '|', '|'], ['|', '|', '|', '|'], ['|', 'bl', 'br', 'udl'], ['bl', '-', 'url', ' '] ], E: [ ['tl', '-', '-', 'tr'], ['|', 'tl', '-', 'br'], ['|', 'bl', '-', 'tr'], ['|', 'tl', '-', 'br'], ['|', 'bl', '-', 'tr'], ['bl', '-', '-', 'br'] ], F: [ ['tl', '-', '-', 'tr'], ['|', 'tl', '-', 'br'], ['|', 'bl', '-', 'tr'], ['|', 'tl', '-', 'br'], ['|', '|', ' ', ' '], ['bl', 'br', ' ', ' '] ], G: [ ['tl', '-', '-', 'tr'], ['|', 'tl', '-', 'br'], ['|', '|', ' ', ' '], ['|', '|', 'tl', 'tr'], ['|', 'bl', 'br', '|'], ['bl', '-', '-', 'br'] ], H: [ ['tl', 'tr', 'tl', 'tr'], ['|', '|', '|', '|'], ['|', 'bl', 'br', '|'], ['|', 'tl', 'tr', '|'], ['|', '|', '|', '|'], ['bl', 'br', 'bl', 'br'] ], I: [ ['tl', '-', '-', 'tr'], ['bl', 'tr', 'tl', 'br'], [' ', '|', '|', ' '], [' ', '|', '|', ' '], ['tl', 'br', 'bl', 'tr'], ['bl', '-', '-', 'br'] ], J: [ [' ', ' ', 'tl', 'tr'], [' ', ' ', '|', '|'], [' ', ' ', '|', '|'], ['tl', 'tr', '|', '|'], ['|', 'bl', 'br', '|'], ['bl', '-', '-', 'br'] ], K: [ ['tl', 'tr', ' ', 'ddl'], ['|', '|', 'd1', 'udl'], ['|', 'uur', 'd1', ' '], ['|', '>', ' ', ' '], ['|', 'ddr', 'd2', ' '], ['bl', 'br', 'ulr', 'ull'] ], L: [ ['tl', 'tr', ' ', ' '], ['|', '|', ' ', ' '], ['|', '|', ' ', ' '], ['|', '|', ' ', ' '], ['|', 'bl', '-', 'tr'], ['bl', '-', '-', 'br'] ], M: [ ['tl', 'drl', 'dlr', 'tr'], ['|', 'ddr', 'ddl', '|'], ['|', '|', '|', '|'], ['|', '|', '|', '|'], ['|', '|', '|', '|'], ['bl', 'br', 'bl', 'br'] ], N: [ ['tl', 'tr', 'tl', 'tr'], ['|', 'udr', '|', '|'], ['|', ' ', 'uul', '|'], ['|', 'ddr', ' ', '|'], ['|', '|', 'dul', '|'], ['bl', 'br', 'bl', 'br'] ], O: [ ['tl', '-', '-', 'tr'], ['|', 'tl', 'tr', '|'], ['|', '|', '|', '|'], ['|', '|', '|', '|'], ['|', 'bl', 'br', '|'], ['bl', '-', '-', 'br'] ], P: [ ['tl', '-', '-', 'tr'], ['|', 'tl', 'tr', '|'], ['|', 'bl', 'br', '|'], ['|', 'tl', '-', 'br'], ['|', '|', ' ', ' '], ['bl', 'br', ' ', ' '] ], Q: [ ['tl', '-', '-', 'tr'], ['|', 'tl', 'tr', '|'], ['|', '|', '|', '|'], ['|', '|', '|', '|'], ['|', 'bl', 'br', 'udl'], ['bl', '-', 'drl', '<'] ], R: [ ['tl', '-', 'drl', ' '], ['|', 'tl', 'tr', 'dul'], ['|', 'bl', 'br', 'udl'], ['|', ' ', '>', ' '], ['|', 'dur', 'dul', 'dul'], ['bl', 'br', 'bl', 'br'] ], S: [ ['tl', '-', '-', 'tr'], ['|', 'tl', '-', 'br'], ['|', 'bl', '-', 'tr'], ['bl', '-', 'tr', '|'], ['tl', '-', 'br', '|'], ['bl', '-', '-', 'br'] ], T: [ ['tl', '-', '-', 'tr'], ['bl', 'tr', 'tl', 'br'], [' ', '|', '|', ' '], [' ', '|', '|', ' '], [' ', '|', '|', ' '], [' ', 'bl', 'br', ' '] ], U: [ ['tl', 'tr', 'tl', 'tr'], ['|', '|', '|', '|'], ['|', '|', '|', '|'], ['|', '|', '|', '|'], ['|', 'bl', 'br', '|'], ['bl', '-', '-', 'br'] ], V: [ ['tl', 'tr', 'tl', 'tr'], ['|', '|', '|', '|'], ['|', '|', '|', '|'], ['|', '|', '|', '|'], ['udr', 'udr', 'udl', 'udl'], [' ', 'd2', 'd1', ' '] ], W: [ ['tl', 'tr', 'tl', 'tr'], ['|', '|', '|', '|'], ['|', '|', '|', '|'], ['|', '|', '|', '|'], ['|', 'uur', 'uul', '|'], ['bl', 'url', 'ulr', 'br'] ], X: [ ['tl', 'tr', 'tl', 'tr'], ['udr', 'udr', 'udl', 'udl'], [' ', 'dul', 'dur', ' '], [' ', 'udl', 'udr', ' '], ['dur', 'dur', 'dul', 'dul'], ['bl', 'br', 'bl', 'br'] ], Y: [ ['tl', 'tr', 'tl', 'tr'], ['udr', 'udr', 'udl', 'udl'], [' ', 'dul', 'dur', ' '], [' ', '|', '|', ' '], [' ', '|', '|', ' '], [' ', 'bl', 'br', ' '] ], Z: [ ['tl', '-', '-', 'tr'], ['bl', '-', 'dll', '|'], [' ', 'd1', ' ', 'udl'], ['dur', ' ', 'd1', ' '], ['|', 'urr', '-', 'tr'], ['bl', '-', '-', 'br'] ] }; // Combine all patterns + Add Space const FONTS = { ...DIGITS, ...LETTERS, // Fallback for space character (4x6 empty) ' ': Array(6).fill(Array(4).fill(' ')) }; // --- Components --- const SingleClock = ({ shapeKey, isDark, onClick }) => { const [rotations, setRotations] = useState({ h: 225, m: 135 }); const target = SHAPES[shapeKey] || SHAPES[' ']; useEffect(() => { setRotations(prev => { const getNextRotation = (current, target) => { const currentMod = current % 360; let diff = target - currentMod; if (diff <= 0) diff += 360; return current + diff; }; return { h: getNextRotation(prev.h, target.h), m: getNextRotation(prev.m, target.m) }; }); }, [shapeKey]); const handColor = isDark ? 'bg-zinc-100' : 'bg-zinc-900'; const borderColor = isDark ? 'border-zinc-800 bg-zinc-900/30' : 'border-zinc-200 bg-zinc-50/50'; const hoverClass = onClick ? 'cursor-pointer hover:opacity-80 active:scale-95 transition-all' : ''; return (

{/* Hour Hand */}

{/* Minute Hand */}

); }; const ClockGrid = ({ pattern, isDark, onCellClick }) => { if (!pattern) return null; return (

{pattern.map((row, rIndex) => (

{row.map((shapeKey, cIndex) => ( onCellClick(rIndex, cIndex) : undefined} /> ))}

))}

); }; // --- Shape Picker Component (NEW) --- const ShapePicker = ({ currentShape, onSelect, onClose, isDark }) => { // All available shape keys const shapes = Object.keys(SHAPES); return (

e.stopPropagation()} >

Select Shape

{shapes.map(s => ( ))}

) } // --- Editor Component --- const DigitEditor = ({ isDark, onBack }) => { // Default to 4x6 for the new standard const [cols, setCols] = useState(4); const [rows, setRows] = useState(6); const [activeTab, setActiveTab] = useState('design'); // 'design' | 'code' const [grid, setGrid] = useState( Array(6).fill(null).map(() => Array(4).fill(' ')) ); // State for the picker const [pickingLocation, setPickingLocation] = useState(null); // { r, c } const [loadValue, setLoadValue] = useState(''); const handleResize = (newRows, newCols) => { // Determine the minimum dimensions to copy over safely const minRows = Math.min(grid.length, newRows); // Create new grid with new dimensions const newGrid = Array(newRows).fill(null).map((_, r) => { // For existing rows, check safe column bounds if (r < minRows) { const minCols = Math.min(grid[r].length, newCols); return Array(newCols).fill(null).map((_, c) => { if (c < minCols) return grid[r][c]; return ' '; // Fill extra columns with space }); } // New rows are filled with space return Array(newCols).fill(' '); }); setGrid(newGrid); setRows(newRows); setCols(newCols); }; const handleCellClick = (r, c) => { setPickingLocation({ r, c }); }; const handleShapeSelect = (shapeKey) => { if (pickingLocation) { setGrid(prev => { const newGrid = prev.map(row => [...row]); newGrid[pickingLocation.r][pickingLocation.c] = shapeKey; return newGrid; }); setPickingLocation(null); } }; const handleLoad = (e) => { const val = e.target.value; setLoadValue(val); if (val && FONTS[val]) { const loadedGrid = FONTS[val].map(row => [...row]); setGrid(loadedGrid); setRows(loadedGrid.length); setCols(loadedGrid[0]?.length || 4); } }; const generateOutput = () => { const rowsStr = grid.map(row => ` ['${row.join("', '")}']`).join(",\n"); return `[\n${rowsStr}\n],`; }; const copyToClipboard = () => { // Use execCommand for better compatibility in preview frames const text = generateOutput(); const textArea = document.createElement("textarea"); textArea.value = text; document.body.appendChild(textArea); textArea.select(); try { document.execCommand('copy'); const btn = document.getElementById('copyBtn'); if(btn) { const originalText = "Copy"; btn.innerText = "Copied!"; setTimeout(() => btn.innerText = originalText, 2000); } } catch (err) { console.error('Copy failed', err); } document.body.removeChild(textArea); }; return (

{/* Shape Picker Overlay */} {pickingLocation && ( setPickingLocation(null)} isDark={isDark} /> )} {/* Header & Navigation */}

Digit Designer

{/* Spacer for balance */}

{/* Mobile Tabs */}

{/* Editor Canvas Section */}

{/* Controls Bar */}

{/* Dimensions */}

Grid:

handleResize(rows, parseInt(e.target.value) || 3)} className={`w-10 p-1 text-center rounded border text-[10px] font-bold ${isDark ? 'bg-zinc-800 border-zinc-700' : 'bg-white border-zinc-300'}`} /> x handleResize(parseInt(e.target.value) || 5, cols)} className={`w-10 p-1 text-center rounded border text-[10px] font-bold ${isDark ? 'bg-zinc-800 border-zinc-700' : 'bg-white border-zinc-300'}`} />

{/* Load Preset */}

Load:

{/* The Grid Canvas */}

Tap a clock to change its shape

{/* Code Output Section */}

Generated Code

              {generateOutput()}

); }; // --- Main App --- export default function App() { const [time, setTime] = useState(new Date()); const [isDark, setIsDark] = useState(true); const [mode, setMode] = useState('clock'); // 'clock' | 'text' | 'editor' const [customText, setCustomText] = useState("HELLO"); useEffect(() => { // Only run timer if we are in clock mode if (mode === 'clock') { const timer = setInterval(() => setTime(new Date()), 1000); return () => clearInterval(timer); } }, [mode]); const hours = time.getHours().toString().padStart(2, '0'); const minutes = time.getMinutes().toString().padStart(2, '0'); const seconds = time.getSeconds().toString().padStart(2, '0'); // Separator: Blinking 2-dot // Hands rotate to ' ' (neutral) on odd seconds to create a kinetic blink const isSeparatorVisible = time.getSeconds() % 2 === 0; const separatorPattern = isSeparatorVisible ? [ [' ', ' '], ['tl', 'tr'], ['bl', 'br'], [' ', ' '], ['tl', 'tr'], ['bl', 'br'], ] : [ [' ', ' '], [' ', ' '], [' ', ' '], [' ', ' '], [' ', ' '], [' ', ' '], ]; const bgColor = isDark ? 'bg-zinc-950' : 'bg-zinc-50'; const textColor = isDark ? 'text-zinc-100' : 'text-zinc-900'; // Helper to render text const renderText = (str) => { const chars = str.toUpperCase().slice(0, 8).split(''); return chars.map((char, i) => { const pattern = FONTS[char] || FONTS[' ']; return ; }); }; return (

{/* Header Controls */}

{mode === 'editor' ? ( setMode('clock')} /> ) : ( <>

Clock Clock 24

{/* Mode Toggle */}

{/* Container for the Clock/Text */}

{mode === 'clock' ? ( <> {/* HOURS */}

{/* COLON */}

{/* MINUTES */}

{/* COLON */}

{/* SECONDS */}

) : ( /* TEXT MODE RENDERER */

{renderText(customText.padEnd(0))}

)}

{/* Bottom Controls */}

{mode === 'text' && (

setCustomText(e.target.value.slice(0, 8))} placeholder="TYPE HERE" className={`text-center text-lg font-mono font-bold tracking-widest bg-transparent border-b-2 outline-none w-64 ${isDark ? 'border-zinc-700 focus:border-white' : 'border-zinc-300 focus:border-black'}`} maxLength={8} /> Max 8 Characters

)}

); }

Clock of Clocks