add snow animation

OlivierZal · Oct 3, 2024 · 93d5ad8 · 93d5ad8
1 parent e0111e5
commit 93d5ad8
Show file tree

Hide file tree

Showing 3 changed files with 131 additions and 7 deletions.
diff --git a/widgets/ata-group-setting/public/animation.css b/widgets/ata-group-setting/public/animation.css
@@ -0,0 +1,26 @@
+#animation {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  top: 0;
+  left: 0;
+}
+
+.snowflake {
+  position: absolute;
+  top: -10px;
+  color: #8ecae6;
+  user-select: none;
+  animation-name: fall;
+  animation-timing-function: linear;
+}
+
+@keyframes fall {
+  from {
+    transform: translateY(0) rotate(0deg);
+  }
+  to {
+    transform: translateY(100vh) rotate(360deg);
+  }
+}
diff --git a/widgets/ata-group-setting/public/index.html b/widgets/ata-group-setting/public/index.html
@@ -7,8 +7,10 @@
         <title>Air-to-air device values</title>
         <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet">
         <link href="styles.css" rel="stylesheet">
+        <link href="animation.css" rel="stylesheet">
     </head>
     <body class="homey-widget">
+        <div id="animation"></div>
         <div class="homey-text-align-center">
             <select
                 id="zones"

diff --git a/widgets/ata-group-setting/public/index.ts b/widgets/ata-group-setting/public/index.ts
@@ -11,6 +11,8 @@ import type {
 
 type HTMLValueElement = HTMLInputElement | HTMLSelectElement
 
+const DELAY = 1000
+
 const FIRST_LEVEL = 0
 const SECOND_LEVEL = 1
 const LEVEL_INCREMENT = 1
@@ -19,9 +21,11 @@ const minMapping = { SetTemperature: 10 } as const
 const maxMapping = { SetTemperature: 31 } as const
 const MIN_SET_TEMPERATURE_COOLING = 16
 
-const MODE_AUTO = 8
-const MODE_COOL = 3
-const MODE_DRY = 2
+const MODE_AUTO = '8'
+const MODE_COOL = '3'
+const MODE_DRY = '2'
+const MODE_FAN = '7'
+const MODE_HEAT = '1'
 
 const zoneMapping: Partial<
   Record<string, Partial<GroupAtaState & ZoneSettings>>
@@ -34,6 +38,7 @@ const updateAtaValues = document.getElementById(
   'apply_values_melcloud',
 ) as HTMLButtonElement
 
+const animationElement = document.getElementById('animation') as HTMLDivElement
 const hasZoneAtaDevicesElement = document.getElementById(
   'has_zone_ata_devices',
 ) as HTMLDivElement
@@ -43,9 +48,22 @@ const ataValuesElement = document.getElementById(
 
 const zoneElement = document.getElementById('zones') as HTMLSelectElement
 
+const currentAnimation = ''
+let animationTimeout: NodeJS.Timeout | null = null
+
 let ataCapabilities: [keyof GroupAtaState, DriverCapabilitiesOptions][] = []
 let defaultAtaValues: Partial<Record<keyof GroupAtaState, null>> = {}
 
+const generateRandomString = ({
+  max,
+  min,
+  unit,
+}: {
+  max: number
+  min: number
+  unit?: string
+}): string => `${String(Math.random() * (max - min) + min)}${unit ?? ''}`
+
 const hide = (element: HTMLDivElement, value = true): void => {
   element.classList.toggle('hidden', value)
 }
@@ -166,7 +184,7 @@ const handleIntMin = (id: string, min: string): string => {
     const modeElement = document.getElementById(
       'OperationMode',
     ) as HTMLSelectElement
-    if ([MODE_AUTO, MODE_COOL, MODE_DRY].includes(Number(modeElement.value))) {
+    if ([MODE_AUTO, MODE_COOL, MODE_DRY].includes(modeElement.value)) {
       return String(MIN_SET_TEMPERATURE_COOLING)
     }
   }
@@ -300,10 +318,85 @@ const generateAtaValue = (
   return null
 }
 
-const setAnimation = (): void => {
+const createSnowflake = (): void => {
+  const snowflake = document.createElement('div')
+  snowflake.classList.add('snowflake')
+  snowflake.innerHTML = '❄'
+  snowflake.style.left = generateRandomString({
+    max: window.innerWidth,
+    min: 0,
+    unit: 'px',
+  })
+  snowflake.style.fontSize = generateRandomString({
+    max: 25,
+    min: 10,
+    unit: 'px',
+  })
+  snowflake.style.animationDuration = generateRandomString({
+    max: 20,
+    min: 10,
+    unit: 's',
+  })
+  snowflake.style.opacity = generateRandomString({ max: 0.5, min: 1 })
+  animationElement.append(snowflake)
+  snowflake.addEventListener('animationend', () => {
+    snowflake.remove()
+  })
+}
+
+const generateSnowflakes = (): void => {
+  animationTimeout = setTimeout(() => {
+    createSnowflake()
+    generateSnowflakes()
+  }, Math.random() * DELAY)
+}
+
+const startSnowAnimation = (): void => {
+  generateSnowflakes()
+}
+
+const startFireAnimation = (): void => {
+  //
+}
+
+const startWindAnimation = (): void => {
   //
 }
 
+const startSunAnimation = (): void => {
+  //
+}
+
+const switchAnimation = (animation: string): void => {
+  if (currentAnimation !== animation && animationTimeout) {
+    clearTimeout(animationTimeout)
+  }
+  switch (animation) {
+    case MODE_COOL:
+      startSnowAnimation()
+      break
+    case MODE_DRY:
+      startSunAnimation()
+      break
+    case MODE_FAN:
+      startWindAnimation()
+      break
+    case MODE_HEAT:
+      startFireAnimation()
+      break
+    default:
+  }
+}
+
+const handleAnimation = (): void => {
+  const operationModeElement = document.getElementById(
+    'OperationMode',
+  ) as HTMLSelectElement | null
+  if (operationModeElement) {
+    switchAnimation(operationModeElement.value)
+  }
+}
+
 const generateAtaValues = (homey: Homey): void => {
   ataCapabilities.forEach(([id, { title, type, values }]) => {
     createValueElement(ataValuesElement, {
@@ -313,7 +406,7 @@ const generateAtaValues = (homey: Homey): void => {
   })
   ;(
     document.getElementById('OperationMode') as HTMLSelectElement
-  ).addEventListener('change', setAnimation)
+  ).addEventListener('change', handleAnimation)
 }
 
 const generateZones = async (
@@ -394,14 +487,17 @@ const addEventListeners = (homey: Homey): void => {
       //
     })
   })
+  ataValuesElement.addEventListener('change', () => {
+    handleAnimation()
+  })
 }
 
 // eslint-disable-next-line func-style
 async function onHomeyReady(homey: Homey): Promise<void> {
   await setDocumentLanguage(homey)
   await fetchAtaCapabilities(homey)
   await fetchBuildings(homey)
+  handleAnimation()
   addEventListeners(homey)
-  setAnimation()
   homey.ready()
 }