From c1e26b39ed6ae7cd42691072ccc7afa682819308 Mon Sep 17 00:00:00 2001
From: elisejakob <hei@elisejakob.no>
Date: Wed, 15 May 2024 00:53:11 +0200
Subject: [PATCH] =?UTF-8?q?make=20background=20pigs=20that=20hide=20from?=
 =?UTF-8?q?=20the=20footer=20=F0=9F=90=B7=F0=9F=90=B7=F0=9F=90=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/package-lock.json                      | 15 +++++++
 web/package.json                           |  1 +
 web/src/app/utleie/page.tsx                |  6 +--
 web/src/components/general/BgPig.tsx       | 51 ++++++++++++++++++++++
 web/src/components/general/pig.module.scss | 20 +++++++++
 web/src/css/base.scss                      |  9 +---
 6 files changed, 90 insertions(+), 12 deletions(-)
 create mode 100644 web/src/components/general/BgPig.tsx

diff --git a/web/package-lock.json b/web/package-lock.json
index d9de585..cdaf35d 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -19,6 +19,7 @@
         "nuqs": "^1.17.2",
         "react": "^18",
         "react-dom": "^18",
+        "react-intersection-observer": "^9.10.2",
         "sass": "^1.77.1",
         "urql": "^4.1.0"
       },
@@ -7222,6 +7223,20 @@
         "react": "^18.3.0"
       }
     },
+    "node_modules/react-intersection-observer": {
+      "version": "9.10.2",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.10.2.tgz",
+      "integrity": "sha512-j2hGADK2hCbAlfaq6L3tVLb4iqngoN7B1fT16MwJ4J16YW/vWLcmAIinLsw0lgpZeMi4UDUWtHC9QDde0/P1yQ==",
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/web/package.json b/web/package.json
index e5eb829..0a6ad69 100644
--- a/web/package.json
+++ b/web/package.json
@@ -21,6 +21,7 @@
     "nuqs": "^1.17.2",
     "react": "^18",
     "react-dom": "^18",
+    "react-intersection-observer": "^9.10.2",
     "sass": "^1.77.1",
     "urql": "^4.1.0"
   },
diff --git a/web/src/app/utleie/page.tsx b/web/src/app/utleie/page.tsx
index c557388..c1deea2 100644
--- a/web/src/app/utleie/page.tsx
+++ b/web/src/app/utleie/page.tsx
@@ -4,7 +4,7 @@ import { getClient } from "@/app/client";
 import { VenueList } from "@/components/venues/VenueList";
 import Link from "next/link";
 import { PageHeader } from "@/components/general/PageHeader";
-import { Pig } from "@/components/general/Pig";
+import { BgPig } from "@/components/general/BgPig";
 
 const VenueFragmentDefinition = graphql(`
   fragment Venue on VenuePage {
@@ -56,9 +56,7 @@ export default async function Page() {
     <main className="site-main" id="main">
       <PageHeader heading="Utleie" />
       <VenueList venues={venues} />
-      <div className="bg-pig">
-        <Pig type="key" />
-      </div>
+      <BgPig type="key" />
     </main>
   );
 }
diff --git a/web/src/components/general/BgPig.tsx b/web/src/components/general/BgPig.tsx
new file mode 100644
index 0000000..e59b1dc
--- /dev/null
+++ b/web/src/components/general/BgPig.tsx
@@ -0,0 +1,51 @@
+"use client";
+import styles from "./pig.module.scss";
+import { ChillPig } from "./pigs/ChillPig";
+import { DancePig } from "./pigs/DancePig";
+import { DrinkPig } from "./pigs/DrinkPig";
+import { GuardPig } from "./pigs/GuardPig";
+import { KeyPig } from "./pigs/KeyPig";
+import { ListenPig } from "./pigs/ListenPig";
+import { LogoPig } from "./pigs/LogoPig";
+import { MusicPig } from "./pigs/MusicPig";
+import { PeekPig } from "./pigs/PeekPig";
+import { PointPig } from "./pigs/PointPig";
+import { StudentPig } from "./pigs/StudentPig";
+import { useInView } from "react-intersection-observer";
+
+export const BgPig = ({
+  type,
+}: {
+  type:
+    | "logo"
+    | "music"
+    | "drink"
+    | "dance"
+    | "point"
+    | "student"
+    | "listen"
+    | "guard"
+    | "key"
+    | "chill"
+    | "peek";
+}) => {
+  const { ref: observer, inView: IsInView } = useInView({ triggerOnce: false });
+  return (
+    <div className={styles.bgPigWrapper}>
+      <div className={`${styles.pig} ${styles.bgPig}`} data-inview={IsInView}>
+        {type === "logo" && <LogoPig />}
+        {type === "music" && <MusicPig />}
+        {type === "drink" && <DrinkPig />}
+        {type === "dance" && <DancePig />}
+        {type === "point" && <PointPig />}
+        {type === "student" && <StudentPig />}
+        {type === "listen" && <ListenPig />}
+        {type === "guard" && <GuardPig />}
+        {type === "key" && <KeyPig />}
+        {type === "chill" && <ChillPig />}
+        {type === "peek" && <PeekPig />}
+      </div>
+      <div className={styles.observer} ref={observer}></div>
+    </div>
+  );
+};
diff --git a/web/src/components/general/pig.module.scss b/web/src/components/general/pig.module.scss
index 0cb36af..76b871e 100644
--- a/web/src/components/general/pig.module.scss
+++ b/web/src/components/general/pig.module.scss
@@ -5,4 +5,24 @@
   svg {
     width: 100%;
   }
+}
+
+.bgPig {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  transform: translate(1vw, 20%);
+  z-index: 600;
+  --color-pig: var(--color-neufPink);
+  transition: opacity .6s ease;
+
+  &[data-inview=true] {
+    opacity: 0;
+  }
+}
+
+.observer {
+  position: absolute;
+  bottom: -5rem;
+  right: 0;
 }
\ No newline at end of file
diff --git a/web/src/css/base.scss b/web/src/css/base.scss
index c3b33b3..4a76a92 100644
--- a/web/src/css/base.scss
+++ b/web/src/css/base.scss
@@ -148,6 +148,7 @@ input[type="text"] {
 .site-main {
   padding: var(--spacing-sitepadding);
   min-height: 100vh;
+  position: relative;
 }
 
 .hiddenLink {
@@ -174,12 +175,4 @@ input[type="text"] {
   &:has(:focus-visible) {
     box-shadow: 0 0 0 1px var(--color-background), 0 0 0 3px var(--color-green-dark);
   }
-}
-
-.bg-pig {
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  z-index: 600;
-  --color-pig: var(--color-neufPink);
 }
\ No newline at end of file