@astronox/core 0.5.12 → 0.5.14

package/src/patterns/RewardCalendar/rewardCalendarController.ts

@@ -0,0 +1,268 @@
+import { copyText } from '../../client/clipboard';
+import { initModal, openModal } from '../Modal/modalController';
+import {
+  setFieldError,
+  clearFieldError,
+} from '../../components/forms/FieldError/fieldErrorState';
+import type {
+  RewardCalendarAdapter,
+  RewardCalendarEntry,
+  RewardCalendarLabels,
+} from './contracts';
+
+const connections = new WeakMap<HTMLElement, () => void>();
+type ClientEntry = Pick<RewardCalendarEntry, 'id' | 'label' | 'title'>;
+
+export function connectRewardCalendar(
+  root: HTMLElement,
+  adapter: RewardCalendarAdapter,
+): () => void {
+  connections.get(root)?.();
+  const element = <T extends HTMLElement>(selector: string): T => {
+    const found = root.querySelector<T>(selector);
+    if (!found) throw new Error(`Missing reward calendar element: ${selector}`);
+    return found;
+  };
+  const config = element<HTMLScriptElement>('[data-reward-calendar-config]');
+  const { entries, labels, openingDuration } = JSON.parse(
+    config.textContent ?? '{}',
+  ) as {
+    entries: ClientEntry[];
+    labels: RewardCalendarLabels;
+    openingDuration: number;
+  };
+  const dialog = element<HTMLDialogElement>('[data-calendar-dialog]');
+  const form = element<HTMLFormElement>('[data-calendar-form]');
+  const input = element<HTMLInputElement>('[data-calendar-identity]');
+  const error = element('[data-calendar-error]');
+  const generate = element<HTMLButtonElement>('[data-calendar-generate]');
+  const status = element('[data-calendar-status]');
+  const previews = [
+    ...root.querySelectorAll<HTMLElement>('[data-calendar-reward]'),
+  ];
+  const result = element('[data-calendar-result]');
+  const code = element('[data-calendar-code]');
+  const copy = element<HTMLButtonElement>('[data-calendar-copy]');
+  const feedback = element('[data-calendar-feedback]');
+  const cleanupModal = initModal(dialog);
+  const buttons = [
+    ...root.querySelectorAll<HTMLButtonElement>('[data-calendar-entry]'),
+  ];
+  const byId = new Map(entries.map((entry) => [entry.id, entry]));
+  let activeId: string | null = null;
+  let operation = 0;
+  let busy = false;
+  let opening: HTMLButtonElement | null = null;
+  let revealTimer: ReturnType<typeof setTimeout> | undefined;
+  let identity = adapter.getSnapshot().identity;
+  input.value = identity;
+
+  const clearResult = (): void => {
+    result.hidden = true;
+    code.textContent = '';
+    feedback.textContent = '';
+  };
+  const cancelOpening = (): void => {
+    clearTimeout(revealTimer);
+    opening?.removeAttribute('data-opening');
+    opening = null;
+    root.removeAttribute('aria-busy');
+  };
+  const update = (): void => {
+    const snapshot = adapter.getSnapshot();
+    status.textContent = snapshot.message;
+    status.hidden = !snapshot.message;
+    if (identity !== snapshot.identity) {
+      identity = snapshot.identity;
+      if (input.value !== identity) input.value = identity;
+      operation += 1;
+      busy = false;
+      clearResult();
+      cancelOpening();
+    }
+    if (
+      opening &&
+      (!snapshot.entries[opening.dataset.calendarEntry ?? ''] ||
+        snapshot.entries[opening.dataset.calendarEntry ?? ''] === 'locked')
+    ) {
+      cancelOpening();
+    }
+    for (const button of buttons) {
+      const id = button.dataset.calendarEntry ?? '';
+      const entry = byId.get(id);
+      if (!entry) continue;
+      const state = snapshot.entries[id] ?? 'locked';
+      button.dataset.state = state;
+      button.disabled = state === 'locked';
+      button.setAttribute(
+        'aria-disabled',
+        String(state === 'locked' || opening !== null),
+      );
+      const rewardName =
+        state === 'revealed' || state === 'generated'
+          ? ` — ${entry.title}`
+          : '';
+      button.setAttribute(
+        'aria-label',
+        `${entry.label} — ${labels.states[state]}${rewardName}`,
+      );
+    }
+    const locked =
+      activeId !== null &&
+      (!snapshot.entries[activeId] || snapshot.entries[activeId] === 'locked');
+    if (locked && dialog.open) {
+      operation += 1;
+      busy = false;
+      clearResult();
+      feedback.textContent = labels.unavailable;
+    }
+    generate.disabled = busy || opening !== null || locked;
+    generate.textContent = busy ? labels.generating : labels.generate;
+    form.setAttribute('aria-busy', String(busy));
+  };
+  const showReward = (button: HTMLButtonElement, entry: ClientEntry): void => {
+    cancelOpening();
+    // Availability is checked again after the wrapping animation, including midnight.
+    if (!adapter.reveal(entry.id)) {
+      update();
+      return;
+    }
+    operation += 1;
+    busy = false;
+    activeId = entry.id;
+    for (const preview of previews) {
+      preview.hidden = preview.dataset.calendarReward !== entry.id;
+    }
+    dialog.setAttribute('aria-label', `${entry.label} — ${entry.title}`);
+    clearFieldError(input, error);
+    clearResult();
+    update();
+    openModal(dialog, button);
+  };
+  const handleClick = (event: MouseEvent): void => {
+    const button =
+      event.target instanceof Element
+        ? event.target.closest<HTMLButtonElement>('[data-calendar-entry]')
+        : null;
+    const entry = byId.get(button?.dataset.calendarEntry ?? '');
+    if (!button || !entry || !root.contains(button) || opening) return;
+    const state = adapter.getSnapshot().entries[entry.id];
+    if (!state || state === 'locked') return;
+    if (
+      state !== 'available' ||
+      window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    ) {
+      showReward(button, entry);
+      return;
+    }
+    opening = button;
+    button.setAttribute('data-opening', '');
+    root.setAttribute('aria-busy', 'true');
+    revealTimer = setTimeout(() => showReward(button, entry), openingDuration);
+    update();
+  };
+  const handleInput = (): void => {
+    operation += 1;
+    busy = false;
+    clearFieldError(input, error);
+    clearResult();
+    adapter.setIdentity(input.value);
+    // The gift already opened in this dialog stays revealed for the new identity.
+    if (activeId && adapter.getSnapshot().entries[activeId] === 'available') {
+      adapter.reveal(activeId);
+    }
+    update();
+  };
+  const handleSubmit = async (event: SubmitEvent): Promise<void> => {
+    event.preventDefault();
+    if (!activeId || busy || opening) return;
+    adapter.setIdentity(input.value);
+    const id = activeId;
+    const currentOperation = ++operation;
+    clearFieldError(input, error);
+    clearResult();
+    busy = true;
+    update();
+    try {
+      const response = await adapter.generate(id);
+      if (operation !== currentOperation || !dialog.open) return;
+      if (!response.ok) {
+        if (response.reason === 'invalidIdentity') {
+          setFieldError(input, error, labels.invalidIdentity);
+          input.focus();
+        } else {
+          feedback.textContent = labels[response.reason];
+        }
+        return;
+      }
+      code.textContent = response.code;
+      result.hidden = false;
+    } catch {
+      if (operation === currentOperation) {
+        feedback.textContent = labels.failed;
+      }
+    } finally {
+      if (operation === currentOperation) {
+        busy = false;
+        update();
+      }
+    }
+  };
+  const handleCopy = async (): Promise<void> => {
+    if (!code.textContent) return;
+    const currentOperation = operation;
+    try {
+      await copyText(code.textContent);
+      if (operation === currentOperation) {
+        feedback.textContent = labels.copied;
+      }
+    } catch {
+      if (operation === currentOperation) {
+        feedback.textContent = labels.copyFailed;
+      }
+    }
+  };
+  const handleClose = (): void => {
+    activeId = null;
+    operation += 1;
+    busy = false;
+    cancelOpening();
+    clearResult();
+    update();
+  };
+  const handleCancelOpening = (event: Event): void => {
+    if (!opening) return;
+    if (event instanceof KeyboardEvent && event.key !== 'Escape') return;
+    if (event.type === 'visibilitychange' && !document.hidden) return;
+    event.preventDefault();
+    cancelOpening();
+    update();
+  };
+  root.addEventListener('click', handleClick);
+  input.addEventListener('input', handleInput);
+  form.addEventListener('submit', handleSubmit);
+  copy.addEventListener('click', handleCopy);
+  dialog.addEventListener('close', handleClose);
+  document.addEventListener('keydown', handleCancelOpening);
+  document.addEventListener('visibilitychange', handleCancelOpening);
+  window.addEventListener('pagehide', handleCancelOpening);
+  const unsubscribe = adapter.subscribe(update);
+  update();
+  const cleanup = (): void => {
+    operation += 1;
+    cancelOpening();
+    unsubscribe();
+    root.removeEventListener('click', handleClick);
+    input.removeEventListener('input', handleInput);
+    form.removeEventListener('submit', handleSubmit);
+    copy.removeEventListener('click', handleCopy);
+    dialog.removeEventListener('close', handleClose);
+    document.removeEventListener('keydown', handleCancelOpening);
+    document.removeEventListener('visibilitychange', handleCancelOpening);
+    window.removeEventListener('pagehide', handleCancelOpening);
+    cleanupModal();
+    connections.delete(root);
+  };
+  connections.set(root, cleanup);
+  return cleanup;
+}

