Code clean

package.json

@@ -50,7 +50,7 @@
     "postcss": "^7.0.27",
     "postcss-load-config": "^2.1.0",
     "postcss-preset-env": "^6.7.0",
-    "rollup": "^2.3.4",
+    "rollup": "^2.4.0",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-eslint": "^7.0.0",
     "rollup-plugin-glslify": "^1.2.0",

pnpm-lock.yaml

@@ -14,10 +14,10 @@ devDependencies:
   '@babel/plugin-transform-runtime': 7.9.0_@babel+core@7.9.0
   '@babel/preset-env': 7.9.5_@babel+core@7.9.0
   '@babel/runtime': 7.9.2
-  '@rollup/plugin-alias': 3.0.1_rollup@2.3.4
+  '@rollup/plugin-alias': 3.0.1_rollup@2.4.0
-  '@rollup/plugin-commonjs': 11.0.2_rollup@2.3.4
+  '@rollup/plugin-commonjs': 11.0.2_rollup@2.4.0
-  '@rollup/plugin-node-resolve': 7.1.1_rollup@2.3.4
+  '@rollup/plugin-node-resolve': 7.1.1_rollup@2.4.0
-  '@rollup/plugin-replace': 2.3.1_rollup@2.3.4
+  '@rollup/plugin-replace': 2.3.1_rollup@2.4.0
   autoprefixer: 9.7.6
   babel-plugin-module-resolver: 4.0.0
   dotenv: 8.2.0
@@ -32,12 +32,12 @@ devDependencies:
   postcss: 7.0.27
   postcss-load-config: 2.1.0
   postcss-preset-env: 6.7.0
-  rollup: 2.3.4
+  rollup: 2.4.0
-  rollup-plugin-babel: 4.4.0_@babel+core@7.9.0+rollup@2.3.4
+  rollup-plugin-babel: 4.4.0_@babel+core@7.9.0+rollup@2.4.0
   rollup-plugin-eslint: 7.0.0
   rollup-plugin-glslify: 1.2.0
-  rollup-plugin-svelte: 5.2.1_rollup@2.3.4+svelte@3.20.1
+  rollup-plugin-svelte: 5.2.1_rollup@2.4.0+svelte@3.20.1
-  rollup-plugin-terser: 5.3.0_rollup@2.3.4
+  rollup-plugin-terser: 5.3.0_rollup@2.4.0
   sapper: 0.27.12_svelte@3.20.1
   svelte: 3.20.1
   svelte-preprocess: 3.7.1_svelte@3.20.1
@@ -912,23 +912,23 @@ packages:
     dev: false
     resolution:
       integrity: sha512-3NsZsJIA/22P3QUyrEDNA2D133H4j224twJrdipXN38dpnIOzAbUDtOwkcJ5pXmn75w7LSQDjA4tO9dm1XlqlA==
-  /@rollup/plugin-alias/3.0.1_rollup@2.3.4:
+  /@rollup/plugin-alias/3.0.1_rollup@2.4.0:
     dependencies:
-      rollup: 2.3.4
+      rollup: 2.4.0
       slash: 3.0.0
     dev: true
     peerDependencies:
       rollup: ^1.20.0
     resolution:
       integrity: sha512-ReSy6iPl3GsWLMNeshXAfgItZFMoMOTYC7MZQQM5va4pqxiGgwl1xZUZfHW6zGyZPK+k8TBadxx+kdmepiUa+g==
-  /@rollup/plugin-commonjs/11.0.2_rollup@2.3.4:
+  /@rollup/plugin-commonjs/11.0.2_rollup@2.4.0:
     dependencies:
-      '@rollup/pluginutils': 3.0.8_rollup@2.3.4
+      '@rollup/pluginutils': 3.0.8_rollup@2.4.0
       estree-walker: 1.0.1
       is-reference: 1.1.4
       magic-string: 0.25.7
       resolve: 1.15.1
-      rollup: 2.3.4
+      rollup: 2.4.0
     dev: true
     engines:
       node: '>= 8.0.0'
@@ -936,14 +936,14 @@ packages:
       rollup: ^1.20.0
     resolution:
       integrity: sha512-MPYGZr0qdbV5zZj8/2AuomVpnRVXRU5XKXb3HVniwRoRCreGlf5kOE081isNWeiLIi6IYkwTX9zE0/c7V8g81g==
-  /@rollup/plugin-node-resolve/7.1.1_rollup@2.3.4:
+  /@rollup/plugin-node-resolve/7.1.1_rollup@2.4.0:
     dependencies:
