button to turn the snow effect off...

public/changelog.txt

@@ -1,3 +1,6 @@
+- 2.34.4 : 2024-12-03
+        * requested by @Willem a way to turn off the snow effect because it made some browsers lag a lot.
+
 - 2.34.3 : 2024-11-26
         + added total reps and total sets count on the journal's post.
         * fixed/retouched the colors on dark mode because I know dark mode looked like shit...

src/componentes/snow.js

@@ -1,13 +1,35 @@
 // credit to: https://pajasevi.github.io/CSSnowflakes/
 
+import { useEffect, useState } from "react";
+import AcUnitIcon from '@material-ui/icons/AcUnit';
+
 const now = new Date();
 const isChristmasSeason = now.getMonth() === 11; // December only
 
 export function Snowfall() {
+  const [on, setOn] = useState(false);
+
+  useEffect(()=>{
+
+    const state = window.localStorage?.getItem("snow") ?? "1";
+
+    setOn(state=="1"); 
+
+  },[]);
+
+  const toggleSnow = ()=>{
+    const newState = on? "0" : "1";
+    window.localStorage?.setItem("snow", newState);
+    setOn(!on);
+  }
 
   if (!isChristmasSeason) return;
 
-  return <div class="snowflakes" aria-hidden="true">
+  return <>
+  <div onClick={()=>toggleSnow()} style={{ display:"flex", color:"red", alignItems:"center", border:"3px solid red", borderTop:"none", position:"fixed", top:0, left:"50%", background:"#eee", zIndex:9999, padding:"5px 10px", borderBottomLeftRadius:5, borderBottomRightRadius:5, cursor:"pointer" }}>
+    <AcUnitIcon/> Snow: <strong>{ on?"ON":"OFF"}</strong></div>
+
+  { on && <div class="snowflakes" aria-hidden="true">
   <div class="snowflake">
     <div class="inner">❅</div>
   </div>
@@ -44,7 +66,9 @@ export function Snowfall() {
   <div class="snowflake">
     <div class="inner">❅</div>
   </div>
-</div>;
+</div> }
+
+</>;
 }
 
 // CSS styles (include in your CSS file or add inline)

src/version.json

@@ -1 +1 @@
-{"buildMajor":"2","buildMinor":34,"buildRevision":3,"buildTag":"RELEASE","when":"Tue, 26 Nov 2024 12:03:48 GMT"}
+{"buildMajor":"2","buildMinor":34,"buildRevision":4,"buildTag":"RELEASE","when":"Tue, 03 Dec 2024 20:44:50 GMT"}