UI updates

src/BlazeStarNova.vue

@@ -99,6 +99,7 @@
         <div id="right-buttons">
           <v-chip
             v-if="crbBelowHorizon"
+            class="chip-text"
           >
             Corona Borealis is Set
           </v-chip>
@@ -170,14 +171,14 @@
       <!-- This block contains the elements (e.g. the project icons) displayed along the bottom of the screen -->
 
       <div id="bottom-content">
-        <credit-logos style="margin:1em;" logo-size="25px"/>
+        <credit-logos v-if="!smAndDown" style="margin:1em;" logo-size="25px"/>
 
         <div style="flex-grow:1;"></div>
 
         <icon-button 
           :fa-icon="timePlaying ? 'pause' : 'play'"
           :color="buttonColor" 
-          tooltip-text="Let time move forward"
+          :tooltip-text="timePlaying ? 'Pause time' : 'Let time move forward'"
           tooltip-location="start" 
           @activate="()=>{playbackControl.togglePlay()}" 
           style="align-self: center;"
@@ -200,7 +201,8 @@
                 rounded="lg"
                 elevation="5"
                 >
-                <time-display :date="localSelectedDate" ampm show-timezone :timezone="shortTimezone" />
+                <time-display :date="localSelectedDate" ampm show-timezone :timezone="shortTimezone" 
+                :smAndDown="smAndDown"/>
                 <v-icon class="td__icon">mdi-cursor-default-click</v-icon>
               </v-card>
             </template>
@@ -241,8 +243,10 @@
         :touchscreen="touchscreen"
         :show-blaze-overlay="showBlazeOverlay"
         :show-alpha-overlay="showAlphaOverlay"
-        @toggle-blaze="() => store.gotoRADecZoom({ raRad: crbPlace.get_RA() * 15 * D2R, decRad: crbPlace.get_dec() * D2R, zoomDeg: 90, instant: false })"
-        @toggle-alpha="() => store.gotoRADecZoom({ raRad: 233.6719500 * D2R, decRad: 26.7146850 * D2R, zoomDeg: 90, instant: false })"
+        @toggle-blaze="() => store.gotoRADecZoom({ raRad: crbPlace.get_RA() * 15 * D2R, decRad: crbPlace.get_dec() * D2R, zoomDeg: 180, instant: false })"
+        @toggle-alpha="() => {
+          toggleAlpha();
+        }"
        />
 
 
@@ -287,7 +291,7 @@ playbackControl.pause();
 const { timePlaying } = playbackControl;
 
 const touchscreen = supportsTouchscreen();
-// const { smAndDown } = useDisplay();
+const { smAndDown } = useDisplay();
 
 
 
@@ -499,10 +503,6 @@ function getCrbAlt(when: Date | null = null) {
   return crbAltAz.altRad;
 }
 
