Update cloud cover display

src/CloudCover.vue

@@ -0,0 +1,111 @@
+<script lang ="ts">
+import { defineComponent } from "vue";
+import { VIcon } from "vuetify/components/VIcon";
+// import { VTooltip } from "vuetify/components/VTooltip";
+
+export default defineComponent({
+  name: 'CloudCover',
+
+  components: {
+    'v-icon':VIcon,
+    // 'v-tooltip':VTooltip
+  },
+
+  props: {
+    cloudCover: {
+      type: Number || null,
+      required: true,
+      default: null
+    }
+  },
+
+
+  computed: {
+    cloudCoverFracToLabel() {
+      console.log(this.cloudCover);
+      if (this.cloudCover !== null) {
+        return `${(this.cloudCover * 100).toFixed(0)}%`;
+      }
+      return 'No data';
+    },
+
+    cloudIcon() {
+
+      if (this.cloudCover == null) {
+        return 'mdi-cloud-cancel';
+      } 
+      else if (this.cloudCover < .25) {
+        return 'mdi-weather-sunny';
+      }
+      else if (this.cloudCover < .5) {
+        return 'mdi-weather-partly-cloudy';
+      } 
+      else if (this.cloudCover < 0.9) {
+        return 'mdi-weather-cloudy';
+      } 
+      else {
+        return 'mdi-clouds';
+      } 
+    }
+  },
+
+
+});
+
+
+</script>
+
+
+<template>
+  <div class="cloud-cover-container my-2 py-1">
+    <div> 
+      <v-icon size="35">{{ cloudIcon }}</v-icon>
+    </div>
+
+    <div class="cloud-cover-label">
+      <div class="cloud-cover-label-text"> Median historical<br>cloud cover: </div>
+      <div class="cloud-cover-label-value">{{ cloudCoverFracToLabel }}</div>
+    </div>
+
+  </div>
+
+
+</template>
+
+
+<style>
+
+
+
+.cloud-cover-container {
+  display: flex;
+  height: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  outline: 1px solid var(--accent-color);
+}
+
+.cloud-cover-label {
+  display: flex;
+  align-items: center;
+  padding-left: 10px;
+}
+
+.cloud-cover-label-text {
+  font-size: calc(1.1 * var(--default-font-size));
+  font-weight: normal;
+  width: 70%;
+  text-align: center;
+}
+
+.cloud-cover-label-value {
+  font-size: calc(1.5 * var(--default-font-size));
+  margin-left: 1rem;
+  /* no text wrapping */
+  white-space: nowrap;
+  font-weight: bold;
+  width: 30%;
+}
+
+</style>

src/DefineTerm.vue

@@ -0,0 +1,72 @@
+
+import { tooltip } from 'leaflet';
+<template>
+  <v-tooltip 
+    width="25ch"
+    :open-on-click="true"
+    :open-on-hover="true"
+    :open-on-focus="true"
+    >
+    <template v-slot:activator="{props}" >
+      <div :class="['define-term-tooltip', inline ? 'inline' : '']" v-bind="props">
+        <slot name="term">
+          {{ term }}
+        </slot>
+      </div>
+    </template>
+
+    <div class="define-term-tooltip definition" v-html="definition">
+    </div>
+
+    </v-tooltip>
+</template>
+
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { VTooltip } from "vuetify/components/VTooltip";
+
+export default defineComponent({
+  name: 'DefineTerm',
+  components: {
+    'v-tooltip': VTooltip,
+  },
+  props: {
+    term: {
+      type: String,
+      required: true
+    },
+    definition: {
+      type: String,
+      required: true
+    },
+    inline: {
+      type: Boolean,
+      default: true
+    }
+  }
+});
+
+
+</script>
+
+<style>
+
+.v-tooltip > .v-overlay__content {
+  background: #F5F5F5 !important;
+}
+
+.define-term-tooltip.inline {
+  display: inline;
+  pointer-events: auto;
+  font-weight: bold;
+}
+
+.define-term-tooltip.definition {
+  font-size: var(--default-font-size);
+  color: black;
+  padding-block: 0.5em;
+}
+
+
+</style>

src/SolarEclipse2024.vue

@@ -87,10 +87,17 @@
             <!-- Clouds Path -->
             <div class="instructions-text" v-if="learnerPath=='Clouds'">
               <span class="description">
