Park & Office + meta data & enhancments (#32)

* Park + Audio + Enhancements * Added Park model * City animation player + Tech center interior * Added html metadata and analytics * Model update for Office * Page leave/return sound fade + audio * Added ReadMe and License
cyrus2281 · Sep 18, 2023 · 4fe2ac7 · 4fe2ac7
1 parent 93abecf
commit 4fe2ac7
Show file tree

Hide file tree

Showing 11 changed files with 124 additions and 7 deletions.
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,28 @@
+BSD 3-Clause License
+
+Copyright (c) 2023, Cyrus Mobini (cyrus2281)
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
@@ -3,13 +3,25 @@
 
 <head>
   <meta charset="UTF-8" />
-  <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round"
     rel="stylesheet">
-  <!-- favicon -->
   <link rel="icon" type="image/jpg" href="/favicon.jpg">
-  <title>Cyrus - Night City</title>
+  <meta name="author" content="Cyrus Mobini" />
+  <meta name="description" property="og:description"
+    content="Explore the Night City, a 3D futuristic cyberpunk-themed city filled with easter-eggs and references to the developers' life, Cyrus Mobini." />
+  <meta name="keywords"
+    content="Cyrus Mobini, Night City, ThreeJS, Web Game, Software Engineer, Cyberpunk, Portfolio, Online Resume" />
+  <meta name="robots" content="index, follow" />
+  <meta name="revisit-after" content="3 days" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="type" property="og:type" content="website" />
+  <meta name="title" property="og:title" content="Night City - Cyrus Mobini" />
+  <meta name="image" property="og:image" content="https://night-city.netlify.app/favicon.jpg" />
+  <meta name="url" property="og:url" content="https://night-city.netlify.app" />
+  <meta name="site_name" property="og:site_name" content="Night City - Cyrus Mobini" />
+  <meta name="locale" property="og:locale" content="en_US" />
+  <title>Night City - Cyrus Mobini</title>
 </head>
 
 <body>

diff --git a/public/blob/model/night-city.glb b/public/blob/model/night-city.glb
diff --git a/public/google0bc38e08bc20e189.html b/public/google0bc38e08bc20e189.html
@@ -0,0 +1 @@
+google-site-verification: google0bc38e08bc20e189.html
diff --git a/src/experience/effects/Effects.tsx b/src/experience/effects/Effects.tsx
@@ -6,10 +6,18 @@ import useSound from "../stores/useSound";
 import { GUY_AUDIOS } from "../utils/guyAudios";
 import { printNightCityInfo } from "../utils/utils";
 
+const PAGE_TIMEOUT = 1000 * 60 * 5; // 5 minutes
+
 let lastDevToolsWarning = 0;
+let leftPageDate = 0;
+
 function Effects() {
   const playSound = useSound((state) => state.playSound);
+  const fadeOutSounds = useSound((state) => state.fadeOutSounds);
+  const fadeInSounds = useSound((state) => state.fadeInSounds);
+
   const camera = useThree((state) => state.camera);
+  // Pov Update and Dev Tools Warning on Resize
   useEffect(() => {
     const handleResize = () => {
       // Update camera FOV on window resize
@@ -31,6 +39,26 @@ function Effects() {
     return () => window.removeEventListener("resize", handleResize);
   }, []);
 
+  // User leave/return to page detection
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (document.hidden) {
+        leftPageDate = Date.now();
+        fadeOutSounds();
+      } else {
+        fadeInSounds(() => {
+          if (leftPageDate && Date.now() - leftPageDate > PAGE_TIMEOUT) {
+            playSound(GUY_AUDIOS.PAGE_RETURN);
+          }
+          leftPageDate = 0;
+        });
+      }
+    };
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () =>
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+  }, []);
+
   return <></>;
 }
 

diff --git a/src/experience/stores/useSound.ts b/src/experience/stores/useSound.ts
@@ -2,6 +2,7 @@ import { create } from "zustand";
 import { subscribeWithSelector } from "zustand/middleware";
 import { AudioConfig, Subtitle } from "../utils/interfaces";
 import { DEFAULT_MUSIC_VOLUME } from "../utils/constants";
+import { sleep } from "../utils/utils";
 
 interface SoundState {
   activeSounds: AudioElement[];
@@ -11,6 +12,8 @@ interface SoundState {
   setMute: (isMute: boolean) => void;
   toggleMute: () => void;
   playSound: (audioConfig: AudioConfig) => void;
+  fadeOutSounds: (callback?: () => void) => Promise<void>;
+  fadeInSounds: (callback?: () => void) => Promise<void>;
   subtitleQueue: Subtitle[];
   showSubtitle: (subtitle: string, duration: number) => void;
   removeSubtitle: (id: string) => void;
@@ -68,6 +71,36 @@ export default create(
           );
         }
       },