-      '@rollup/pluginutils': 3.0.8_rollup@2.3.4
+      '@rollup/pluginutils': 3.0.8_rollup@2.4.0
       '@types/resolve': 0.0.8
       builtin-modules: 3.1.0
       is-module: 1.0.0
       resolve: 1.15.1
-      rollup: 2.3.4
+      rollup: 2.4.0
     dev: true
     engines:
       node: '>= 8.0.0'
@@ -951,20 +951,20 @@ packages:
       rollup: ^1.20.0
     resolution:
       integrity: sha512-14ddhD7TnemeHE97a4rLOhobfYvUVcaYuqTnL8Ti7Jxi9V9Jr5LY7Gko4HZ5k4h4vqQM0gBQt6tsp9xXW94WPA==
-  /@rollup/plugin-replace/2.3.1_rollup@2.3.4:
+  /@rollup/plugin-replace/2.3.1_rollup@2.4.0:
     dependencies:
-      '@rollup/pluginutils': 3.0.8_rollup@2.3.4
+      '@rollup/pluginutils': 3.0.8_rollup@2.4.0
       magic-string: 0.25.7
-      rollup: 2.3.4
+      rollup: 2.4.0
     dev: true
     peerDependencies:
       rollup: ^1.20.0
     resolution:
       integrity: sha512-qDcXj2VOa5+j0iudjb+LiwZHvBRRgWbHPhRmo1qde2KItTjuxDVQO21rp9/jOlzKR5YO0EsgRQoyox7fnL7y/A==
-  /@rollup/pluginutils/3.0.8_rollup@2.3.4:
+  /@rollup/pluginutils/3.0.8_rollup@2.4.0:
     dependencies:
       estree-walker: 1.0.1
-      rollup: 2.3.4
+      rollup: 2.4.0
     dev: true
     engines:
       node: '>= 8.0.0'
@@ -4074,11 +4074,11 @@ packages:
     hasBin: true
     resolution:
       integrity: sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
-  /rollup-plugin-babel/4.4.0_@babel+core@7.9.0+rollup@2.3.4:
+  /rollup-plugin-babel/4.4.0_@babel+core@7.9.0+rollup@2.4.0:
     dependencies:
       '@babel/core': 7.9.0
       '@babel/helper-module-imports': 7.8.3
-      rollup: 2.3.4
+      rollup: 2.4.0
       rollup-pluginutils: 2.8.2
     dev: true
     peerDependencies:
@@ -4100,10 +4100,10 @@ packages:
     dev: true
     resolution:
       integrity: sha512-EqUFINMICD9U3MJ4jsxBcCRhzWNZJBWyAK2ol+2ClWIPaIWOuz0OY/Ml8rdT81F4aufwxJN5I9N7QvCth0OrUQ==
-  /rollup-plugin-svelte/5.2.1_rollup@2.3.4+svelte@3.20.1:
+  /rollup-plugin-svelte/5.2.1_rollup@2.4.0+svelte@3.20.1:
     dependencies:
       require-relative: 0.8.7
-      rollup: 2.3.4
+      rollup: 2.4.0
       rollup-pluginutils: 2.8.2
       sourcemap-codec: 1.4.8
       svelte: 3.20.1
@@ -4113,11 +4113,11 @@ packages:
       svelte: '*'
     resolution:
       integrity: sha512-wc93cN66sRpX6uFljVFqvWT6NU3V5ab/uLXKt2UiARuexFU/ctolzkmdXM7WM5iKdTX9scToS9sabJTJV4DUMA==
-  /rollup-plugin-terser/5.3.0_rollup@2.3.4:
+  /rollup-plugin-terser/5.3.0_rollup@2.4.0:
     dependencies:
       '@babel/code-frame': 7.8.3
       jest-worker: 24.9.0
-      rollup: 2.3.4
+      rollup: 2.4.0
       rollup-pluginutils: 2.8.2
       serialize-javascript: 2.1.2
       terser: 4.6.7
@@ -4132,7 +4132,7 @@ packages:
     dev: true
     resolution:
       integrity: sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==
-  /rollup/2.3.4:
+  /rollup/2.4.0:
     dev: true
     engines:
       node: '>=10.0.0'
@@ -4140,7 +4140,7 @@ packages:
     optionalDependencies:
       fsevents: 2.1.2
     resolution:
-      integrity: sha512-8U9x54RCVhrUEV1zon4Pp8kokg1HM0fwzf5vkwe2/rOfyTClarx5e27kFlaoZ7ofJiazWkNQ+dgdG4HuZxkQ9A==
+      integrity: sha512-dYE2ZKl9+kxuFKDaaSuauZjIPa8hcKDqI7WrOq1pTXYG4GJw+6ypLifGIvCKw5yJpSmuFohuimYpg0wfRXTCLw==
   /run-async/2.4.0:
     dependencies:
       is-promise: 2.1.0
