Skip to content

Commit

Permalink
Implemented correct number of rows generation
Browse files Browse the repository at this point in the history
  • Loading branch information
@izhuravlev
izhuravlev committed Dec 10, 2019
1 parent 8951a9e commit dcae911
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 44 deletions.
98 changes: 60 additions & 38 deletions src/components/shapes/RightTriangle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,33 @@ import React from "react";
import PropTypes from "prop-types";
import theme from "../../theme";

const Hexagon = props => {
const { image, idx, fabric, quiltSectionWidth, changeOneFabric, fabricSelected } = props;
const RightTriangle = props => {
const {
image,
idx,
fabric,
quiltSectionWidth,
changeOneFabric,
fabricSelected
} = props;

// if even number wide, true.
// if not even number wide, make even every other row.
const isFirst = Math.floor(idx / quiltSectionWidth) % 4 === 0;
const isThird = Math.floor(idx / quiltSectionWidth) % 4 === 2;

const isOddSecond = Math.floor(idx / quiltSectionWidth) % 4 === 1 && (quiltSectionWidth - 1) % 2 === 1;
const isOddFourth = Math.floor(idx / quiltSectionWidth) % 4 === 3 && (quiltSectionWidth - 1) % 2 === 1;
const isEvenSecond = Math.floor(idx / quiltSectionWidth) % 4 === 1 && (quiltSectionWidth - 1) % 2 === 0;
const isEvenFourth = Math.floor(idx / quiltSectionWidth) % 4 === 3 && (quiltSectionWidth - 1) % 2 === 0;
const isOddSecond =
Math.floor(idx / quiltSectionWidth) % 4 === 1 &&
(quiltSectionWidth - 1) % 2 === 1;
const isOddFourth =
Math.floor(idx / quiltSectionWidth) % 4 === 3 &&
(quiltSectionWidth - 1) % 2 === 1;
const isEvenSecond =
Math.floor(idx / quiltSectionWidth) % 4 === 1 &&
(quiltSectionWidth - 1) % 2 === 0;
const isEvenFourth =
Math.floor(idx / quiltSectionWidth) % 4 === 3 &&
(quiltSectionWidth - 1) % 2 === 0;

return (
<div
Expand All @@ -26,67 +41,67 @@ const Hexagon = props => {
backgroundRepeat: "repeat",
backgroundImage: `url(./images/${fabric}/${fabric}${image}.jpg)`,
backgroundPosition: "center",
backgroundSize: "cover",
backgroundSize: "cover"
},
isFirst && {
"&:nth-of-type(odd)": {
transform: "rotate(0deg)",
transform: "rotate(0deg)"
},
"&:nth-of-type(even)": {
transform: "rotate(90deg)",
},
transform: "rotate(90deg)"
}
},

isThird && {
"&:nth-of-type(even)": {
transform: "rotate(180deg)",
transform: "rotate(180deg)"
},
"&:nth-of-type(odd)": {
transform: "rotate(270deg)",
},
transform: "rotate(270deg)"
}
},

isOddSecond && {
"&:nth-of-type(odd)": {
transform: "rotate(180deg)",
marginTop: `calc(-94vw / ${quiltSectionWidth})`,
marginTop: `calc(-94vw / ${quiltSectionWidth})`
},
"&:nth-of-type(even)": {
transform: "rotate(270deg)",
marginTop: `calc(-94vw / ${quiltSectionWidth})`,
},
marginTop: `calc(-94vw / ${quiltSectionWidth})`
}
},
isOddFourth && {
"&:nth-of-type(even)": {
transform: "rotate(0deg)",
marginTop: `calc(-94vw / ${quiltSectionWidth})`,
marginTop: `calc(-94vw / ${quiltSectionWidth})`
},
"&:nth-of-type(odd)": {
transform: "rotate(90deg)",
marginTop: `calc(-94vw / ${quiltSectionWidth})`,
},
marginTop: `calc(-94vw / ${quiltSectionWidth})`
}
},

isEvenSecond && {
"&:nth-of-type(even)": {
transform: "rotate(180deg)",
marginTop: `calc(-94vw / ${quiltSectionWidth})`,
marginTop: `calc(-94vw / ${quiltSectionWidth})`
},
"&:nth-of-type(odd)": {
transform: "rotate(270deg)",
marginTop: `calc(-94vw / ${quiltSectionWidth})`,
},
marginTop: `calc(-94vw / ${quiltSectionWidth})`
}
},
isEvenFourth && {
"&:nth-of-type(odd)": {
transform: "rotate(0deg)",
marginTop: `calc(-94vw / ${quiltSectionWidth})`,
marginTop: `calc(-94vw / ${quiltSectionWidth})`
},
"&:nth-of-type(even)": {
transform: "rotate(90deg)",
marginTop: `calc(-94vw / ${quiltSectionWidth})`,
},
},
marginTop: `calc(-94vw / ${quiltSectionWidth})`
}
}
]}
>
{fabricSelected && (
Expand All @@ -96,7 +111,7 @@ const Hexagon = props => {
height: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
alignItems: "center"
}}
>
<button onClick={() => changeOneFabric(idx)}>{image}</button>
Expand All @@ -106,21 +121,21 @@ const Hexagon = props => {
);
};

