Merge pull request #1 from kshetline/development

Update theme

Author: kshetline

.stylelintrc.json

@@ -5,12 +5,13 @@
   ],
   "rules": {
     "at-rule-no-unknown": null,
-    "scss/at-rule-no-unknown": true,
+    "declaration-block-single-line-max-declarations": null,
     "color-function-notation": null,
     "color-hex-case": "upper",
     "no-descending-specificity": null,
     "no-empty-source": null,
     "no-invalid-position-at-import-rule": null,
+    "scss/at-rule-no-unknown": true,
     "selector-class-pattern": null,
     "selector-descendant-combinator-no-non-space": null,
     "selector-list-comma-newline-after": null,

.vscode/settings.json

@@ -1,9 +1,23 @@
 {
   "cSpell.words": [
+    "arya",
     "CREPUSCULUM",
     "EQUISOLSTICE",
+    "habs",
+    "inputtext",
+    "Kyiv",
+    "NOCTIS",
     "OCCASUS",
+    "orloj",
     "ORTUS",
-    "Recents"
+    "Pražský",
+    "primeicons",
+    "primeng",
+    "radiobutton",
+    "Rafie",
+    "Recents",
+    "subzone",
+    "subzones",
+    "Tošovský"
   ]
-}
+}

CHANGELOG.md

@@ -0,0 +1,8 @@
+## 1.0.1
+
+* Updated color theme for controls.
+* Minor documentation changes.
+
+## 1.0.0
+
+* Original release

README.md

@@ -1,27 +1,9 @@
-# PragueClock
+# Prague Astronomical Clock Simulator
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.2.5.
+This is a simulation of the world-famous Prague Astronomical Clock *(Pražský Orloj)*, a medieval astronomical clock first installed in 1410, and still running today (with periods of disrepair and various renovations over that span of time).
 
-## Development server
+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.
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+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.
 
-## Code scaffolding
-
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
-
-## Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+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

@@ -31,7 +31,7 @@
               "src/assets"
             ],
             "styles": [
-              "node_modules/primeng/resources/themes/nova/theme.css",
+              "node_modules/primeng/resources/themes/arya-blue/theme.css",
               "node_modules/primeng/resources/primeng.min.css",
               "node_modules/primeicons/primeicons.css",
               "node_modules/@tubular/ng-widgets/assets/styles.css",

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "prague-clock",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

package.json

@@ -1,4 +1,4 @@
-<div class="controls" [class.short]="lastHeight <= 420 && lastHeight > 380" [class.extra-short]="lastHeight <= 380">
+<div class="controls tbw-dark-mode" [class.short]="lastHeight <= 420 && lastHeight > 380" [class.extra-short]="lastHeight <= 380">
   <div class="place-name-group">
     <span *ngIf="!canSaveName && placeName" class="place-name">{{placeName}}</span>
     <span *ngIf="!canSaveName && !placeName" class="no-name">No name provided</span>
@@ -20,6 +20,7 @@
       wideSpinner
       (click)="checkIfTimeIsEditable()"
       pTooltip='Uncheck on "Track current time" to modify the time'
+      tooltipPosition="bottom"
       [tooltipDisabled]="!trackTime"
       [options]="isoFormat ? ISO_OPTS : LOCAL_OPTS"
       [viewOnly]="trackTime"
@@ -29,13 +30,13 @@
     <i class="pi pi-caret-right" (click)="skipToEvent()"></i>
   </div>
   <div class="button-row">
-    <p-checkbox [(ngModel)]="isoFormat" [binary]="true" label="ISO input format"></p-checkbox>
+    <p-checkbox [(ngModel)]="isoFormat" [binary]="true" label="ISO time format"></p-checkbox>
     <p-checkbox [(ngModel)]="disableDst" [binary]="true" label="Disable DST on clock" (onChange)="updateTime(true)"></p-checkbox>
   </div>
   <tze-zone-selector [(ngModel)]="zone" [recents]="recentLocations" (clearItem)='clearItem($event)' (clearRecents)="clearRecents()"
       [autofocus]="false" [disabled]="canSaveName" (location)="changeLocation($event)"></tze-zone-selector>
-  <div class="button-row">
-    <p-checkbox [(ngModel)]="trackTime" [binary]="true" label="Track current time"></p-checkbox>
+  <div class="button-row time-row">
+    <p-checkbox [(ngModel)]="trackTime" [binary]="true" label="Track current time"></p-checkbox><span>&nbsp;&nbsp;</span>
     <button type="button" pButton (click)="setNow()" [disabled]="trackTime">Now</button>
   </div>
   <div class="button-row">
@@ -46,8 +47,6 @@
   </div>
 </div>
 
-<div id="graphics-credit">Original SVG clock graphics by Jan Tošovský</div>
-
 <div id="svg-wrapper">
   <svg viewBox="0 0 600 600" xml:space="preserve">
     <defs>
@@ -167,6 +166,7 @@
           <path id="sunrisePath" [attr.d]="sunriseLabelPath" class="textPath"/>
           <path id="sunsetPath" [attr.d]="sunsetLabelPath" class="textPath"/>
           <path id="solNoctis" [attr.d]="solNoctisPath" class="textPath"/>
+          <!-- cspell:disable -->
           <text>
             <textPath xlink:href="#sunrisePath" [attr.startOffset]="southern ? '40%' : '54%'" class="eventText">
               <tspan [style.font-size]="riseSetFontSize">ɐɑɒɓɔ</tspan><!-- ORTUS -->
@@ -192,6 +192,7 @@
               <tspan dy="-2" [style.font-size]="'12px'">ⓈⓄⓁ&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ⓃⓄⒸⓉⒾⓈ</tspan><!-- CREPUSCULUM -->
             </textPath>
           </text>
+          <!-- cspell:enable -->
         </g>
         <g id="time">
           <path id="timeTextPath" d="M0.0 -221.0C122.0 -221.0 221.0 -122.0 221.0 0.0C221.0 122.0 122.0 221.0 0.0 221.0C-122.0 221.0 -221.0 122.0 -221.0 0.0C-221.0 -122.0 -122.0 -221.0 0.0 -221.0" class="textPath"/>
@@ -608,5 +609,7 @@
   </svg>
 </div>
 
+<div id="graphics-credit">Original SVG clock graphics by Jan Tošovský</div>
+
 <p-toast position="center"></p-toast>
 <p-confirmDialog header="Change time"></p-confirmDialog>

src/app/app.component.html

@@ -16,7 +16,8 @@ p-toast, p-confirmDialog {
 .controls {
   align-items: center;
   align-self: start;
-  background-color: white;
+  background-color: #121212;
+  color: rgba(white, 0.87);
   display: flex;
   flex-direction: column;
   font: 14px sans-serif;
@@ -189,6 +190,7 @@ svg {
   display: flex;
   flex-direction: row;
   gap: 4px;
+  margin-bottom: 0.67rem;
 }
 
 #graphics-credit {

src/app/app.component.scss

@@ -15,11 +15,4 @@ describe('AppComponent', () => {
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.content span')?.textContent).toContain('prague-clock app is running!');
-  });
 });