Removed WebGL requirment, etc. (#20)

* Removed WebGL requirement to run. * Provided slower but functional 2D-graphics fallback for rendering globe maps when WebGL is unavailable. * Improved browser compatibility checking, with specific Chrome, Firefox, and Safari minimum version requirements.
kshetline · May 16, 2022 · 345a989 · 345a989
1 parent 2cd3be0
commit 345a989
Show file tree

Hide file tree

Showing 9 changed files with 286 additions and 27 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 1.6.2
+
+* Relaxed browser requirements, with WebGL capability no long required.
+
 ## 1.6.1
 
 * Added ability to open info display from collapsed control panel.

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "prague-clock",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --configuration=development",

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -358,6 +358,10 @@ svg {
   top: 36.333%;
   transform: scale(-1, -1);
   width: 27.333%;
+
+  &.no-web-gl {
+    transform: unset;
+  }
 }
 
 @media

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { ConfirmationService, MenuItem, MessageService, PrimeNGConfig } from 'primeng/api';
 import { abs, floor, max, min, mod, mod2 } from '@tubular/math';
 import {
-  clone, extendDelimited, forEach, getCssValue, isAndroid, isEqual, isIOS, isLikelyMobile, isMacOS, isObject, isSafari,
+  clone, extendDelimited, forEach, getCssValue, isAndroid, isEqual, isIOS, isLikelyMobile, isMacOS, isObject, isSafari, noop,
   processMillis
 } from '@tubular/util';
 import { AngleStyle, DateTimeStyle, TimeEditorOptions } from '@tubular/ng-widgets';
@@ -865,7 +865,7 @@ export class AppComponent implements OnInit, SettingsHolder, SvgHost {
   }
 
   private updateGlobe(): void {
-    this.globe.orient(this._longitude, this.latitude).finally();
+    this.globe.orient(this._longitude, this.latitude).catch(noop);
   }
 
   updateTime(forceUpdate = false): void {

diff --git a/src/assets/incompatible.html b/src/assets/incompatible.html
@@ -29,6 +29,13 @@
 </head>
 <body>
   <div class="page">
+    <script>
+      // noinspection ES6ConvertVarToLetConst
+      var msg = (/\bmsg=([^&]*)/.exec(location.search) || [])[1];
+
+      if (msg)
+        document.write('<p style="color: red">' + decodeURIComponent(msg) + '</p>');
+    </script>
     <p>Your web browser does not have the capabilities needed to run the simulator.</p>
     <!-- cspell:disable -->
     <p>Váš webový prohlížeč nemá schopnosti potřebné ke spuštění simulátoru.</p>