diff --git a/package.json b/package.json index cea2de9..e2134f7 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f805c27..07f0b9c 100644 --- a/pnpm-lock.yaml +++ b/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-commonjs': 11.0.2_rollup@2.3.4 - '@rollup/plugin-node-resolve': 7.1.1_rollup@2.3.4 - '@rollup/plugin-replace': 2.3.1_rollup@2.3.4 + '@rollup/plugin-alias': 3.0.1_rollup@2.4.0 + '@rollup/plugin-commonjs': 11.0.2_rollup@2.4.0 + '@rollup/plugin-node-resolve': 7.1.1_rollup@2.4.0 + '@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-plugin-babel: 4.4.0_@babel+core@7.9.0+rollup@2.3.4 + rollup: 2.4.0 + 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-terser: 5.3.0_rollup@2.3.4 + rollup-plugin-svelte: 5.2.1_rollup@2.4.0+svelte@3.20.1 + 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 diff --git a/src/globe/index.js b/src/globe/index.js index 30e9a32..a711309 100644 --- a/src/globe/index.js +++ b/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) { - var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex) +const hexToRgb = 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) { - var phi = (90-lat)*(Math.PI/180), - theta = (lng+180)*(Math.PI/180), - x = -( Math.sin(phi) * Math.cos(theta) ), - z = Math.sin(phi) * Math.sin(theta), - y = Math.cos(phi) +const lonLatToVector3 = (lng, lat) => { + const phi = (90 - lat) * (Math.PI / 180) + const theta = (lng + 180) * (Math.PI / 180) + const x = -(Math.sin(phi) * Math.cos(theta)) + const z = Math.sin(phi) * Math.sin(theta) + 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('sapper-noscroll','') + el.setAttribute('href', '/location/' + markers[i].countrySlug + '/' + markers[i].slug) + 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 ) - this.circleScreenSize = vec2.length( dir2d2 ) * 1.04 + vec2.subtract(dir2d2, dir2d2, center2) + 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.normalize( N, N ) + vec3.set(N, marker.position[0], marker.position[1], marker.position[2]) + vec3.normalize(N, N) let V = vec3.create() - vec3.set( V, marker.position[0], marker.position[1], marker.position[2] ) - vec3.subtract( V, V, this.cameraPosition ) - vec3.normalize( V, V ) + vec3.set(V, marker.position[0], marker.position[1], marker.position[2]) + vec3.subtract(V, V, this.cameraPosition) + 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.normalize( dir2d, dir2d ) - vec2.scale( dir2d, dir2d, this.circleScreenSize ) + vec2.subtract(dir2d, dir2d, center) + vec2.normalize(dir2d, dir2d) + 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') } diff --git a/src/molecules/InteractiveGlobe.svelte b/src/molecules/InteractiveGlobe.svelte index 5b9edc4..40d3c76 100644 --- a/src/molecules/InteractiveGlobe.svelte +++ b/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 diff --git a/src/style/organisms/_locations.scss b/src/style/organisms/_locations.scss index e5518b9..35bcade 100644 --- a/src/style/organisms/_locations.scss +++ b/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); - // TODO: center alone locations on a row? + grid-row-gap: pxVW(96); 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; } } }