Skip to content

Commit

Permalink
feat: Improved the moon phase logo so that the icon is correct for th…
Browse files Browse the repository at this point in the history 
…e northern and southern hemisphere
  • Loading branch information
@FleetAdmiralJakob
FleetAdmiralJakob committed Jan 8, 2024
1 parent 0a9f2a0 commit 1ec845a
Show file tree
Hide file tree
Showing 2 changed files with 94 additions and 72 deletions.
77 changes: 5 additions & 72 deletions apps/web/src/pages/home/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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 });
Expand Down Expand Up @@ -905,67 +896,9 @@ const InternalHome = observer(() => {
</HoverCard>
</div>
<div className="mt-2 flex flex-col items-center justify-center hyphens-auto break-words text-center">
{weatherData.data.moonPhaseCode === "800" ? (
<>
<WiMoonAltNew className="h-24 w-24" />
{translationHome("moon phase new moon")}
</>
) : (weatherData.data.moonPhaseCode === "801" &&
activeCity$.coord.lat.get() > 0) ||
(weatherData.data.moonPhaseCode === "807" &&
activeCity$.coord.lat.get() < 0) ? (
<>
<WiMoonAltWaxingCrescent1 className="h-24 w-24" />
{translationHome("moon phase waxing crescent")}
</>
) : (weatherData.data.moonPhaseCode === "802" &&
activeCity$.coord.lat.get() > 0) ||
(weatherData.data.moonPhaseCode === "806" &&
activeCity$.coord.lat.get() < 0) ? (
<>
<WiMoonAltWaxingCrescent2 className="h-24 w-24" />
{translationHome("moon phase first quarter")}
</>
) : (weatherData.data.moonPhaseCode === "803" &&
activeCity$.coord.lat.get() > 0) ||
(weatherData.data.moonPhaseCode === "805" &&
activeCity$.coord.lat.get() < 0) ? (
<>
<WiMoonAltWaxingGibbous2 className="h-24 w-24" />
{translationHome("moon phase waxing gibbous")}
</>
) : weatherData.data.moonPhaseCode === "804" ? (
<>
<WiMoonAltFull className="h-24 w-24" />
{translationHome("moon phase full moon")}
</>
) : (weatherData.data.moonPhaseCode === "803" &&
activeCity$.coord.lat.get() < 0) ||
(weatherData.data.moonPhaseCode === "805" &&
activeCity$.coord.lat.get() > 0) ? (
<>
<WiMoonAltWaningGibbous2 className="h-24 w-24" />
{translationHome("moon phase waning gibbous")}
</>
) : (weatherData.data.moonPhaseCode === "802" &&
activeCity$.coord.lat.get() < 0) ||
(weatherData.data.moonPhaseCode === "806" &&
activeCity$.coord.lat.get() > 0) ? (
<>
<WiMoonAltWaningCrescent2 className="h-24 w-24" />
{translationHome("moon phase last quarter")}
</>
) : (weatherData.data.moonPhaseCode === "801" &&
activeCity$.coord.lat.get() < 0) ||
(weatherData.data.moonPhaseCode === "807" &&
activeCity$.coord.lat.get() > 0) ? (
<>
<WiMoonAltWaningCrescent6 className="h-24 w-24" />
{translationHome("moon phase waning crescent")}
</>
) : (
translationHome("not available")
)}
<MoonPhaseInfo
moonPhaseCode={parseInt(weatherData.data.moonPhaseCode)}
/>
</div>
</div>
) : (
Expand Down
89 changes: 89 additions & 0 deletions apps/web/src/pages/home/moon-phase-info.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 && <MoonPhaseIcon className="h-24 w-24" />}
{moonPhaseName}
</>
);
};

0 comments on commit 1ec845a

Please sign in to comment.