@jjlmoya/utils-tabletop 1.7.0 → 1.8.0

package/src/tool/lunar-tide-tracker/lunar-tide-tracker.css

@@ -0,0 +1,494 @@
+:root,
+.theme-light {
+  --ltt-accent: #6d28d9;
+  --ltt-accent-2: #7c3aed;
+  --ltt-accent-3: #5b21b6;
+  --ltt-glow: rgba(109, 40, 217, 0.25);
+  --ltt-glow-soft: rgba(109, 40, 217, 0.12);
+  --ltt-label-color: #3b0764;
+  --ltt-moon-bg: #e9e0ff;
+  --ltt-moon-stroke: rgba(109, 40, 217, 0.2);
+  --ltt-on-accent: #fff;
+  --ltt-danger: #dc2626;
+}
+
+.theme-dark {
+  --ltt-accent: #8b5cf6;
+  --ltt-accent-2: #a78bfa;
+  --ltt-accent-3: #c4b5fd;
+  --ltt-glow: rgba(139, 92, 246, 0.35);
+  --ltt-glow-soft: rgba(139, 92, 246, 0.15);
+  --ltt-label-color: #e9d5ff;
+  --ltt-moon-bg: #0f172a;
+  --ltt-moon-stroke: rgba(255, 255, 255, 0.1);
+  --ltt-on-accent: #fff;
+  --ltt-danger: #f87171;
+}
+
+.ltt-root {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-color);
+  border-radius: 2rem;
+  padding: 1.5rem;
+  color: var(--text-base);
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.07);
+}
+
+.ltt-presets {
+  display: flex;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+}
+
+.ltt-preset-btn {
+  background: var(--bg-page);
+  border: 1px solid var(--border-color);
+  color: var(--text-muted);
+  padding: 0.45rem 1rem;
+  border-radius: 2rem;
+  font-size: 0.8rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+  letter-spacing: 0.03em;
+}
+
+.ltt-preset-btn:hover,
+.ltt-preset-btn.active {
+  border-color: var(--ltt-accent);
+  color: var(--ltt-accent-3);
+  box-shadow: 0 0 14px var(--ltt-glow-soft);
+  transform: translateY(-1px);
+}
+
+.ltt-body {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 1.5rem;
+  align-items: start;
+}
+
+@media (max-width: 700px) {
+  .ltt-body {
+    grid-template-columns: 1fr;
+  }
+}
+
+.ltt-portal-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.ltt-portal-wrap {
+  position: relative;
+  width: 220px;
+  flex-shrink: 0;
+}
+
+.ltt-portal-svg {
+  width: 220px;
+  height: 220px;
+  display: block;
+}
+
+.ltt-ring {
+  transform-origin: 120px 120px;
+}
+
+.ltt-ring-a {
+  animation: ltt-spin-a 40s linear infinite;
+}
+
+.ltt-ring-b {
+  animation: ltt-spin-b 25s linear infinite reverse;
+}
+
+.ltt-ring-c {
+  animation: ltt-spin-a 18s linear infinite;
+}
+
+@keyframes ltt-spin-a {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes ltt-spin-b {
+  to { transform: rotate(360deg); }
+}
+
+.ltt-tide-badge {
+  position: absolute;
+  bottom: -0.75rem;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--bg-page);
+  border: 1px solid var(--border-color);
+  border-radius: 2rem;
+  padding: 0.3rem 0.9rem 0.4rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  white-space: nowrap;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+}
+
+.ltt-tide-label {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--ltt-label-color);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.ltt-tide-bar-wrap {
+  width: 60px;
+  height: 4px;
+  background: var(--border-color);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.ltt-tide-bar {
+  height: 100%;
+  background: linear-gradient(90deg, var(--ltt-accent), var(--ltt-accent-3));
+  width: 0%;
+  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+  box-shadow: 0 0 8px var(--ltt-glow);
+}
+
+.ltt-tide-pct {
+  font-size: 0.72rem;
+  color: var(--text-muted);
+  font-weight: 500;
+}
+
+.ltt-magic-strip {
+  font-size: 0.72rem;
+  text-align: center;
+  color: var(--text-muted);
+  font-style: italic;
+  max-width: 220px;
+  line-height: 1.4;
+  min-height: 2.4em;
+}
+
+.ltt-controls-col {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.ltt-label {
+  font-size: 0.72rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-muted);
+}
+
+.ltt-day-block {
+  background: var(--bg-page);
+  border: 1px solid var(--border-color);
+  border-radius: 1.25rem;
+  padding: 1rem 1.1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.ltt-day-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+}
+
+.ltt-day-val {
+  font-size: 2.2rem;
+  font-weight: 800;
+  color: var(--ltt-accent);
+  text-shadow: 0 0 18px var(--ltt-glow);
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+
+.ltt-slider {
+  width: 100%;
+  cursor: pointer;
+  accent-color: var(--ltt-accent);
+  height: 3px;
+}
+
+.ltt-step-row {
+  display: flex;
+  gap: 0.4rem;
+}
+
+.ltt-step-btn {
+  flex: 1;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-color);
+  color: var(--text-base);
+  padding: 0.5rem 0;
+  border-radius: 0.75rem;
+  font-weight: 700;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.ltt-step-btn:hover {
+  background: var(--ltt-accent);
+  border-color: var(--ltt-accent);
+  color: var(--ltt-on-accent);
+  transform: scale(1.06);
+  box-shadow: 0 0 12px var(--ltt-glow);
+}
+
+.ltt-step-pos {
+  color: var(--ltt-accent-3);
+}
+
+.ltt-reset-btn {
+  background: transparent;
+  border: 1px solid var(--border-color);
+  color: var(--text-muted);
+  padding: 0.5rem 0.7rem;
+  border-radius: 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+.ltt-reset-btn:hover {
+  border-color: var(--ltt-accent);
+  color: var(--ltt-accent-3);
+}
+
+.ltt-moons-block {
+  background: var(--bg-page);
+  border: 1px solid var(--border-color);
+  border-radius: 1.25rem;
+  padding: 1rem 1.1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.ltt-moons-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ltt-add-btn {
+  background: var(--bg-surface);
+  border: 1px solid var(--ltt-accent);
+  color: var(--ltt-accent-3);
+  padding: 0.3rem 0.75rem;
+  border-radius: 2rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.ltt-add-btn:hover {
+  background: var(--ltt-accent);
+  color: var(--ltt-on-accent);
+  box-shadow: 0 0 12px var(--ltt-glow);
+}
+
+.ltt-moons-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.ltt-moon-row {
+  display: grid;
+  grid-template-columns: 28px 1fr 60px 50px 28px 24px;
+  gap: 0.4rem;
+  align-items: center;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-color);
+  border-radius: 1rem;
+  padding: 0.5rem 0.6rem;
+  transition: border-color 0.2s;
+}
+
+.ltt-moon-row:hover {
+  border-color: var(--ltt-accent);
+}
+
+.ltt-moon-vis-mini {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.ltt-moon-input {
+  background: transparent;
+  border: none;
+  color: var(--text-base);
+  font-size: 0.82rem;
+  font-weight: 500;
+  width: 100%;
+  outline: none;
+  min-width: 0;
+}
+
+.ltt-moon-input::placeholder {
+  color: var(--text-muted);
+  font-size: 0.75rem;
+}
+
+.ltt-moon-num {
+  background: var(--bg-page);
+  border: 1px solid var(--border-color);
+  color: var(--text-base);
+  padding: 0.2rem 0.4rem;
+  border-radius: 0.5rem;
+  font-size: 0.75rem;
+  text-align: center;
+  width: 100%;
+}
+
+.ltt-color-swatch {
+  -webkit-appearance: none;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  background: none;
+}
+
+.ltt-color-swatch::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+.ltt-color-swatch::-webkit-color-swatch {
+  border-radius: 50%;
+  border: 1px solid var(--border-color);
+}
+
+.ltt-remove-btn {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  font-size: 1rem;
+  cursor: pointer;
+  line-height: 1;
+  padding: 0;
+  transition: color 0.15s;
+}
+
+.ltt-remove-btn:hover {
+  color: var(--ltt-danger);
+}
+
+.ltt-phase-tag {
+  font-size: 0.68rem;
+  color: var(--text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding-left: 0.5rem;
+}
+
+.ltt-phase-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  border: 1px solid var(--border-color);
+}
+
+.ltt-forecast-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.ltt-forecast-label {
+  font-size: 0.72rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-muted);
+}
+
+.ltt-forecast {
+  display: grid;
+  grid-template-columns: repeat(10, 1fr);
+  gap: 0.5rem;
+}
+
+@media (max-width: 700px) {
+  .ltt-forecast {
+    grid-template-columns: repeat(5, 1fr);
+  }
+}
+
+.ltt-fc-cell {
+  background: var(--bg-page);
+  border: 1px solid var(--border-color);
+  border-radius: 0.85rem;
+  padding: 0.5rem 0.25rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.3rem;
+  text-align: center;
+  transition: border-color 0.2s, transform 0.15s;
+  cursor: default;
+}
+
+.ltt-fc-cell:hover {
+  border-color: var(--ltt-accent);
+  transform: translateY(-2px);
+}
+
+.ltt-fc-day {
+  font-size: 0.65rem;
+  font-weight: 700;
+  color: var(--text-muted);
+}
+
+.ltt-fc-dots {
+  display: flex;
+  gap: 2px;
+  justify-content: center;
+}
+
+.ltt-fc-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  flex-shrink: 0;
+}
+
+.ltt-fc-pct {
+  font-size: 0.6rem;
+  color: var(--text-muted);
+}
+
+.ltt-fc-cell.ltt-fc-peak {
+  border-color: var(--ltt-accent);
+  box-shadow: 0 0 10px var(--ltt-glow-soft);
+}
+
+.ltt-fc-cell.ltt-fc-peak .ltt-fc-day {
+  color: var(--ltt-accent-3);
+}

package/src/tool/lunar-tide-tracker/seo.astro

@@ -0,0 +1,16 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { lunarTideTracker } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const loader = lunarTideTracker.i18n[locale] || lunarTideTracker.i18n.en;
+const content = await loader?.();
+if (!content) return null;
+---
+
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/lunar-tide-tracker/types.ts

@@ -0,0 +1,70 @@
+export type MoonPhaseType =
+  | 'new'
+  | 'waxing_crescent'
+  | 'first_quarter'
+  | 'waxing_gibbous'
+  | 'full'
+  | 'waning_gibbous'
+  | 'last_quarter'
+  | 'waning_crescent';
+
+export interface Moon {
+  id: string;
+  name: string;
+  period: number;
+  offset: number;
+  color: string;
+}
+
+export interface TideState {
+  level: number;
+  name: string;
+  modifier: string;
+}
+
+export interface MoonPhaseInfo {
+  phase: MoonPhaseType;
+  percentage: number;
+  angle: number;
+}
+
+export interface ForecastItem {
+  day: number;
+  moons: {
+    moonId: string;
+    phase: MoonPhaseType;
+    percentage: number;
+  }[];
+  tideLevel: number;
+  tideName: string;
+}
+
+export interface LunarTideUI {
+  title: string;
+  moonsTitle: string;
+  addMoon: string;
+  removeMoon: string;
+  moonName: string;
+  orbitalPeriod: string;
+  startingOffset: string;
+  timelineTitle: string;
+  currentDay: string;
+  tideTitle: string;
+  tideLevel: string;
+  magicModifier: string;
+  forecastTitle: string;
+  dayLabel: string;
+  resetButton: string;
+  presetTitle: string;
+  presetSingle: string;
+  presetDouble: string;
+  presetTriple: string;
+  newMoon: string;
+  waxingCrescent: string;
+  firstQuarter: string;
+  waxingGibbous: string;
+  fullMoon: string;
+  waningGibbous: string;
+  lastQuarter: string;
+  waningCrescent: string;
+}

package/src/tools.ts

@@ -8,6 +8,7 @@ import { INITIATIVE_TRACKER_TOOL } from './tool/rpg-initiative-tracker';
 import { FANTASY_RUNES_TRANSLATOR_TOOL } from './tool/fantasy-runes-translator';
 import { DECISION_WHEEL_TOOL } from './tool/decision-wheel';
 import { INVESTIGATION_BOARD_TOOL } from './tool/investigation-board';
+import { LUNAR_TIDE_TRACKER_TOOL } from './tool/lunar-tide-tracker';
 
 export const ALL_TOOLS: ToolDefinition[] = [
   DICE_ROLLER_SIMULATOR_TOOL,
@@ -18,5 +19,6 @@ export const ALL_TOOLS: ToolDefinition[] = [
   FANTASY_RUNES_TRANSLATOR_TOOL,
   DECISION_WHEEL_TOOL,
   INVESTIGATION_BOARD_TOOL,
+  LUNAR_TIDE_TRACKER_TOOL,
 ];