Hexagon.propTypes = {
RightTriangle.propTypes = {
image: PropTypes.number,
idx: PropTypes.number,
fabric: PropTypes.string,
quiltSectionWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
quiltSectionHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
changeOneFabric: PropTypes.func,
fabricSelected: PropTypes.number,
fabricSelected: PropTypes.number
};

const Hexagons = props => {
const RightTriangles = props => {
const { quiltSectionHeight, quiltSectionWidth, imageList } = props;
const heightMeasurement = `(94vw / ${quiltSectionWidth})`;
const rows = quiltSectionHeight;

const rows = quiltSectionHeight * 2;
//- 1 * (quiltSectionHeight % 2)
return (
<div
className="Quilt"
Expand All @@ -129,26 +144,33 @@ const Hexagons = props => {
width: theme.breakpoints[0],
display: "grid",
gridTemplateColumns: `repeat(${quiltSectionWidth}, calc(${theme.breakpoints[0]} / ${quiltSectionWidth}))`,
gridTemplateRows: `repeat(${quiltSectionHeight}, 0fr)`,
gridTemplateRows: `repeat(${quiltSectionHeight + 1}, 0fr)`,
margin: "40px auto -16px auto",
maxHeight: `calc(${rows} * ${heightMeasurement} / 2)`,
boxShadow: "0 0 4px rgba(0, 0, 0, 0.3)",
boxShadow: "0 0 4px rgba(0, 0, 0, 0.3)"
}}
>
{imageList.map((image, idx) => {
return <Hexagon key={`hexi-key-${image}-${idx}`} idx={idx} image={image} {...props} />;
return (
<RightTriangle
key={`hexi-key-${image}-${idx}`}
idx={idx}
image={image}
{...props}
/>
);
})}
</div>
);
};

Hexagons.propTypes = {
RightTriangles.propTypes = {
imageList: PropTypes.array,
quiltSectionWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
quiltSectionHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
fabric: PropTypes.string,
changeOneFabric: PropTypes.func,
fabricSelected: PropTypes.number,
fabricSelected: PropTypes.number
};

export default Hexagons;
export default RightTriangles;
32 changes: 26 additions & 6 deletions src/utils/generateImages.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,14 @@ const generateRandomImage = ({ idx, rowWidth, fabric, shape }) => {
...touchingSpaces,
imageList[idx - rowWidth * 2 - 1],
imageList[idx - rowWidth * 2],
imageList[idx - rowWidth * 2 + 1],
imageList[idx - rowWidth * 2 + 1]
];
} else {
touchingSpaces = [
...touchingSpaces,
imageList[idx - rowWidth - 1],
imageList[idx - rowWidth],
imageList[idx - rowWidth + 1],
imageList[idx - rowWidth + 1]
];
}

Expand All @@ -55,7 +55,11 @@ const generateRandomImage = ({ idx, rowWidth, fabric, shape }) => {
sameAsLastRowHue = touchingSpacesHue.indexOf(randImageHue) > -1;

console.log(notImage, randImgNum);
} while (notImage.indexOf(randImgNum) > -1 || sameAsLastRow || sameAsLastRowHue);
} while (
notImage.indexOf(randImgNum) > -1 ||
sameAsLastRow ||
sameAsLastRowHue
);
return randImgNum;
};

Expand All @@ -69,11 +73,20 @@ const generateRandomImage = ({ idx, rowWidth, fabric, shape }) => {
*
* @returns {array}
*/
const generateAllImages = ({ fabric, quiltSectionWidth, quiltSectionHeight, shape }) => {
const generateAllImages = ({
fabric,
quiltSectionWidth,
quiltSectionHeight,
shape
}) => {
const imageList = getImageList();
const newImageList = [];
const height =
shape === "RightTriangle"
? (quiltSectionHeight - 1) * 2
: quiltSectionHeight;

[...Array(quiltSectionWidth * quiltSectionHeight).keys()].forEach(idx => {
[...Array(quiltSectionWidth * height).keys()].forEach(idx => {
const data = { idx, rowWidth: quiltSectionWidth, fabric };
const image = imageList[idx] || generateRandomImage(data);
newImageList.push(image);
Expand Down Expand Up @@ -141,4 +154,11 @@ const getImageCounts = () => {
return counts;
};

export { generateRandomImage, generateAllImages, getImageList, setImageList, regenerateAllImages, getImageCounts };
export {
generateRandomImage,
generateAllImages,
getImageList,
setImageList,
regenerateAllImages,
getImageCounts
};

0 comments on commit dcae911

Please sign in to comment.