-                <p>Explainer text for cloud coverage map data goes here</p>
-                <p>Explainer text for cloud coverage map data goes here</p>
-                <p>Explainer text for cloud coverage map data goes here</p>
-                <p>Explainer text for cloud coverage map data goes here</p>
+                <div class=".d-flex">
+                  <div>
+                    This map shows historical cloud cover data on April 8 for the years 2001&#8211;2023 from the <a href="https://modis.gsfc.nasa.gov/" target="_blank" rel="noopener noreferrer">NASA MODIS</a> Aqua satellite.
+                    {{ touchscreen ? "Tap" : "Click" }} the map to display the <define-term term="median" definition="For <strong>half</strong> of the years from 2001&#8211;2003 on April 8, the cloud cover amount was <strong>less</strong> than the median value. For the other <strong>half</strong> of the years, the cloud cover was <strong>more</strong> than the median value."/> cloud coverage for a particular location (within about 100 km).
+                  </div>
+                  <div>
+                    <cloud-cover
+                      :cloud-cover="selectedLocationCloudCover"
+                    />
+                  </div>
+                </div>
               </span>
             </div>
           </div>
@@ -617,31 +624,31 @@
             getMyLocation = false;
             console.log(error);
             }"
-          />
+        />
       </div>
 
-      <div id="mobile-zoom-control">
+      <!-- <div id="mobile-zoom-control"> -->
         <!-- {{ Math.round(Math.pow(10, userZoom)*100)/100 }} -->
-          <div class="slider-padding">
-            <v-icon>mdi-magnify-plus</v-icon>
-          </div>
-          <vue-slider 
-            v-model="userZoom"
-            direction="ttb"
-            :min="1"
-            :max="Math.round(Math.log10(360)*100)/100"
-            :interval=".01"
-            :color="accentColor"
-            :tooltip="'none'"
-            :duration="0"
-            :height="wwtContentHeight ? `${0.5 * wwtContentHeight}px` : '200px'"
-            :process-style="{ backgroundColor: 'rgb(255 193 203)' }"
-            :dot-style="{ backgroundColor: accentColor, borderColor: 'black'}"
-            ></vue-slider>
-          <div class="slider-padding">
-            <v-icon>mdi-magnify-minus</v-icon>
-          </div>
-      </div>
+        <!-- <div class="slider-padding">
+          <v-icon>mdi-magnify-plus</v-icon>
+        </div>
+        <vue-slider 
+          v-model="userZoom"
+          direction="ttb"
+          :min="1"
+          :max="Math.round(Math.log10(360)*100)/100"
+          :interval=".01"
+          :color="accentColor"
+          :tooltip="'none'"
+          :duration="0"
+          :height="wwtContentHeight ? `${0.5 * wwtContentHeight}px` : '200px'"
+          :process-style="{ backgroundColor: 'rgb(255 193 203)' }"
+          :dot-style="{ backgroundColor: accentColor, borderColor: 'black'}"
+          ></vue-slider>
+        <div class="slider-padding">
+          <v-icon>mdi-magnify-minus</v-icon>
+        </div>
+      </div> -->
         <!-- <v-dialog
           scrim="false"
           v-model="showMyLocationDialog"
@@ -861,7 +868,7 @@
           variant="outlined"
           size="small"
           elevation="2"
-          :text="selectedLocationCloudCover"
+          :text="selectedLocationCloudCoverString"
         > </v-chip>
         <v-chip 
         :prepend-icon="smallSize ? `` : `mdi-clock`"
@@ -1852,14 +1859,19 @@ export default defineComponent({
 
     },
 
-    selectedLocationCloudCover():string {
+    selectedLocationCloudCover(): number | null {
       if (this.locationDeg) {
         const lat = this.locationDeg.latitudeDeg;
         const lon = this.locationDeg.longitudeDeg;
-        const cc = this.getCloudCover(lat, lon);
-        if (cc) {
-          return `Cloud Cover: ${(cc * 100).toFixed(0)}%`;
-        }
+        return this.getCloudCover(lat, lon);
+      } else {
+        return null;
+      }
+    },
+
+    selectedLocationCloudCoverString():string {
+      if (this.selectedLocationCloudCover !== null) {
+        return `Cloud Cover: ${(this.selectedLocationCloudCover * 100).toFixed(0)}%`;
       }
       return "Outside Range";
 
@@ -2855,7 +2867,7 @@ export default defineComponent({
 
       const sunAlt = altRad;
       this.skyOpacity = (1 + Math.atan(Math.PI * sunAlt / (-astronomicalTwilight))) / 2;
-      this.skyOpacity = this.skyOpacity * (1 - 0.75 * Math.pow(Math.E,-Math.pow((this.currentFractionEclipsed -1),2)/(0.09)));
+      this.skyOpacity = this.skyOpacity * (1 - 0.75 * Math.pow(Math.E,-Math.pow((this.currentFractionEclipsed -1),2)/(0.001)));
       this.updateMoonTexture();
 
       const dssOpacity = sunAlt > 0 ? 0 : 1 - (1 + Math.atan(Math.PI * sunAlt / (-astronomicalTwilight))) / 2;