Merge pull request #1 from Acesmndr/support/firefox

[Technical] Add support for firefox and safari

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cv-3d",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.11.4",

src/App.css

@@ -9,17 +9,3 @@
   font-weight: bold;
   background-color: #e6804d;
 }
-
-.firefox-browser {
-  transform-style: unset;
-  position: absolute;
-  top: -10vh;
-  width: 100vw;
-  padding: 16px;
-  text-align: center;
-  color: white;
-  font-weight: bold;
-  background-color: #e6804d;
-  left: 50%;
-  transform: translateX(-50%);
-}

src/App.js

@@ -1,13 +1,11 @@
 import './App.css';
 import Isometric from './components/Isometric/Isometric';
 var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
 
 function App() {
   return (
     <div>
       {isSafari && <div className='safari-browser'>Currently Safari doesn't fully support this site. Please switch to Chrome for better viewing experience.</div>}
-      {isFirefox && <div className='firefox-browser'>Currently Firefox doesn't fully support this site. Please switch to Chrome for better viewing experience.</div>}
       <Isometric isSafari={isSafari} />
     </div>
   );

src/components/Isometric/Isometric.jsx

@@ -17,45 +17,46 @@ import Keys from "../Items/Keys/Keys";
 
 const calc = (x, y, rx, ry, rz, tx, ty, tz, s) => [rx -(y - window.innerHeight / 2) / 100, ry, rz - (x - window.innerWidth / 2) / 100, tx, ty, tz, s];
 const transform = (rx, ry, rz, tx, ty, tz, s) =>
-  `perspective(1250px) rotateX(${rx}deg) rotateY(${ry}deg) rotateZ(${rz}deg) translateX(${tx}vw) translateY(${ty}vw) translateZ(${tz}vw) scale3d(${s}, ${s}, ${s})`;
+  // 'perspective(2500px) rotateX(90deg) rotateY(0deg) rotateZ(-9deg) translateX(-10vw) translateY(0vw) translateZ(-5vw) scale3d(0.1, 0.1, 0.1)';
+  `perspective(2500px) rotateX(${rx}deg) rotateY(${ry}deg) rotateZ(${rz}deg) translateX(${tx}vw) translateY(${ty}vw) translateZ(${tz}vw) scale3d(${s}, ${s}, ${s})`;
 const areaToZoom = (key) => {
   switch (key) {
     case 1:
-      return [90, 0, 0, 286, 435, -552, 48]; // monitor extra zoom
+      return [90, 0, 0, -45, 56, -138, 3]; // monitor extra zoom
     case 2:
-      return [90, 0, 0, 286, 344, -552, 48]; // monitor
+      return [90, 0, 0, -40, 20, -140, 3]; // monitor
     case 3:
-      return [65, 0, 5, 162, 150, -220, 24]; // monitor and laptop extra zoom
+      return [65, 0, 0, -50, -40, -120, 4]; // monitor and laptop extra zoom
     case 4:
-      return [94, 0, 0, 145, 92, -220, 24]; // monitor and laptop
+      return [95, 0, 0, -10, -20, -81.5, 2]; // monitor and laptop
     case 5:
-      return [90, 0, 90, 75, 210, -290, 24]; // window
+      return [90, 0, 95, -80, -60, -150, 3]; // window
     case 6:
-      return [0, 0, 25, 235, 145, -220, 24]; // idcard
+      return [0, 0, 25, 0, -110, -125, 4]; // idcard
     case 7:
-      return [90, 0, 0, -182, 170, -130, 24]; // books
+      return [90, 0, 0, -200, 20, -70, 3]; // books
     case 8:
-      return [90, 0, 0, -170, 130, -280, 24]; // certificates
+      return [90, 0, 0, -120, 20, -95, 2]; // certificates
     case 9:
-      return [90, 0, 0, 286, 344, -552, 48];
+      return [90, 0, 0, -40, 20, -140, 3];
     case 10:
-      return [65, 0, 5, 162, 150, -220, 24]; // monitor and laptop extra zoom
+      return [65, 0, 0, -50, -40, -120, 4]; // monitor and laptop extra zoom
     case 11:
-      return [0, 0, -32, 40, 200, -220, 24]; // medium writing
+      return [5, 0, -20, -120, -40, -180, 4]; // medium writing
     case 12:
-      return [90, 0, 90, 175, -165, -320, 32]; // photos
+      return [90, 0, 90, -30, -240, -115, 3]; // photos
     case 14:
-      return [0, -180, 0, 0, 0, -9, 1]; // contact
+      return [0, -189, 0, -32, -5, -100, 0.1] // contact
     case 0:
     case 13:
     default:
-      return [90, 0, 0, 0, 0, -9, 1]; // zoomed out
+      return [90, 0, 9, 25, 50, -5, 0.1];
   }
 };
 const Isometric = ({ isSafari }) => {
   const [keyCount, setKeyCount] = React.useState(0);
   const [props, set] = useSpring(() => ({
-    coordinates: [90, 0, 0, 0, 0, -9, 1],
+    coordinates: [90, 0, 9, 25, 50, -5, 0.1],
     config: { mass: 6, tension: 350, friction: 100 },
   }));
   const incrementKeyCount = () => {
@@ -72,10 +73,14 @@ const Isometric = ({ isSafari }) => {
     <>
       <animated.div
         onMouseMove={({ clientX: x, clientY: y }) => {
+          if (isSafari) {
+            return;
+          }
           const [rx, ry, rz, tx, ty, tz, s] = props.coordinates.payload.map(p => p.value);
           set({ coordinates: calc(x, y, rx, ry, rz, tx, ty, tz, s) })
         }}
         style={{ transform: props.coordinates.interpolate(transform) }}
+        className="house-div"
       >
         <KeyboardEventHandler
           handleKeys={["up", "down", "left", "right"]}