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