-/* Properties related to device/screen characteristics */
-// TODO: This seems to be giving the wrong value? Investigate why
-// const smallSize = computed(() => smAndDown);
-
 /* This lets us inject component data into element CSS */
 const cssVars = computed(() => {
   // get the text-bottom-sheet id height and subtract it from 100vh
@@ -631,6 +631,15 @@ function setMidnight(){
   selectedDate.value = time;
 }
 
+function toggleAlpha() {
+  store.gotoRADecZoom({ raRad: 233.6719500 * D2R, decRad: 26.7146850 * D2R, zoomDeg: 180, instant: false }).then(() => {
+    showAlphaOverlay.value = true;
+  }).then(() => {
+    setTimeout(() => {
+      showAlphaOverlay.value = false;
+    }, 5000);
+  });
+}
 
 watch(isTourPlaying, onTourPlayingChange);
 
@@ -668,8 +677,8 @@ watch(inNorthernHemisphere, (_inNorth: boolean) => resetAltAzGridText());
 }
 
 :root {
-  --default-font-size: clamp(0.9rem, min(2.2vh, 2.2vw), 1.4rem);
-  --default-line-height: clamp(1.3rem, min(2.8vh, 2.8vw), 2.1rem);
+  --default-font-size: ~"max(14px, calc(0.7em + 0.3vw))";
+  --default-line-height: ~"max(20px, calc(1em + 0.4vw))";
 }
 
 html {
@@ -679,7 +688,6 @@ html {
   background-color: #000;
   overflow: hidden;
 
-
   -ms-overflow-style: none;
   // scrollbar-width: none;
 }
@@ -721,7 +729,6 @@ p {
   height: 100%;
   margin: 0;
   overflow: hidden;
-  font-size: 11pt;
 
   .wwtelescope-component {
     position: absolute;
@@ -832,6 +839,18 @@ p {
   flex-grow: 1;
   gap: 10px;
   align-items: flex-end;
+  height: auto;
+}
+
+.chip-text {
+  font-size: var(--default-font-size) !important;
+  max-width: 33vw; 
+  white-space: normal; 
+  height: auto !important; 
+  padding-inline: 1em !important;
+  padding-block: 0.5em !important;
+  text-align: center;
+  border-radius: 20px;
 }
 
 #empty-space {
@@ -930,6 +949,7 @@ p {
       width: 150px;
     }
   }
+
   #controls-top-row {
     padding-left: 0.5em;
     display: flex;
@@ -999,9 +1019,10 @@ video {
 }
 
 .jl_icon_button_text {
-  font-size : 1.15em; 
+  font-size : var(--default-font-size) !important;
   padding-inline: 1em; 
-  max-width: 20ch; text-align: center;
+  max-width: 20ch; 
+  text-align: center;
 }
 
 .jl_debug {

src/BottomSheet.vue

@@ -22,20 +22,20 @@
             </p>
             <h4>How do I see this nova?</h4>
             <p>
-              The star that will become a nova is named "T Coronae Borealis." It is often referred to as "T CrB" for short and is also nicknamed, the "Blaze Star" (Go to <a href="#" @click.prevent="$emit('toggle-blaze')">T CrB</a>). As the name suggests, it is located within the constellation Corona Borealis, the "Northern Crown." <a href="#" onclick="return false;" @click="() => playTour()">This guide</a> explains how you can find Corona Borealis in your night sky.
+              The star that will become a nova is named "T Coronae Borealis." It is often referred to as "T CrB" for short and is also nicknamed the "Blaze Star" (Go to <a href="#" @click.prevent="$emit('toggle-blaze')">T CrB</a>). As the name suggests, it is located within the constellation Corona Borealis, the "Northern Crown." <a href="#" onclick="return false;" @click="() => playTour()">This guide</a> explains how you can find Corona Borealis in your night sky.
             </p>
             <!-- <v-btn @click="$emit('toggle-blaze')">{{ `${showBlazeOverlay ? 'Hide' : 'Show'} T CrB label` }}</v-btn> -->
             <p>
               On a clear night, go out and look for Corona Borealis, so you can get used to its U-shape in the sky. Once T CrB goes nova, which can be any day now, or possibly weeks or months from now, it will seem as if a new star appeared just to the lower left of the U shape of the constellation.
             </p>
             <h4>How bright will the nova be?</h4>
             <p>
-              At its normal brightness, T CrB is about a 10th magnitude star. This is about 30-40 times fainter than the faintest star a person could see from a dark sky, so you would need a telescope to see it. When it goes nova, it is predicted to be about 2-2.5 magnitudes. It is comparable in brightness to Alphecca (Go to <a href="#" @click.prevent="$emit('toggle-alpha')">Alphecca</a>), the brightest star you can see in the crown of Corona Borealis.(TODO: add a link to turn on the layer that shows the brightness comparison.)
+              At its normal brightness, T CrB is about a 10th magnitude star. This is about 30-40 times fainter than the faintest star a person could see from a dark sky, so you would need a telescope to see it. When it goes nova, it is predicted to be about 2-2.5 magnitudes. It is comparable in brightness to Alphecca (Go to <a href="#" @click.prevent="$emit('toggle-alpha')">Alphecca</a>), the brightest star you can see in the crown of Corona Borealis.
             </p>
             <!-- <v-btn @click="$emit('toggle-alpha')">{{ `${showAlphaOverlay ? 'Hide' : 'Show'} alpha label` }}</v-btn> -->
             <h4>What causes a nova?</h4>
             <p>
-              Novas occur in binary star systems where small, very dense, very hot stars called white dwarfs orbit another large star at close range. The graviational pull from the white dwarf can pull gas from the outer layers of the large companion star onto the surface of the white dwarf. When enough of this gas collects on the surface of the white dwarf, it triggers a nuclear explosion that causes the temporary brightening of the nova.
+              Novas occur in binary star systems where small, very dense, very hot stars called white dwarfs orbit another large star at close range. The gravitational pull from the white dwarf can pull gas from the outer layers of the large companion star onto the surface of the white dwarf. When enough of this gas collects on the surface of the white dwarf, it triggers a nuclear explosion that causes the temporary brightening of the nova.
             </p>
 
             <figure class="fig-right" style="width:40%;"> <!-- floats, the old magic, before flex-->

src/SplashScreen.vue

@@ -15,6 +15,9 @@
           <div id="splash-screen-logos">
             <credit-logos logo-size="5vmin" />
           </div>
+          <div id="image-credit">
+            Image credit: NASA / Goddard Space Flight Center
+          </div>
         </div>
       </div>
     </v-overlay>
@@ -141,6 +144,15 @@ function closeSplashScreen() {
       cursor: pointer;
     }
   }
+
+  #image-credit {
+    position: absolute;
+    bottom: 0.5rem;
+    left: -1rem;
+    font-size: calc(0.7 * var(--default-font-size));
+    font-weight: 400;
+    color: #DDDDDD;
+  }
 }
 
 

src/TimeDisplay.vue

@@ -1,7 +1,8 @@
 <template>
     <div class="td__container">
       <div class="td__time">
-        <span class="td__time_time">{{ pad(hours) }}:{{ pad(props.date.getMinutes()) }}:{{ pad(props.date.getSeconds()) }} {{ props.ampm ? ampm : '' }}</span>
+        <span v-if="!smAndDown" class="td__time_time">{{ pad(hours) }}:{{ pad(props.date.getMinutes()) }}:{{ pad(props.date.getSeconds()) }} {{ props.ampm ? ampm : '' }}</span>
+        <span v-if="smAndDown" class="td__time_time">{{ pad(hours) }}:{{ pad(props.date.getMinutes()) }} {{ props.ampm ? ampm : '' }}</span>
       </div>
       <div class="td__date">
         <span class="td__date_date">{{ props.date.getFullYear() }}-{{ pad(props.date.getMonth() + 1) }}-{{ pad(props.date.getDate()) }}</span>
@@ -26,6 +27,10 @@ const props = defineProps({
     default: Intl.DateTimeFormat().resolvedOptions().timeZone, 
     required: false 
   },
+  smAndDown: { 
+    type: Boolean, 
+    default: false, 
+    required: false }
 }
 );
 
