refactor: Improve star size and animation in moon-star-field.ts

src/components/moon-horizon-chart.ts

@@ -42,14 +42,15 @@ export class LunarHorizonChart extends LitElement {
   @state() private _lastTime: string | null = null;
 
   protected async firstUpdated(): Promise<void> {
-    await new Promise((resolve) => setTimeout(resolve, 50));
+    await new Promise((resolve) => setTimeout(resolve, 0));
     this.setupChart();
   }
 
   protected updated(_changedProperties: PropertyValues): void {
     if (_changedProperties.has('cardWidth')) {
       if (this._chart) {
         this._chart.resize(this.cardWidth, this.cardHeight);
+        this._chart.update();
       }
     }
   }
@@ -323,14 +324,6 @@ export class LunarHorizonChart extends LitElement {
     this.card.selectedDate = time;
   }
 
-  private cancelTimeAnimationFrame(): void {
-    // Cancel the animation frame when the component is disconnected
-    if (this._timeAnimationFrame) {
-      cancelAnimationFrame(this._timeAnimationFrame);
-      this._timeAnimationFrame = null;
-    }
-  }
-
   /* -------------------------------- DATASETS -------------------------------- */
 
   private _getChartData = (): ChartData => {
@@ -530,15 +523,16 @@ export class LunarHorizonChart extends LitElement {
   /* --------------------------------- PLUGINS -------------------------------- */
   private moonMarkerPlugin = (): Plugin => {
     const emoji = this.todayData.moonPhase.phase.emoji;
-    const emojiFontSize = '18px Arial';
+    const emojiFontSize = '1rem Arial';
     const { currentHourIndex, altitudeDegrees } = this.moon.currentMoonData;
     const showCurrent = this.card.config?.graph_config?.show_current ?? true;
     if (!showCurrent) return { id: 'moonMarkerPlugin' };
+    const hoverOnChart = this.hoverOnChart;
     return {
       id: 'moonMarkerPlugin',
       afterDatasetsDraw(chart: Chart) {
         const dataSet = chart.getDatasetMeta(0);
-        if (dataSet.hidden) return;
+        if (dataSet.hidden || hoverOnChart) return;
         const {
           ctx,
           scales: { x, y },

src/components/moon-horizon-dynamic.ts

@@ -1,5 +1,5 @@
 // Lit
-import { LitElement, html, CSSResultGroup, TemplateResult, css, PropertyValues } from 'lit';
+import { LitElement, html, CSSResultGroup, TemplateResult, css, PropertyValues, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import tinycolor from 'tinycolor2';
 // Custom Card helpers
@@ -86,10 +86,10 @@ export class LunarHorizonDynamic extends LitElement {
           backdrop-filter: blur(4px);
           background: transparent !important;
           width: 100%;
-          height: 100%;
+          height: 60%;
           pointer-events: none;
           overflow: hidden;
-          z-index: 1;
+          z-index: 0;
           isolation: isolate;
           box-sizing: border-box;
           border-radius: 24px;
@@ -191,9 +191,10 @@ export class LunarHorizonDynamic extends LitElement {
   }
 
   protected render(): TemplateResult {
+    const useBackground = this.card.config.show_background;
     return html`
       <div id="horizon-dynamic-chart">
-        <div id="blur-overlay"></div>
+        ${useBackground ? html` <div id="blur-overlay"></div>` : nothing}
         <canvas id="dynamic-chart" width="${this.cardWidth}" height="${this.cardHeight}"></canvas>
       </div>
     `;
@@ -485,24 +486,27 @@ export class LunarHorizonDynamic extends LitElement {
         if (!chartArea || !scales.x || !scales.y) {
           return;
         }
+
         const { left, right, bottom, top } = chartArea;
-        const midX = chart.scales.x.getPixelForValue(closestTimeIndex);
-        const midY = chart.scales.y.getPixelForValue(0);
-        const gradientHeight = (bottom - top) * 0.8;
+        const midX = scales.x.getPixelForValue(closestTimeIndex);
+        const midY = scales.y.getPixelForValue(0);
+        const gradientHeight = (bottom - top) * 0.5;
 
         // Create gradients
         const createGradient = (startX: number, color: string) => {
           const gradient = ctx.createLinearGradient(startX, bottom, startX, bottom - gradientHeight);
-          gradient.addColorStop(0, hexToRgba(color, 0.8));
-          gradient.addColorStop(0.7, hexToRgba(color, 0.6));
+          gradient.addColorStop(0, hexToRgba(color, 1));
           gradient.addColorStop(1, hexToRgba(color, 0));
           return gradient;
         };
 
         ctx.save();
+
+        // Draw left gradient
         ctx.fillStyle = createGradient(left, fillColor.today);
         ctx.fillRect(left, bottom - gradientHeight, midX - left, gradientHeight);
 
+        // Draw right gradient
         ctx.fillStyle = createGradient(midX, fillColor.nextDay);
         ctx.fillRect(midX, bottom - gradientHeight, right - midX, gradientHeight);
 
@@ -524,6 +528,8 @@ export class LunarHorizonDynamic extends LitElement {
         ctx.stroke();
 
         ctx.restore();
+
+        // Draw labels for the markers
         drawLabels(ctx, midX, top);
       },
     };

src/components/moon-star-field.ts

@@ -6,11 +6,20 @@ import { LunarPhaseCard } from '../lunar-phase-card';
 @customElement('lunar-star-field')
 export class LunarStarField extends LitElement {
   @property({ attribute: false }) _card!: LunarPhaseCard;
-  @state() private count: number = 30;
+  @state() _baseCardReady!: boolean;
+  @state() private count: number = 10;
 
   protected firstUpdated(_changedProperties: PropertyValues): void {
     super.firstUpdated(_changedProperties);
-    this._createStarfield();
+  }
+
+  protected updated(_changedProperties: PropertyValues): void {
+    super.updated(_changedProperties);
+    if (_changedProperties.has('_baseCardReady') && this._baseCardReady) {
+      setTimeout(() => {
+        this._createStarfield();
+      }, 1000);
+    }
   }
 
   static get styles(): CSSResultGroup {
@@ -21,7 +30,7 @@ export class LunarStarField extends LitElement {
           top: 0;
           left: 0;
           width: 100%;
-          height: 20%;
+          height: 100%;
           pointer-events: none;
           overflow: hidden;
           z-index: 0;
@@ -56,6 +65,7 @@ export class LunarStarField extends LitElement {
     ];
   }
   protected render() {
+    if (!this._card._cardReady) return html``;
     return html`<div id="starfield"></div>`;
   }
 
@@ -72,7 +82,7 @@ export class LunarStarField extends LitElement {
 
       // Random position
       const x = Math.random() * starfield.offsetWidth;
-      const y = Math.random() * starfield.offsetHeight;
+      const y = (Math.random() * starfield.offsetHeight) / 4;
 
       // Random blink delay
       const delay = 3 + Math.random() * 3;

src/css/style.css

@@ -29,6 +29,7 @@ ha-card {
   border: none;
   --primary-text-color: var(--lunar-card-label-font-color, var(--primary-text-color));
   --swiper-theme-color: var(--lunar-card-label-font-color, var(--primary-text-color));
+  --mdc-ripple-press-opacity: 0;
 }
 
 ha-card.--background {
@@ -181,7 +182,7 @@ ha-card.--background .moon-phase-name {
 }
 
 .lunar-card-content {
-  display: flex;
+  /* display: flex; */
   /* flex-wrap: wrap; */
   padding: 0;
   justify-content: center;
@@ -192,6 +193,10 @@ ha-card.--background .moon-phase-name {
   position: relative;
 }
 
+.base-card {
+  display: flex;
+  width: 100%;
+}
 
 .moon-image {
   display: flex;
@@ -294,155 +299,6 @@ lunar-base-data {
 
 
 
-/* CALENDAR */
-.calendar-container {
-  display: block;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.calendar-container>.calendar-mini-popup {
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  backdrop-filter: blur(2px);
-  opacity: 1;
-  transition: all 0.4s ease-in;
-}
-
-.calendar-mini-popup[hidden] {
-  opacity: 0;
-  pointer-events: none;
-  z-index: -1;
-}
-
-.calendar-wrapper {
-  position: relative;
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  /* gap: 1rem; */
-  --calendar-background-color: #ffffff1f;
-  z-index: 0;
-  align-items: center;
-  /* overflow: hidden; */
-}
-
-.calendar-wrapper>.calendar-info[show="false"] {
-  max-height: 0px;
-  overflow: hidden;
-  transition: all 0.4s ease-in-out;
-  opacity: 0;
-}
-
-.calendar-wrapper>.calendar-info[show="true"] {
-  margin-top: 0.5rem;
-  max-height: 500px;
-  transition: all 0.4s ease-in-out;
-  width: 100%;
-  padding-inline: 1rem;
-}
-
-ha-icon-button.calendar-info-btn[active] {
-  transform: rotate(180deg);
-  transition: transform 0.4s ease-in-out;
-}
-
-.date-input-wrapper {
-  display: flex;
-  position: relative;
-  align-items: center;
-  justify-content: space-between;
-  color: var(--lunar-card-label-font-color);
-  /* backdrop-filter: blur(4px); */
-  background-color: rgba(0, 0, 0, 0.14);
-  width: -webkit-fill-available;
-  /* --mdc-icon-button-size: 24px; */
-  /* padding: 0.5rem; */
-
-}
-
-.inline-btns {
-  display: flex;
-  flex: 3;
-  justify-content: space-between;
-  color: var(--secondary-text-color);
-}
-
-.inline-btns>ha-icon-button:hover {
-  color: var(--primary-text-color);
-}
-
-
-
-.date-name {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  flex: 3;
-  white-space: nowrap;
-  font-size: 1rem;
-  font-weight: 400;
-}
-
-.date-name>span {
-  font-size: 0.9rem;
-  color: var(--secondary-text-color);
-}
-
-.date-input-label {
-  display: block;
-  color: var(--lunar-card-label-font-color);
-  font-size: 16px;
-  font-weight: 600;
-  margin-bottom: 8px;
-}
-
-.date-input {
-  display: block;
-  width: fit-content;
-  padding: 0.5rem;
-  border: 1px solid var(--divider-color);
-  border-radius: var(--ha-card-border-radius, 12px);
-  color: var(--lunar-card-label-font-color);
-  background-color: var(--calendar-background-color);
-  transition: all 0.3s ease;
-  box-sizing: border-box;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  cursor: pointer;
-}
-
-.date-input:focus {
-  border-color: var(--primary-color);
-  outline: none;
-}
-
-button.date-input-btn {
-  cursor: pointer;
-  background-color: var(--calendar-background-color);
-  border: 1px solid var(--divider-color);
-  border-radius: var(--ha-card-border-radius, 12px);
-  /* padding: 0.5rem 1rem; */
-  color: var(--primary-text-color);
-  transition: all 0.3s ease;
-  font-weight: 600;
-}
-
-button.date-input-btn:hover {
-  background-color: var(--primary-color);
-  color: var(--primary-background-color);
-}
-
 /* COMPACT VIEW */
 
 .btn-action.compact {