@@ -4892,7 +4892,7 @@ specifiers:
   postcss: ^7.0.27
   postcss-load-config: ^2.1.0
   postcss-preset-env: ^6.7.0
-  rollup: ^2.3.4
+  rollup: ^2.4.0
   rollup-plugin-babel: ^4.4.0
   rollup-plugin-eslint: ^7.0.0
   rollup-plugin-glslify: ^1.2.0

src/globe/index.js

@@ -8,8 +8,8 @@ import settings from './settings'
 import GlobeVS from './globe-vs'
 import GlobeFS from './globe-fs'
 
-function hexToRgb(hex) {
+const hexToRgb = hex => {
-    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
     return result ? [
         parseInt(result[1], 16) / 255,
         parseInt(result[2], 16) / 255,
@@ -17,12 +17,12 @@ function hexToRgb(hex) {
     ] : [0,0,0]
 }
 
-function lonLatToVector3(lng, lat) {
+const lonLatToVector3 = (lng, lat) => {
-    var phi   = (90-lat)*(Math.PI/180),
+    const phi = (90 - lat) * (Math.PI / 180)
-        theta = (lng+180)*(Math.PI/180),
+    const theta = (lng + 180) * (Math.PI / 180)
-        x     = -( Math.sin(phi) * Math.cos(theta) ),
+    const x = -(Math.sin(phi) * Math.cos(theta))
-        z     =  Math.sin(phi) * Math.sin(theta),
+    const z = Math.sin(phi) * Math.sin(theta)
-        y     =  Math.cos(phi)
+    const y = Math.cos(phi)
     return [x,y,z]
 }
 
@@ -104,7 +104,7 @@ class WebglGlobe {
             radius: 1,
             widthSegments: 100, heightSegments: 100
         })
-        this.scene.add( this.globeMesh )
+        this.scene.add(this.globeMesh)
 
         this.markers = []
         let markers  = this.cities
@@ -125,16 +125,16 @@ class WebglGlobe {
             })
 
             // Position marker
-            let p = lonLatToVector3( markers[i].lng, markers[i].lat )
+            let p = lonLatToVector3(markers[i].lng, markers[i].lat)
             markerMesh.position[0] = p[0]
             markerMesh.position[1] = p[1]
             markerMesh.position[2] = p[2]
-            this.scene.add( markerMesh )
+            this.scene.add(markerMesh)
 
             // Wrap marker in link
             let el = document.createElement('a')
-            el.setAttribute('href', '/location/' + markers[i].countrySlug + '/' + markers[i].slug )
+            el.setAttribute('href', '/location/' + markers[i].countrySlug + '/' + markers[i].slug)
-            el.setAttribute('sapper-noscroll','')
+            el.setAttribute('sapper-noscroll', '')
 
             // Add label
             let span = document.createElement('span')
@@ -166,7 +166,7 @@ class WebglGlobe {
             el.addEventListener('animationend', () => el.classList.remove('hover'))
 
             // Append marker to HTML
-            this.$el.appendChild( el )
+            this.$el.appendChild(el)
             this.markers.push({
                 mesh: markerMesh,
                 el: el,
@@ -212,18 +212,18 @@ class WebglGlobe {
         mat4.multiply(this.viewProjectionMatrix, this.viewProjectionMatrix, this.camera.inverseWorldMatrix)
 
         let refPos = vec3.create()
-        vec3.set(refPos, 0, 1, 0 )
+        vec3.set(refPos, 0, 1, 0)
         vec3.transformMat4(refPos, refPos, this.viewProjectionMatrix)
-        let refx = ( (refPos[0] + 1) / 2) * this.width
+        let refx = ((refPos[0] + 1) / 2) * this.width
         let refy = (1. - (refPos[1] + 1) / 2) * this.height
 
         let dir2 = vec2.create()
-        vec2.set( dir2, refx, refy )
+        vec2.set(dir2, refx, refy)
         let center2 = vec2.create()
-        vec2.set( center2, this.width/2, this.height/2 )
+        vec2.set(center2, this.width / 2, this.height / 2)
         let dir2d2 = vec2.clone(dir2, dir2)
-        vec2.subtract( dir2d2, dir2d2, center2 )
+        vec2.subtract(dir2d2, dir2d2, center2)
-        this.circleScreenSize = vec2.length( dir2d2 )  * 1.04
+        this.circleScreenSize = vec2.length(dir2d2)  * 1.04
     }
 
     // Update
@@ -245,7 +245,8 @@ class WebglGlobe {
         let needsUpdate = false
         if (this.cameraX != this.camera.worldMatrix[12] ||
             this.cameraY != this.camera.worldMatrix[13] ||
-            this.cameraZ != this.camera.worldMatrix[14]) {
+            this.cameraZ != this.camera.worldMatrix[14]
+        ) {
             this.cameraX = this.camera.worldMatrix[12]
             this.cameraY = this.camera.worldMatrix[13]
             this.cameraZ = this.camera.worldMatrix[14]
@@ -260,37 +261,37 @@ class WebglGlobe {
 
         let screenPos = vec3.create()
         this.markers.forEach((marker, i) => {
-            vec3.set(screenPos, marker.position[0], marker.position[1], marker.position[2] )
+            vec3.set(screenPos, marker.position[0], marker.position[1], marker.position[2])
             vec3.transformMat4(screenPos, screenPos, this.viewProjectionMatrix)
 
-            let x = ( (screenPos[0] + 1) / 2) * this.width
+            let x = ((screenPos[0] + 1) / 2) * this.width
             let y = (1. - (screenPos[1] + 1) / 2) * this.height
 
             let N = vec3.create()
-            vec3.set( N, marker.position[0], marker.position[1], marker.position[2] )
+            vec3.set(N, marker.position[0], marker.position[1], marker.position[2])
-            vec3.normalize( N, N )
+            vec3.normalize(N, N)
 
             let V = vec3.create()
-            vec3.set( V, marker.position[0], marker.position[1], marker.position[2] )
+            vec3.set(V, marker.position[0], marker.position[1], marker.position[2])
-            vec3.subtract( V, V, this.cameraPosition )
+            vec3.subtract(V, V, this.cameraPosition)
-            vec3.normalize( V, V )
+            vec3.normalize(V, V)
 
             //behind
-            if ( vec3.dot( V, N ) * -1 < 0 ) {
+            if (vec3.dot(V, N) * -1 < 0) {
                 let dir = vec2.create()
-                vec2.set( dir, x, y )
+                vec2.set(dir, x, y)
                 let center = vec2.create()
-                vec2.set( center, this.width/2, this.height/2 )
+                vec2.set(center, this.width/2, this.height/2)
                 let dir2d = vec2.clone(dir, dir)
-                vec2.subtract( dir2d, dir2d, center )
+                vec2.subtract(dir2d, dir2d, center)
-                vec2.normalize( dir2d, dir2d )
+                vec2.normalize(dir2d, dir2d)
-                vec2.scale( dir2d, dir2d, this.circleScreenSize )
+                vec2.scale(dir2d, dir2d, this.circleScreenSize)
                 vec2.add(dir2d, dir2d, center)
                 marker.el.style.transform = `translate(${dir2d[0]}px, ${dir2d[1]}px) translateZ(0)`
                 marker.el.classList.remove('is-active')
             }
             else {
-                //vec3.dot( V, N ) * -1 < 0 ? (1 - vec3.dot( V, N ) / 0.1 ) : 1;//Math.max( 0, vec3.dot( N, V ) );
+                //vec3.dot(V, N) * -1 < 0 ? (1 - vec3.dot(V, N) / 0.1) : 1;//Math.max(0, vec3.dot(N, V));
                 marker.el.style.transform = `translate(${x}px, ${y}px) translateZ(0)`
                 marker.el.classList.add('is-active')
             }

src/molecules/InteractiveGlobe.svelte

@@ -31,7 +31,7 @@
             // Init the globe from library
             globe = new Globe({
                 el: scope,
-                texture: '/img/globe/map-2k.png',
+                texture: `/img/globe/map-${window.innerWidth >= 992 ? '4k' : '2k'}.png`,
                 markers: [...$locations.map(location => {
                     return {
                         name: location.name,
@@ -42,8 +42,8 @@
                         lng: location.coordinates.lng
                     }
                 })],
-                onLinkClicked: () => {},
+                cameraDistance: 3,
-                cameraDistance: 3
+                onLinkClicked: () => {}
             })
 
             // Run the globe

src/style/organisms/_locations.scss

@@ -47,19 +47,16 @@
         @include breakpoint (sm) {
             grid-template-columns: repeat(3, 1fr);
             grid-column-gap: pxVW(96);
-            grid-row-gap: pxVW(120);
+            grid-row-gap: pxVW(96);
-            // TODO: center alone locations on a row?
             min-height: 200px;
             margin-top: 112px;
             margin-bottom: pxVW(120);
         }
-        @include breakpoint (md) {
-            margin-bottom: pxVW(232);
-        }
         @include breakpoint (xl) {
             grid-template-columns: repeat(4, 1fr);
             grid-column-gap: 120px;
-            margin-bottom: 232px;
+            grid-row-gap: 120px;
+            margin-bottom: 184px;
         }
     }
 }