From 87c7cd36eac256b8ac0bfabbcfa4bb5a6ad009b7 Mon Sep 17 00:00:00 2001
From: Alena Batitskaia <solarrust@users.noreply.github.com>
Date: Wed, 25 Dec 2024 15:40:29 +0000
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D1=8F?=
 =?UTF-8?q?=D0=B5=D1=82=20=D1=81=D0=BD=D0=B5=D0=B3=202025=20(#1317)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/includes/blocks/footer.njk        |   1 +
 src/includes/blocks/snow-25.njk       |   1 +
 src/layouts/base.njk                  |   1 +
 src/scripts/index.js                  |   1 +
 src/scripts/modules/snow-toggle-25.js | 138 ++++++++++++++++++++++++++
 src/styles/blocks/snow-25.css         |   8 ++
 src/styles/index.css                  |   2 +-
 7 files changed, 151 insertions(+), 1 deletion(-)
 create mode 100644 src/includes/blocks/snow-25.njk
 create mode 100644 src/scripts/modules/snow-toggle-25.js
 create mode 100644 src/styles/blocks/snow-25.css

diff --git a/src/includes/blocks/footer.njk b/src/includes/blocks/footer.njk
index bae91d59f..bfd2c1d66 100644
--- a/src/includes/blocks/footer.njk
+++ b/src/includes/blocks/footer.njk
@@ -4,6 +4,7 @@
       <legend class="visually-hidden">Тема:</legend>
       <span class="footer__theme-toggle-label" aria-hidden="true">Тема:</span>
       {% include "blocks/theme-toggle.njk" %}
+      {% include "blocks/snow-toggle.njk" %}
     </fieldset>
     <div class="footer__lists">
       <ul class="footer__list footer-list footer__list_social font-theme font-theme--code base-list">
diff --git a/src/includes/blocks/snow-25.njk b/src/includes/blocks/snow-25.njk
new file mode 100644
index 000000000..4c1a35ee2
--- /dev/null
+++ b/src/includes/blocks/snow-25.njk
@@ -0,0 +1 @@
+<canvas id="snowCanvas"></canvas>
diff --git a/src/layouts/base.njk b/src/layouts/base.njk
index a2e932ff2..06d663468 100644
--- a/src/layouts/base.njk
+++ b/src/layouts/base.njk
@@ -21,6 +21,7 @@
     {{ content | safe }}
 
     {% include "blocks/cookie-notification.njk" %}
+    {% include "blocks/snow-25.njk" %}
 
     <script src="/scripts/index.js" {% if env.isDevEnv %}type="module"{% endif %}></script>
   </body>
diff --git a/src/scripts/index.js b/src/scripts/index.js
index 8cae93e2d..115aa7b21 100644
--- a/src/scripts/index.js
+++ b/src/scripts/index.js
@@ -26,3 +26,4 @@ import './modules/person-badges-tooltip.js'
 import './modules/answer.js'
 import './modules/pwa.js'
 import './modules/triggers.js'
+import './modules/snow-toggle-25.js'
diff --git a/src/scripts/modules/snow-toggle-25.js b/src/scripts/modules/snow-toggle-25.js
new file mode 100644
index 000000000..7a1446037
--- /dev/null
+++ b/src/scripts/modules/snow-toggle-25.js
@@ -0,0 +1,138 @@
+window.onload = function () {
+  class Snowfall {
+    constructor(canvas) {
+      this.canvas = canvas
+      this.context = canvas.getContext('2d')
+      this.snowCounter = 0
+      this.speedMultiplier = 0
+      this.snowflakes = []
+      this.animationFrameId = null
+
+      this.resize()
+    }
+
+    createSnowflake() {
+      const radius = getRandomInt(1, 10)
+      return {
+        xpos: getRandomInt(0, this.canvas.width),
+        ypos: getRandomInt(-this.canvas.height, 0),
+        radius: radius,
+        opacity: radius * 10,
+        speed: this.speedMultiplier * (radius / 6),
+        dx: (Math.random() - 0.5) * 2,
+      }
+    }
+
+    drawSnowflake(flake) {
+      this.context.beginPath()
+      this.context.arc(flake.xpos, flake.ypos, flake.radius, 0, Math.PI * 2)
+      this.context.fillStyle = `hsl(202.33deg 53.09% 84.12% / ${flake.opacity}%)`
+      this.context.fill()
+    }
+
+    updateSnowflake(flake) {
+      flake.xpos += flake.dx
+      flake.ypos += flake.speed
+
+      if (flake.ypos - flake.radius > this.canvas.height) {
+        flake.ypos = getRandomInt(-this.canvas.height, 0)
+        flake.xpos = getRandomInt(0, this.canvas.width)
+      }
+    }
+
+    start() {
+      this.snowCounter = 100
+      this.speedMultiplier = 1
+
+      this.stop()
+      this.snowflakes = Array.from({ length: this.snowCounter }, () => this.createSnowflake())
+      this.animate()
+    }
+
+    animate() {
+      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
+      this.snowflakes.forEach((flake) => {
+        this.updateSnowflake(flake)
+        this.drawSnowflake(flake)
+      })
+      this.animationFrameId = requestAnimationFrame(this.animate.bind(this))
+    }
+
+    stop() {
+      if (this.animationFrameId) {
+        cancelAnimationFrame(this.animationFrameId)
+        this.animationFrameId = null
+      }
+
+      snowfall.snowflakes = []
+      snowfall.context.clearRect(0, 0, canvas.width, canvas.height)
+    }
+
+    setCounter(newCount) {
+      this.snowCounter = newCount
+      this.snowflakes = Array.from({ length: this.snowCounter }, () => this.createSnowflake())
+    }
+
+    resize() {
+      this.canvas.width = window.innerWidth
+      this.canvas.height = window.innerHeight
+    }
+  }
+
+  function debounce(func, wait) {
+    let timeout
+    return function (...args) {
+      clearTimeout(timeout)
+      timeout = setTimeout(() => func.apply(this, args), wait)
+    }
+  }
+
+  function getRandomInt(min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min
+  }
+
+  function changeSnowAnimation(animationName) {
+    if (animationName === 'none') {
+      snowfall.stop()
+      document.title = pageTitle
+    } else if (animationName === 'snowfall') {
+      snowfall.start()
+      document.title = '❄️ ' + pageTitle
+    }
+  }
+
+  const canvas = document.getElementById('snowCanvas')
+  const snowToggle = document.querySelector('.snow-toggle')
+  const snowfall = new Snowfall(canvas)
+  const pageTitle = document.title
+  snowfall.start()
+  document.title = '❄️ ' + pageTitle
+  const storageKey = 'snow'
+
+  let currentStorage = localStorage.getItem(storageKey)
+
+  if (currentStorage) {
+    snowToggle.querySelector(`.snow-toggle__control[value='${currentStorage}']`).checked = true
+
+    changeSnowAnimation(currentStorage)
+  }
+
+  window.addEventListener('storage', () => {
+    changeSnowAnimation(localStorage.getItem(storageKey))
+  })
+
+  document.querySelectorAll('input[name="snow"]').forEach((radio) => {
+    radio.addEventListener('change', (event) => {
+      const value = event.target.value
+      localStorage.setItem(storageKey, event.target.value)
+      changeSnowAnimation(value)
+    })
+  })
+
+  window.addEventListener(
+    'resize',
+    debounce(() => {
+      snowfall.resize()
+    }, 150),
+  )
+}
diff --git a/src/styles/blocks/snow-25.css b/src/styles/blocks/snow-25.css
new file mode 100644
index 000000000..b78fc7966
--- /dev/null
+++ b/src/styles/blocks/snow-25.css
@@ -0,0 +1,8 @@
+/* stylelint-disable-next-line selector-id-pattern */
+#snowCanvas {
+	position: fixed;
+	inset: 0;
+  z-index: 100;
+	display: block;
+	pointer-events: none;
+}
diff --git a/src/styles/index.css b/src/styles/index.css
index 8c95ca1e4..43f28c9aa 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -23,7 +23,7 @@
 @import url("blocks/footer.css");
 @import url("blocks/theme-toggle.css");
 @import url("blocks/snow-toggle.css");
-@import url("blocks/snow.css");
+@import url("blocks/snow-25.css");
 @import url("blocks/intro.css");
 @import url("blocks/featured-article.css");
 @import url("blocks/featured-articles-list.css");