New option to step one sidereal day at a time (instead of 24 hours at a time)...

* New option to step one sidereal day at a time (instead of 24 hours at a time) during high-speed animation.
* Auto-repeat on backward/forward event buttons.
* Improved event messages.

Author: kshetline

.eslintrc.json

@@ -138,10 +138,6 @@
         "sourceType": "module"
       },
       "rules": {
-        "@typescript-eslint/consistent-type-assertions": "off",
-        "@typescript-eslint/explicit-function-return-type": "off",
-        "@typescript-eslint/indent": "off",
-        "@typescript-eslint/no-unused-vars": "off",
         "indent": [
           "error",
           2,
@@ -155,17 +151,6 @@
           }
         ]
       }
-    },
-    {
-      "files": ["*.es5.js"],
-      "env": {
-        "browser": true
-      },
-      "rules": {
-        "no-eval": "off",
-        "no-template-curly-in-string": "off",
-        "no-var": "off"
-      }
     }
   ]
 }

.vscode/settings.json

@@ -25,6 +25,7 @@
     "recalibrated",
     "recalibrations",
     "Recents",
+    "stylelint",
     "subzone",
     "subzones",
     "tieredmenu",
@@ -33,4 +34,4 @@
     "tspan"
   ],
   "xliffSync.baseFile": "messages.xlf"
-}
+}

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 1.7.0
+
+* New option to step one sidereal day at a time (instead of 24 hours at a time) during high-speed animation.
+* Auto-repeat on backward/forward event buttons.
+* Improved event messages.
+
 ## 1.6.2
 
 * Relaxed browser requirements, with WebGL capability no long required.

messages.xlf

@@ -1,6 +1,6 @@
 {
   "name": "prague-clock",
-  "version": "1.6.8",
+  "version": "1.7.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --configuration=development",
@@ -52,7 +52,7 @@
     "@angular/cli": "~13.2.5",
     "@angular/compiler-cli": "~13.2.0",
     "@angular/localize": "^13.2.7",
-    "@tubular/browser-check": "^1.1.0",
+    "@tubular/browser-check": "^1.2.0",
     "@types/jasmine": "~3.10.6",
     "@types/node": "^12.20.50",
     "@types/three": "^0.139.0",
@@ -75,4 +75,4 @@
     "stylelint-scss": "^4.2.0",
     "typescript": "~4.5.5"
   }
-}
+}

package-lock.json

@@ -20,6 +20,9 @@
 <p-checkbox [(ngModel)]="settingsHolder.detailedMechanism" [binary]="true"
     i18n-label label="Mechanically detailed clock face"></p-checkbox>
 
+<p-checkbox [(ngModel)]="settingsHolder.animateBySiderealDays" [binary]="true"
+    i18n-label label="Fast animation uses sidereal days"></p-checkbox>
+
 <p-checkbox [(ngModel)]="settingsHolder.fasterGraphics" [binary]="true"
     i18n-label label="Faster graphics / less shading"></p-checkbox>
 

package.json

