diff --git a/src/components/moon-horizon-chart.ts b/src/components/moon-horizon-chart.ts index d71351f..7251551 100644 --- a/src/components/moon-horizon-chart.ts +++ b/src/components/moon-horizon-chart.ts @@ -42,7 +42,7 @@ export class LunarHorizonChart extends LitElement { @state() private _lastTime: string | null = null; protected async firstUpdated(): Promise { - await new Promise((resolve) => setTimeout(resolve, 50)); + await new Promise((resolve) => setTimeout(resolve, 0)); this.setupChart(); } @@ -50,6 +50,7 @@ export class LunarHorizonChart extends LitElement { 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 }, diff --git a/src/components/moon-horizon-dynamic.ts b/src/components/moon-horizon-dynamic.ts index 8185bb2..de540c3 100644 --- a/src/components/moon-horizon-dynamic.ts +++ b/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`
-
+ ${useBackground ? html`
` : nothing}
`; @@ -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); }, }; diff --git a/src/components/moon-star-field.ts b/src/components/moon-star-field.ts index 592ab1c..5a7478c 100644 --- a/src/components/moon-star-field.ts +++ b/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`
`; } @@ -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; diff --git a/src/css/style.css b/src/css/style.css index d437916..8adb639 100644 --- a/src/css/style.css +++ b/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 {