Visual Console Client: improvements into the clock item

Former-commit-id: c328ea72b00857d10317de6f0812df05c30ec856

visual_console/src/items/Clock/Clock.css

@@ -0,0 +1,48 @@
+@font-face {
+  font-family: Alarm Clock;
+  src: url(./alarm-clock.ttf);
+}
+
+/* Digital clock */
+
+.visual-console-item .digital-clock {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  justify-items: center;
+  align-content: center;
+  align-items: center;
+}
+
+.visual-console-item .digital-clock > span {
+  font-family: "Alarm Clock", "Courier New", Courier, monospace;
+  font-size: 50px;
+
+  /* To improve legibility */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
+}
+
+.visual-console-item .digital-clock > span.date {
+  font-size: 25px;
+}
+
+.visual-console-item .digital-clock > span.timezone {
+  font-size: 25px;
+}
+
+/* Analog clock */
+
+.visual-console-item .analogic-clock .hour-hand {
+  animation: rotate-hour 43200s infinite linear;
+}
+
+.visual-console-item .analogic-clock .minute-hand {
+  animation: rotate-minute 3600s infinite linear;
+}
+
+.visual-console-item .analogic-clock .second-hand {
+  animation: rotate-second 60s infinite linear;
+}

visual_console/src/items/Clock/Clock.spec.ts

@@ -1,4 +1,4 @@
-import Clock, { clockPropsDecoder } from "./Clock";
+import Clock, { clockPropsDecoder } from ".";
 
 const genericRawProps = {
   id: 1,
@@ -24,7 +24,9 @@ const digitalClockProps = {
   clockType: "digital",
   clockFormat: "datetime",
   clockTimezone: "Madrid",
-  clockTimezoneOffset: 60
+  clockTimezoneOffset: 60,
+  showClockTimezone: true,
+  color: "white"
 };
 
 const linkedModuleProps = {

visual_console/src/items/Clock/index.ts

@@ -1,17 +1,20 @@
-import { LinkedVisualConsoleProps, UnknownObject } from "../types";
+import "./Clock.css";
+
+import { LinkedVisualConsoleProps, UnknownObject } from "../../types";
 
 import {
   linkedVCPropsDecoder,
   parseIntOr,
   padLeft,
-  parseBoolean
-} from "../lib";
+  parseBoolean,
+  prefixedCssRules
+} from "../../lib";
 
 import VisualConsoleItem, {
   VisualConsoleItemProps,
   itemBasePropsDecoder,
   VisualConsoleItemType
-} from "../VisualConsoleItem";
+} from "../../VisualConsoleItem";
 
 export type ClockProps = {
   type: VisualConsoleItemType.CLOCK;
@@ -417,26 +420,44 @@ export default class Clock extends VisualConsoleItem<ClockProps> {
       <style>
         @keyframes rotate-hour {
           from {
-            transform: translate(50px, 50px) rotate(${hourAngle}deg);
+            ${prefixedCssRules(
+              "transform",
+              `translate(50px, 50px) rotate(${hourAngle}deg)`
+            ).join("\n")}
           }
           to {
-            transform: translate(50px, 50px) rotate(${hourAngle + 360}deg);
+            ${prefixedCssRules(
+              "transform",
+              `translate(50px, 50px) rotate(${hourAngle + 360}deg)`
+            ).join("\n")}
           }
         }
         @keyframes rotate-minute {
           from {
-            transform: translate(50px, 50px) rotate(${minuteAngle}deg);
+            ${prefixedCssRules(
+              "transform",
+              `translate(50px, 50px) rotate(${minuteAngle}deg)`
+            ).join("\n")}
           }
           to {
-            transform: translate(50px, 50px) rotate(${minuteAngle + 360}deg);
+            ${prefixedCssRules(
+              "transform",
+              `translate(50px, 50px) rotate(${minuteAngle + 360}deg)`
+            ).join("\n")}
           }
         }
         @keyframes rotate-second {
           from {
-            transform: translate(50px, 50px) rotate(${secAngle}deg);
+            ${prefixedCssRules(
+              "transform",
+              `translate(50px, 50px) rotate(${secAngle}deg)`
+            ).join("\n")}
           }
           to {
-            transform: translate(50px, 50px) rotate(${secAngle + 360}deg);
+            ${prefixedCssRules(
+              "transform",
+              `translate(50px, 50px) rotate(${minuteAngle + 360}deg)`
+            ).join("\n")}
           }
         }
       </style>