From 1ec845a71402455956176c4fdd5255edc2d3fb99 Mon Sep 17 00:00:00 2001 From: FleetAdmiralJakob Date: Mon, 8 Jan 2024 18:53:13 +0100 Subject: [PATCH] feat: Improved the moon phase logo so that the icon is correct for the northern and southern hemisphere --- apps/web/src/pages/home/index.tsx | 77 ++---------------- apps/web/src/pages/home/moon-phase-info.tsx | 89 +++++++++++++++++++++ 2 files changed, 94 insertions(+), 72 deletions(-) create mode 100644 apps/web/src/pages/home/moon-phase-info.tsx diff --git a/apps/web/src/pages/home/index.tsx b/apps/web/src/pages/home/index.tsx index c1ef01f2..3ecf5e39 100644 --- a/apps/web/src/pages/home/index.tsx +++ b/apps/web/src/pages/home/index.tsx @@ -24,17 +24,7 @@ import { } from "react-icons/fa6"; import { LuChevronDownSquare, LuInfo, LuLink } from "react-icons/lu"; import { PiSunglasses } from "react-icons/pi"; -import { - WiMoonAltFull, - WiMoonAltNew, - WiMoonAltWaningCrescent2, - WiMoonAltWaningCrescent6, - WiMoonAltWaningGibbous2, - WiMoonAltWaxingCrescent1, - WiMoonAltWaxingCrescent2, - WiMoonAltWaxingGibbous2, - WiRaindrop, -} from "react-icons/wi"; +import { WiRaindrop } from "react-icons/wi"; import type { IDailyForecast, IHourlyForecast } from "@weatherio/types"; import { Button } from "@weatherio/ui/button"; @@ -54,6 +44,7 @@ import { Skeleton } from "@weatherio/ui/skeleton"; import type { WindSpeedUnitType } from "~/states"; import Layout from "~/components/Layout"; import { api } from "~/lib/utils/api"; +import { MoonPhaseInfo } from "~/pages/home/moon-phase-info"; import { activeCity$, temperatureUnit$, windSpeedUnit$ } from "~/states"; const Map = dynamic(() => import("@weatherio/ui/map"), { ssr: false }); @@ -905,67 +896,9 @@ const InternalHome = observer(() => {
- {weatherData.data.moonPhaseCode === "800" ? ( - <> - - {translationHome("moon phase new moon")} - - ) : (weatherData.data.moonPhaseCode === "801" && - activeCity$.coord.lat.get() > 0) || - (weatherData.data.moonPhaseCode === "807" && - activeCity$.coord.lat.get() < 0) ? ( - <> - - {translationHome("moon phase waxing crescent")} - - ) : (weatherData.data.moonPhaseCode === "802" && - activeCity$.coord.lat.get() > 0) || - (weatherData.data.moonPhaseCode === "806" && - activeCity$.coord.lat.get() < 0) ? ( - <> - - {translationHome("moon phase first quarter")} - - ) : (weatherData.data.moonPhaseCode === "803" && - activeCity$.coord.lat.get() > 0) || - (weatherData.data.moonPhaseCode === "805" && - activeCity$.coord.lat.get() < 0) ? ( - <> - - {translationHome("moon phase waxing gibbous")} - - ) : weatherData.data.moonPhaseCode === "804" ? ( - <> - - {translationHome("moon phase full moon")} - - ) : (weatherData.data.moonPhaseCode === "803" && - activeCity$.coord.lat.get() < 0) || - (weatherData.data.moonPhaseCode === "805" && - activeCity$.coord.lat.get() > 0) ? ( - <> - - {translationHome("moon phase waning gibbous")} - - ) : (weatherData.data.moonPhaseCode === "802" && - activeCity$.coord.lat.get() < 0) || - (weatherData.data.moonPhaseCode === "806" && - activeCity$.coord.lat.get() > 0) ? ( - <> - - {translationHome("moon phase last quarter")} - - ) : (weatherData.data.moonPhaseCode === "801" && - activeCity$.coord.lat.get() < 0) || - (weatherData.data.moonPhaseCode === "807" && - activeCity$.coord.lat.get() > 0) ? ( - <> - - {translationHome("moon phase waning crescent")} - - ) : ( - translationHome("not available") - )} +
) : ( diff --git a/apps/web/src/pages/home/moon-phase-info.tsx b/apps/web/src/pages/home/moon-phase-info.tsx new file mode 100644 index 00000000..2f60d56e --- /dev/null +++ b/apps/web/src/pages/home/moon-phase-info.tsx @@ -0,0 +1,89 @@ +import type { IconType } from "react-icons"; +import { useTranslation } from "next-i18next"; +import { + WiMoonAltFirstQuarter, + WiMoonAltFull, + WiMoonAltNew, + WiMoonAltThirdQuarter, + WiMoonAltWaningCrescent5, + WiMoonAltWaningGibbous3, + WiMoonAltWaxingCrescent2, + WiMoonAltWaxingGibbous3, +} from "react-icons/wi"; + +import { activeCity$ } from "~/states"; + +export const MoonPhaseInfo = ({ moonPhaseCode }: { moonPhaseCode: number }) => { + const { t: translationHome } = useTranslation("home"); + + let MoonPhaseIcon: IconType | null = null; + let moonPhaseName: string = translationHome("not available"); + + const nothernHemisphere = activeCity$.coord.lat.get() > 0; + + switch (moonPhaseCode) { + case 800: + MoonPhaseIcon = WiMoonAltNew as IconType; + moonPhaseName = translationHome("moon phase new moon"); + break; + case 801: + MoonPhaseIcon = WiMoonAltWaxingCrescent2 as IconType; + if (nothernHemisphere) { + moonPhaseName = translationHome("moon phase waxing crescent"); + } else { + moonPhaseName = translationHome("moon phase waning crescent"); + } + break; + case 802: + MoonPhaseIcon = WiMoonAltFirstQuarter as IconType; + if (nothernHemisphere) { + moonPhaseName = translationHome("moon phase first quarter"); + } else { + moonPhaseName = translationHome("moon phase last quarter"); + } + break; + case 803: + MoonPhaseIcon = WiMoonAltWaxingGibbous3 as IconType; + if (nothernHemisphere) { + moonPhaseName = translationHome("moon phase waxing gibbous"); + } else { + moonPhaseName = translationHome("moon phase waning gibbous"); + } + break; + case 804: + MoonPhaseIcon = WiMoonAltFull as IconType; + moonPhaseName = translationHome("moon phase full moon"); + break; + case 805: + MoonPhaseIcon = WiMoonAltWaningGibbous3 as IconType; + if (nothernHemisphere) { + moonPhaseName = translationHome("moon phase waning gibbous"); + } else { + moonPhaseName = translationHome("moon phase waxing gibbous"); + } + break; + case 806: + MoonPhaseIcon = WiMoonAltThirdQuarter as IconType; + if (nothernHemisphere) { + moonPhaseName = translationHome("moon phase last quarter"); + } else { + moonPhaseName = translationHome("moon phase first quarter"); + } + break; + case 807: + MoonPhaseIcon = WiMoonAltWaningCrescent5 as IconType; + if (nothernHemisphere) { + moonPhaseName = translationHome("moon phase waning crescent"); + } else { + moonPhaseName = translationHome("moon phase waxing crescent"); + } + break; + } + + return ( + <> + {MoonPhaseIcon && } + {moonPhaseName} + + ); +};