chore: some stylistic updates

1 year ago · 388008f8a3
parent 65256888f7
commit 388008f8a3
15 changed files with 95 additions and 53 deletions
--- a/bun.lockb
+++ b/bun.lockb
--- a/index.html
+++ b/index.html
@ -4,9 +4,22 @@
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+        <link rel="manifest" href="/site.webmanifest" />
+
+        <meta property="og:site_name" content="Ricerca Operativa / PL / Algoritmo del Simplesso" />
+        <meta property="og:type" content="website" />
+        <meta property="og:title" content="Ricerca Operativa / PL / Algoritmo del Simplesso" />
+        <meta
+            property="og:description"
+            content="Visualizzazione dell'algoritmo del simplesso per la programmazione lineare"
+        />
+
        <link rel="stylesheet" href="./src/style.css" />

-        <title>Ricerca Operativa / Programmazione Lineare</title>
+        <title>Algoritmo del Simplesso | PL | Ricerca Operativa</title>
    </head>
    <body>
        <script type="module" src="./src/main.tsx"></script>
--- a/package.json
+++ b/package.json
@ -16,6 +16,8 @@
        "typescript": "^5.0.0"
    },
    "dependencies": {
+        "@fontsource-variable/jetbrains-mono": "^5.1.2",
+        "@fontsource-variable/open-sans": "^5.1.1",
        "katex": "^0.16.20",
        "preact": "^10.25.4"
    }
--- a/public/about.txt
+++ b/public/about.txt
@ -0,0 +1,6 @@
+This favicon was generated using the following font:
+
+- Font Title: Open Sans
+- Font Author: undefined
+- Font Source: https://fonts.gstatic.com/s/opensans/v40/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1y4nY1M2xLER.ttf
+- Font License: undefined)
--- a/public/android-chrome-192x192.png
+++ b/public/android-chrome-192x192.png
--- a/public/android-chrome-512x512.png
+++ b/public/android-chrome-512x512.png
--- a/public/apple-touch-icon.png
+++ b/public/apple-touch-icon.png
--- a/public/favicon-16x16.png
+++ b/public/favicon-16x16.png
--- a/public/favicon-32x32.png
+++ b/public/favicon-32x32.png
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/favicon_io.zip
+++ b/public/favicon_io.zip
--- a/public/site.webmanifest
+++ b/public/site.webmanifest
@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
--- a/src/Primal.tsx
+++ b/src/Primal.tsx
@ -1,3 +1,4 @@
+import { useEffect, useState } from 'preact/hooks'
 import { MobileScrollable } from './components'
 import { Katex } from './Katex'
 import { fillDot, drawSemiplane, drawSimpleArrow, strokeInfiniteLine } from './lib-v2/canvas'
@ -83,42 +84,54 @@ 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,
-        c: input.c,
-        B: input.B,
-        maxIterations: 10,
-    })
-
-    const timerDelta = performance.now() - timerStart
+    const [problemOutput, setProblemOutput] = useState<ReturnType<typeof computePrimalSimplexSteps> | null>(null)
+    const [timerDelta, setTimerDelta] = useState<number | null>(null)
+
+    useEffect(() => {
+        const timerStart = performance.now()
+        const output = computePrimalSimplexSteps({
+            A: input.A,
+            b: input.b,
+            c: input.c,
+            B: input.B,
+            maxIterations: 10,
+        })
+        const elapsedTime = performance.now() - timerStart
+
+        setProblemOutput(output)
+        setTimerDelta(elapsedTime)
+    }, [input])

    return (
        <div class="steps" title={`Calcolato in ${timerDelta}ms`}>
-            <div class="title">
-                <h2>Svolgimento</h2>
-            </div>
-            {problemOutput.steps.map((step, iter) => (
-                <PrimalStep
-                    {...{
-                        iter,
-
-                        A: input.A,
-                        b: input.b,
-                        c: input.c,
-
-                        B: step.B,
-                        x: step.x,
-                        xi: step.xi,
-
-                        comments: step.comments,
-                    }}
-                />
-            ))}
+            {problemOutput ? (
+                <>
+                    <div class="title">
+                        <h2>Svolgimento</h2>
+                    </div>
+                    {problemOutput.steps.map((step, iter) => (
+                        <PrimalStep
+                            {...{
+                                iter,
+
+                                A: input.A,
+                                b: input.b,
+                                c: input.c,
+
+                                B: step.B,
+                                x: step.x,
+                                xi: step.xi,
+
+                                comments: step.comments,
+                            }}
+                        />
+                    ))}
+                </>
+            ) : (
+                <div class="title">
+                    <h2>Loading...</h2>
+                </div>
+            )}
        </div>
    )
 }
