diff --git a/src/components/BoxGraphic.tsx b/src/components/BoxGraphic.tsx index f895b39..0874a3a 100644 --- a/src/components/BoxGraphic.tsx +++ b/src/components/BoxGraphic.tsx @@ -10,19 +10,14 @@ const leftColor = "#ad8d6c"; const rightColor = "#8f704e"; const topColor = "#c9aa8a"; const textColor = "#fff"; -let points: Record = { - A: [370, 100], - B: [525, 190], - C: [525, 375], - D: [355, 450], - E: [190, 355], - F: [190, 170], - Z: [355, 255] -} -const [xOffset, yOffset] = [-180, -100]; -points = Object.fromEntries(Object.entries(points).map(([k, p]) => [k, [p[0] + xOffset, p[1] + yOffset]])) -const {A, B, C, D, E, F, Z} = points; +const A = [190, 0]; +const B = [345, 90]; +const C = [345, 275]; +const D = [175, 350]; +const E = [10, 255]; +const F = [10, 70]; +const Z = [175, 155]; const BoxGraphic = ({id, children, className}: BoxGraphicProps) => { return @@ -30,6 +25,7 @@ const BoxGraphic = ({id, children, className}: BoxGraphicProps) => { + {/* Matrix applies isometric transform, rotate for adjustment, translate to place on top of box */}