Fix clock demo

zumerlab · Mar 21, 2023 · 858dfc3 · 858dfc3
1 parent 19bd9d1
commit 858dfc3
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -21,6 +21,8 @@
 - WIP armar progress en svg
 - ~~FIX offset~~
 - CHANGE NAMES
+- issue core.item angle
+- add manual overrride of items-n
 
 ## ELEMENTS
 

diff --git a/css/index.css b/css/index.css
@@ -147,14 +147,13 @@
 }
 
 .core {
-  width: 1px;
-  height: 1px;
+  width: 0px;
+  height: 0px;
   display: grid;
   border-radius: 50%;
   border: 1px solid rgb(255, 5, 5);
   grid-area: 1/1/1/1;
   align-items: center;
-  align-content: center;
 }
 
 div[class^=ring] {

diff --git a/css/index.css.map b/css/index.css.map
diff --git a/dist/css/index.min.css b/dist/css/index.min.css
diff --git a/dist/css/index.min.css.map b/dist/css/index.min.css.map
diff --git a/index.html b/index.html
@@ -9,24 +9,27 @@
   </head>
   <body>
     <div class="z-container" >
-      <div class="core items-1 offset-270">
-        <hr class="item line hora" style="width: 110px; height: 5px;  border:1px solid red; --angle: 0">
-        <hr class="item line segundo" style="width: 150px; height: 2px; border:1px solid red;  --angle: 0">
-        <hr class="item line minuto" style="width: 120px; height: 3px; border:1px solid red;  --angle: 0">
+      <div class="core">
+        <hr class="item line hora" style="width: 210px; height: 1px;  border:1px solid red; --angle: 0;  --item-number: 1;
+        transform: rotate(calc((var(--angle) * var(--item-number) ) * 1deg)) ;">
+        <hr class="item line minuto" style="width: 220px; height: 1px; border:1px solid rgb(157, 2, 247);  --angle: 0;  --item-number: 1;
+        transform: rotate(calc((var(--angle) * var(--item-number) ) * 1deg));">
+        <hr class="item line segundo" style="width: 250px; height: 1px; border:1px solid rgb(0, 245, 61);  --angle: 0;  --item-number: 1;
+        transform: rotate(calc((var(--angle) * var(--item-number) ) * 1deg));">
       </div>
       <div class="ring-2 items-12 offset-270">
-        <div class="item xs">12</div>
-        <div class="item xs">1</div>
-        <div class="item xs">2</div>
-        <div class="item xs">3</div>
-        <div class="item xs">4</div>
-        <div class="item xs">5</div>
-        <div class="item xs">6</div>
-        <div class="item xs">7</div>
-        <div class="item xs">8</div>
-        <div class="item xs">9</div>
-        <div class="item xs">10</div>
-        <div class="item xs">11</div>
+        <div class="item xs upper">12</div>
+        <div class="item xs upper">1</div>
+        <div class="item xs upper">2</div>
+        <div class="item xs upper">3</div>
+        <div class="item xs upper">4</div>
+        <div class="item xs upper">5</div>
+        <div class="item xs upper">6</div>
+        <div class="item xs upper">7</div>
+        <div class="item xs upper">8</div>
+        <div class="item xs upper">9</div>
+        <div class="item xs upper">10</div>
+        <div class="item xs upper">11</div>
 
 
       </div>
@@ -65,7 +68,7 @@
           <div class="content">sub 1 <br> sub2 sub 1 </div>
           <div class="ring-2 items-4 offset-45 arc-90">
             <div class="item xs ">U</div>
-            <div class="item xs upper">L</div>
+            <div class="item xs ">L</div>
             <div class="item xs stationary" >N</div>
             <div class="item xs">
               <div class="ring-3 items-3"> 
@@ -86,16 +89,16 @@
       </div>
     </div>
     <script>
-      var elh = document.querySelector(".hora")
+      var elh = document.querySelector("hr.hora")
       var hora = elh.style.getPropertyValue("--angle")
-      var elm = document.querySelector(".minuto")
+      var elm = document.querySelector("hr.minuto")
       var minuto = elm.style.getPropertyValue("--angle")
-      var els = document.querySelector(".segundo")
+      var els = document.querySelector("hr.segundo")
       var segundo = els.style.getPropertyValue("--angle")
       function timeToDegrees(hours, minutes, seconds) {
-        const hourDegrees = (hours % 12) * 30 + (minutes / 2) + (seconds / 120);
-        const minuteDegrees = minutes * 6 + (seconds / 10);
-        const secondDegrees = seconds * 6;
+        const hourDegrees = (((hours / 12) * 360) - 90) + (((minutes / 60) * 360) - 90) / 60 + ( (((seconds / 60) * 360) - 90) / 3600);
+        const minuteDegrees = ((minutes / 60) * 360) - 90 + (((seconds / 60) * 360) - 90) / 60;
+  const secondDegrees = ((seconds / 60) * 360) - 90;
         return {
           hour: hourDegrees,
           minute: minuteDegrees,
@@ -105,10 +108,12 @@
 
       setInterval(() => {
         const now = new Date();
-        const degrees = timeToDegrees(now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds());
+
+        const degrees = timeToDegrees(now.getUTCHours() -3, now.getUTCMinutes(), now.getUTCSeconds());
         elh.style.setProperty("--angle", degrees.hour)
         elm.style.setProperty("--angle", degrees.minute)
         els.style.setProperty("--angle", degrees.second)
+        //console.log(now.getUTCHours() -3, degrees.hour, now.getUTCMinutes(),degrees.minute, now.getUTCSeconds(),degrees.second)
 
       }, 1000)
     </script>

diff --git a/src/index.scss b/src/index.scss
@@ -184,14 +184,13 @@
  }
 
  .core {
-  width: 1px;
-   height: 1px;
+   width: 0px;
+   height: 0px;
    display: grid;
    border-radius: 50%;
    border: 1px solid rgb(255, 5, 5);
    grid-area: 1/1/1/1;
    align-items: center;
-   align-content: center;
  }
 
  div[class^="ring"] {