@@ -67,7 +72,7 @@ const ampm = computed(() => {
 }
 
 .td__time_time {
-  font-size: 1em;
+  font-size: var(--default-font-size);
   color: inherit;
   text-align: center;
   text-wrap: nowrap;
@@ -79,7 +84,7 @@ const ampm = computed(() => {
 }
 
 .td__date_date {
-  font-size: 0.75em;
+  font-size: calc(0.85 * var(--default-font-size));
   color: inherit;
   text-align: center;
   text-wrap: nowrap;
@@ -91,7 +96,7 @@ const ampm = computed(() => {
 }
 
 .td__timezone_tz {
-  font-size: 0.75em;
+  font-size: calc(0.85 * var(--default-font-size));
   color: inherit;
   text-align: center;
   text-wrap: nowrap;

src/text.ts

@@ -10,7 +10,7 @@ export function makeTextOverlays(): Text3dBatch[] {
   const scale = 0.00018;
   const textItems = [
     ["T CrB, aka", "Blaze Star"],
-    ["Nova will", "become roughly", "this bright"],
+    ["Alphecca", "(Nova will", "become roughly", "this bright)"],
   ];
   const up = Vector3d.create(0, 1, 0);
   const locations = [
@@ -20,8 +20,9 @@ export function makeTextOverlays(): Text3dBatch[] {
     ],
     [
       Coordinates.raDecTo3d(15 + 24 / 60 + 41.268 / 3600, 25 + 42 / 60 + 52.89 / 3600),
-      Coordinates.raDecTo3d(15 + 24 / 60 + 41.268 / 3600, 24 + 27 / 60 + 52.89 / 3600),
-      Coordinates.raDecTo3d(15 + 24 / 60 + 41.268 / 3600, 23 + 12 / 60 + 52.89 / 3600),
+      Coordinates.raDecTo3d(15 + 24 / 60 + 41.268 / 3600, 24 + 17 / 60 + 52.89 / 3600),
+      Coordinates.raDecTo3d(15 + 24 / 60 + 41.268 / 3600, 23 + 2 / 60 + 52.89 / 3600),
+      Coordinates.raDecTo3d(15 + 24 / 60 + 41.268 / 3600, 21 + 47 / 60 + 52.89 / 3600),
     ]
   ];
   const batches = textItems.map(items => new Text3dBatch(glyphHeight));