From c8402d04468cade208625bf1f34910ba2432d763 Mon Sep 17 00:00:00 2001 From: DevinLeamy Date: Tue, 15 Aug 2023 12:43:45 -0400 Subject: [PATCH 1/8] Display 24 rather than 100 images on the splash page --- src/pages/splash.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/splash.tsx b/src/pages/splash.tsx index f6a852fbeb..a9540e8be8 100644 --- a/src/pages/splash.tsx +++ b/src/pages/splash.tsx @@ -17,9 +17,9 @@ import { inRange } from "lodash"; import { SplashHeader } from "@/client/components/static_site/SplashHeader"; import { useFeaturedPosts } from "@/client/util/social_manager_hooks"; import dynamic from "next/dynamic"; +import Head from "next/head"; import Masonry from "react-masonry-css"; import Tilt from "react-parallax-tilt"; -import Head from "next/head"; const youtubeVideoId = "vPHEtewFm3M"; @@ -205,7 +205,7 @@ export const SplashPage: React.FunctionComponent<{ onLogin?: () => unknown; }> = ({ defaultUsernameOrId, onLogin }) => { const { posts } = useFeaturedPosts({ - count: 100, + count: 24, }); const year = new Date().getFullYear(); From dc5b3fe6858f28daa25fb30cbe432badd4331333 Mon Sep 17 00:00:00 2001 From: DevinLeamy Date: Tue, 15 Aug 2023 12:44:23 -0400 Subject: [PATCH 2/8] Increase top padding on 'about' paragraph --- src/pages/splash.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/splash.tsx b/src/pages/splash.tsx index a9540e8be8..3d0bd62fa1 100644 --- a/src/pages/splash.tsx +++ b/src/pages/splash.tsx @@ -231,7 +231,7 @@ export const SplashPage: React.FunctionComponent<{ }} /> {!loginRelatedControllerContext.showingModal && ( -
+
Date: Tue, 15 Aug 2023 13:31:31 -0400 Subject: [PATCH 3/8] Getting the zIndexes to behave --- src/pages/splash.tsx | 51 ++++++++++++++++++++------------------------ 1 file changed, 23 insertions(+), 28 deletions(-) diff --git a/src/pages/splash.tsx b/src/pages/splash.tsx index 3d0bd62fa1..04689e8dd6 100644 --- a/src/pages/splash.tsx +++ b/src/pages/splash.tsx @@ -6,16 +6,15 @@ import trailerPoster from "/public/splash/trailer-poster.png"; import { WakeupMuckParticles } from "@/client/components/Particles"; import { LoginRelatedController } from "@/client/components/static_site/LoginRelatedController"; import { LoginRelatedControllerContext } from "@/client/components/static_site/LoginRelatedControllerContext"; +import { SplashHeader } from "@/client/components/static_site/SplashHeader"; import { cleanListener } from "@/client/util/helpers"; +import { useFeaturedPosts } from "@/client/util/social_manager_hooks"; import { safeDetermineEmployeeUserId } from "@/server/shared/bootstrap/sync"; -import { INVALID_BIOMES_ID } from "@/shared/ids"; +import { BiomesId, INVALID_BIOMES_ID } from "@/shared/ids"; import type { FeedPostBundle } from "@/shared/types"; import type { Variants } from "framer-motion"; import { motion } from "framer-motion"; import { inRange } from "lodash"; -// import ReactPlayer from "react-player"; -import { SplashHeader } from "@/client/components/static_site/SplashHeader"; -import { useFeaturedPosts } from "@/client/util/social_manager_hooks"; import dynamic from "next/dynamic"; import Head from "next/head"; import Masonry from "react-masonry-css"; @@ -42,12 +41,18 @@ const MAX_TILT_BIG = 20; const FeaturedImage: React.FC<{ post: FeedPostBundle; margin: string; - selected: boolean; + selectedPostId: BiomesId; onClick: () => void; -}> = ({ post, margin, selected, onClick }) => { +}> = ({ post, margin, selectedPostId, onClick }) => { const ref = useRef(null); - const showBig = selected; - const [zIndex, setZIndex] = useState(0); + const [isSelected, setIsSelected] = useState(post.id === selectedPostId); + const [wasSelected, setWasSelected] = useState(false); + + useEffect(() => { + const selected = post.id === selectedPostId; + setWasSelected(isSelected); + setIsSelected(selected); + }, [selectedPostId]); function getDivPositionRelativeToViewport(div: HTMLDivElement) { const rect = div.getBoundingClientRect(); @@ -81,12 +86,6 @@ const FeaturedImage: React.FC<{ } }, []); - useEffect(() => { - if (showBig) { - setZIndex(40); - } - }, [showBig]); - const variants: Variants = { rest: { scale: 1, @@ -104,22 +103,17 @@ const FeaturedImage: React.FC<{ ref={ref} onClick={onClick} onMouseLeave={() => { - if (selected) { + if (isSelected) { onClick(); } }} className="relative" variants={variants} - whileTap={showBig ? "big" : "tap"} - animate={showBig ? "big" : "rest"} + whileTap={isSelected ? "big" : "tap"} + animate={isSelected ? "big" : "rest"} transition={{ type: "spring", bounce: 0.2 }} - onAnimationComplete={(definition) => { - if (definition === "rest" && !showBig) { - setZIndex(0); - } - }} style={{ - zIndex: zIndex, + zIndex: isSelected ? 40 : wasSelected ? 10 : 0, marginBottom: margin, transformOrigin: "center right", }} @@ -130,12 +124,12 @@ const FeaturedImage: React.FC<{ glarePosition="all" glareColor="rgba(255,255,255,0.5)" transitionSpeed={800} - tiltMaxAngleX={showBig ? MAX_TILT_BIG : MAX_TILT_SMALL} - tiltMaxAngleY={showBig ? MAX_TILT_BIG : MAX_TILT_SMALL} + tiltMaxAngleX={isSelected ? MAX_TILT_BIG : MAX_TILT_SMALL} + tiltMaxAngleY={isSelected ? MAX_TILT_BIG : MAX_TILT_SMALL} className="relative overflow-hidden" style={{ marginBottom: margin, - boxShadow: showBig ? "0 10px 40px rgba(0,0,0,0.75)" : "none", + boxShadow: isSelected ? "0 10px 40px rgba(0,0,0,0.75)" : "none", }} > (INVALID_BIOMES_ID); + const [selectedImage, setSelectedImage] = + useState(INVALID_BIOMES_ID); return ( ); })} From 05236635c1eca2ca20a8f8dd6a39cc7b0a9b4627 Mon Sep 17 00:00:00 2001 From: DevinLeamy Date: Tue, 15 Aug 2023 13:53:40 -0400 Subject: [PATCH 4/8] Added gradient to top bar --- src/client/components/static_site/SplashHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/client/components/static_site/SplashHeader.tsx b/src/client/components/static_site/SplashHeader.tsx index d21731ad9d..29d1c1e1be 100644 --- a/src/client/components/static_site/SplashHeader.tsx +++ b/src/client/components/static_site/SplashHeader.tsx @@ -6,7 +6,7 @@ export const SplashHeader: React.FunctionComponent<{ onLoginClick: () => any; }> = ({ onLoginClick }) => { return ( -
+
{ From d01a1cdd12c1cf866bc283eb57090e468d28fa6a Mon Sep 17 00:00:00 2001 From: DevinLeamy Date: Tue, 15 Aug 2023 13:55:14 -0400 Subject: [PATCH 5/8] lint --- src/pages/splash.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/splash.tsx b/src/pages/splash.tsx index 04689e8dd6..ad7f6fbc6a 100644 --- a/src/pages/splash.tsx +++ b/src/pages/splash.tsx @@ -10,7 +10,8 @@ import { SplashHeader } from "@/client/components/static_site/SplashHeader"; import { cleanListener } from "@/client/util/helpers"; import { useFeaturedPosts } from "@/client/util/social_manager_hooks"; import { safeDetermineEmployeeUserId } from "@/server/shared/bootstrap/sync"; -import { BiomesId, INVALID_BIOMES_ID } from "@/shared/ids"; +import type { BiomesId } from "@/shared/ids"; +import { INVALID_BIOMES_ID } from "@/shared/ids"; import type { FeedPostBundle } from "@/shared/types"; import type { Variants } from "framer-motion"; import { motion } from "framer-motion"; From 410d2826a32ac8b1a6744539fd1d018b6ab77244 Mon Sep 17 00:00:00 2001 From: DevinLeamy Date: Tue, 15 Aug 2023 14:23:47 -0400 Subject: [PATCH 6/8] Adjusted gratient --- src/client/components/static_site/SplashHeader.tsx | 2 +- src/pages/splash.tsx | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/client/components/static_site/SplashHeader.tsx b/src/client/components/static_site/SplashHeader.tsx index 29d1c1e1be..3c08234a9d 100644 --- a/src/client/components/static_site/SplashHeader.tsx +++ b/src/client/components/static_site/SplashHeader.tsx @@ -6,7 +6,7 @@ export const SplashHeader: React.FunctionComponent<{ onLoginClick: () => any; }> = ({ onLoginClick }) => { return ( -
+
{ diff --git a/src/pages/splash.tsx b/src/pages/splash.tsx index ad7f6fbc6a..dcb3dd1a70 100644 --- a/src/pages/splash.tsx +++ b/src/pages/splash.tsx @@ -240,8 +240,7 @@ export const SplashPage: React.FunctionComponent<{ open source {" "} sandbox MMORPG built for the web. Build, forage, play - minigames and more, all right from your browser. View the - trailer and snapshots from our Early Access release below.{" "} + minigames and more, all right from your browser.
Date: Tue, 15 Aug 2023 14:29:23 -0400 Subject: [PATCH 7/8] Moved socials into footer --- .../components/static_site/SplashHeader.tsx | 6 ----- src/pages/splash.tsx | 24 +++++++++++++++++++ 2 files changed, 24 insertions(+), 6 deletions(-) diff --git a/src/client/components/static_site/SplashHeader.tsx b/src/client/components/static_site/SplashHeader.tsx index 3c08234a9d..be49d641cf 100644 --- a/src/client/components/static_site/SplashHeader.tsx +++ b/src/client/components/static_site/SplashHeader.tsx @@ -33,12 +33,6 @@ export const SplashHeader: React.FunctionComponent<{ > GitHub - - Discord - - - X - { diff --git a/src/pages/splash.tsx b/src/pages/splash.tsx index dcb3dd1a70..09ce1da93b 100644 --- a/src/pages/splash.tsx +++ b/src/pages/splash.tsx @@ -356,6 +356,30 @@ export const SplashPage: React.FunctionComponent<{ > © {year} Global Illumination, Inc. + + Discord + + + X + + + GitHub +
From 99c822345bdbf755a1961ebfeb037372f2748db1 Mon Sep 17 00:00:00 2001 From: Devin Leamy Date: Tue, 15 Aug 2023 17:48:42 -0400 Subject: [PATCH 8/8] Removed gradient change --- src/client/components/static_site/SplashHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/client/components/static_site/SplashHeader.tsx b/src/client/components/static_site/SplashHeader.tsx index be49d641cf..a177809162 100644 --- a/src/client/components/static_site/SplashHeader.tsx +++ b/src/client/components/static_site/SplashHeader.tsx @@ -6,7 +6,7 @@ export const SplashHeader: React.FunctionComponent<{ onLoginClick: () => any; }> = ({ onLoginClick }) => { return ( -
+
{