@@ -5,6 +5,7 @@ export enum Timing { MODERN, MECHANICAL_ORIGINAL, MECHANICAL_UPDATED, CONSTRAINE
 
 export interface SettingsHolder {
   additionalPlanets: boolean;
+  animateBySiderealDays: boolean;
   appearance: Appearance;
   background: string;
   detailedMechanism: boolean;

src/advanced-options/advanced-options.component.html

@@ -20,7 +20,8 @@
       <i *ngIf="canSaveName" class="pi pi-undo" (click)="cancelEdit()"></i>
     </div>
     <div class="time-row">
-      <i class="pi pi-caret-left" (click)="skipToEvent(true)"></i>
+      <i class="pi pi-caret-left" (touchstart)="eventClick($event, true)" (touchend)="eventClick($event)"
+          (mousedown)="eventClick($event, true)" (mouseup)="eventClick($event)" (mouseleave)="eventClick()"></i>
       <tbw-time-editor
         [max]="MAX_YEAR + '-12-31'"
         [min]="MIN_YEAR + '-01-01'"
@@ -35,7 +36,8 @@
         [timezone]="getZone()"
         [disableMobileKeyboard]="suppressOsKeyboard"
         [(ngModel)]="time"></tbw-time-editor>
-      <i class="pi pi-caret-right" (click)="skipToEvent()"></i>
+      <i class="pi pi-caret-right" (touchstart)="eventClick($event)" (touchend)="eventClick($event)"
+          (mousedown)="eventClick($event)" (mouseup)="eventClick($event)" (mouseleave)="eventClick()"></i>
     </div>
     <div class="button-row">
       <p-checkbox [(ngModel)]="isoFormat" [binary]="true"
@@ -667,6 +669,6 @@
 
   <div i18n id="graphics-credit">Original SVG clock graphics by Jan Tošovský</div>
 
-  <p-toast position="center"></p-toast>
+  <p-toast position="bottom-center" [showTransitionOptions]="'0ms'" [hideTransitionOptions]="'0ms'"></p-toast>
   <p-confirmDialog i18n-header header="Change time"></p-confirmDialog>
 </div>

src/advanced-options/advanced-options.component.ts

@@ -19,14 +19,18 @@ import { faForward, faPlay, faStop } from '@fortawesome/free-solid-svg-icons';
 import { AdvancedOptionsComponent, Appearance, SettingsHolder, Timing }
   from '../advanced-options/advanced-options.component';
 import {
-  adjustForEclipticWheel, AngleTriplet, BasicPositions, calculateBasicPositions, calculateMechanicalPositions, MILLIS_PER_DAY,
-  solarSystem, ZeroAngles
+  adjustForEclipticWheel, AngleTriplet, BasicPositions, calculateBasicPositions, calculateMechanicalPositions,
+  MILLIS_PER_DAY, MILLIS_PER_SIDEREAL_DAY, solarSystem, ZeroAngles
 } from 'src/math/math';
 import { adjustGraphicsForLatitude, initSvgHost, sunlitMoonPath, SvgHost } from 'src/svg/svg';
 import { sizeChanges } from '../main';
+import { Subscription, timer } from 'rxjs';
 
 const { DATE, DATETIME_LOCAL, julianDay, TIME } = ttime;
 
+const CLICK_REPEAT_DELAY = 500;
+const CLICK_REPEAT_RATE  = 100;
+
 const RESUME_FILTERING_DELAY = 1000;
 const SIMPLE_FILTER_IS_SLOW_TOO = isAndroid() || (isSafari() && isMacOS());
 const STOP_FILTERING_DELAY = SIMPLE_FILTER_IS_SLOW_TOO ? 1000 : 3000;
@@ -44,6 +48,7 @@ const pragueLon = 14.4185;
 
 const defaultSettings = {
   additionalPlanets: false,
+  animateBySiderealDays: false,
   appearance: Appearance.CURRENT,
   background: '#4D4D4D',
   collapsed: false,
@@ -161,7 +166,9 @@ export class AppComponent implements OnInit, SettingsHolder, SvgHost {
   private _background = '#4D4D4D';
   private _collapsed = false;
   private delayedCollapse = false;
+  private eventClickTimer: Subscription;
   private eventFinder = new EventFinder();
+  private eventGoBack = false;
   private eventType = EventType.EQUISOLSTICE;
   private globe: Globe
   private graphicsChangeLastTime = -1;
@@ -222,6 +229,7 @@ export class AppComponent implements OnInit, SettingsHolder, SvgHost {
   self: AppComponent & SvgHost = this;
 
   altFour = false;
+  animateBySiderealDays = false;
   bohemianTime = '';
   canEditName = false;
   canSaveName = false;
@@ -615,7 +623,13 @@ export class AppComponent implements OnInit, SettingsHolder, SvgHost {
   }
 
   stop(): void {
-    this.playing = false;
+    if (this.playing) {
+      this.playing = false;
+
+      // Round time to the nearest whole minute when animation stops.
+      if (this.playSpeed === PlaySpeed.FAST)
+        this.time = floor((this.time + 30000) / 60000) * 60000;
+    }
   }
 
   private playStep = (): void => {
@@ -627,7 +641,8 @@ export class AppComponent implements OnInit, SettingsHolder, SvgHost {
     if (this.playSpeed === PlaySpeed.NORMAL)
       this.time = this.playTimeBase + floor(elapsed / 25) * 60_000;
     else
-      this.time = this.playTimeBase + floor(elapsed / 100) * MILLIS_PER_DAY;
+      this.time = this.playTimeBase + floor(elapsed / 100) *
+        (this.animateBySiderealDays ? MILLIS_PER_SIDEREAL_DAY : MILLIS_PER_DAY);
 
     if (this.lastWallTime && this.lastWallTime.y === this.MAX_YEAR &&
         this.lastWallTime.m === 12 && this.lastWallTime.d === 31)
@@ -1079,8 +1094,42 @@ export class AppComponent implements OnInit, SettingsHolder, SvgHost {
     this.canSaveName = false;
   }
 
-  skipToEvent(previous = false): void {
+  eventClick(evt?: TouchEvent | MouseEvent, goBack = false): void {
+    if (!evt)
+      this.stopEventClickTimer();
+    else if (evt?.type === 'touchstart' || evt?.type === 'mousedown') {
+      if (evt.type === 'touchstart' && evt.cancelable)
+        evt.preventDefault();
+
+      this.eventGoBack = goBack;
+
+      if (!this.eventClickTimer) {
+        this.eventClickTimer = timer(CLICK_REPEAT_DELAY, CLICK_REPEAT_RATE).subscribe(() => {
+          this.skipToEvent(this.eventGoBack);
+        });
+      }
+    }
+    else if (evt?.type === 'touchend' || evt?.type === 'mouseup') {
+      if (evt.type === 'touchend' && evt.cancelable)
+        evt.preventDefault();
+
+      if (this.eventClickTimer) {
+        this.stopEventClickTimer();
+        this.skipToEvent(this.eventGoBack);
+      }
+    }
+  }
+
+  private stopEventClickTimer(): void {
+    if (this.eventClickTimer) {
+      this.eventClickTimer.unsubscribe();
+      this.eventClickTimer = undefined;
+    }
+  }
+
+  private skipToEvent(previous: boolean): void {
     if (this.trackTime) {
+      this.stopEventClickTimer();
       this.confirmService.confirm({
         message: $localize`Turn off "Track current time" and change the clock time?`,
         accept: () => {
@@ -1122,12 +1171,14 @@ export class AppComponent implements OnInit, SettingsHolder, SvgHost {
       const eventText = AppComponent.translateEvent(evt.eventText);
       const year = new DateTime(evt.eventTime.utcMillis, this.zone).wallTime.year;
 
+      this.messageService.clear();
+
       if (year < this.MIN_YEAR || year > this.MAX_YEAR)
         this.messageService.add({ severity: 'error', summary: $localize`Event`,
                                   detail: $localize`Event outside of ${this.MIN_YEAR}-${this.MAX_YEAR} year range.` });
       else {
         this.time = evt.eventTime.utcMillis;
-        this.messageService.add({ severity: 'info', summary: $localize`Event`, detail: eventText, life: 1000 });
+        this.messageService.add({ severity: 'info', summary: $localize`Event`, detail: eventText });
       }
     }
   }