+      fadeOutSounds: async (callback) => {
+        const { activeSounds } = get();
+        let interval = 0;
+        while (interval < 15) {
+          activeSounds.forEach((sound) => {
+            sound.volume = sound.volume * 0.75;
+          });
+          await sleep(100);
+          interval += 1;
+        }
+        activeSounds.forEach((sound) => {
+          sound.volume = 0;
+        });
+        callback && callback();
+      },
+      fadeInSounds: async (callback) => {
+        const { activeSounds } = get();
+        let interval = 0;
+        while (interval < 15) {
+          activeSounds.forEach((sound) => {
+            sound.volume = Math.min(sound.volume + 0.05 , sound.defaultVolume)
+          });
+          await sleep(100);
+          interval += 1;
+        }
+        activeSounds.forEach((sound) => {
+          sound.volume = sound.defaultVolume;
+        });
+        callback && callback();
+      },
       subtitleQueue: [],
       showSubtitle: (message: string, duration: number) => {
         const id = Math.random().toString();

diff --git a/src/experience/utils/guyAudios.ts b/src/experience/utils/guyAudios.ts
@@ -109,5 +109,10 @@ export const GUY_AUDIOS: { [key: string]: AudioConfig } = {
     path: ASSETS.GUY_AUDIO + "dev-tools.wav",
     duration: 2000,
     subtitle: "What are you looking for in the developer tools?",
+  },
+  PAGE_RETURN: {
+    path: ASSETS.GUY_AUDIO + "came-back.wav",
+    duration: 2000,
+    subtitle: "Yay, You came back. I've missed you.",
   }
 };
diff --git a/src/experience/utils/utils.ts b/src/experience/utils/utils.ts
@@ -144,3 +144,8 @@ export const printNightCityInfo = () => {
     console.log(NIGHT_CITY_FONT.replaceAll("{worldPath}", window.worldPath))
   );  
 };
+
+
+export const sleep = (ms: number) => {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
diff --git a/src/experience/world/City.tsx b/src/experience/world/City.tsx
@@ -95,6 +95,10 @@ function City() {
     Mailbox_1: performAction(() => navigate(PAGES.CONTACT)),
     Mailbox_2: performAction(() => navigate(PAGES.CONTACT)),
     coffee: performAction(() => openUrl(EXTERNAL_LINKS.COFFEE)),
+    githubFrame: performAction(() => openUrl(EXTERNAL_LINKS.GITHUB)),
+    githubFrame_1: performAction(() => openUrl(EXTERNAL_LINKS.GITHUB)),
+    linkedinFrame: performAction(() => openUrl(EXTERNAL_LINKS.LINKEDIN)),
+    linkedinFrame_1: performAction(() => openUrl(EXTERNAL_LINKS.LINKEDIN)),
     blockEvents: (e: Event) => e.stopPropagation(),
   };
   // Parsing City

diff --git a/src/pages/Credit.md b/src/pages/Credit.md
@@ -14,11 +14,11 @@ Content:
 - Models by [Kenney](https://poly.pizza/u/Kenney) from [Poly Pizza](https://poly.pizza/) under CC0
 
   - [City Kit](https://poly.pizza/bundle/City-Kit-0CkvGrBJ0u) \<Modified>
-  - [Stairs Open Single](https://poly.pizza/m/8NnxYiaDyJ) \<Modified>
+  - [Furniture Kit](https://poly.pizza/bundle/Furniture-Kit-NoG1sEUD1z) \<Modified>
 
 - Models by [Quaternius](https://poly.pizza/u/Quaternius) from [Poly Pizza](https://poly.pizza/) under CC0
 
-  - [Toon Shooter Game Kit](https://poly.pizza/bundle/Toon-Shooter-Game-Kit-qraiSXoAru)
+  - [Toon Shooter Game Kit](https://poly.pizza/bundle/Toon-Shooter-Game-Kit-qraiSXoAru) \<Modified>
   - [Cyberpunk Game Kit](https://poly.pizza/bundle/Cyberpunk-Game-Kit-Hkfxa8K8zF)
   - [Ultimate Space Kit](https://poly.pizza/bundle/Ultimate-Space-Kit-YWh743lqGX)
   - [Scifi Kit](https://poly.pizza/m/b6otgtfVoe)
@@ -35,6 +35,7 @@ Content:
   - [Coffee cup](https://poly.pizza/m/fIuM_PW5prV) \<Modified>
   - [Dumpster](https://poly.pizza/m/3F0yCeWeTZP)
   - [Fountain](https://poly.pizza/m/4KKY7CmNe_r)
+  - [Wall Painting](https://poly.pizza/m/3dycV-ViQH-)
 
 - Models by [J-Toastie](https://poly.pizza/u/J-Toastie) from [Poly Pizza](https://poly.pizza/) under [CC-BY](https://creativecommons.org/licenses/by/3.0/)