--- a/src/main.tsx
+++ b/src/main.tsx
@ -1,3 +1,6 @@
+import '@fontsource-variable/jetbrains-mono/index.css'
+import '@fontsource-variable/open-sans/index.css'
+
 import { render } from 'preact'
 import { useState } from 'preact/hooks'
 import { parseSafeProblemInput } from './parser-problem'
@ -58,20 +61,17 @@ const App = () => {
    return (
        <>
            <h1>
-                Ricerca Operativa / Programmazione Lineare
+                Ricerca Operativa / PL / Algoritmo del Simplesso
                <small>
                    {' '}
-                    by <a href="aziis98.com">@aziis98</a>
+                    by <a href="https://poisson.phc.dm.unipi.it/~delucreziis/">@aziis98</a>
                </small>
            </h1>
            <p>
                Questo sito è un progetto per il{' '}
                <a href="https://didawiki.cli.di.unipi.it/doku.php/matematica/ro/start">corso di Ricerca Operativa</a>{' '}
                dell'Università di Pisa per visualizzare automaticamente tutti i passaggi dell'
-                <a href="https://it.wikipedia.org/wiki/Algoritmo_del_simplesso">
-                    algoritmo del simplesso primale e duale
-                </a>
-                .
+                <a href="https://it.wikipedia.org/wiki/Algoritmo_del_simplesso">algoritmo del simplesso primale</a>.
            </p>
            <h2>Visualizzazione</h2>
            <p>I dati del problema vanno inseriti nel seguente campo di testo nel formato:</p>
--- a/src/style.css
+++ b/src/style.css
@ -30,9 +30,9 @@
    h2,
    h3,
    h4 {
-        font-weight: 600;
+        font-weight: 300;
        margin: 0;
-        color: #444;
+        color: #222;
        line-height: 1.25;
    }

@ -50,7 +50,7 @@
        font-size: 16px;

        background: #fff;
-        border: 1px solid #888;
+        border: 1px solid #ccc;
        min-height: 1.75rem;
        padding: 0 0.25rem;
        border-radius: 0.25rem;
@ -63,21 +63,24 @@

        padding: 0.5rem;

-        font-family: 'JetBrains Mono', monospace;
+        font-family: 'JetBrains Mono Variable', monospace;
        font-weight: 400;
        color: #333;
    }

    button,
    select {
-        font-family: 'Open Sans', sans-serif;
-        font-size: 16px;
-        font-weight: 400;
-        color: #333;
+        font-family: 'Open Sans Variable', sans-serif;
+        font-size: 14px;
+        font-weight: 600;
+        color: #444;
+
+        display: grid;
+        place-content: center;

        box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
        background: #f0f0f0;
-        border: 1px solid #888;
+        border: 1px solid #bbb;
        padding: 0 0.5rem;
        border-radius: 0.25rem;
        min-height: 1.75rem;
@ -89,20 +92,24 @@
        }
    }

+    button {
+        padding: 0 1rem;
+    }
+
    p {
        line-height: 1.75;
    }

    pre,
    code {
-        font-family: 'JetBrains Mono', monospace;
+        font-family: 'JetBrains Mono Variable', monospace;
        font-weight: 400;
        color: #333;
    }

    strong {
-        font-weight: 700;
-        color: #444;
+        font-weight: 600;
+        color: #000;
    }

    small {
@ -113,7 +120,7 @@

@layer components {
    body {
-        font-family: 'Open Sans', sans-serif;
+        font-family: 'Open Sans Variable', sans-serif;
        font-size: 16px;
        line-height: 1.75;
				`@ -0,0 +1 @@`
				`{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}`