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

Refactor SVG colors into globals.scss

Browse Source
This commit is contained in:
Xevion
2022-12-18 02:19:41 -06:00
parent 3dc22cd65a
commit fde6842dab
2 changed files with 16 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/BoxGraphic.tsx
View File

@@ -1,4 +1,5 @@
import React from "react"; import React from "react";
import {classNames} from "@/utils/helpers";
interface BoxGraphicProps { interface BoxGraphicProps {
id?: string; id?: string;
@@ -6,11 +7,6 @@ interface BoxGraphicProps {
children: React.ReactNode; children: React.ReactNode;
} }
const leftColor = "#ad8d6c";
const rightColor = "#8f704e";
const topColor = "#c9aa8a";
const textColor = "#fff";
const A = [190, 0]; const A = [190, 0];
const B = [345, 90]; const B = [345, 90];
const C = [345, 275]; const C = [345, 275];
@@ -20,18 +16,18 @@ const F = [10, 70];
const Z = [175, 155]; const Z = [175, 155];
const BoxGraphic = ({id, children, className}: BoxGraphicProps) => { const BoxGraphic = ({id, children, className}: BoxGraphicProps) => {
return <svg id={id} className={className} viewBox="0 0 370 370" xmlns="http://www.w3.org/2000/svg"> return <svg id={id} className={classNames(className, "box-graphic")} viewBox="0 0 370 370"
xmlns="http://www.w3.org/2000/svg">
<g shapeRendering="auto"> <g shapeRendering="auto">
<path id="left" d={`M ${F} L ${Z} L ${D} L ${E} L ${F} Z`} fill={leftColor}/> <path className="left" d={`M ${F} L ${Z} L ${D} L ${E} L ${F} Z`}/>
<path id="right" d={`M ${D} L ${C} L ${B} L ${Z} L ${D} Z`} fill={rightColor}/> <path className="right" d={`M ${D} L ${C} L ${B} L ${Z} L ${D} Z`}/>
<path id="top" d={`M ${F} L ${A} L ${B} L ${Z} Z`} fill={topColor}/> <path className="top" d={`M ${F} L ${A} L ${B} L ${Z} Z`}/>
{/* Matrix applies isometric transform, rotate for adjustment, translate to place on top of box */} {/* Matrix applies isometric transform, rotate for adjustment, translate to place on top of box */}
<text transform="matrix(0.9, -0.45, 0.9, 0.45, 0, 0) rotate(10) translate(45, 210)" <text className="text"
transform="matrix(0.9, -0.45, 0.9, 0.45, 0, 0) rotate(10) translate(45, 210)"
fontSize='90' fontSize='90'
fontWeight={700} fontWeight={700}
textAnchor="middle" textAnchor="middle">
id="number"
fill={textColor}>
{children} {children}
</text> </text>
</g> </g>

7
src/styles/globals.scss
View File

@@ -45,3 +45,10 @@ body {
} }
} }
} }
.box-graphic {
.top { @apply fill-[#c9aa8a]; }
.left { @apply fill-[#ad8d6c]; }
.right {@apply fill-[#8f704e];}
.text { @apply fill-white; }
}