From b3b97b00a2170fc6aea10302d4fa3c92baa1480c Mon Sep 17 00:00:00 2001
From: Matthieu Bollot <m.bollot@code-troopers.com>
Date: Fri, 29 Mar 2024 11:53:56 +0100
Subject: [PATCH] Feature/april (#124)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* style: 💄 Add april style

* feat: 🎸 remember spotlight disable from localStorage

* feat: 🎸 Extract function and remove listener on body

* fix: 🐛 fix visibility on mobile

* feat: 🎸 Run feature on april fool's day only

* refactor: 💡 refactor to avoid else

* refactor: 💡 simplify code
---
 site/layouts/_default/baseof.html |  7 +++++++
 site/static/js/april.js           | 30 ++++++++++++++++++++++++++++++
 src/css/april.scss                | 26 ++++++++++++++++++++++++++
 src/css/main.scss                 |  1 +
 4 files changed, 64 insertions(+)
 create mode 100644 site/static/js/april.js
 create mode 100644 src/css/april.scss

diff --git a/site/layouts/_default/baseof.html b/site/layouts/_default/baseof.html
index 34f7dc211..13b2152db 100644
--- a/site/layouts/_default/baseof.html
+++ b/site/layouts/_default/baseof.html
@@ -13,5 +13,12 @@
     {{ with $script.js }}
       <script src="{{ relURL . }}"></script>
     {{ end }}
+    <script>
+      const d = new Date();
+      // Show April Fools' joke
+      if (d.getMonth() === 3 && d.getDate() === 1) {
+          $.getScript("/js/april.js");
+      }
+    </script>
   </body>
 </html>
diff --git a/site/static/js/april.js b/site/static/js/april.js
new file mode 100644
index 000000000..d77552c03
--- /dev/null
+++ b/site/static/js/april.js
@@ -0,0 +1,30 @@
+
+(async function($) {
+
+  $("body").append("<a href='#' id='disable-spotlight' class='btn dark'>Désactiver le mode sombre</a><div id='spotlight'></div>");
+
+  const spotlightEl = $("#spotlight");
+
+  function handleMouseMove(event) {
+    const {clientX, clientY} = event;
+
+    spotlightEl[0].style.background = `radial-gradient(circle at ${clientX}px ${clientY}px, #00000000 10px, #000000FF 100px)`;
+  }
+
+  $("body").on("mousemove", handleMouseMove);
+
+  $("#disable-spotlight").on("click", () => {
+    disableApril();
+    localStorage.setItem("disable-april", "true");
+  });
+
+  if (localStorage.getItem("disable-april") === "true") {
+    disableApril();
+  }
+
+  function disableApril() {
+    $("#spotlight")[0].style.display = "none";
+    $("#disable-spotlight")[0].style.display = "none";
+    $("body").off("mousemove", handleMouseMove);
+  }
+})(jQuery);
diff --git a/src/css/april.scss b/src/css/april.scss
new file mode 100644
index 000000000..610553ad5
--- /dev/null
+++ b/src/css/april.scss
@@ -0,0 +1,26 @@
+
+
+#spotlight {
+    position: fixed;
+    background: black;
+    opacity: 1;
+    width: 100vw;
+    height: 100vh;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    pointer-events: none;
+    @media screen and (max-width: 1024px) {
+        display: none;
+    }
+  }
+
+  #disable-spotlight {
+    position: fixed;
+    z-index: 999;
+    right: 50px;
+    bottom: 20px;
+    @media screen and (max-width: 1024px) {
+        display: none;
+    }
+  }
\ No newline at end of file
diff --git a/src/css/main.scss b/src/css/main.scss
index a772443ea..024f23be9 100644
--- a/src/css/main.scss
+++ b/src/css/main.scss
@@ -18,6 +18,7 @@
 @import 'swiper';
 @import 'legals';
 @import 'cloud';
+@import 'april';
 
 :root {
   scroll-behavior: smooth;