feat(home): add snow

This commit is contained in:
Paul 2021-12-23 13:16:43 +00:00
parent f14ef2b78f
commit 73d99e4518
4 changed files with 200 additions and 63 deletions

View file

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

View file

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

View file

@ -3,8 +3,9 @@ import { Link } from "react-router-dom";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import styles from "./Home.module.scss"; import styles from "./Home.module.scss";
import "./snow.scss";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import { useContext, useState } from "preact/hooks"; import { useContext, useMemo, useState } from "preact/hooks";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice"; 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() { export default function Home() {
const client = useContext(AppContext); const client = useContext(AppContext);
const [showChannels, setChannels] = useState( 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 ( return (
<div className={styles.home}> <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"> <Header placement="primary">
<IconConainer onClick={toggleChannelSidebar}> <IconConainer onClick={toggleChannelSidebar}>
<HomeIcon size={24} /> <HomeIcon size={24} />
@ -77,7 +120,9 @@ export default function Home() {
<CategoryButton <CategoryButton
action="chevron" action="chevron"
icon={<Emoji emoji="😁" size={32} />}> icon={<Emoji emoji="😁" size={32} />}>
{client.servers.get("01F7ZSBSFHQ8TA81725KQCSDDP") ? ( {client.servers.get(
"01F7ZSBSFHQ8TA81725KQCSDDP",
) ? (
<Text id="app.home.goto-testers" /> <Text id="app.home.goto-testers" />
) : ( ) : (
<Text id="app.home.join-testers" /> <Text id="app.home.join-testers" />
@ -111,7 +156,8 @@ export default function Home() {
<Text id="app.home.social" /> <Text id="app.home.social" />
</CategoryButton> </CategoryButton>
</a> </a>
<Tooltip content={<Text id="app.home.settings-tooltip" />}> <Tooltip
content={<Text id="app.home.settings-tooltip" />}>
<Link to="/settings"> <Link to="/settings">
<CategoryButton <CategoryButton
action="chevron" action="chevron"
@ -122,5 +168,7 @@ export default function Home() {
</Tooltip> </Tooltip>
</div> </div>
</div> </div>
</Overlay>
</div>
); );
} }

89
src/pages/home/snow.scss Normal file
View file

@ -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;
}
}