@@ -25,6 +25,12 @@ class BookStore {
2525 ] ;
2626 this . currentTypewriterIndex = 0 ;
2727
28+ // Mobile clock tracking
29+ this . previousMobileHours = '' ;
30+ this . previousMobileMinutes = '' ;
31+ this . previousMobileSeconds = '' ;
32+ this . previousMobileDate = '' ;
33+
2834 this . init ( ) ;
2935 }
3036
@@ -34,6 +40,7 @@ class BookStore {
3440 this . initializeTheme ( ) ;
3541 this . updateReadingListUI ( ) ;
3642 this . startTypewriterEffect ( ) ;
43+ this . startRomanClock ( ) ;
3744 await this . loadBooks ( ) ;
3845 this . setupViewMode ( ) ;
3946 this . initializeCarousel ( ) ;
@@ -1785,6 +1792,122 @@ class BookStore {
17851792 typewrite ( ) ;
17861793 }
17871794
1795+ // Roman Analog Clock Display
1796+ startRomanClock ( ) {
1797+ const updateClock = ( ) => {
1798+ const now = new Date ( ) ;
1799+
1800+ // Get time components
1801+ const hours = now . getHours ( ) % 12 ;
1802+ const minutes = now . getMinutes ( ) ;
1803+ const seconds = now . getSeconds ( ) ;
1804+
1805+ // Calculate angles for hands (360 degrees = full circle)
1806+ const hourAngle = ( hours * 30 ) + ( minutes * 0.5 ) ; // 30 degrees per hour + minute adjustment
1807+ const minuteAngle = minutes * 6 ; // 6 degrees per minute
1808+ const secondAngle = seconds * 6 ; // 6 degrees per second
1809+
1810+ // Update hand positions smoothly
1811+ const hourHand = document . getElementById ( 'hour-hand' ) ;
1812+ const minuteHand = document . getElementById ( 'minute-hand' ) ;
1813+ const secondHand = document . getElementById ( 'second-hand' ) ;
1814+
1815+ if ( hourHand ) {
1816+ hourHand . style . transform = `rotate(${ hourAngle } ;
1817+ }
1818+ if ( minuteHand ) {
1819+ minuteHand . style . transform = `rotate(${ minuteAngle } ;
1820+ }
1821+ if ( secondHand ) {
1822+ secondHand . style . transform = `rotate(${ secondAngle } ;
1823+ }
1824+
1825+ // Update date display
1826+ const options = {
1827+ weekday : 'short' ,
1828+ month : 'short' ,
1829+ day : 'numeric'
1830+ } ;
1831+ const currentDate = now . toLocaleDateString ( 'en-US' , options ) ;
1832+ const dateElement = document . getElementById ( 'roman-clock-date' ) ;
1833+ if ( dateElement ) {
1834+ dateElement . textContent = currentDate ;
1835+ }
1836+
1837+ // Update mobile clock if it exists
1838+ this . updateMobileClockWithAnimation (
1839+ String ( now . getHours ( ) ) . padStart ( 2 , '0' ) ,
1840+ String ( minutes ) . padStart ( 2 , '0' ) ,
1841+ String ( seconds ) . padStart ( 2 , '0' ) ,
1842+ currentDate
1843+ ) ;
1844+ } ;
1845+
1846+ // Initial update
1847+ updateClock ( ) ;
1848+
1849+ // Update every second
1850+ setInterval ( updateClock , 1000 ) ;
1851+ }
1852+
1853+ updateTimeWithAnimation ( elementId , newValue , previousValue ) {
1854+ const element = document . getElementById ( elementId ) ;
1855+ if ( ! element ) return ;
1856+
1857+ if ( newValue !== previousValue ) {
1858+ // Add rolling animation class
1859+ element . classList . add ( 'rolling-digit' , 'flip' ) ;
1860+
1861+ // Update the value
1862+ element . textContent = newValue ;
1863+
1864+ // Remove animation class after animation completes
1865+ setTimeout ( ( ) => {
1866+ element . classList . remove ( 'flip' ) ;
1867+ } , 600 ) ;
1868+ }
1869+ }
1870+
1871+ updateMobileClockWithAnimation ( hours , minutes , seconds , date ) {
1872+ // Update mobile clock elements with animation
1873+ this . updateClockElement ( 'mobile-hours' , hours , this . previousMobileHours ) ;
1874+ this . updateClockElement ( 'mobile-minutes' , minutes , this . previousMobileMinutes ) ;
1875+ this . updateClockElement ( 'mobile-seconds' , seconds , this . previousMobileSeconds ) ;
1876+
1877+ // Update mobile date
1878+ const mobileDateElement = document . getElementById ( 'mobile-live-date' ) ;
1879+ if ( mobileDateElement && date !== this . previousMobileDate ) {
1880+ mobileDateElement . textContent = date ;
1881+ }
1882+
1883+ // Store previous values
1884+ this . previousMobileHours = hours ;
1885+ this . previousMobileMinutes = minutes ;
1886+ this . previousMobileSeconds = seconds ;
1887+ this . previousMobileDate = date ;
1888+ }
1889+
1890+ updateClockElement ( elementId , newValue , previousValue ) {
1891+ const element = document . getElementById ( elementId ) ;
1892+ if ( ! element ) return ;
1893+
1894+ if ( newValue !== previousValue ) {
1895+ // Add rolling animation class
1896+ element . classList . add ( 'flip' ) ;
1897+
1898+ // Update the value
1899+ element . textContent = newValue ;
1900+
1901+ // Remove animation class after animation completes
1902+ setTimeout ( ( ) => {
1903+ element . classList . remove ( 'flip' ) ;
1904+ } , 600 ) ;
1905+ } else if ( ! element . textContent || element . textContent === '--' ) {
1906+ // Initial load
1907+ element . textContent = newValue ;
1908+ }
1909+ }
1910+
17881911 // Infinite Horizontal Carousel functionality
17891912 initializeCarousel ( ) {
17901913 if ( this . books . length > 0 ) {
0 commit comments