Initial commmit

2016-03-19 12:23:45 +01:00
commit 5e3f352db5
7 changed files with 653 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,26 @@
+# Xcode
+.DS_Store
+*/build/*
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+profile
+*.moved-aside
+DerivedData
+.idea/
+*.hmap
+xcuserdata/*
+
+*.pbxuser
+*.mode1v3
+*.mode2v3
+*.perspectivev3
+*.xcuserstate
+project.xcworkspace/
+xcuserdata/
--- a/Clock.xcodeproj/project.pbxproj
+++ b/Clock.xcodeproj/project.pbxproj
@@ -0,0 +1,289 @@
+// !$*UTF8*$!
+{
+	archiveVersion = 1;
+	classes = {
+	};
+	objectVersion = 47;
+	objects = {
+
+/* Begin PBXBuildFile section */
+		3A40066E18B53113005F43A6 /* ScreenSaver.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 3A40066D18B53113005F43A6 /* ScreenSaver.framework */; };
+		3A40068318B53129005F43A6 /* WebKit.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 3A40068218B53129005F43A6 /* WebKit.framework */; };
+		7713E3931C961B5D009075D4 /* index.html in Resources */ = {isa = PBXBuildFile; fileRef = 7713E3921C961B5D009075D4 /* index.html */; };
+		77996CD71C94B804006B0FF7 /* Info.plist in Resources */ = {isa = PBXBuildFile; fileRef = 77996CD61C94B804006B0FF7 /* Info.plist */; };
+		77996CD91C94B825006B0FF7 /* EpochFlipClock.m in Sources */ = {isa = PBXBuildFile; fileRef = 77996CD81C94B825006B0FF7 /* EpochFlipClock.m */; };
+/* End PBXBuildFile section */
+
+/* Begin PBXFileReference section */
+		3A40066818B53112005F43A6 /* Epoch Flip Clock.saver */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = "Epoch Flip Clock.saver"; sourceTree = BUILT_PRODUCTS_DIR; };
+		3A40066D18B53113005F43A6 /* ScreenSaver.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = ScreenSaver.framework; path = System/Library/Frameworks/ScreenSaver.framework; sourceTree = SDKROOT; };
+		3A40068218B53129005F43A6 /* WebKit.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = WebKit.framework; path = System/Library/Frameworks/WebKit.framework; sourceTree = SDKROOT; };
+		3A95A94B18EA12D30036779C /* EpochFlipClock.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = EpochFlipClock.h; sourceTree = SOURCE_ROOT; };
+		7713E3921C961B5D009075D4 /* index.html */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.html; path = index.html; sourceTree = SOURCE_ROOT; };
+		77996CD61C94B804006B0FF7 /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = SOURCE_ROOT; };
+		77996CD81C94B825006B0FF7 /* EpochFlipClock.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = EpochFlipClock.m; sourceTree = SOURCE_ROOT; };
+/* End PBXFileReference section */
+
+/* Begin PBXFrameworksBuildPhase section */
+		3A40066318B53112005F43A6 /* Frameworks */ = {
+			isa = PBXFrameworksBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				3A40068318B53129005F43A6 /* WebKit.framework in Frameworks */,
+				3A40066E18B53113005F43A6 /* ScreenSaver.framework in Frameworks */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXFrameworksBuildPhase section */
+
+/* Begin PBXGroup section */
+		3A40065D18B53112005F43A6 = {
+			isa = PBXGroup;
+			children = (
+				3A40067318B53113005F43A6 /* Source */,
+				3A40066A18B53112005F43A6 /* Frameworks */,
+				3A40066918B53112005F43A6 /* Products */,
+			);
+			sourceTree = "<group>";
+		};
+		3A40066918B53112005F43A6 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				3A40066818B53112005F43A6 /* Epoch Flip Clock.saver */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
+		3A40066A18B53112005F43A6 /* Frameworks */ = {
+			isa = PBXGroup;
+			children = (
+				3A40068218B53129005F43A6 /* WebKit.framework */,
+				3A40066D18B53113005F43A6 /* ScreenSaver.framework */,
+			);
+			name = Frameworks;
+			sourceTree = "<group>";
+		};
+		3A40067318B53113005F43A6 /* Source */ = {
+			isa = PBXGroup;
+			children = (
+				7713E3921C961B5D009075D4 /* index.html */,
+				3A95A94B18EA12D30036779C /* EpochFlipClock.h */,
+				77996CD81C94B825006B0FF7 /* EpochFlipClock.m */,
+				77996CD61C94B804006B0FF7 /* Info.plist */,
+			);
+			name = Source;
+			path = "That Wednesday";
+			sourceTree = "<group>";
+		};
+/* End PBXGroup section */
+
+/* Begin PBXHeadersBuildPhase section */
+		3A40066418B53112005F43A6 /* Headers */ = {
+			isa = PBXHeadersBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXHeadersBuildPhase section */
+
+/* Begin PBXNativeTarget section */
+		3A40066718B53112005F43A6 /* Epoch Flip Clock */ = {
+			isa = PBXNativeTarget;
+			buildConfigurationList = 3A40067F18B53113005F43A6 /* Build configuration list for PBXNativeTarget "Epoch Flip Clock" */;
+			buildPhases = (
+				3A40066218B53112005F43A6 /* Sources */,
+				3A40066318B53112005F43A6 /* Frameworks */,
+				3A40066418B53112005F43A6 /* Headers */,
+				3A40066518B53112005F43A6 /* Resources */,
+				3A40066618B53112005F43A6 /* Rez */,
+			);
+			buildRules = (
+			);
+			dependencies = (
+			);
+			name = "Epoch Flip Clock";
+			productName = "That Wednesday";
+			productReference = 3A40066818B53112005F43A6 /* Epoch Flip Clock.saver */;
+			productType = "com.apple.product-type.bundle";
+		};
+/* End PBXNativeTarget section */
+
+/* Begin PBXProject section */
+		3A40065E18B53112005F43A6 /* Project object */ = {
+			isa = PBXProject;
+			attributes = {
+				LastUpgradeCheck = 0500;
+				ORGANIZATIONNAME = chrstphrknwtn;
+			};
+			buildConfigurationList = 3A40066118B53112005F43A6 /* Build configuration list for PBXProject "Epoch Flip Clock" */;
+			compatibilityVersion = "Xcode 6.3";
+			developmentRegion = English;
+			hasScannedForEncodings = 0;
+			knownRegions = (
+				en,
+			);
+			mainGroup = 3A40065D18B53112005F43A6;
+			productRefGroup = 3A40066918B53112005F43A6 /* Products */;
+			projectDirPath = "";
+			projectRoot = "";
+			targets = (
+				3A40066718B53112005F43A6 /* Epoch Flip Clock */,
+			);
+		};
+/* End PBXProject section */
+
+/* Begin PBXResourcesBuildPhase section */
+		3A40066518B53112005F43A6 /* Resources */ = {
+			isa = PBXResourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				77996CD71C94B804006B0FF7 /* Info.plist in Resources */,
+				7713E3931C961B5D009075D4 /* index.html in Resources */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXResourcesBuildPhase section */
+
+/* Begin PBXRezBuildPhase section */
+		3A40066618B53112005F43A6 /* Rez */ = {
+			isa = PBXRezBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXRezBuildPhase section */
+
+/* Begin PBXSourcesBuildPhase section */
+		3A40066218B53112005F43A6 /* Sources */ = {
+			isa = PBXSourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				77996CD91C94B825006B0FF7 /* EpochFlipClock.m in Sources */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXSourcesBuildPhase section */
+
+/* Begin XCBuildConfiguration section */
+		3A40067D18B53113005F43A6 /* Debug */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ALWAYS_SEARCH_USER_PATHS = NO;
+				CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
+				CLANG_CXX_LIBRARY = "libc++";
+				CLANG_ENABLE_OBJC_ARC = YES;
+				CLANG_WARN_BOOL_CONVERSION = YES;
+				CLANG_WARN_CONSTANT_CONVERSION = YES;
+				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
+				CLANG_WARN_EMPTY_BODY = YES;
+				CLANG_WARN_ENUM_CONVERSION = YES;
+				CLANG_WARN_INT_CONVERSION = YES;
+				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
+				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
+				COPY_PHASE_STRIP = YES;
+				DEBUG_INFORMATION_FORMAT = dwarf;
+				ENABLE_NS_ASSERTIONS = YES;
+				GCC_C_LANGUAGE_STANDARD = gnu99;
+				GCC_DYNAMIC_NO_PIC = NO;
+				GCC_ENABLE_OBJC_EXCEPTIONS = YES;
+				GCC_OPTIMIZATION_LEVEL = fast;
+				GCC_PREPROCESSOR_DEFINITIONS = (
+					"DEBUG=1",
+					"$(inherited)",
+				);
+				GCC_SYMBOLS_PRIVATE_EXTERN = YES;
+				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
+				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
+				GCC_WARN_UNDECLARED_SELECTOR = YES;
+				GCC_WARN_UNINITIALIZED_AUTOS = YES;
+				GCC_WARN_UNUSED_FUNCTION = YES;
+				GCC_WARN_UNUSED_VARIABLE = YES;
+				MACOSX_DEPLOYMENT_TARGET = 10.11;
+				ONLY_ACTIVE_ARCH = YES;
+				SDKROOT = macosx;
+			};
+			name = Debug;
+		};
+		3A40067E18B53113005F43A6 /* Release */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ALWAYS_SEARCH_USER_PATHS = NO;
+				CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
+				CLANG_CXX_LIBRARY = "libc++";
+				CLANG_ENABLE_OBJC_ARC = YES;
+				CLANG_WARN_BOOL_CONVERSION = YES;
+				CLANG_WARN_CONSTANT_CONVERSION = YES;
+				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
+				CLANG_WARN_EMPTY_BODY = YES;
+				CLANG_WARN_ENUM_CONVERSION = YES;
+				CLANG_WARN_INT_CONVERSION = YES;
+				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
+				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
+				COPY_PHASE_STRIP = YES;
+				DEBUG_INFORMATION_FORMAT = dwarf;
+				ENABLE_NS_ASSERTIONS = YES;
+				GCC_C_LANGUAGE_STANDARD = gnu99;
+				GCC_ENABLE_OBJC_EXCEPTIONS = YES;
+				GCC_OPTIMIZATION_LEVEL = fast;
+				GCC_SYMBOLS_PRIVATE_EXTERN = YES;
+				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
+				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
+				GCC_WARN_UNDECLARED_SELECTOR = YES;
+				GCC_WARN_UNINITIALIZED_AUTOS = YES;
+				GCC_WARN_UNUSED_FUNCTION = YES;
+				GCC_WARN_UNUSED_VARIABLE = YES;
+				MACOSX_DEPLOYMENT_TARGET = 10.11;
+				ONLY_ACTIVE_ARCH = YES;
+				SDKROOT = macosx;
+			};
+			name = Release;
+		};
+		3A40068018B53113005F43A6 /* Debug */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				COMBINE_HIDPI_IMAGES = YES;
+				INFOPLIST_FILE = Info.plist;
+				INSTALL_PATH = "$(HOME)/Library/Screen Savers";
+				PRODUCT_NAME = $TARGET_NAME;
+				WRAPPER_EXTENSION = saver;
+			};
+			name = Debug;
+		};
+		3A40068118B53113005F43A6 /* Release */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				COMBINE_HIDPI_IMAGES = YES;
+				INFOPLIST_FILE = Info.plist;
+				INSTALL_PATH = "$(HOME)/Library/Screen Savers";
+				PRODUCT_NAME = $TARGET_NAME;
+				WRAPPER_EXTENSION = saver;
+			};
+			name = Release;
+		};
+/* End XCBuildConfiguration section */
+
+/* Begin XCConfigurationList section */
+		3A40066118B53112005F43A6 /* Build configuration list for PBXProject "Epoch Flip Clock" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				3A40067D18B53113005F43A6 /* Debug */,
+				3A40067E18B53113005F43A6 /* Release */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
+		};
+		3A40067F18B53113005F43A6 /* Build configuration list for PBXNativeTarget "Epoch Flip Clock" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				3A40068018B53113005F43A6 /* Debug */,
+				3A40068118B53113005F43A6 /* Release */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
+		};
+/* End XCConfigurationList section */
+	};
+	rootObject = 3A40065E18B53112005F43A6 /* Project object */;
+}
--- a/EpochFlipClock.h
+++ b/EpochFlipClock.h
@@ -0,0 +1,4 @@
+#import <ScreenSaver/ScreenSaver.h>
+
+@interface EpochFlipClock : ScreenSaverView
+@end
--- a/EpochFlipClock.m
+++ b/EpochFlipClock.m
@@ -0,0 +1,43 @@
+#import "EpochFlipClock.h"
+#import <WebKit/WebKit.h>
+
+@implementation EpochFlipClock
+
+- (id)initWithFrame:(NSRect)frame isPreview:(BOOL)isPreview {
+    if (!(self = [super initWithFrame:frame isPreview:isPreview])) return nil;
+
+    NSURL* indexHTMLDocumentURL = [NSURL URLWithString:[[[NSURL fileURLWithPath:[[NSBundle bundleForClass:self.class].resourcePath stringByAppendingString:@"/index.html"] isDirectory:NO] description] stringByAppendingFormat:@"?screensaver=1%@", self.isPreview ? @"&is_preview=1" : @""]];
+
+    WebView* webView = [[WebView alloc] initWithFrame:NSMakeRect(0, 0, frame.size.width, frame.size.height)];
+    webView.drawsBackground = NO; // Avoids a "white flash" just before the index.html file has loaded
+    [webView.mainFrame loadRequest:[NSURLRequest requestWithURL:indexHTMLDocumentURL cachePolicy:NSURLRequestUseProtocolCachePolicy timeoutInterval:30.0]];
+    [self addSubview:webView];
+
+    return self;
+}
+
+#pragma mark - ScreenSaverView
+
+- (void)animateOneFrame { [self stopAnimation]; }
+- (BOOL)hasConfigureSheet { return NO; }
+
+#pragma mark - WebFrameLoadDelegate
+
+- (void)webView:(WebView *)sender didFailLoadWithError:(NSError *)error forFrame:(WebFrame *)frame {
+    NSLog(@"%@ error=%@", NSStringFromSelector(_cmd), error);
+}
+
+#pragma mark Focus Overrides
+
+- (NSView *)hitTest:(NSPoint)aPoint {return self;}
+- (void)keyDown:(NSEvent *)theEvent {return;}
+- (void)keyUp:(NSEvent *)theEvent {return;}
+- (void)mouseDown:(NSEvent *)theEvent {return;}
+- (void)mouseUp:(NSEvent *)theEvent {return;}
+- (void)mouseDragged:(NSEvent *)theEvent {return;}
+- (void)mouseEntered:(NSEvent *)theEvent {return;}
+- (void)mouseExited:(NSEvent *)theEvent {return;}
+- (BOOL)acceptsFirstResponder {return YES;}
+- (BOOL)resignFirstResponder {return NO;}
+
+@end
--- a/Info.plist
+++ b/Info.plist
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>English</string>
+	<key>CFBundleExecutable</key>
+	<string>${EXECUTABLE_NAME}</string>
+	<key>CFBundleIconFile</key>
+	<string></string>
+	<key>CFBundleIdentifier</key>
+	<string>com.chrstphrknwtn.${PRODUCT_NAME:rfc1034identifier}</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>0.0.1</string>
+	<key>CFBundleName</key>
+	<string>${PRODUCT_NAME}</string>
+	<key>CFBundlePackageType</key>
+	<string>BNDL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>1.0</string>
+	<key>CFBundleSignature</key>
+	<string>????</string>
+	<key>CFBundleVersion</key>
+	<string>1.0</string>
+	<key>NSHumanReadableCopyright</key>
+	<string>Copyright © 2016 Christopher Newton. All rights reserved.</string>
+	<key>NSPrincipalClass</key>
+	<string>EpochFlipClock</string>
+</dict>
+</plist>
--- a/index.html
+++ b/index.html
@@ -0,0 +1,261 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset='UTF-8'>
+<style>
+
+html, body {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  font-family: '-apple-system', sans-serif;
+  align-items: center;
+  justify-content: center;
+  background-color: black;
+  perspective: 100vw;
+  -webkit-text-smoothing: anti-aliased;
+}
+
+digit {
+  position: relative;
+  width: 7vw;
+  height: 11vw;
+  margin: 0 0.25vw;
+  -webkit-backface-visibility: hidden;
+}
+
+/* Flip Flaps
+------------------------------------------------*/
+flap-top,
+flap-top-flip,
+flap-bottom,
+flap-bottom-flip {
+  box-sizing: border-box;
+  position: absolute;
+  display: flex;
+  width: 100%;
+  height: 50%;
+  left: 0;
+  justify-content: center;
+  overflow: hidden;
+  color: #e1e1e1;
+  background-color: rgb(12,12,12);
+  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.04);
+  -webkit-backface-visibility: hidden;
+}
+flap-top,
+flap-top-flip {
+  top: 0;
+  border-radius: 0.4vw 0.4vw 0 0;
+  transform: translateY(-2px);
+}
+flap-bottom,
+flap-bottom-flip {
+  bottom: 0;
+  border-radius: 0 0 0.4vw 0.4vw;
+  transform: translateY(2px);
+}
+
+flap-top-flip {
+  display: none;
+  transform-origin: 100% 100%;
+  animation: flip-top-down 300ms ease-in;
+}
+flap-bottom-flip {
+  display: none;
+  transform-origin: 100% 0%;
+  animation: flip-bottom-down 150ms ease-out;
+}
+flap-top > n,
+flap-top-flip > n {
+  top: 2px;
+}
+flap-bottom > n,
+flap-bottom-flip > n {
+  bottom: 2px;
+}
+
+@media screen and (max-width: 1200px) {
+  flap-top,
+  flap-top-flip {
+    transform: translateY(-1px);
+  }
+  flap-bottom,
+  flap-bottom-flip {
+    transform: translateY(1px);
+  }
+  flap-top > n,
+  flap-top-flip > n {
+    top: 1px;
+  }
+  flap-bottom > n,
+  flap-bottom-flip > n {
+    bottom: 1px;
+  }
+}
+
+/* Number
+------------------------------------------------*/
+n {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 11vw;
+  font-size: 9vw;
+  font-weight: 200;
+  line-height: 118%;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+  -webkit-backface-visibility: hidden;
+  transform: translate3d(0, 0, 0)
+}
+
+/* Animations
+------------------------------------------------*/
+@keyframes flip-top-down {
+  0% {
+    transform: translateY(-2px) rotateX(0);
+  }
+  100% {
+    transform: translateY(-2px) rotateX(-90deg);
+    color: black;
+    background-color: black;
+  }
+}
+@keyframes flip-bottom-down {
+  0% {
+    color: white;
+    background-color: rgb(30,30,30);
+    transform: translateY(2px) rotateX(90deg);
+  }
+  100% {
+    transform: translateY(2px) rotateX(0deg);
+  }
+}
+@media screen and (max-width: 1200px) {
+  @keyframes flip-top-down {
+    0% {
+      transform: translateY(-1px) rotateX(0);
+    }
+    100% {
+      transform: translateY(-1px) rotateX(-90deg);
+      color: black;
+      background-color: black;
+    }
+  }
+  @keyframes flip-bottom-down {
+    0% {
+      color: white;
+      background-color: rgb(30,30,30);
+      transform: translateY(1px) rotateX(90deg);
+    }
+    100% {
+      transform: translateY(1px) rotateX(0deg);
+    }
+  }
+}
+
+</style>
+</head>
+<body>
+<script>
+
+(function() {
+'use strict';
+
+var digits = [];
+
+function getEpoch() {
+  return Date.now().toString().slice(0,-3);
+}
+
+function createDigit() {
+  var digit = document.createElement('digit');
+  digit.innerHTML = '\
+  <flap-top>          <n></n>   </flap-top>\
+  <flap-top-flip>     <n></n>   </flap-top-flip>\
+  <flap-bottom>       <n></n>   </flap-bottom>\
+  <flap-bottom-flip>  <n></n>   </flap-bottom-flip>';
+  return digit;
+}
+
+function flipDigitTo(digit, currentVal, updatedVal) {
+  var topFlapNum        = digit.querySelector('flap-top > n'),
+      topFlapFlip       = digit.querySelector('flap-top-flip'),
+      topFlapFlipNum    = topFlapFlip.querySelector('n'),
+      bottomFlapNum     = digit.querySelector('flap-bottom > n'),
+      bottomFlapFlip    = digit.querySelector('flap-bottom-flip'),
+      bottomFlapFlipNum = bottomFlapFlip.querySelector('n');
+
+  topFlapNum.innerHTML = updatedVal;
+  bottomFlapNum.innerHTML = currentVal;
+
+  topFlapFlipNum.innerHTML = currentVal;
+  topFlapFlip.style.display = 'block';
+
+  setTimeout(function() {
+    topFlapFlip.style.display = 'none';
+  }, 300);
+
+  setTimeout(function() {
+    bottomFlapFlipNum.innerHTML = updatedVal;
+    bottomFlapFlip.style.display = 'block';
+  }, 300);
+
+  setTimeout(function() {
+    bottomFlapNum.innerHTML = updatedVal;
+    bottomFlapFlip.style.display = 'none';
+  }, 450);
+
+  digit.setAttribute('current-val', updatedVal);
+}
+
+function updateClock() {
+  var epoch = getEpoch(),
+      staggerDelay,
+      currentVal,
+      updatedVal,
+      i;
+
+  for (i = 0; i < epoch.length; i+=1) {
+    if(i === epoch.length-1) {
+      staggerDelay = 0;
+    } else {
+      staggerDelay = Math.random() * 400;
+    }
+    currentVal = digits[i].getAttribute('current-val');
+    updatedVal = epoch[i];
+    if(currentVal !== updatedVal) {
+      setTimeout(flipDigitTo, staggerDelay, digits[i], currentVal, updatedVal);
+    }
+  }
+}
+
+function setupClock() {
+  var epoch = getEpoch(),
+      staggerDelay,
+      digit,
+      i;
+
+  for (i = 0; i < epoch.length; i+=1) {
+    digit = createDigit();
+    staggerDelay = Math.random() * 400;
+    document.body.appendChild(digit);
+    setTimeout(flipDigitTo, staggerDelay, digit, null, epoch[i]);
+  }
+  digits = document.querySelectorAll('digit');
+}
+
+setupClock();
+setInterval(updateClock, 1000);
+
+}());
+
+</script>
+</body>
+</html>
--- a/readme.md
+++ b/readme.md