From f25a9738a28a1a9017a01c688b5829c9e32fa12b Mon Sep 17 00:00:00 2001 From: Nazareno Oviedo Date: Fri, 8 Apr 2022 12:11:43 -0300 Subject: [PATCH] Mouse track (#24) --- src/components/common/mouse/index.tsx | 54 +++++++++++++++ src/components/common/mouse/mouse.module.scss | 66 +++++++++++++++++++ .../sections/homepage/hero/hero.module.scss | 33 +++------- .../sections/homepage/hero/index.tsx | 31 --------- src/pages/_app.tsx | 2 + 5 files changed, 130 insertions(+), 56 deletions(-) create mode 100644 src/components/common/mouse/index.tsx create mode 100644 src/components/common/mouse/mouse.module.scss diff --git a/src/components/common/mouse/index.tsx b/src/components/common/mouse/index.tsx new file mode 100644 index 0000000..1410a5c --- /dev/null +++ b/src/components/common/mouse/index.tsx @@ -0,0 +1,54 @@ +import { useRouter } from 'next/router' +import * as React from 'react' + +import Flag from '~/components/icons/flag' + +import s from './mouse.module.scss' + +const Mouse = () => { + const [position, setPosition] = React.useState({ x: 0, y: 0 }) + const [page, setPage] = React.useState('Home') + const router = useRouter() + + React.useEffect(() => { + const url = router.pathname.split('/').filter(Boolean).join('/') + if (url === '') { + setPage('Home') + } else { + setPage(url) + } + }, [router]) + + React.useEffect(() => { + const setFromEvent = (e: { clientX: any; clientY: any }) => + setPosition({ x: e.clientX, y: e.clientY }) + window.addEventListener('mousemove', setFromEvent, { passive: true }) + + return () => { + window.removeEventListener('mousemove', setFromEvent) + } + }, []) + return ( +
+
+

C:

+ +
+
+

{page}

+
    +
  • + H: + {position.x} PX +
    • +
  • + V: + {position.y} PX +
    • +
+
+
+ ) +} + +export default Mouse diff --git a/src/components/common/mouse/mouse.module.scss b/src/components/common/mouse/mouse.module.scss new file mode 100644 index 0000000..b781dba --- /dev/null +++ b/src/components/common/mouse/mouse.module.scss @@ -0,0 +1,66 @@ +@import '~/css/helpers'; + +.scroll { + position: fixed; + z-index: 20; + bottom: 5%; + left: tovw(56px, 'default', 16px); + display: grid; + align-items: flex-end; + width: calc(100% - (tovw(56px, 'default', 16px) * 2)); + user-select: none; + pointer-events: none; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: 1fr; + mix-blend-mode: difference; + + @media screen and (max-width: 800px) { + display: none; + } + + .flag { + width: tovw(36px, 'default', 36px); + height: tovw(20px, 'default', 20px); + margin: 0 auto 0 tovw(8px, 'default', 6px); + } + + ul { + margin: 0; + padding: 0; + list-style-type: none; + } + + p, + li { + font-family: var(--font-dm-mono); + font-size: tovw(12px, 'default', 11px); + line-height: 1.7; + width: 100%; + margin: 0; + text-align: right; + text-transform: uppercase; + font-variant-numeric: tabular-nums; + } + + > div { + &:first-of-type { + display: flex; + align-items: flex-end; + justify-self: flex-start; + + @media screen and (max-width: 800px) { + display: none; + } + } + + &:last-of-type { + text-align: right; + justify-self: flex-end; + + span { + display: inline-block; + width: tovw(60px, 'default', 55px); + } + } + } +} diff --git a/src/components/sections/homepage/hero/hero.module.scss b/src/components/sections/homepage/hero/hero.module.scss index 6665359..68834aa 100644 --- a/src/components/sections/homepage/hero/hero.module.scss +++ b/src/components/sections/homepage/hero/hero.module.scss @@ -82,9 +82,9 @@ bottom: 11%; left: tovw(56px, 'default', 16px); display: grid; - align-items: flex-end; + align-items: center; width: calc(100% - (tovw(56px, 'default', 16px) * 2)); - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(1, 1fr); grid-template-rows: 1fr; @media screen and (max-width: 800px) { @@ -96,12 +96,6 @@ bottom: 0; } - ul { - margin: 0; - padding: 0; - list-style-type: none; - } - p, li { font-family: var(--font-dm-mono); @@ -114,24 +108,13 @@ } > div { - &:first-of-type { - display: flex; - justify-self: flex-start; - align-items: flex-end; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; - @media screen and (max-width: 800px) { - display: none; - } - } - - &:last-of-type { - text-align: right; - justify-self: flex-end; - - span { - display: inline-block; - width: tovw(60px, 'default', 55px); - } + span { + display: block; } } } diff --git a/src/components/sections/homepage/hero/index.tsx b/src/components/sections/homepage/hero/index.tsx index e553389..70e7741 100644 --- a/src/components/sections/homepage/hero/index.tsx +++ b/src/components/sections/homepage/hero/index.tsx @@ -1,8 +1,6 @@ import clsx from 'clsx' -import { useEffect, useState } from 'react' import { ArrowDotted } from '~/components/icons/arrow' -import Flag from '~/components/icons/flag' import Line from '~/components/icons/line' import Section from '~/components/layout/section' import { Button } from '~/components/primitives/button' @@ -12,18 +10,6 @@ import HighlightedText from '~/components/primitives/highlighted-text' import s from './hero.module.scss' const Hero = () => { - const [position, setPosition] = useState({ x: 0, y: 0 }) - - useEffect(() => { - const setFromEvent = (e: { clientX: any; clientY: any }) => - setPosition({ x: e.clientX, y: e.clientY }) - window.addEventListener('mousemove', setFromEvent) - - return () => { - window.removeEventListener('mousemove', setFromEvent) - } - }, []) - return (
) diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index b870879..c718cca 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -7,6 +7,7 @@ import * as React from 'react' import { Footer } from '~/components/common/footer' import { Header } from '~/components/common/header' +import Mouse from '~/components/common/mouse' import { AnimationContextProvider } from '~/context/animation' import { basementLog, isProd } from '~/lib/constants' import { FontsReadyScript } from '~/lib/font-scripts' @@ -59,6 +60,7 @@ const App = ({ Component, pageProps, ...rest }: AppProps) => { {/* */}
+ {getLayout({ Component, pageProps, ...rest })}