From 4c04ac5ff90642a375f22f46274c2d280c2c9f6d Mon Sep 17 00:00:00 2001
From: Xevion <ryanchwalters@gmail.com>
Date: Sat, 17 Dec 2022 20:54:08 -0600
Subject: [PATCH] Simplify isometric matrix transform, disable arrow pointer
 events

- Pointer events were being intercepted by high z-level arrows above boxes,
making their hover events somewhat flaky and glitchy
---
 src/components/BoxGraphic.tsx | 2 +-
 src/styles/globals.scss       | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/BoxGraphic.tsx b/src/components/BoxGraphic.tsx
index 0874a3a..9385281 100644
--- a/src/components/BoxGraphic.tsx
+++ b/src/components/BoxGraphic.tsx
@@ -26,7 +26,7 @@ const BoxGraphic = ({id, children, className}: BoxGraphicProps) => {
             <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)"
+            <text transform="matrix(0.9, -0.45, 0.9, 0.45, 0, 0) rotate(10) translate(45, 210)"
                   fontSize='90'
                   fontWeight={700}
                   textAnchor="middle"
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index 1706d7c..0ec5b3f 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -12,7 +12,12 @@ body {
 
 .box {
   @apply transition-all max-h-[6rem];
-  .arrow { @apply drop-shadow-lg; }
+
+  .arrow {
+    @apply drop-shadow-lg;
+    * { pointer-events: none }
+  }
+
   > .text { @apply transition-opacity opacity-30; }
   &:hover {
     > .text { @apply opacity-100; }