fix: maybe working retina displays

src/Primal.tsx

@@ -85,6 +85,8 @@ const PrimalStep = ({
 export const Primal = ({ input }: { input: ProblemInput }) => {
     // const steps: Step[] = [{ B: input.B }]
 
+    const timerStart = performance.now()
+
     const problemOutput = computePrimalSimplexSteps({
         A: input.A,
         b: input.b,
@@ -93,8 +95,10 @@ export const Primal = ({ input }: { input: ProblemInput }) => {
         maxIterations: 10,
     })
 
+    const timerDelta = performance.now() - timerStart
+
     return (
-        <div class="steps">
+        <div class="steps" title={`Calcolato in ${timerDelta}ms`}>
             <div class="title">
                 <h2>Svolgimento</h2>
             </div>
@@ -144,15 +148,14 @@ const PrimalCanvas = ({
         $canvas.width = $canvas.offsetWidth * window.devicePixelRatio
         $canvas.height = $canvas.offsetHeight * window.devicePixelRatio
 
+        const width = $canvas.width / window.devicePixelRatio
+        const height = $canvas.height / window.devicePixelRatio
+
         const g = $canvas.getContext('2d')
         if (!g) {
             throw new Error('Could not get 2d context')
         }
 
-        const width = $canvas.offsetWidth
-        const height = $canvas.offsetHeight
-
-        g.clearRect(0, 0, width, height)
         g.strokeStyle = '#333'
         g.lineWidth = 2
         g.lineCap = 'round'
@@ -164,6 +167,7 @@ const PrimalCanvas = ({
         g.textBaseline = 'middle'
 
         g.scale(window.devicePixelRatio, window.devicePixelRatio)
+        g.clearRect(0, 0, width, height)
 
         const [c1, c2] = c.getData()
         const cLen = Math.sqrt(c1.toNumber() ** 2 + c2.toNumber() ** 2)

src/lib-v2/canvas/index.ts

@@ -92,6 +92,7 @@ export function drawSimpleArrow(
     color: string = '#333'
 ) {
     const arrowLength = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2)
+    const actualSize = (500 * size) / g.canvas.offsetWidth
 
     g.save()
     g.strokeStyle = color
@@ -101,13 +102,13 @@ export function drawSimpleArrow(
     g.translate(x1, y1)
     g.rotate(Math.atan2(y2 - y1, x2 - x1))
     g.moveTo(0, 0)
-    g.lineTo(arrowLength - size / 2, 0)
+    g.lineTo(arrowLength - actualSize / 2, 0)
     g.stroke()
 
     g.beginPath()
     g.moveTo(arrowLength, 0)
-    g.lineTo(arrowLength - size, -size * 0.75)
-    g.lineTo(arrowLength - size, +size * 0.75)
+    g.lineTo(arrowLength - actualSize, -actualSize * 0.75)
+    g.lineTo(arrowLength - actualSize, +actualSize * 0.75)
     g.lineTo(arrowLength, 0)
     g.fill()
     g.restore()

src/style.css

@@ -16,6 +16,10 @@
     html,
     body {
         min-height: 100%;
+
+        @media (width < 70rem) {
+            overflow-x: hidden;
+        }
     }
 
     img {
@@ -43,6 +47,8 @@
 
     textarea,
     input[type='text'] {
+        font-size: 16px;
+
         background: #fff;
         border: 1px solid #888;
         min-height: 1.75rem;
@@ -52,10 +58,6 @@
         box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
     }
 
-    input[type='text'] {
-        font-size: 16px;
-    }
-
     textarea {
         resize: vertical;
 
@@ -128,9 +130,8 @@
     }
 
     canvas {
-        display: block;
+        display: grid;
         width: 100%;
-
         aspect-ratio: 1 / 1;
 
         border: 1px solid #ddd;
@@ -143,7 +144,7 @@
         display: grid;
         grid-auto-flow: row;
         justify-items: center;
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: 1fr auto;
 
         border: 1px solid #ddd;
         box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
@@ -161,7 +162,7 @@
             text-align: center;
             padding-bottom: 1rem;
 
-            @media (width < 768px) {
+            @media (width < 70rem) {
                 grid-column: span 1;
             }
         }
@@ -176,7 +177,7 @@
             /* align-items: center; */
             gap: 0;
 
-            @media (width < 768px) {
+            @media (width < 70rem) {
                 grid-column: span 1;
                 grid-template-columns: 1fr;
             }
@@ -200,13 +201,28 @@
             }
 
             > .geometric-step {
-                @media (width < 768px) {
-                    min-width: 0;
+                display: grid;
+
+                canvas {
+                    width: 25rem;
+                    height: 25rem;
+
+                    @media (width < 70rem) {
+                        width: calc(100vw - 4rem);
+                        height: calc(100vw - 4rem);
+
+                        max-width: 25rem;
+                        max-height: 25rem;
+                    }
+                }
+
+                @media (width < 70rem) {
+                    padding: 0 1rem;
                 }
             }
 
             > * {
-                min-width: 30rem;
+                min-width: 25rem;
             }
 
             padding: 2rem 0;
@@ -215,7 +231,7 @@
                 border-top: 1px solid #ddd;
             }
 
-            @media (width < 768px) {
+            @media (width < 70rem) {
                 max-width: 100%;
                 gap: 1rem;
                 padding: 1rem 0;
@@ -226,7 +242,7 @@
             }
         }
 
-        @media (width < 768px) {
+        @media (width < 70rem) {
             grid-template-columns: 1fr;
             padding: 1rem 0 0 0;
             max-width: 100%;
@@ -256,7 +272,7 @@
             display: grid;
         }
 
-        @media (width < 768px) {
+        @media (width < 70rem) {
             position: relative;
 
             > .scroll-content {
@@ -287,7 +303,7 @@
             flex-grow: 1;
         }
 
-        @media (width < 768px) {
+        @media (width < 70rem) {
             flex-wrap: wrap;
         }
     }