feat: add mutagen for palace heavenly stem

package.json

@@ -67,8 +67,8 @@
  },
  "dependencies": {
  "classnames": "^2.3.2",
- "iztro": "^2.0.2",
- "iztro-hook": "^1.2.1",
+ "iztro": "^2.0.3",
+ "iztro-hook": "^1.2.2",
  "lunar-lite": "^0.0.3"
  },
  "resolutions": {

src/Izpalace/Izpalace.css

@@ -99,6 +99,11 @@
 }
 .iztro-palace-gz {
  text-align: right;
+ cursor: pointer;
+}
+.iztro-palace-gz span {
+ display: inline-block;
+ padding: 0 1px;
 }
 .iztro-palace-dynamic-name {
  text-align: center;

src/Izpalace/Izpalace.tsx

@@ -1,22 +1,19 @@
 import React, { useMemo } from "react";
-import { IzpalaceProps } from "./Izpalace.type";
+import { HoroscopeForPalace, IzpalaceProps } from "./Izpalace.type";
 import classNames from "classnames";
 import "./Izpalace.css";
 import { Izstar } from "../Izstar";
-import { t } from "iztro/lib/i18n";
+import { HeavenlyStemKey, kot, t } from "iztro/lib/i18n";
 import { fixIndex } from "iztro/lib/utils";
-import { HoroscopeItem, Scope } from "iztro/lib/data/types";
-
-export type HoroscopeForPalace = {
- scope: Scope;
- show: boolean;
-} & Partial<HoroscopeItem>;
+import { Scope } from "iztro/lib/data/types";
 
 export const Izpalace = ({
  index,
  focusedIndex,
  onFocused,
  horoscope,
+ activeHeavenlyStem,
+ toggleActiveHeavenlyStem,
  showDecadalScope = false,
  showYearlyScope = false,
  showMonthlyScope = false,
@@ -147,6 +144,11 @@ export const Izpalace = ({
  {palace.majorStars.map((star) => (
  <Izstar
  key={star.name}
+ activeHeavenlyStem={activeHeavenlyStem}
+ palaceHeavenlyStem={kot<HeavenlyStemKey>(
+ palace.heavenlyStem,
+ "Heavenly"
+ )}
  horoscopeMutagens={horoscopeMutagens}
  {...star}
  />
@@ -156,6 +158,11 @@ export const Izpalace = ({
  {palace.minorStars.map((star) => (
  <Izstar
  key={star.name}
+ activeHeavenlyStem={activeHeavenlyStem}
+ palaceHeavenlyStem={kot<HeavenlyStemKey>(
+ palace.heavenlyStem,
+ "Heavenly"
+ )}
  horoscopeMutagens={horoscopeMutagens}
  {...star}
  />
@@ -269,9 +276,28 @@ export const Izpalace = ({
  </div>
  </div>
 
- <div className={classNames("iztro-palace-gz")}>
- {palace.heavenlyStem}
- {palace.earthlyBranch}
+ <div
+ className={classNames("iztro-palace-gz", {
+ "iztro-palace-gz-active":
+ activeHeavenlyStem ===
+ kot<HeavenlyStemKey>(palace.heavenlyStem, "Heavenly"),
+ })}
+ onClick={() =>
+ toggleActiveHeavenlyStem?.(
+ kot<HeavenlyStemKey>(palace.heavenlyStem, "Heavenly")
+ )
+ }
+ >
+ <span
+ className={classNames({
+ "iztro-palace-gz-active":
+ activeHeavenlyStem ===
+ kot<HeavenlyStemKey>(palace.heavenlyStem, "Heavenly"),
+ })}
+ >
+ {palace.heavenlyStem}
+ {palace.earthlyBranch}
+ </span>
  </div>
  </div>
  </div>

src/Izpalace/Izpalace.type.ts

@@ -1,6 +1,7 @@
 import FunctionalHoroscope from "iztro/lib/astro/FunctionalHoroscope";
 import { IFunctionalPalace } from "iztro/lib/astro/FunctionalPalace";
-import { Scope } from "iztro/lib/data/types";
+import { HoroscopeItem, Scope } from "iztro/lib/data/types";
+import { HeavenlyStemKey } from "iztro/lib/i18n";
 
 export type IzpalaceProps = {
  index: number;
@@ -11,6 +12,13 @@ export type IzpalaceProps = {
  showMonthlyScope?: boolean;
  showDailyScope?: boolean;
  showHourlyScope?: boolean;
+ activeHeavenlyStem?: HeavenlyStemKey;
+ toggleActiveHeavenlyStem?: (heavenlyStem: HeavenlyStemKey) => void;
  toggleScope?: (scope: Scope) => void;
  onFocused?: (index?: number) => void;
 } & IFunctionalPalace;
+
+export type HoroscopeForPalace = {
+ scope: Scope;
+ show: boolean;
+} & Partial<HoroscopeItem>;

src/IzpalaceCenter/IzpalaceCenter.tsx

@@ -8,7 +8,7 @@ import { fixEarthlyBranchIndex } from "iztro/lib/utils";
 import { Scope } from "iztro/lib/data/types";
 import FunctionalHoroscope from "iztro/lib/astro/FunctionalHoroscope";
 import { normalizeDateStr, solar2lunar } from "lunar-lite";
-import { t } from "iztro/lib/i18n";
+import { GenderName, kot, t } from "iztro/lib/i18n";
 import { CHINESE_TIME } from "iztro/lib/data";
 
 const MIN_DATETIME = new Date(1990, 0, 31).getTime();
@@ -210,7 +210,16 @@ export const IzpalaceCenter = ({
  }
  />
  )}
- <h3 className="center-title">基本信息</h3>
+ <h3 className="center-title">
+ <span
+ className={`gender gender-${kot<GenderName>(
+ astrolabe?.gender ?? ""
+ )}`}
+ >
+ {kot<GenderName>(astrolabe?.gender ?? "") === "male" ? "♂" : "♀"}
+ </span>
+ <span>基本信息</span>
+ </h3>
  <ul className="basic-info">
  {records.map((rec, idx) => (
  <Item key={idx} {...rec} />
@@ -271,39 +280,39 @@ export const IzpalaceCenter = ({
  })}
  onClick={() => onHoroscopeButtonClicked("hourly", 1)}
  >
- 时►
+ 时▶
  </span>
  <span
  className={classNames("center-button", {
  disabled: shouldBeDisabled(horoDate.solar, "daily", 1),
  })}
  onClick={() => onHoroscopeButtonClicked("daily", 1)}
  >
- 日►
+ 日▶
  </span>
  <span
  className={classNames("center-button", {
  disabled: shouldBeDisabled(horoDate.solar, "monthly", 1),
  })}
  onClick={() => onHoroscopeButtonClicked("monthly", 1)}
  >
- 月►
+ 月▶
  </span>
  <span
  className={classNames("center-button", {
  disabled: shouldBeDisabled(horoDate.solar, "yearly", 1),
  })}
  onClick={() => onHoroscopeButtonClicked("yearly", 1)}
  >
- 年►
+ 年▶
  </span>
  <span
  className={classNames("center-button", {
  disabled: shouldBeDisabled(horoDate.solar, "yearly", 10),
  })}
  onClick={() => onHoroscopeButtonClicked("yearly", 10)}
  >
- 限►
+ 限▶
  </span>
  </div>
  <a

src/Izstar/Izstar.tsx

@@ -1,13 +1,55 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { IzstarProps } from "./Izstar.type";
 import classNames from "classnames";
 import { MUTAGEN } from "iztro/lib/data";
 import { MutagenKey, kot, t } from "iztro/lib/i18n";
+import { getMutagensByHeavenlyStem } from "iztro/lib/utils";
+
+export const Izstar = ({
+ horoscopeMutagens,
+ activeHeavenlyStem,
+ palaceHeavenlyStem,
+ ...star
+}: IzstarProps) => {
+ const mutagenStyle = useMemo(() => {
+ if (!activeHeavenlyStem) {
+ return "";
+ }
+
+ const mutagens = getMutagensByHeavenlyStem(t(activeHeavenlyStem));
+ const index = mutagens.indexOf(star.name);
+
+ if (index < 0) {
+ return "";
+ }
+
+ return `iztro-star-mutagen-${index}`;
+ }, [activeHeavenlyStem, star.name]);
+
+ const selfMutagenStyle = useMemo(() => {
+ if (!palaceHeavenlyStem) {
+ return undefined;
+ }
+
+ const mutagens = getMutagensByHeavenlyStem(t(palaceHeavenlyStem));
+ const index = mutagens.indexOf(star.name);
+
+ if (index < 0) {
+ return "";
+ }
+
+ return `iztro-star-self-mutagen-${index}`;
+ }, [palaceHeavenlyStem]);
 
-export const Izstar = ({ horoscopeMutagens, ...star }: IzstarProps) => {
  return (
  <div className={classNames("iztro-star", `iztro-star-${star.type}`)}>
- {star.name}
+ <span
+ className={classNames(mutagenStyle, selfMutagenStyle, {
+ "iztro-star-self-mutagen": !!selfMutagenStyle,
+ })}
+ >
+ {star.name}
+ </span>
  <i className={classNames("iztro-star-brightness")}>{star.brightness}</i>
  {star.mutagen && (
  <span

src/Izstar/Izstar.type.ts

@@ -1,5 +1,5 @@
 import FunctionalStar from "iztro/lib/star/FunctionalStar";
-import { StarName } from "iztro/lib/i18n";
+import { HeavenlyStemKey, StarName } from "iztro/lib/i18n";
 import { Scope } from "iztro/lib/data/types";
 
 export type HoroscopeMutagen = {
@@ -9,5 +9,7 @@ export type HoroscopeMutagen = {
 };
 
 export type IzstarProps = {
+ palaceHeavenlyStem?: HeavenlyStemKey;
+ activeHeavenlyStem?: HeavenlyStemKey;
  horoscopeMutagens?: HoroscopeMutagen[];
 } & FunctionalStar;

src/Iztrolabe/Iztrolabe.css

@@ -1,4 +1,5 @@
 .iztro-astrolabe {
+ font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  display: grid;
  position: relative;
  width: 100%;
@@ -17,42 +18,21 @@
  font-size: var(--iztro-star-font-size-small);
  border-radius: 4px;
  color: #fff;
- cursor: pointer;
  display: inline-block;
  margin-left: 1px;
  padding: 0 2px;
 }
 
-.iztro-star-mutagen.mutagen-0 {
- background-color: var(--iztro-color-awesome);
-}
-.iztro-star-mutagen.mutagen-1 {
- background-color: var(--iztro-color-quan);
-}
-.iztro-star-mutagen.mutagen-2 {
- background-color: var(--iztro-color-nice);
-}
-.iztro-star-mutagen.mutagen-3 {
- background-color: var(--iztro-color-focus);
+.iztro-star-self-mutagen {
+ position: relative;
 }
 
-.iztro-star-mutagen.mutagen-decadal {
- background-color: var(--iztro-color-decadal);
- opacity: 0.6;
-}
-.iztro-star-mutagen.mutagen-yearly {
- background-color: var(--iztro-color-yearly);
- opacity: 0.6;
-}
-.iztro-star-mutagen.mutagen-monthly {
- background-color: var(--iztro-color-monthly);
- opacity: 0.6;
-}
-.iztro-star-mutagen.mutagen-daily {
- background-color: var(--iztro-color-daily);
- opacity: 0.6;
-}
-.iztro-star-mutagen.mutagen-hourly {
- background-color: var(--iztro-color-hourly);
- opacity: 0.6;
+.iztro-star-self-mutagen::before {
+ border-radius: 4px 0 0 4px;
+ bottom: 0;
+ content: " ";
+ left: -4px;
+ position: absolute;
+ top: 0;
+ width: 4px;
 }

src/Iztrolabe/Iztrolabe.tsx

@@ -7,8 +7,11 @@ import { useIztro } from "iztro-hook";
 import "./Iztrolabe.css";
 import "../theme/default.css";
 import { Scope } from "iztro/lib/data/types";
+import { HeavenlyStemKey } from "iztro/lib/i18n";
 
 export const Iztrolabe: React.FC<IztrolabeProps> = (props) => {
+ const [activeHeavenlyStem, setActiveHeavenlyStem] =
+ useState<HeavenlyStemKey>();
  const [focusedIndex, setFocusedIndex] = useState<number>();
  const [showDecadal, setShowDecadal] = useState(false);
  const [showYearly, setShowYearly] = useState(false);
@@ -47,6 +50,14 @@ export const Iztrolabe: React.FC<IztrolabeProps> = (props) => {
  }
  };
 
+ const toggleActiveHeavenlyStem = (heavenlyStem: HeavenlyStemKey) => {
+ if (heavenlyStem === activeHeavenlyStem) {
+ setActiveHeavenlyStem(undefined);
+ } else {
+ setActiveHeavenlyStem(heavenlyStem);
+ }
+ };
+
  const dynamic = useMemo(() => {
  if (showHourly) {
  return {
@@ -111,6 +122,8 @@ export const Iztrolabe: React.FC<IztrolabeProps> = (props) => {
  showDailyScope={showDaily}
  showHourlyScope={showHourly}
  toggleScope={toggleShowScope}
+ activeHeavenlyStem={activeHeavenlyStem}
+ toggleActiveHeavenlyStem={toggleActiveHeavenlyStem}
  {...palace}
  />
  );