New 1410 look, more (#7)

* New appearance option designed to reflect the likely original appearance of the clock in 1410.
* Color adjustments of previous themes.
* Fix for the originally skewed angles of the original SVG ecliptic wheel graphics.

Author: kshetline

CHANGELOG.md

@@ -1,3 +1,11 @@
+## 1.4.1
+
+* Fix skewed ecliptic wheel angles than had been baked into the original SVG graphics.
+
+## 1.4.0
+
+* New option for a speculated original 1410 appearance of the orloj.
+
 ## 1.3.3
 
 * Added ecliptic longitude tooltips to the large sun and moon icons, instead of just the smaller true positions markers.

README.md

@@ -4,6 +4,6 @@ This is a simulation of the world-famous Prague Astronomical Clock *(Pražský O
 
 The real, physical clock is designed to run at the particular latitude of Prague, which is about 50°N. This simulator, however, can be set for any location on Earth, and you can either show the current time, or set a particular time to see how that time would be displayed.
 
-The positioning of the simulator’s clock hands, hour dial, sun, moon, and ecliptic wheel are done using your computer’s clock and modern astronomical calculations, rather than simulating the internal gearing of the mechanical clock.
+The positioning of the simulator’s clock hands, hour dial, sun, moon, and ecliptic wheel are by default done using your computer’s clock and modern astronomical calculations, but mechanical clock timing can also be approximately simulated.
 
 The original SVG clock graphics and font used here were originally developed by Jan Tošovský, as found on [this website](https://drifted.in/horologium-app/).

angular.json

@@ -59,18 +59,6 @@
           },
           "configurations": {
             "production": {
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "1500kb",
-                  "maximumError": "3mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "8kb",
-                  "maximumError": "10kb"
-                }
-              ],
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",

messages.xlf

@@ -1,6 +1,6 @@
 {
   "name": "prague-clock",
-  "version": "1.3.3",
+  "version": "1.4.1",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --configuration=development",

package-lock.json

@@ -1,8 +1,13 @@
 $app-background: #4D4D4D;
 $controls-background: #121212;
 $controls-text: rgba(white, 0.87);
+$dark-background-1410: #070707;
 $dark-background-2018: #132532;
-$dark-metal: #3B3A37;
+$dark-metal: #575652;
+$dark-metal-1410: #333;
 $metal-edge: rgba(#2B2B2B, 0.8);
-$gold-trim: #FFE696;
+$gold-trim: #FFEAA6;
+$gold-trim-1410: #C5A987;
+$gold-trim-2018: #FFECAE;
+$sky-color-1410: #73AABF;
 $sky-color-2018: #2F9DE7;

package.json

@@ -1,18 +1,17 @@
 <i class="pi pi-times closer" (click)="hide()"></i>
 <div i18n class="header">Advanced Options</div>
 
-<div class="colors">
-  <p-radioButton [value]="true" [(ngModel)]="settingsHolder.post2018"
-      i18n-label label="Post-2018 colors"></p-radioButton>
-  <p-radioButton [value]="true" [(ngModel)]="pre2018"
-      i18n-label label="Pre-2018 colors"></p-radioButton>
-</div>
-
-<div class="map-and-colors">
-  <p-checkbox [(ngModel)]="settingsHolder.hideMap" [binary]="true" [disabled]="!settingsHolder.post2018"
-      i18n-label label="Hide globe map"></p-checkbox>
-  <label i18n for="app-background">Background</label>
-  <input id="app-background" name="clock-background" type="color" [(ngModel)]="settingsHolder.background">
+<div class="appearance">
+  <p-dropdown tzeDropdownFix [autoDisplayFirst]="false"
+     [style]="{ 'min-width': '250px', 'max-width': '290px' }"
+     [options]="appearanceOptions" [(ngModel)]="settingsHolder.appearance" appendTo="body"></p-dropdown>
+  <div class="background-input-wrapper">
+    <div class="reset" (click)="settingsHolder.background = '#4D4D4D'">
+      <i class="pi pi-undo" [style.opacity]="settingsHolder.background === '#4D4D4D' ? '0' : '1'"></i>
+    </div>
+    <label i18n for="app-background">Background</label>
+    <input id="app-background" name="clock-background" type="color" [(ngModel)]="settingsHolder.background">
+  </div>
 </div>
 
 <p-checkbox [(ngModel)]="settingsHolder.translucentEcliptic" [binary]="true"

src/_colors.scss

@@ -29,26 +29,38 @@
   top: 0;
 }
 
-.colors {
+.appearance {
   align-items: center;
   display: flex;
   flex-direction: row;
+  justify-content: space-between;
   gap: 1em;
+  width: 100%;
 }
 
-.map-and-colors {
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  gap: 1em;
-  margin-left: 3em;
-  margin-top: -0.5em;
+.spacer {
+  height: 0.33em;
 }
 
-:lang(de).map-and-colors {
-  margin-left: 1em;
-}
+.background-input-wrapper {
+  position: relative;
 
-.spacer {
-  height: 0.33em;
+  label {
+    position: absolute;
+    right: 0;
+    top: calc(100% + 0.5em);
+  }
+
+  .reset {
+    bottom: 0;
+    left: -2em;
+    position: absolute;
+    top: 0;
+    width: 2em;
+
+    i {
+      position: relative;
+      top: 0.33em;
+    }
+  }
 }

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

@@ -1,14 +1,16 @@
 import { Component, ElementRef } from '@angular/core';
 
+export enum Appearance { CURRENT, CURRENT_NO_MAP, PRE_2018, ORIGINAL_1410 }
 export enum Timing { MODERN, MECHANICAL_ORIGINAL, MECHANICAL_UPDATED }
 
 export interface SettingsHolder {
   additionalPlanets: boolean;
+  appearance: Appearance;
   background: string;
   detailedMechanism: boolean;
   fasterGraphics: boolean;
-  hideMap: boolean;
-  post2018: boolean;
+  hideMap?: boolean;
+  post2018?: boolean;
   realPositionMarkers: boolean;
   showInfoPanel: boolean;
   timing: Timing;
@@ -27,6 +29,13 @@ export class AdvancedOptionsComponent {
 
   private shown = false;
 
+  appearanceOptions = [
+    { label: $localize`Post-2018 colors`, value: Appearance.CURRENT },
+    { label: $localize`Post-2018 colors, no map`, value: Appearance.CURRENT_NO_MAP },
+    { label: $localize`Pre-2018 colors`, value: Appearance.PRE_2018 },
+    { label: $localize`Original 1410 look?`, value: Appearance.ORIGINAL_1410 }
+  ];
+
   settingsHolder: SettingsHolder;
 
   constructor(private elementRef: ElementRef) {}
@@ -49,9 +58,6 @@ export class AdvancedOptionsComponent {
     }
   }
 
-  get pre2018(): boolean { return !this.settingsHolder.post2018; }
-  set pre2018(value: boolean) { this.settingsHolder.post2018 = !value; }
-
   clicker = (evt: MouseEvent): void => {
     const r = this.elementRef.nativeElement?.getBoundingClientRect();