xevion/100prisoners
1
0
Fork 0
mirror of https://github.com/Xevion/100prisoners.git synced 2025-12-09 10:06:28 -06:00
Code Issues Packages Projects Releases Wiki Activity

Apply offset statically & literally

Browse Source
This commit is contained in:
Xevion
2022-12-17 20:44:02 -06:00
parent f9c48d3400
commit 2b07a16f27
1 changed files with 8 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/BoxGraphic.tsx
View File

@@ -10,19 +10,14 @@ const leftColor = "#ad8d6c";
const rightColor = "#8f704e";
const topColor = "#c9aa8a";
const textColor = "#fff";
let points: Record<string, [number, number]> = {
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 <svg id={id} className={className} viewBox="0 0 370 370" xmlns="http://www.w3.org/2000/svg">
@@ -30,6 +25,7 @@ const BoxGraphic = ({id, children, className}: BoxGraphicProps) => {
<path id="left" d={`M ${F} L ${Z} L ${D} L ${E} L ${F} Z`} fill={leftColor}/>
<path id="right" d={`M ${D} L ${C} L ${B} L ${Z} L ${D} Z`} fill={rightColor}/>
<path id="top" d={`M ${F} L ${A} L ${B} L ${Z} Z`} fill={topColor}/>
{/* Matrix applies isometric transform, rotate for adjustment, translate to place on top of box */}
<text transform="matrix(0.8944276,-0.4472128,0.8944265,0.447215,0,0) rotate(10) translate(45, 210)"
fontSize='90'
fontWeight={700}