disable select globally, update sphere visual, add css autoprefixer

package.json

@@ -51,7 +51,7 @@
         "test": "jest"
     },
     "devDependencies": {
-        "@playcanvas/eslint-config": "^1.7.1",
+        "@playcanvas/eslint-config": "^1.7.4",
         "@playcanvas/pcui": "^4.4.0",
         "@rollup/plugin-alias": "^5.1.0",
         "@rollup/plugin-image": "^3.0.3",
@@ -61,15 +61,17 @@
         "@rollup/plugin-terser": "^0.4.4",
         "@rollup/plugin-typescript": "^11.1.6",
         "@types/wicg-file-system-access": "^2023.10.5",
-        "@typescript-eslint/eslint-plugin": "^7.15.0",
-        "@typescript-eslint/parser": "^7.15.0",
+        "@typescript-eslint/eslint-plugin": "^8.0.1",
+        "@typescript-eslint/parser": "^8.0.1",
+        "autoprefixer": "^10.4.20",
         "concurrently": "^8.2.2",
         "cors": "^2.8.5",
         "cross-env": "^7.0.3",
-        "eslint": "^8.56.0",
+        "eslint": "^9.8.0",
         "jest": "^29.7.0",
-        "playcanvas": "^1.73.1",
-        "rollup": "^4.18.0",
+        "playcanvas": "^1.73.4",
+        "postcss": "^8.4.41",
+        "rollup": "^4.20.0",
         "rollup-plugin-sass": "^1.13.0",
         "rollup-plugin-visualizer": "^5.12.0",
         "serve": "^14.2.3",

rollup.config.mjs

@@ -7,9 +7,12 @@ import resolve from '@rollup/plugin-node-resolve';
 import strip from '@rollup/plugin-strip';
 import typescript from '@rollup/plugin-typescript';
 import json from '@rollup/plugin-json';
-import sass from 'rollup-plugin-sass';
 // import { visualizer } from 'rollup-plugin-visualizer';
 
+import autoprefixer from 'autoprefixer';
+import postcss from 'postcss';
+import sass from 'rollup-plugin-sass';
+
 // prod is release build
 if (process.env.BUILD_TYPE === 'prod') {
     process.env.BUILD_TYPE = 'release';
@@ -66,7 +69,12 @@ const application = {
         image({dom: false}),
         sass({
             output: false,
-            insert: true
+            insert: true,
+            processor: (css) => {
+                return postcss([autoprefixer])
+                        .process(css)
+                        .then(result => result.css);
+            }
         }),
         json(),
         typescript({

src/sphere-shape.ts

@@ -60,22 +60,22 @@ const fsCode = /* glsl */ `
         return vec2(azimuth, elev) * 180.0 / 3.14159;
     }
 
-    bool strips(vec3 lp) {
-        vec2 ae = calcAzimuthElev(normalize(lp));
-
-        float spacing = 10.0;
-        float size = 0.25 / spacing;
-        return fract(ae.x / spacing) > size &&
-               fract(ae.y / spacing) > size;
-    }
-
     uniform sampler2D blueNoiseTex32;
     uniform vec3 view_position;
     uniform mat4 matrix_viewProjection;
     uniform vec4 sphere;
 
     varying vec3 fragWorld;
 
+    bool strips(vec3 lp) {
+        vec2 ae = calcAzimuthElev(normalize(lp));
+
+        float spacing = 180.0 / (2.0 * 3.14159 * sphere.w);
+        float size = 0.03;
+        return fract(ae.x / spacing) > size &&
+               fract(ae.y / spacing) > size;
+    }
+
     void behind(vec3 ray, float t) {
         vec3 wp = view_position + ray * t;
         if (strips(wp - sphere.xyz) || noise(gl_FragCoord.yx, blueNoiseTex32) < 0.125) {

src/ui/menu-panel.scss

@@ -11,6 +11,9 @@
 
     background-color: $bcg-dark;
     filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.8));
+
+    // the following is needed to get drop-shadow working on safari
+    will-change: transform;
 }
 
 .menu-row {

src/ui/menu.ts

@@ -8,8 +8,7 @@ class Menu extends Container {
     constructor(events: Events, args = {}) {
         args = {
             ...args,
-            id: 'menu',
-            class: 'unselectable'
+            id: 'menu'
         };
 
         super(args);

src/ui/popup.scss

@@ -21,6 +21,9 @@
 
         filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.8));
 
+        // the following is needed to get drop-shadow working on safari
+        will-change: transform;
+
         #popup-header {
             height: 32px;
             line-height: 32px;

src/ui/style.scss

@@ -24,13 +24,6 @@ $bcg-darkest: #181818;
 
 * {
     font-size: 12px;
-}
-
-*.unselectable {
-    -moz-user-select: none;
-    -khtml-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
     user-select: none;
 }