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

Working arrows pointing between boxes

Browse Source
This commit is contained in:
Xevion
2022-12-17 16:58:48 -06:00
parent 30343f1d48
commit 3547b83b3e
5 changed files with 55 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/BoxGraphic.tsx
View File

@@ -1,6 +1,7 @@
import React from "react";
interface BoxGraphicProps {
id?: string;
className?: string;
children: React.ReactNode;
}
@@ -23,8 +24,8 @@ 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 BoxGraphic = ({children, className}: BoxGraphicProps) => {
return <svg className={className} viewBox="0 0 370 370" xmlns="http://www.w3.org/2000/svg">
const BoxGraphic = ({id, children, className}: BoxGraphicProps) => {
return <svg id={id} className={className} viewBox="0 0 370 370" xmlns="http://www.w3.org/2000/svg">
<g shapeRendering="auto">
<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}/>