Add aspectRatio to constants object and add initialStates object cont…

…aining home and contactForm objects to _config.js, import @emailjs/browser into, import config.appFont into, refactor dimVeil and rename to fluctuateVeilOpacity in, refactor onHold for maintainability in, create isEmailValid in, create isNameValid in, create updateContactForm in, create submitContactForm in, remove call to utils.throttle from autoSwitchEyePosition in, create getTimeString in, create getStylesForAudioPlayer in, create getStylesAndRenderingVariablesForCloud in, getStylesClassNamesAndRenderingVariablesForContactForm in, create getStylesForFace in, create getStylesAndClassNamesForInfoSheet in, create getStylesForRipple in, create getStylesAndClassNamesForSocialMenu in, create getStylesAndClassNamesForSocialMenuLabels in, create getStylesForTrack in, create getStylesForVeil in and extend parseAndRenderPhotoData to include loadingElement and brokenElement props in _utils.js, create styles and keyframes for markup passed to loadingElement in parseAndRenderPhotoData of _utils.js in App.css, move initialState into _config from, add renderTracks and setCurrentTrack cases to the reducer of, remove allTracks, currentTrack, leftColumnTracks, rightColumnTracks and titleColumnsMargin cases from the reducer of, remove selectTrack and renderTracks functions from, add useEffect to automatically recompute track columns when state of tracks or currentTrack changes, replace allTracks and selectTrack props from AudioPlayer and replace with dispatch prop in, and update annotations to Home.js, refactor AudioPlayer.js to a functional component, move styling and rendering logic to utils.getStylesAndRenderingVariablesForCloud from Cloud.js, refactor ContactForm.js to a functional component, move styling logic to utils.getStylesForFace from Face.js, move styling logic to utils.getStylesAndClassNamesForInfoSheet from InfoSheet.js, move styling logic to utils.getStylesForRipple from Ripple.js, refactor SingleTrack.js to a functional component, move styling logic to utils.getStylesAndClassNamesForSocialMenu from SocialMenu.js, move styling logic to utils.getStylesAndClassNamesForSocialMenuLabels from SocialMenuLabels.js, move styling logic from utils.getStylesForTrack from Track.js, move styling logic from utils.getStylesForVeil from Veil.js, import App.css into index.js, and remove email-validator dependency from package.json and package-lock.json

package.json

@@ -31,7 +31,6 @@
     "@mediapipe/camera_utils": "^0.3.1675466862",
     "@mediapipe/drawing_utils": "^0.3.1675466124",
     "@mediapipe/hands": "^0.4.1675469240",
-    "email-validator": "^2.0.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-photo-view": "^1.2.4",

src/App.css

