website

commit c69a213a1824c51bb99f9fcb0c7f2dbce94639cf
parent 2f1a6fed8c69d642d799742fa979e8a341a65525
Author: fen123456 <fenwthompson@gmail.com>
Date:   Fri, 14 Aug 2026 15:44:58 +0100

Merge branch 'main' of https://github.com/hrryt/website

Diffstat:
M
src/components/graphing/Angle.jsx
 | 
5
++++-
M
src/pages/Home.jsx
 | 
4
++--

2 files changed, 6 insertions(+), 3 deletions(-)
diff --git a/src/components/graphing/Angle.jsx b/src/components/graphing/Angle.jsx
@@ -1,4 +1,6 @@
 import Label from './Label.jsx';
+import { useContext } from 'preact/hooks';
+import { ScaleFactorContext } from '../../scripts/contexts.js';
 import { getColourClass, getMidpoint, interpolateDistance } from '../../scripts/utils.js';
 
 function getArc(points, radius) {
@@ -18,10 +20,11 @@ function AngleLabel({ points, radius, colour, children }) {
 }
 
 export default function Angle({ points, radius = 0.5, arcs = 1, label = null, colour = "auto" }) {
+  const concentricGap = 7 * useContext(ScaleFactorContext);
   return (
     <g>
       {Array.from({ length: arcs }).map(
-        (_, i) => <AngleArc points={points} radius={(1 + .2*i) * radius} colour={colour} />
+        (_, i) => <AngleArc points={points} radius={(1 + i*concentricGap) * radius} colour={colour} />
       )}
       {label && <AngleLabel points={points} radius={radius} colour={colour}>{label}</AngleLabel>}
     </g>
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -18,11 +18,11 @@ export default function Home() {
           <Graph viewBox={viewBox}>
             <Quadratic a={2} b={1} c={-3} colour="1" viewBox={viewBox} />
             <Polygon points={[[1,2], [-1,1], [-4,3]]} label="P" colour="2" />
-            <Angle points={[[-4,3], [1,2], [-1,1]]} arcs={3} colour="2" />
+            <Angle points={[[-4,3], [1,2], [-1,1]]} arcs={2} colour="2" />
             <Cubic a={1} b={-3} c={3} d={-1} colour="3" viewBox={viewBox} />
             <Line line={{a: -10, b: -9, c: -1}} colour="5" viewBox={viewBox} />
             <Segment points={[[0,1], [2,2]]} marker="double-feather" />
-            <Point point={[0,1]} label="Q" colour="1" />
+            <Point point={[0,1]} label="Q" colour="4" />
           </Graph>
         </div>
       </Window>