From 73d99e451848cf19d43f74d86a6f4d466c40a72a Mon Sep 17 00:00:00 2001 From: Paul Date: Thu, 23 Dec 2021 13:16:43 +0000 Subject: [PATCH] feat(home): add snow --- .../messaging/attachments/Attachment.tsx | 3 +- src/pages/home/Home.module.scss | 1 + src/pages/home/Home.tsx | 170 +++++++++++------- src/pages/home/snow.scss | 89 +++++++++ 4 files changed, 200 insertions(+), 63 deletions(-) create mode 100644 src/pages/home/snow.scss diff --git a/src/components/common/messaging/attachments/Attachment.tsx b/src/components/common/messaging/attachments/Attachment.tsx index ce1945d3..f3f14e63 100644 --- a/src/components/common/messaging/attachments/Attachment.tsx +++ b/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, diff --git a/src/pages/home/Home.module.scss b/src/pages/home/Home.module.scss index 4de110c4..f4ad219d 100644 --- a/src/pages/home/Home.module.scss +++ b/src/pages/home/Home.module.scss @@ -1,4 +1,5 @@ .home { + height: 100%; user-select: none; h3 { diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx index 812ed082..f0c483c8 100644 --- a/src/pages/home/Home.tsx +++ b/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,68 +73,102 @@ 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 (
-
- - - - -
-

- -
- -

-
- - }> - {client.servers.get("01F7ZSBSFHQ8TA81725KQCSDDP") ? ( - - ) : ( - - )} - - - - }> - - - - - }> - - - - - }> - - - - }> - - }> - - - - -
+ +
+ {snowflakes.map((emoji, index) => ( +
+ {emoji} +
+ ))} +
+
+
+ + + + +
+

+ +
+ +

+
+ + }> + {client.servers.get( + "01F7ZSBSFHQ8TA81725KQCSDDP", + ) ? ( + + ) : ( + + )} + + + + }> + + + + + }> + + + + + }> + + + + }> + + }> + + + + +
+
+
); } diff --git a/src/pages/home/snow.scss b/src/pages/home/snow.scss new file mode 100644 index 00000000..6ce1e3c1 --- /dev/null +++ b/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; + } +}