Modify background tile sync with minutes

sakebook · Sep 30, 2018 · 82d0dcd · 82d0dcd
1 parent c9282d1
commit 82d0dcd
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git a/app/index.js b/app/index.js
@@ -4,17 +4,19 @@ import document from 'document';
 const dateText = document.getElementById('js-date');
 const hoursBar = document.getElementById('hours');
 const minutesBar = document.getElementById('minutes');
+const backTile = document.getElementById('back');
 
 function onTick() {
   const now = new Date();
   const hours = now.getHours() % 12;
   const minutes = now.getMinutes();
   hoursBar.groupTransform.rotate.angle = (hours + minutes / 60) * 30;
   minutesBar.groupTransform.rotate.angle = minutes * 6;
+  backTile.groupTransform.rotate.angle = minutes * 6;
   dateText.text = now.getDate();
 }
 
-clock.granularity = 'seconds';
+clock.granularity = 'minutes';
 clock.ontick = onTick;
 
 onTick();
diff --git a/resources/index.gui b/resources/index.gui
@@ -1,8 +1,8 @@
 <svg class="background">
     <!-- background line -->
-    <g id="back" transform="translate(50%,50%)rotate(-30)">
-        <rect class="color-inverse" x="-65%" y="0%" width="70%" height="90%" />
-        <rect class="color-inverse" x="0%" y="0%" width="70%" height="90%" />
+    <g id="back" transform="translate(50%,50%)">
+        <rect class="color-inverse" x="0%" y="-90%" width="65%" height="91%" />
+        <rect class="color-inverse" x="0%" y="0%" width="65%" height="91%" />
     </g>
 
     <!-- numbers -->

diff --git a/resources/index~300x300.gui b/resources/index~300x300.gui
@@ -1,7 +1,7 @@
 <svg class="background">
     <!-- background line -->
-    <g id="back" transform="translate(50%,50%)rotate(-30)">
-        <rect class="color-inverse" x="-75%" y="0%" width="76%" height="75%" />
+    <g id="back" transform="translate(50%,50%)">
+        <rect class="color-inverse" x="0%" y="-75%" width="76%" height="75%" />
         <rect class="color-inverse" x="0%" y="0%" width="76%" height="75%" />
     </g>