Svg Fix For Webkit Browsers

src/components/home/Floor.vue

@@ -184,7 +184,8 @@ export default {
   stroke-width: 9px;
   will-change: transform;
   transition: width linear 2s, height linear 2s, opacity .8s;
-  width: 50px;
+  width: 1080px;
+  transform: scale(0.04629629629);
   background: none;
   pointer-events: none;
 }

src/components/home/FloorItem.vue

@@ -119,6 +119,7 @@ export default {
   },
   methods: {
     moveMap() {
+      console.log(this.global.aspectRatio)
       var popupWidth = popup.style.width;
         if (400 > 0.33 * window.innerWidth) {
           popupWidth = "400px";
@@ -134,18 +135,22 @@ export default {
         */
         if ((this.global.aspectRatio <= this.global.flipScreen) && (this.global.aspectRatio >= 0.5)) {
           floorBox.style.transform = 
-            `translate(calc(${popupWidth} + (${window.innerWidth}px - ${popupWidth}) * 0.45 - 50px), 
-             calc(45vh)) scale(calc(${window.innerHeight * 0.9 / 50 + this.zoom}))` + `rotate(90deg)`;
-        } else if (this.global.aspectRatio <= this.global.flipScreen) { 
+          `translate(calc(${popupWidth} + (${window.innerWidth}px - ${popupWidth}) * 0.45 - 550px), 
+      calc(60vh - 500px)) scale(calc(${window.innerHeight * 0.9 / 50 + this.zoom}))` + `rotate(90deg)`;
+      // If wide landscape
+        } else if (this.global.aspectRatio <= this.global.flipScreen) {
           floorBox.style.transform = 
-              `translate(calc(67vw - 25px), calc(45vh)) scale(${(window.innerWidth) * 0.57 / 50 + this.zoom})`;
+          `translate(calc(60vw - 450px), calc(55vh - 450px)) 
+          scale(${(window.innerWidth) * 0.57 / 50 + this.zoom})`;
+      // If portrait wide mode
         } else if (this.global.aspectRatio <= 1.85) {
           floorBox.style.transform = 
-            `translate(calc(50vw - 25px), calc((${window.innerHeight}px - ${popup.style.height}) / 2)) 
-             scale(${window.innerWidth * 0.9 / 50 + this.zoom})`;
+          `translate(calc(45vw - 515px), calc((${window.innerHeight}px - ${popup.style.height}) / 2 - 400px)) 
+          scale(${window.innerWidth * 0.9 / 50 + this.zoom})`;
+      // If potrait tall mode
         } else {
           floorBox.style.transform = 
-            `translate(calc(45vw - 25px), calc(25vh - 25px)) scale(calc(${window.innerHeight * 0.45 / 50 + this.zoom}))` + `rotate(90deg)`;
+          `translate(calc(45vw - 525px), calc(20vh - 375px)) scale(calc(${window.innerHeight * 0.45 / 50 + this.zoom}))` + `rotate(90deg)`;
         }
     },
 

src/components/home/MapItem.vue

@@ -246,7 +246,7 @@ export default {
       handler() {
         if (this.bldgSVG) { // selected
           this.bringToFront(this.bldgSVG);
-          this.$refs.blurRef.setAttribute('stdDeviation', 0.16);
+          this.$refs.blurRef.setAttribute('stdDeviation', 8);
         } else { // unselected
           setTimeout(this.windowEventHandler, 800);
           this.$refs.blurRef.setAttribute('stdDeviation', 0);
@@ -340,10 +340,10 @@ export default {
       let y = window.innerHeight;
       let ratio = x / y;
       if (ratio < this.threshold) { // portrait mode
-        map.style.transform = `scale(${y/50+this.zoom})` + `rotate(90deg)`
+        map.style.transform = `scale(${(y/50+this.zoom) * 0.04629629629})` + `rotate(90deg)`
       }
       else // landscape mode
-        map.style.transform = `scale(${x/50+this.zoom})`
+        map.style.transform = `scale(${(x/50+this.zoom) * 0.04629629629})`
     }
   }
 }
@@ -358,14 +358,15 @@ export default {
   transform: translate(-1.5vw, -4.95vh) scale(1) scaleX(1) scaleY(1) rotate(0) skew(0deg, 0deg);
   justify-content: center;
   align-items: center;
-  transition: 800ms ease all;
 }
 
 #map {
   /* startup properties (replaced): */
   opacity: 0;
   transition: width linear 2s, height linear 2s, opacity .8s;
-  width: 50px;
+  width: 1080px;
+  /* Band-aid scaling fix for WebKit browsers */
+  transform: scale(0.04629629629);
   will-change: transform;
 }
 

src/components/home/PopUpItem.vue

@@ -272,8 +272,8 @@ export default {
     left: unset;
     z-index: 6;
     user-select: none;
+    -webkit-user-select: none;
     transform: translateY(250px);
-    transition: all 1.5s;
     box-sizing: border-box;
     background-color: white;
     border: 3px solid var(--softborder);
@@ -298,7 +298,7 @@ export default {
 }
 
 #fadeout {
-    background-image: linear-gradient(white, transparent);
+    background-image: linear-gradient(white, rgba(255, 255, 255, 0));
     position:relative;
     z-index: 1;
     height: 25px;

src/views/Home.vue

@@ -41,14 +41,16 @@ export default {
       initMouseY: 0,
       clicked: false,
       buildingSelected: false,
-      totalDisplacementX: 0,
+      totalDisplacementX: 510,
       curMoveX: 0,
-      totalDisplacementY: 0,
+      totalDisplacementY: 850,
       curMoveY: 0,
       maxX: 750,
       maxY: 300,
       zoom: 40,
       threshold: 1,
+      xOffSet: 510,
+      yOffSet: 850,
     }
   },
   watch: {
@@ -80,6 +82,7 @@ export default {
     }
   },
   mounted() {
+    this.moveInBounds()
   //  window.addEventListener('touchstart', () => {this.getInitMouse})
     window.addEventListener('touchend', () => {this.clicked = false, this.totalDisplacementX += this.curMoveX,  this.totalDisplacementY += this.curMoveY, this.moveInBounds()})
     window.addEventListener('touchmove', (e) => {
@@ -89,7 +92,6 @@ export default {
       this.curMoveX = 0
       this.curMoveY = 0
       this.clicked = true
-      console.log("bing")
     }
     console.log(this.clicked)
     this.mouseX = e.touches[0].pageX
@@ -134,7 +136,8 @@ export default {
       popup.style.transform = "TranslateY(50vh)"
     }
     // Allow for the scroll wheel to zoom the map
-    window.addEventListener("wheel", this.onMouseScroll);
+    // WITHHELD FOR NOW
+   // window.addEventListener("wheel", this.onMouseScroll);
   },
   methods: {
     runFind() {
@@ -146,18 +149,18 @@ export default {
     },
     moveInBounds() {
       if (!this.buildingSelected) {
-        if (this.totalDisplacementX > this.maxX) {
-          this.totalDisplacementX = this.maxX
+        if (this.totalDisplacementX > this.maxX+this.xOffSet) {
+          this.totalDisplacementX = this.maxX+this.xOffSet
           mapBox.style.transition = "800ms ease all"
-        } else if (this.totalDisplacementX < -this.maxX) {
-          this.totalDisplacementX = -this.maxX
+        } else if (this.totalDisplacementX < -this.maxX+this.xOffSet) {
+          this.totalDisplacementX = -this.maxX+this.xOffSet
           mapBox.style.transition = "800ms ease all"
         }
-        if (this.totalDisplacementY > this.maxY) {
-          this.totalDisplacementY = this.maxY
+        if (this.totalDisplacementY > this.maxY+this.yOffSet) {
+          this.totalDisplacementY = this.maxY+this.yOffSet
           mapBox.style.transition = "800ms ease all"
-        } else if (this.totalDisplacementY < -this.maxY) {
-          this.totalDisplacementY = -this.maxY
+        } else if (this.totalDisplacementY < -this.maxY+this.yOffSet) {
+          this.totalDisplacementY = -this.maxY+this.yOffSet
           mapBox.style.transition = "800ms ease all"
         }
         var xPos = -1.5*window.innerWidth/100 - this.totalDisplacementX
@@ -172,21 +175,25 @@ export default {
         var xPos = -1.5*window.innerWidth/100 - (this.totalDisplacementX + this.curMoveX)
         var yPos = -4.95*window.innerHeight/100 - (this.totalDisplacementY + this.curMoveY)
         var pushbackScale = 10
-        if (this.curMoveX + this.totalDisplacementX > this.maxX) {
-          xPos = -1.5*window.innerWidth/100 - (this.maxX + pushbackScale*Math.sqrt(this.totalDisplacementX + this.curMoveX-this.maxX))
-        } else if (this.curMoveX + this.totalDisplacementX < -this.maxX) {
-          xPos = -1.5*window.innerWidth/100 + (this.maxX + pushbackScale*Math.sqrt(-this.totalDisplacementX - this.curMoveX-this.maxX))
+        // Too far right
+        if (this.curMoveX + this.totalDisplacementX > this.maxX+this.xOffSet) {
+          xPos = -1.5*window.innerWidth/100 - (this.maxX+this.xOffSet + pushbackScale*Math.sqrt(this.totalDisplacementX + this.curMoveX-this.maxX-this.xOffSet))
+        // Too far left
+        } else if (this.curMoveX + this.totalDisplacementX < -this.maxX+this.xOffSet) {
+          xPos = -1.5*window.innerWidth/100 + (this.maxX-this.xOffSet + pushbackScale*Math.sqrt(-this.totalDisplacementX - this.curMoveX-this.maxX+this.xOffSet))
         }
-        if (this.curMoveY + this.totalDisplacementY > this.maxY) {
-          var yPos = -4.95*window.innerHeight/100 - (this.maxY + pushbackScale*Math.sqrt(this.totalDisplacementY + this.curMoveY-this.maxY))
-        } else if (this.curMoveY + this.totalDisplacementY < -this.maxY) {
-          var yPos = -4.95*window.innerHeight/100 + (this.maxY + pushbackScale*Math.sqrt(-this.totalDisplacementY - this.curMoveY-this.maxY))
+        // Too far down
+        if (this.curMoveY + this.totalDisplacementY > this.maxY+this.yOffSet) {
+          var yPos = -4.95*window.innerHeight/100 - (this.maxY+this.yOffSet + pushbackScale*Math.sqrt(this.totalDisplacementY + this.curMoveY-this.maxY-this.yOffSet))
+          // Too far up
+        } else if (this.curMoveY + this.totalDisplacementY < -this.maxY+this.yOffSet) {
+          var yPos = -4.95*window.innerHeight/100 + (this.maxY-this.yOffSet + pushbackScale*Math.sqrt(-this.totalDisplacementY - this.curMoveY-this.maxY+this.yOffSet))
         }
         mapBox.style.transition = "0ms ease all"
         mapBox.style.transform = `scale(${1*this.zoom/40}) translate(${xPos}px, ${yPos}px)`
       }
     },
-    onMouseScroll({deltaX,deltaY}) {
+ /*   onMouseScroll({deltaX,deltaY}) {
       // If you arent selected on a building
       if (!this.global.sFocus && !this.global.bldg){
         let dirwheel = 0;
@@ -207,8 +214,10 @@ export default {
         // abs is absolute position on map
         var adjustedX = this.mouseX - window.innerWidth/2;
         var adjustedY = this.mouseY - window.innerHeight/2;
+        console.log(this.totalDisplacementX)
         var absX = adjustedX/this.zoom*40 + this.totalDisplacementX;
         var absY = adjustedY/this.zoom*40 + this.totalDisplacementY;
+        console.log(absX, absY)
         let tempZoom=0;
         if (portraitMode) {
           tempZoom = y/50+this.zoom+dirwheel*10;
@@ -227,19 +236,18 @@ export default {
           // UB
           if (this.zoom >= 75) this.zoom = 75;
         }
-        this.totalDisplacementX = absX - adjustedX/this.zoom*40;
-        this.totalDisplacementY = absY - adjustedY/this.zoom*40;
+        this.totalDisplacementX = absX + (adjustedX)/this.zoom*40;
+        this.totalDisplacementY = absY + (adjustedY)/this.zoom*40;
         mapBox.style.transition = "800ms ease all"
         this.moveInBounds();
       }
-    },
+    }, */
     getInitMouse() {
       this.initMouseX = this.mouseX
       this.initMouseY = this.mouseY
       this.curMoveX = 0
       this.curMoveY = 0
       this.clicked = true
-      console.log("bing")
     },
     // Make the name tag pop up
     nameTagAppear(b) {
@@ -299,9 +307,9 @@ export default {
         mask.style.pointerEvents = "inherit"
         mapBox.style.transition = "800ms ease all"
 
-        mapBox.style.transform = `scale(3) translate(${window.innerWidth / 2 - boxCenterX}px, ${window.innerHeight / 2 - boxCenterY - 50}px)`
+        mapBox.style.transform = `scale(3) translate(${window.innerWidth / 2.5 - boxCenterX + this.xOffSet}px, ${window.innerHeight / 7 - boxCenterY + this.yOffSet}px)`
         // Bring the popup to 0,0
-        popup.style.transition = "transform .5s"
+        popup.style.transition = "transform .25s"
         popup.style.transform = "translateY(0vh)"
         popup.style.minWidth = "400px"
       }
@@ -316,7 +324,7 @@ export default {
         this.moveInBounds()
         mask.style.pointerEvents = "none"
         mask.style.opacity = 0
-        popup.style.transition = "transform .5s"
+        popup.style.transition = "transform .25s"
         popup.style.minWidth = "unset"
         // Landscape mode
         if (this.global.aspectRatio <= this.global.flipScreen) {