package/src/patterns/index.ts

@@ -10,6 +10,9 @@ export { default as Modal } from './Modal/Modal.astro';
 export { default as ModalClose } from './Modal/ModalClose.astro';
 export { default as ModalOpen } from './Modal/ModalOpen.astro';
 export { default as PuzzleGrid } from './PuzzleGrid/PuzzleGrid.astro';
+export { default as RewardCalendar } from './RewardCalendar/RewardCalendar.astro';
+export * from './RewardCalendar/contracts';
+export * from './RewardCalendar/rewardCalendarController';
 export { default as SlidingPuzzle } from './SlidingPuzzle/SlidingPuzzle.astro';
 export { default as LightMazePuzzle } from './LightMazePuzzle/LightMazePuzzle.astro';
 export * from './LightMazePuzzle/contracts';

package/src/styles/base.css

@@ -167,15 +167,18 @@ p {
   gap: 0;
 }
 
-:root[data-appearance='halloween'] .site-shell {
+:root:is([data-appearance='halloween'], [data-appearance='christmas'])
+  .site-shell {
   isolation: isolate;
 }
 
-:root[data-appearance='halloween'] .site-viewport {
+:root:is([data-appearance='halloween'], [data-appearance='christmas'])
+  .site-viewport {
   background: transparent;
 }
 
-:root[data-appearance='halloween'] .site-main__content {
+:root:is([data-appearance='halloween'], [data-appearance='christmas'])
+  .site-main__content {
   background: var(--nox-page-background);
   border-radius: var(--nox-radius-lg);
 }

package/src/styles/style.css

@@ -2,6 +2,7 @@
 
 @import './tokens.css' layer(settings);
 @import '../theme/halloween.css' layer(settings);
+@import '../theme/christmas.css' layer(settings);
 @import './base.css' layer(base);
 @import './interaction.css' layer(states);
 
@@ -79,6 +80,7 @@
 @import '../patterns/MagneticFieldPuzzle/MagneticFieldPuzzle.css'
   layer(patterns);
 @import '../patterns/Modal/Modal.css' layer(patterns);
+@import '../patterns/RewardCalendar/RewardCalendar.css' layer(patterns);
 @import '../patterns/SpriteProjectilePreview/SpriteProjectilePreview.css'
   layer(patterns);
 @import '../patterns/StageFlow/StageFlow.css' layer(patterns);

package/src/styles/tokens.css

@@ -27,6 +27,12 @@
   --nox-source-magnetic-north: #2f6bff;
   --nox-source-magnetic-south: #dc2626;
 
+  /* Gift wrapping stays stable across UI color themes. */
+  --nox-reward-green: #287247;
+  --nox-reward-red: #bd3946;
+  --nox-reward-gold: #e5bf72;
+  --nox-reward-ribbon: #f6fbff;
+
   /* Internal recipe anchors. */
   --nox-mix-light: #ffffff;
   --nox-mix-dark: #020617;

package/src/theme/christmas-garland.svg

@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="144" height="18" viewBox="0 3 144 18" fill="none">
+  <defs>
+    <radialGradient id="green">
+      <stop stop-color="#85e9a7" stop-opacity=".55"/>
+      <stop offset=".45" stop-color="#63d886" stop-opacity=".2"/>
+      <stop offset="1" stop-color="#63d886" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="red">
+      <stop stop-color="#ffaaa6" stop-opacity=".55"/>
+      <stop offset=".45" stop-color="#ee6574" stop-opacity=".2"/>
+      <stop offset="1" stop-color="#ee6574" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="gold">
+      <stop stop-color="#fff0b5" stop-opacity=".55"/>
+      <stop offset=".45" stop-color="#e5bf72" stop-opacity=".2"/>
+      <stop offset="1" stop-color="#e5bf72" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+  <circle cx="24" cy="11" r="10" fill="url(#green)"/>
+  <circle cx="72" cy="11" r="10" fill="url(#red)"/>
+  <circle cx="120" cy="11" r="10" fill="url(#gold)"/>
+  <path d="M24 3V6M72 3V6M120 3V6" stroke="#45664f" stroke-width="1.5"/>
+  <ellipse cx="24" cy="11" rx="3.2" ry="4.3" fill="#85e9a7" stroke="#378551" stroke-width=".6"/>
+  <ellipse cx="72" cy="11" rx="3.2" ry="4.3" fill="#ff9297" stroke="#b74755" stroke-width=".6"/>
+  <ellipse cx="120" cy="11" rx="3.2" ry="4.3" fill="#f4d78c" stroke="#ba893e" stroke-width=".6"/>
+  <path d="M22 5H26V7H22ZM70 5H74V7H70ZM118 5H122V7H118Z" fill="#45664f"/>
+  <path d="M23 9V10.5M71 9V10.5M119 9V10.5" stroke="#fff9e8" stroke-width="1.2" stroke-linecap="round" opacity=".9"/>
+</svg>

package/src/theme/christmas.css

@@ -0,0 +1,25 @@
+:root[data-appearance='christmas'] {
+  color-scheme: dark;
+
+  --nox-source-tone-neutral: #afbfb8;
+  --nox-source-tone-primary: var(--nox-seasonal-red);
+  --nox-source-tone-warning: var(--nox-seasonal-gold);
+  --nox-content-link-color: #ef9297;
+  --nox-theme-page-base: #0e1916;
+  --nox-theme-surface-base: #172822;
+  --nox-theme-text-base: #f4f0e7;
+  --nox-theme-text-disabled-base: #75867c;
+  --nox-theme-border-base: #30483d;
+  --nox-theme-inverse-base: #0e1916;
+  --nox-theme-shadow-base: #060e0b;
+
+  --nox-seasonal-header-background: #14231d;
+  --nox-seasonal-border-size: 3px;
+  --nox-seasonal-header-ornament-size: 18px;
+  --nox-seasonal-red: #c3464d;
+  --nox-seasonal-gold: #e5bf72;
+  --nox-seasonal-snow: #f6fbff;
+  --nox-theme-accent-color: var(--nox-seasonal-red);
+  --nox-seasonal-header-border: #3a7752;
+  --nox-seasonal-header-ornament: url('./christmas-garland.svg');
+}

package/src/theme/contracts.ts

@@ -3,12 +3,24 @@ export type Tone =
 
 export type ColorTheme = 'light' | 'dark';
 
-export type SeasonalAppearance = 'halloween';
+export type SeasonalAppearance = 'halloween' | 'christmas';
 
 export type ThemeAppearance = ColorTheme | SeasonalAppearance;
 
+export type AnnualThemePeriod = {
+  /** Inclusive local date, with months numbered from 1 to 12. */
+  start: { month: number; day: number };
+  /** Exclusive local date, possibly in the following year. */
+  end: { month: number; day: number };
+};
+
 export type SeasonalThemeConfig = {
   id: string;
   appearance: SeasonalAppearance;
+  /** Higher priorities win when enabled seasons overlap. */
+  priority: number;
   decorations?: 'static' | 'animated';
-};
+} & (
+  | { mode: 'disabled' | 'always' }
+  | { mode: 'annual'; period: AnnualThemePeriod }
+);

package/src/theme/halloween.css

@@ -14,6 +14,7 @@
 
   --nox-seasonal-header-background: #211512;
   --nox-seasonal-blood: #a52330;
+  --nox-seasonal-header-border: var(--nox-seasonal-blood);
   --nox-seasonal-border-size: 3px;
   --nox-seasonal-web: #d1bfa9;
   --nox-theme-accent-color: var(--nox-seasonal-blood);