@@ -554,7 +554,45 @@ div.PhotoView-Slider__BannerWrap { /* Only way to override the otherwise immutab
 }
 
 
-/* Would've had to import a seperate library like "glamorous" to have been able to pass pseudo selectors as inline styles (in AudioPlayer.js, which I would have used to make the slider thumb below scale with canvasHeight). Also important to note that I wouldn't want slider thumb to scale very much as it would've be grabbable/useable. Against one of my goals for this project, to make all rendering fluidly dynamic without use of media breakpoints, in this particular case it was the optimal solution. Incidentally, when I decided I wanted to tether color and opacity of the audio interface with veilOpacity, I did import the emotion library and for some reason, though fully integrated without its syntax crashing anything, it didn't work. */
+
+.loading-screen {
+    position: relative;
+	overflow: hidden;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+    opacity: .3;
+}
+.cube-container {
+	width: 50vmin;
+	height: 50vmin;
+	perspective: 100vmin;
+	animation: spin-all 4s ease-in-out 0s infinite;
+}
+.cube {
+    transform-style: preserve-3d;
+    background: rgb(255,0,0);
+    position: absolute;
+    transition: all 1s ease 0s;
+}
+.cube, .cube:before, .cube:after {
+	animation: spin-cube 2s ease-in-out -3s infinite alternate;
+}
+.cube:before, .cube:after {
+	position: absolute;
+	content: "";
+	background: rgb(255,255,0);
+	transform-origin: right bottom;
+	animation-name: spin-cube-before;
+}
+.cube:after {
+	animation-name: spin-cube-after;
+	background: rgb(0,128,255);
+}
+
+
+
+/* Would've had to import a separate library like "glamorous" to have been able to pass pseudo selectors as inline styles (in AudioPlayer.js, which I would have used to make the slider thumb below scale with canvasHeight). Also important to note that I wouldn't want slider thumb to scale very much as it would've be grabbable/useable. Against one of my goals for this project, to make all rendering fluidly dynamic without use of media breakpoints, in this particular case it was the optimal solution. Incidentally, when I decided I wanted to tether color and opacity of the audio interface with veilOpacity, I did import the emotion library and for some reason, though fully integrated without its syntax crashing anything, it didn't work. */
 @media only screen and (max-height: 400px) {
   .slider::-webkit-slider-thumb {
     width: 28px;
@@ -809,3 +847,63 @@ div.PhotoView-Slider__BannerWrap { /* Only way to override the otherwise immutab
     99% {transform: rotateY(0deg) translateY(-75%) translateX(-100vw); opacity: 1}
     100% {transform: rotateY(0deg) translateY(-75%) translateX(-100vw); opacity: 0}
 }
+
+
+
+@keyframes spin-all {
+	50%, 100% { transform: rotate(720deg); }
+}
+@keyframes spin-cube {
+	0%, 50% {
+	border-radius: 100%;
+	transform: rotate(39deg) rotateX(0deg) rotateY(0deg);
+	left: 20vmin;
+	top: 10vmin;
+	width: 10vmin;
+	height: 10vmin;
+	}
+	50%, 100% {
+	border-radius: 2vmin;
+	transform: rotate(48deg) rotateX(22.5deg) rotateY(-22.5deg);
+	left: 14.5vmin;
+	top: 5vmin;
+	width: 20vmin;
+	height: 20vmin;
+	}
+}
+@keyframes spin-cube-before {
+	0%, 50% {
+	border-radius: 100%;
+	transform: rotateY(-180deg) rotateX(0deg);
+	left: 11vmin;
+	top: 9vmin;
+	width: 100%;
+	height: 100%;
+	}
+	50%, 100% {
+	border-radius: 2vmin;
+	transform: rotateY(-90deg);
+	left: 4vmin;
+	top: 2.5vmin;
+	width: calc(100% - 2vmin);
+	height: calc(100% - 2vmin);
+	}
+}
+@keyframes spin-cube-after {
+	0%, 50% {
+	border-radius: 100%;
+	transform: rotateY(0deg) rotateX(0deg);
+	left: 5vmin;
+	top: 24vmin;
+	width: 100%;
+	height: 100%;
+	}
+	50%, 100% {
+	border-radius: 2vmin;
+	transform: rotateX(-90deg);
+	left: 11.25vmin;
+	top: 13vmin;
+	width: calc(100% - 5vmin);
+	height: calc(100% - 5vmin);
+	}
+}

src/App.js

@@ -1,6 +1,5 @@
 import { HashRouter, Route, Routes } from 'react-router-dom'
 
-
 import Home from './Home'
 import { SingleTrack, TravelPhotos } from './components'
 

src/_config.js

@@ -6,6 +6,7 @@ const canvasWidth = Math.round(canvasHeight * 1.323572474377745) //screenWidth <
 const wideScreen = screenWidth > canvasWidth ? true : false //This simple calculation was happening redundantly in so many components I decided to do it once here and subsequently pass as a prop to any of them that need it
 const moonDiameter = Math.round(canvasWidth * 0.199121522693997)
 const margin = ((screenWidth - canvasWidth) / 2)
+const aspectRatio = 1808 / 1366 //This is the aspect ratio of the canvas (derived from the dimensions of main.png)
 
 const config = {
 
@@ -16,8 +17,45 @@ const config = {
         wideScreen,
         moonDiameter,
         margin,
+        aspectRatio,
         blinkFrameDelays: [.09, .14, .20, .27, .36, .47, .60, .75, .92, 1.1]
     },
+    initialStates: {
+        home: {
+            //Component visibility and performance features
+            cloudsOn: true,
+            cloudHazeOn: false,
+            handControllerOn: false,
+            revealContactForm: false,
+            revealInfoSheet: false,
+            menuPosition: 2,
+            //Tracks
+            currentTrack: {},
+            leftColumnTracks: [],
+            rightColumnTracks: [],
+            titlesColumnsMargin: 0,
+            //Coords and controllers
+            coords: { xCoordMoving: -1, yCoordMoving: -1, xCoordStatic: -1, yCoordStatic: -1 },
+            isHandPointing: false,
+            isRippling: false,
+            isBlinking: false,
+            //Eyes and main display
+            faceFrame: require('./assets/images/face-empty.png'), //If the config.initialStates.home object were set in Home.js and passed directly to the reducer as useReducer(reducer, initialState) it would simply be set to config.images.eyePosition.faceEmpty, but since it's set here in the config object of _config.js and passed to the reducer as useReducer(reducer, config.initialStates.home) it must be set to require('./assets/images/face-empty.png') because at this juncture the images object hasn't yet been defined in the config object of _config.js
+            allClouds: [],
+            veilOpacity: .45
+        },
+        contactForm: {
+            formSent: false,
+            firstNameValid: null,
+            lastNameValid: null,
+            emailValid: null,
+            firstName: '',
+            lastName: '',
+            email: '',
+            subject: '',
+            message: ''
+        }
+    },
     images: {
         appFont: 'Nothing You Could Do, cursive',
         formFont: 'Cormorant Garamond, serif',