www
/
www-new
12
3
Fork 5
Code Issues 58 Pull Requests 42 Projects Releases Wiki Activity

Tweak shape placement and generation
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Amy 2021-08-26 15:59:56 -04:00
parent 0a0f803ccf
commit 711152c428
1 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
components/ShapesBackground.tsx
View File

@ -28,8 +28,8 @@ export function ShapesBackground({ getConfig }: Props) {
containerWidth == null ||
containerHeight == null ||
!(
router.pathname === "/" ||
router.pathname !== prevRoute ||
router.asPath === "/" ||
router.asPath !== prevRoute ||
prevWidth < 0 ||
(prevWidth <= MOBILE_WIDTH && MOBILE_WIDTH < width) ||
(prevWidth > MOBILE_WIDTH && MOBILE_WIDTH >= width)
@ -39,9 +39,9 @@ export function ShapesBackground({ getConfig }: Props) {
}
setPrevWidth(width);
setPrevRoute(router.pathname);
setPrevRoute(router.asPath);
setConfig(getConfig?.(containerWidth, containerHeight) ?? {});
}, [getConfig, width, height, prevWidth, prevRoute, router.pathname]);
}, [getConfig, width, height, prevWidth, prevRoute, router.asPath]);
return (
<div className={styles.shapesContainer} ref={shapesContainerRef}>
@ -186,8 +186,6 @@ export const defaultGetShapesConfig = ((pageWidth, pageHeight) => {
}
const defaultConfig: ShapesConfig = {};
shapeTypes.forEach((shape) => (defaultConfig[shape] = []));
const gap = 20;
const boxWidth = Math.max(300, (pageWidth - 800 - 2 * gap) / 2);
const boxHeight = 400;
@ -201,22 +199,27 @@ export const defaultGetShapesConfig = ((pageWidth, pageHeight) => {
const size = y == 0 || y + 2 * boxHeight > pageHeight ? "big" : "small";
const shape: ShapeType = getRandomShape(size);
const verticalOffset = getVerticalOffset(boxHeight, shape);
const horizontalOffset = getHorizontalOffset(boxWidth, shape);
const horizontalOffset = getHorizontalOffset(boxWidth - 2 * gap, shape);
const shapeWidth = shapesSizes[shape]["width"];
const shapeHeight = shapesSizes[shape]["height"];
const angle = getRandomAngle(shape);
const colour = getRandomColour();
const opacity = getRandomOpacity(colour);
defaultConfig[shape] ??= [];
defaultConfig[shape]?.push({
top: `${((y + verticalOffset) / 16).toFixed(5)}rem`,
left:
x == 0
? `${((horizontalOffset / window.innerWidth) * 100).toFixed(5)}vw`
? `${(((horizontalOffset + gap) / window.innerWidth) * 100).toFixed(
5
)}vw`
: "unset",
right:
x == 1
? `${((horizontalOffset / window.innerWidth) * 100).toFixed(5)}vw`
? `${(((horizontalOffset + gap) / window.innerWidth) * 100).toFixed(
5
)}vw`
: "unset",
width: `${(shapeWidth / 16).toFixed(5)}rem`,
height: `${(shapeHeight / 16).toFixed(5)}rem`,