Skip to content

Commit

Permalink
Cleanup for demos
Browse files Browse the repository at this point in the history
  • Loading branch information
imnasnainaec committed Apr 19, 2024
1 parent a5dce28 commit 3f8eb49
Show file tree
Hide file tree
Showing 4 changed files with 25 additions and 45 deletions.
2 changes: 1 addition & 1 deletion src/components/HarvestThreshWinnow/ImageAttributions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ interface ImageAttributionsButtonProps {
width?: number;
}

/** Icon button for image attributions */
/** Icon button for image attributions (assumes CC BY-SA) */
export default function ImageAttributionsButton(
props: ImageAttributionsButtonProps
): ReactElement {
Expand Down
64 changes: 22 additions & 42 deletions src/components/HarvestThreshWinnow/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
import { type AnimationOptionsWithOverrides, animate } from "motion";
import { type CSSProperties, type ReactElement, useEffect } from "react";
import {
type CSSProperties,
type ReactElement,
useEffect,
useState,
} from "react";

import ImageAttributions, {
ImageMetadata,
Expand Down Expand Up @@ -55,30 +60,26 @@ const winnowMetadata: ImageMetadata = {
};

interface HarvestThreshWinnowProps {
fadeOutSeparate?: boolean;
loading?: boolean;
maxSize?: number;
}

// Opacity of the 3 images for fading in separately then out together
const opacityA1 = [0, 0.5, 1, 1, 1, 1, 1, 1, 0, 0];
const opacityA2 = [0, 0, 0, 0.5, 1, 1, 1, 1, 0, 0];
const opacityA3 = [0, 0, 0, 0, 0, 0.5, 1, 1, 0, 0];

// Opacity of the 3 images for fading in separately then out separately
const opacityB1 = [0, 1, 1, 1, 0, 0, 0];
const opacityB2 = [0, 0, 1, 1, 1, 0, 0];
const opacityB3 = [0, 0, 0, 1, 1, 1, 0];
const opacityA1 = [0, 1, 1, 1, 0, 0, 0];
const opacityA2 = [0, 0, 1, 1, 1, 0, 0];
const opacityA3 = [0, 0, 0, 1, 1, 1, 0];

// Opacity of the 3 images for fading in and out separately
const opacityC1 = [0, 0.5, 1, 1, 0.5, 0, 0, 0, 0, 0, 0, 0, 0];
const opacityC2 = [0, 0, 0, 0, 0.5, 1, 1, 0.5, 0, 0, 0, 0, 0];
const opacityC3 = [0, 0, 0, 0, 0, 0, 0, 0.5, 1, 1, 0.5, 0, 0];
const opacityB1 = [0, 0.5, 1, 1, 0.5, 0, 0, 0, 0, 0, 0, 0, 0];
const opacityB2 = [0, 0, 0, 0, 0.5, 1, 1, 0.5, 0, 0, 0, 0, 0];
const opacityB3 = [0, 0, 0, 0, 0, 0, 0, 0.5, 1, 1, 0.5, 0, 0];

/** A custom harvest-thresh-winnow image */
export default function HarvestThreshWinnow(
props: HarvestThreshWinnowProps
): ReactElement {
const [fadeOutSeparate, setFadeOutSeparate] = useState(false);

const size = Math.min(
0.75 * window.innerHeight,
0.25 * window.innerWidth,
Expand All @@ -94,26 +95,26 @@ export default function HarvestThreshWinnow(
if (props.loading) {
animate(
`#${ImageId.License}`,
{ opacity: props.fadeOutSeparate ? opacityC1 : opacityB1 },
{ opacity: fadeOutSeparate ? opacityB1 : opacityA1 },
options
);
animate(
`#${ImageId.Harvest}`,
{ opacity: props.fadeOutSeparate ? opacityC1 : opacityB1 },
{ opacity: fadeOutSeparate ? opacityB1 : opacityA1 },
options
);
animate(
`#${ImageId.Thresh}`,
{ opacity: props.fadeOutSeparate ? opacityC2 : opacityB2 },
{ opacity: fadeOutSeparate ? opacityB2 : opacityA2 },
options
);
animate(
`#${ImageId.Winnow}`,
{ opacity: props.fadeOutSeparate ? opacityC3 : opacityB3 },
{ opacity: fadeOutSeparate ? opacityB3 : opacityA3 },
options
);
}
}, [props.fadeOutSeparate, props.loading]);
}, [fadeOutSeparate, props.loading]);

const imageStyle: CSSProperties = {
border: "1px solid black",
Expand All @@ -122,33 +123,10 @@ export default function HarvestThreshWinnow(
width: size,
};

const whiteCircleStyle: CSSProperties = {
backgroundColor: "white",
border: "1px solid white",
borderRadius: size,
height: size,
position: "absolute",
width: size,
};

const overlap = 0.23;

return (
<div style={{ height: size, position: "relative", margin: 10 }}>
{/*props.fadeOutSeparate || (
<div
style={{
...whiteCircleStyle,
right: (1 - overlap) * size,
zIndex: -1,
}}
/>
)}
{props.fadeOutSeparate || (
<div
style={{ ...whiteCircleStyle, right: overlap * size, zIndex: 1 }}
/>
)*/}
<img
alt={ImageAlt.Harvest}
id={ImageId.Harvest}
Expand All @@ -164,13 +142,15 @@ export default function HarvestThreshWinnow(
<img
alt={ImageAlt.Winnow}
id={ImageId.Winnow}
onClick={() => setFadeOutSeparate(!fadeOutSeparate)}
src={winnow}
style={{ ...imageStyle, right: overlap * size, zIndex: 2 }}
/>
<div
id={ImageId.License}
style={{
bottom: -10, // The -10 offsets the button padding
// Use -10 to offset the button padding
bottom: -10,
left: 0.2 * size - 10,
position: "absolute",
}}
Expand Down
2 changes: 1 addition & 1 deletion src/components/LandingPage/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ function Body(): ReactElement {
</div>
<SignUpButton buttonIdPrefix="landing-body" />
<HarvestThreshWinnow
maxSize={Math.min(400, (window.innerWidth - verticalButtonsWidth) / 4)}
maxSize={Math.min(400, (window.innerWidth - verticalButtonsWidth) / 5)}
/>
</Box>
);
Expand Down
2 changes: 1 addition & 1 deletion src/goals/DefaultGoal/Loading.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default function Loading(): ReactElement {
rowGap={3}
>
<Typography variant="h4">{t("generic.loadingTitle")}</Typography>
<HarvestThreshWinnow fadeOutSeparate loading />
<HarvestThreshWinnow loading />
<Typography variant="h5">{t("generic.loadingText")}</Typography>
</Box>
);
Expand Down

0 comments on commit 3f8eb49

Please sign in to comment.