feat(home): add snow

src/components/common/messaging/attachments/Attachment.tsx

@@ -5,7 +5,6 @@ import classNames from "classnames";
 import { attachContextMenu } from "preact-context-menu";
 import { useContext, useState } from "preact/hooks";
 
-import { useIntermediate } from "../../../../context/intermediate/Intermediate";
 import { AppContext } from "../../../../context/revoltjs/RevoltClient";
 
 import AttachmentActions from "./AttachmentActions";
@@ -39,7 +38,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
                     width={metadata.width}
                     height={metadata.height}
                     onContextMenu={attachContextMenu("Menu", {
-                        attachment: attachment,
+                        attachment,
                     })}
                     className={classNames({
                         [styles.margin]: hasContent,

src/pages/home/Home.module.scss

@@ -1,4 +1,5 @@
 .home {
+    height: 100%;
     user-select: none;
 
     h3 {

src/pages/home/Home.tsx

@@ -3,8 +3,9 @@ import { Link } from "react-router-dom";
 import styled, { css } from "styled-components";
 
 import styles from "./Home.module.scss";
+import "./snow.scss";
 import { Text } from "preact-i18n";
-import { useContext, useState } from "preact/hooks";
+import { useContext, useMemo, useState } from "preact/hooks";
 
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 
@@ -32,6 +33,19 @@ const IconConainer = styled.div`
     `}
 `;
 
+const Overlay = styled.div`
+    display: grid;
+    height: 100%;
+
+    > * {
+        grid-area: 1 / 1;
+    }
+
+    .content {
+        z-index: 1;
+    }
+`;
+
 export default function Home() {
     const client = useContext(AppContext);
     const [showChannels, setChannels] = useState(
@@ -59,8 +73,37 @@ export default function Home() {
         }
     };
 
+    const snowflakes = useMemo(() => {
+        const flakes = [];
+
+        // Disable outside of December
+        if (new Date().getMonth() !== 11) return [];
+
+        for (let i = 0; i < 15; i++) {
+            flakes.push("❄️");
+            flakes.push("❄");
+        }
+
+        for (let i = 0; i < 2; i++) {
+            flakes.push("🎄");
+            flakes.push("☃️");
+            flakes.push("⛄");
+        }
+
+        return flakes;
+    }, []);
+
     return (
         <div className={styles.home}>
+            <Overlay>
+                <div class="snowfall">
+                    {snowflakes.map((emoji, index) => (
+                        <div key={index} class="snowflake">
+                            {emoji}
+                        </div>
+                    ))}
+                </div>
+                <div class="content">
                     <Header placement="primary">
                         <IconConainer onClick={toggleChannelSidebar}>
                             <HomeIcon size={24} />
@@ -77,7 +120,9 @@ export default function Home() {
                             <CategoryButton
                                 action="chevron"
                                 icon={<Emoji emoji="😁" size={32} />}>
-                        {client.servers.get("01F7ZSBSFHQ8TA81725KQCSDDP") ? (
+                                {client.servers.get(
+                                    "01F7ZSBSFHQ8TA81725KQCSDDP",
+                                ) ? (
                                     <Text id="app.home.goto-testers" />
                                 ) : (
                                     <Text id="app.home.join-testers" />
@@ -111,7 +156,8 @@ export default function Home() {
                                 <Text id="app.home.social" />
                             </CategoryButton>
                         </a>
-                <Tooltip content={<Text id="app.home.settings-tooltip" />}>
+                        <Tooltip
+                            content={<Text id="app.home.settings-tooltip" />}>
                             <Link to="/settings">
                                 <CategoryButton
                                     action="chevron"
@@ -122,5 +168,7 @@ export default function Home() {
                         </Tooltip>
                     </div>
                 </div>
+            </Overlay>
+        </div>
     );
 }

src/pages/home/snow.scss

@@ -0,0 +1,89 @@
+// Pure CSS Snowfall
+// Released by Artimon under MIT license
+
+$count: 36;
+$screenOffset: 0px;
+$fallDuration: 12;
+$windNoise: 30;
+$windSpeed: 4;
+$sizeNoise: 40;
+$rotation: 360;
+$imageSize: 20px;
+$fontSize: 40px;
+
+.snowfall {
+    z-index: 0;
+    display: block;
+
+    font-size: $fontSize;
+
+    overflow: hidden;
+    pointer-events: none;
+
+    .snowflake {
+        position: relative;
+        top: 0;
+        left: 0;
+
+        display: flex;
+        justify-content: center;
+
+        width: $screenOffset;
+        height: $screenOffset;
+
+        span {
+            align-self: center;
+        }
+
+        img {
+            align-self: center;
+            width: $imageSize;
+        }
+    }
+
+    @while ($count > 0) {
+        $left: random(100);
+        $deltaLeft: random(2 * $windNoise * 10) / 10 - $windNoise + $windSpeed;
+        $scale: 1 + (random(2 * $sizeNoise * 10) / 10 - $sizeNoise) / 100;
+
+        .snowflake:nth-child(#{$count}) {
+            animation: animation-snowflake-#{$count} linear infinite;
+            animation-duration: $fallDuration +
+                random($fallDuration * 10) /
+                10 +
+                s;
+            animation-delay: random(2 * $fallDuration * 10) /
+                10 -
+                (2 * $fallDuration) +
+                s;
+        }
+
+        @keyframes animation-snowflake-#{$count} {
+            0% {
+                left: percentage($left / 100);
+                top: calc(0% - #{$screenOffset});
+                transform: scale($scale)
+                    rotate3d(
+                        random(100) / 100,
+                        random(100) / 100,
+                        random(100) / 100,
+                        0deg
+                    );
+            }
+            100% {
+                left: percentage(($left + $deltaLeft) / 100);
+                top: calc(100% + #{$screenOffset});
+                transform: scale($scale)
+                    rotate3d(
+                        random(100) / 100,
+                        random(100) / 100,
+                        random(100) / 100,
+                        (random($rotation) + $rotation) *
+                            ((random(2) - 1) * 2 - 1) + deg
+                    );
+            }
+        }
+
+        $count: $count - 1;
+    }
+}