Update a lot of things

src/components/Example.js

@@ -0,0 +1,10 @@
+import style from "./Example.less";
+import {Component} from "preact";
+
+export default function(props) {
+    return (
+        <div class={style.example}>
+            {props.children}
+        </div>
+    );
+}

src/components/Example.less

@@ -0,0 +1,31 @@
+@import "../styles/constants.less";
+
+@eplus: fade(@example, 5%);
+@eplusplus: fade(@example, 10%);
+
+.example {
+  color: @example;
+  background-color: @eplus;
+  padding: 4px;
+  border-radius: 4px;
+  margin: 4px 0;
+
+  table {
+    border-spacing: 0;
+    border: 2px solid @eplusplus;
+    background-color: @eplus;
+    border-collapse: collapse;
+
+    thead, tbody {
+      th, td {
+        padding: 4px;
+        border: 1px solid @eplusplus;
+      }
+    }
+
+    thead {
+      background-color: @eplusplus;
+      color: @accent;
+    }
+  }
+}

src/components/Image.js

@@ -0,0 +1,5 @@
+export default function(props) {
+    return (
+        <a href={props.src} title={props.alt} target={"_blank"}><img src={props.src} alt={props.alt}/></a>
+    )
+}

src/components/Latex.js

@@ -1,18 +1,29 @@
-import style from './latex.css';
+import style from './Latex.css';
 import {useContext} from "preact/hooks";
 import LatexRenderColor from "../contexts/LatexRenderColor";
+import LatexDefaultInline from "../contexts/LatexDefaultInline";
 
 export default function(props) {
-	let renderColor = useContext(LatexRenderColor);
-
 	// black, blue, brown, cyan, darkgray, gray, green, lightgray, lime, magenta, olive, orange, pink, purple, red, teal, violet, white, yellow
-	let inline = props.inline ? `\\inline` : "";
+	let renderColor = useContext(LatexRenderColor);
+	let defaultInline = useContext(LatexDefaultInline);
 
+	let is_inline;
+	if(props.inline === undefined) {
+		is_inline = defaultInline;
+	}
+	else {
+		is_inline = props.inline;
+	}
+
+	let inline = is_inline ? `\\inline` : "";
 	let equation = `${inline} {\\color{${renderColor}} ${props.children} }`;
+
 	return (
 		<img src={`https://latex.codecogs.com/svg.latex?${equation}`}
 			 alt={props.children}
 			 title={props.children}
 			 class={style.latex}
-		/>);
+		/>
+	);
 }

src/components/old/example.css

@@ -1,10 +0,0 @@
-.example {
-    border: none;
-    color: #d3a1ff;
-    background-color: rgba(211, 161, 255, 0.1);
-    border-radius: 4px;
-}
-
-.example::before {
-    content: "♦ ";
-}

src/components/old/example.js

@@ -1,12 +0,0 @@
-import style from "./example.css";
-import {Component} from "preact";
-
-export default class Example extends Component {
-    render() {
-        return (
-            <blockquote class={style.example}>
-                {this.props.children}
-            </blockquote>
-        )
-    }
-}

src/components/old/panel.js

@@ -1,4 +1,4 @@
-import style from "./panel.css";
+import style from "./panel.less";
 import { Component } from 'preact';
 
 export default class Panel extends Component {

src/components/old/panel.less

@@ -1,6 +1,8 @@
+@import "../../styles/constants.less";
+
 .panel {
-    background-color: rgba(62.7%, 80%, 100%, 0.1);
+    background-color: @plus;
-    padding: 4px;
+    padding: 8px;
     border-radius: 4px;
     margin: 4px;
     height: calc(100% - 8px);

src/contexts/LatexDefaultInline.js

@@ -0,0 +1,3 @@
+import {createContext} from "preact";
+
+export default createContext(true);

src/index.less

@@ -1,4 +1,4 @@
-@import "./styles/constants.less";
+@import "styles/constants.less";
 
 * {
     box-sizing: border-box;
@@ -14,10 +14,12 @@ h1, h2, h3, h4, h5, h6 {
     margin-top: 4px;
     margin-bottom: 4px;
     color: @accent;
+    font-family: @title;
     font-weight: normal;
     text-align: center;
 }
 
+// By default h1 are as large as h2
 h1 {
     font-size: xx-large;
 }
@@ -27,46 +29,45 @@ a {
     text-decoration: none;
 
     &:hover {
-        color: #4affff;
+        color: @linkhover;
     }
 
     &:active {
-        color: #ffffff;
+        color: @linkactive;
     }
 }
 
-img {
+img, iframe {
     max-width: 100%;
     max-height: 300px;
+    border-radius: 4px;
 }
 
-b {
+pre, code {
-    color: @accent;
-}
-
-code {
     font-family: @mono;
+    font-size: 14px;
 }
 
 blockquote {
     color: @fg;
-    border-left: 3px solid @fg;
+    border-left: 3px solid @plusplusplusplus;
-    background-color: fade(@fg, 10%);
+    background-color: @plus;
     padding: 4px 4px 4px 8px;
-    margin: 8px;
+    margin: 8px 0;
 }
 
 input[type="text"], input[type="password"] {
     color: @fg;
     background-color: @bg;
-    border: 1px solid @bg-lighter;
+    border: 1px solid @plusplus;
     border-radius: 4px;
     padding: 4px;
     font-size: medium;
 
-    &:disabled {
+    &:disabled, &.disabled {
-        color: grey;
+        color: @disabledfg;
-        background-color: #1f1f1f;
+        background-color: @disabledbg;
+        border-style: dotted;
         cursor: not-allowed;
     }
 }
@@ -74,52 +75,53 @@ input[type="text"], input[type="password"] {
 button {
     color: @fg;
     background-color: @bg;
-    border: 1px solid @bg-lighter;
+    border: 1px solid @plusplus;
     border-radius: 4px;
     padding: 4px;
     font-size: medium;
 
-    &:hover {
+    &:hover, &.hover {
-        background-color: @bg-light;
+        background-color: @plusplus;
         border: 1px solid @fg;
+        color: @fg;
     }
 
-    &:active {
+    &:active, &.active {
-        background-color: @bg-lighter;
+        background-color: fade(@accent, 20%);
-        border: 1px solid @fg;
+        border: 1px solid @accent;
+        color: @accent;
     }
 
-    &.disabled {
+    &:disabled, &.disabled {
-        color: grey;
+        color: @disabledfg;
-        background-color: #1f1f1f;
+        background-color: @disabledbg;
+        border-style: dotted;
         cursor: not-allowed;
     }
 }
 
 hr {
-    border: 1px solid @bg-light;
+    border: 1px solid @plusplusplusplus;
     margin-top: 24px;
     margin-bottom: 24px;
 }
 
 table {
     border-spacing: 0;
-    border: 2px solid @bg-lighter;
+    border: 2px solid @plusplus;
-    background-color: @bg-light;
+    background-color: @plus;
-    border-radius: 4px;
     border-collapse: collapse;
 
     thead, tbody {
         th, td {
             padding: 4px;
-            border: 1px solid @bg-lighter;
+            border: 1px solid @plusplus;
         }
     }
 
     thead {
-        background-color: @bg-lighter;
+        background-color: @plusplus;
         color: @accent;
-        border-radius: 4px 4px 0 0;
     }
 }
 
@@ -127,14 +129,10 @@ li {
     margin: 10px 0;
 }
 
-.left {
+p:first-child {
-    text-align: left;
+    margin-top: 0;
 }
 
-.center {
+p:last-child {
-    text-align: center;
+    margin-bottom: 0;
-}
-
-.right {
-    text-align: right;
 }

src/routes/apprendimentoSistemiArtificiali.js

@@ -1,9 +1,7 @@
 import {Component} from 'preact'
 import Split from "../components/old/split";
-import Latex from "../components/latex";
 import Panel from "../components/old/panel";
-import Example from "../components/old/example";
+import Example from "../components/example";
-import Todo from "../components/old/todo";
 import Code from "../components/old/code";
 
 const r = String.raw;

src/routes/basiDiDati.js

@@ -1,9 +1,6 @@
 import {Component} from 'preact'
 import Split from "../components/old/split";
-import Latex from "../components/latex";
 import Panel from "../components/old/panel";
-import Example from "../components/old/example";
-import Todo from "../components/old/todo";
 import Timer from "../components/old/timer";
 
 const r = String.raw;

src/routes/calcoloNumerico.js

@@ -1,8 +1,8 @@
 import {Component} from 'preact'
 import Split from "../components/old/split";
-import Latex from "../components/latex";
+import Latex from "../components/Latex";
 import Panel from "../components/old/panel";
-import Example from "../components/old/example";
+import Example from "../components/example";
 import Todo from "../components/old/todo";
 import Timer from "../components/old/timer";
 

src/routes/fisica.js

@@ -1,16 +1,18 @@
 import { Component } from 'preact';
-import Latex from '../components/latex';
+import Latex from '../components/Latex';
 import Panel from '../components/old/panel';
 import Split from '../components/old/split';
 import Plus from '../components/old/plus';
 import Minus from '../components/old/minus';
 import Todo from '../components/old/todo';
+import LatexDefaultInline from "../contexts/LatexDefaultInline";
 
 const r = String.raw;
 
 export default class Fisica extends Component {
 	render() {
         return (
+            <LatexDefaultInline.Provider value={false}>
             <div>
                 <h1>Fisica</h1>
                 <Split title="Vettori">
@@ -1187,6 +1189,7 @@ export default class Fisica extends Component {
                     </Panel>
                 </Split>
             </div>
+            </LatexDefaultInline.Provider>
         )
 	}
 }

src/routes/ottimizzazioneLineare.js

@@ -1,12 +1,14 @@
 import {Component} from 'preact'
 import Split from "../components/old/split";
-import Latex from "../components/latex";
+import Latex from "../components/Latex";
 import Panel from "../components/old/panel";
-import Example from "../components/old/example";
+import Example from "../components/example";
 import Todo from "../components/old/todo";
 import Minus from "../components/old/minus";
 import Plus from "../components/old/plus";
 import Code from "../components/old/code";
+import Timer from "../components/old/timer";
+import Image from "../components/Image";
 
 const r = String.raw;
 
@@ -15,7 +17,7 @@ export default class OttimizzazioneLineare extends Component {
         return (
             <div>
                 <h1>Ottimizzazione lineare intera</h1>
-                <Split title={"Materiale"}>
+                <Split title={"Unimore"}>
                     <Panel title={"Videolezioni su YouTube"}>
                         <p>
                             Ho rimosso il rumore in sottofondo da tutti i video di Ricerca Operativa!
@@ -24,6 +26,13 @@ export default class OttimizzazioneLineare extends Component {
                             <b><a href={"https://www.youtube.com/playlist?list=PLh93e8qjTszffkHNn-19CqUOhHFbhBlBh"}>Guardate i video qui!</a></b>
                         </p>
                     </Panel>
+                    <Panel title={"Prossimi appelli"}>
+                        <ol>
+                            <li><Timer to={"2020-06-08"}/></li>
+                            <li><Timer to={"2020-06-25"}/></li>
+                            <li><Timer to={"2020-07-14"}/></li>
+                        </ol>
+                    </Panel>
                 </Split>
                 <Split title={"Le basi"}>
                     <Panel title={"Funzione obiettivo"}>
@@ -112,67 +121,73 @@ export default class OttimizzazioneLineare extends Component {
                             Un modo per rappresentare sistemi in forma standard, anche noto come <b>matrice equivalente completa</b> del sistema.
                         </p>
                         <Example>
-                        Il sistema:<br/><br/>
+                            Il sistema:<br/><br/>
-                        <Latex>{r`
+                            <Latex>{r`
-                            \begin{cases}
+                                \begin{cases}
-                            2000A + 1000B = z\\
+                                2000A + 1000B = z\\
-                            1A \leq 3\\
+                                1A \leq 3\\
-                            1B \leq 3\\
+                                1B \leq 3\\
-                            2A + 2B \leq 7
+                                2A + 2B \leq 7
-                            \end{cases}
+                                \end{cases}
-                        `}</Latex><br/><br/>
+                            `}</Latex><br/><br/>
-                        Diventa in forma di tableau:<br/><br/>
+                            Diventa in forma di tableau:<br/><br/>
-                        <table class={"right"}>
+                            <table class={"right"}>
-                            <thead>
+                                <thead>
-                                <tr>
+                                    <tr>
-                                    <th><abbr title={"Termine noto"}>TN</abbr></th>
+                                        <th><abbr title={"Termine noto"}>TN</abbr></th>
-                                    <th><Latex>A</Latex></th>
+                                        <th><Latex>x_1</Latex></th>
-                                    <th><Latex>B</Latex></th>
+                                        <th><Latex>x_2</Latex></th>
-                                    <th><Latex>s_1</Latex></th>
+                                        <th><Latex>s_1</Latex></th>
-                                    <th><Latex>s_2</Latex></th>
+                                        <th><Latex>s_2</Latex></th>
-                                </tr>
+                                    </tr>
-                            </thead>
+                                </thead>
-                            <tbody>
+                                <tbody>
-                                <tr>
+                                    <tr>
-                                    <td><Latex>z</Latex></td>
+                                        <td><Latex>z</Latex></td>
-                                    <td><Latex>2000</Latex></td>
+                                        <td><Latex>2000</Latex></td>
-                                    <td><Latex>1000</Latex></td>
+                                        <td><Latex>1000</Latex></td>
-                                    <td><Latex>0</Latex></td>
+                                        <td><Latex>0</Latex></td>
-                                    <td><Latex>0</Latex></td>
+                                        <td><Latex>0</Latex></td>
-                                </tr>
+                                    </tr>
-                                <tr>
+                                    <tr>
-                                    <td><Latex>3</Latex></td>
+                                        <td><Latex>3</Latex></td>
-                                    <td><Latex>1</Latex></td>
+                                        <td><Latex>1</Latex></td>
-                                    <td><Latex>0</Latex></td>
+                                        <td><Latex>0</Latex></td>
-                                    <td><Latex>1</Latex></td>
+                                        <td><Latex>1</Latex></td>
-                                    <td><Latex>0</Latex></td>
+                                        <td><Latex>0</Latex></td>
-                                </tr>
+                                    </tr>
-                                <tr>
+                                    <tr>
-                                    <td><Latex>3</Latex></td>
+                                        <td><Latex>3</Latex></td>
-                                    <td><Latex>0</Latex></td>
+                                        <td><Latex>0</Latex></td>
-                                    <td><Latex>1</Latex></td>
+                                        <td><Latex>1</Latex></td>
-                                    <td><Latex>0</Latex></td>
+                                        <td><Latex>0</Latex></td>
-                                    <td><Latex>1</Latex></td>
+                                        <td><Latex>1</Latex></td>
-                                </tr>
+                                    </tr>
-                                <tr>
+                                    <tr>
-                                    <td><Latex>7</Latex></td>
+                                        <td><Latex>7</Latex></td>
-                                    <td><Latex>2</Latex></td>
+                                        <td><Latex>2</Latex></td>
-                                    <td><Latex>2</Latex></td>
+                                        <td><Latex>2</Latex></td>
-                                    <td><Latex>0</Latex></td>
+                                        <td><Latex>0</Latex></td>
-                                    <td><Latex>0</Latex></td>
+                                        <td><Latex>0</Latex></td>
-                                </tr>
+                                    </tr>
-                            </tbody>
+                                </tbody>
-                        </table>
+                            </table>
                         </Example>
                     </Panel>
                     <Panel title={"Variabili di base"}>
                         <p>
-                            <Todo>TODO: come spiegarla?</Todo>
+                            Variabili che hanno tutti 0 e un 1 nella loro colonna del tableu.
+                        </p>
+                        <p>
+                            La loro controparte sono le <i>variabili fuori base</i>.
+                        </p>
+                        <p>
+                            Un sistema lineare è risolto quando tutte le variabili originali (<Latex>x_n</Latex>) sono nella base.
                         </p>
                     </Panel>
                 </Split>
                 <Split title={"Simplex"}>
-                    <Panel title={"Simplex"}>
+                    <Panel title={"Cos'è?"}>
                         <p>
                             Un algoritmo per massimizzare efficientemente variabili di sistemi lineari, derivato da Gauss-Jordan.
                         </p>
@@ -186,7 +201,7 @@ export default class OttimizzazioneLineare extends Component {
                             <li>Finchè ci sono variabili con coefficienti positivi nella funzione obiettivo:
                                 <ol>
                                     <li><b>Scegli</b> una variabile della funzione obiettivo, chiamandola <i>variabile entrante</i>. <Example>Come? Vedi nel prossimo pannello.</Example></li>
-                                    <li>Trova la variabile di base (detta <i>variabile uscente</i>) con il <b>valore minore</b> per questo rapporto: <Code>termine noto / coeff. variabile entrante</Code></li>
+                                    <li>Trova la variabile di base (detta <i>variabile uscente</i>) con il <b>valore minore</b> per il rapporto <Latex>{r`\frac{termine\ noto}{coeff.\ variabile\ entrante}`}</Latex></li>
                                     <li><b>Riscrivi</b> tutte le funzioni del sistema in termini della variabile entrante.</li>
                                 </ol>
                             </li>
@@ -203,9 +218,17 @@ export default class OttimizzazioneLineare extends Component {
                             <li>Coefficiente maggiore nella funzione obiettivo.</li>
                             <li>Incremento maggiore della funzione obiettivo.</li>
                             <li>A caso.</li>
-                            <li><i>Regola di Bland</i>: scegli variabili entranti e uscenti con indice minore. <Example>Impedisce cicli infiniti!</Example></li>
+                            <li><i>Regola di Bland</i>: scegli variabili entranti e uscenti con indice minore (ovvero, prendi le prime possibili). <Example>È usato nella teoria perchè impedisce i cicli infiniti!</Example></li>
                         </ul>
                     </Panel>
+                    <Panel title={"Esempio"}>
+                        <Example>
+                            Ho risolto il problema 3 del file <a href={"https://dolly.fim.unimore.it/2019/mod/resource/view.php?id=2716"}><code>Ex_LP_testo</code></a> con il Simplex:
+                            <p>
+                                <Image src={"https://i.imgur.com/1r405Mb.jpg"}/>
+                            </p>
+                        </Example>
+                    </Panel>
                 </Split>
                 <Split title={"Metodo delle due fasi"}>
                     <Panel title={"Metodo delle due fasi"}>

src/routes/statistica.js

@@ -1,118 +1,18 @@
 import { Component } from 'preact';
-import Latex from '../components/latex';
+import Latex from '../components/Latex';
 import Panel from '../components/old/panel';
 import Split from '../components/old/split';
-import Todo from '../components/old/todo';
+import Example from "../components/example";
-import Theorem from "../components/old/theorem";
-import Hypothesis from "../components/old/hypothesis";
-import Thesis from "../components/old/thesis";
-import Proof from "../components/old/proof";
-import Example from "../components/old/example";
 import Plus from "../components/old/plus";
 import Minus from "../components/old/minus";
+import LatexDefaultInline from "../contexts/LatexDefaultInline";
 
 const r = String.raw;
 
 export default class Statistica extends Component {
 	render() {
-	    /*
-            <Split title={"Popolazioni"}>
-                <Panel title={"Popolazione"} id={"popolazione"}>
-                    <p>
-                        Gruppo <b>intero</b> di oggetti di cui si cercano informazioni.
-                    </p>
-                </Panel>
-                <Panel title={"Popolazione tangibile"}>
-                    <p>
-                        Popolazione finita di oggetti concreti che possono essere campionati ciascuno solo una volta.
-                    </p>
-                </Panel>
-                <Panel title={"Popolazione concettuale"}>
-                    <p>
-                        Popolazione di valori ottenuti da prove sperimentali indipendenti ripetute più volte.
-                    </p>
-                </Panel>
-            </Split>
-            <Split title={"Campionamento"}>
-                <Panel title={"Campione"}>
-                    <p>
-                        Sottoinsieme della <a href={"#popolazione"}>popolazione</a> che contiene gli oggetti che si sono osservati.
-                    </p>
-                </Panel>
-                <Panel title={<i>Simple random sample</i>}>
-                    <p>
-                        Campione di una data dimensione in cui qualsiasi selezione di <i>n</i> elementi ha la stessa probabilità di costituire il campione.
-                    </p>
-                </Panel>
-                <Panel title={<i>Sample of convenience</i>}>
-                    <p>
-                        Campione ottenuto in un modo casuale non ben definito.
-                    </p>
-                </Panel>
-                <Panel title={<i>Sample with replacement</i>}>
-                    <p>
-                        Campione ottenuto sostituendo nella popolazione gli elementi estratti con dei nuovi elementi.
-                    </p>
-                    <p>
-                        Dire che un campione è ottenuto <i>with replacement</i> è equivalente a dire che la popolazione che si sta campionando è infinita, e quindi che tutti gli elementi sono indipendenti.
-                    </p>
-                </Panel>
-                <Panel title={"Campione pesato"}>
-                    <p>
-                        Campione ottenuto da una popolazione in cui certi elementi hanno più probabilità di essere stati selezionati di altri.
-                    </p>
-                </Panel>
-                <Panel title={<i>Stratified random sample</i>}>
-                    <p>
-                        Campione ottenuto da un sottoinsieme della popolazione detto <i>strato</i>.
-                    </p>
-                </Panel>
-                <Panel title={<i>Cluster sample</i>}>
-                    <p>
-                        Campione ottenuto selezionando più <i>cluster</i> di elementi alla volta.
-                    </p>
-                </Panel>
-            </Split>
-            <Split>
-                <Panel title={<i>Sampling variation</i>}>
-                    <p>
-                        Differenza di informazioni presente tra due campioni diversi della stessa popolazione.
-                    </p>
-                </Panel>
-                <Panel title={"Indipendenza"}>
-                    <p>
-                        Gli elementi in un campione sono indipendenti se gli elementi estratti in precedenza non influsicono <small>significativamente</small> sulle probabilità di estrazione dell'elemento successivo.
-                    </p>
-                </Panel>
-            </Split>
-            <Split title={"Tipi di prove sperimentali"}>
-                <Panel title={"A campione singolo"}>
-                    <p>
-                        Esperimento in cui c'è una sola popolazione da cui vengono estratti campioni.
-                    </p>
-                    <p>
-                        Serve per verificare delle condizioni.
-                    </p>
-                </Panel>
-                <Panel title={"Multicampione"}>
-                    <p>
-                        Esperimento in cui sono presenti più popolazioni (aventi caratteristiche differenti una dall'altra dette <i>fattori</i>) da cui vengono estratti campioni.
-                    </p>
-                    <p>
-                        Serve per capire quali fattori influenzano il risultato dell'esperimento.
-                    </p>
-                </Panel>
-            </Split>
-            <Split title={"Tipi di dato"}>
-                <Panel title={<span>Numerico<small> o quantitativo</small></span>}>
-                    Il dato descrive un valore numerico relativo all'elemento, come ad esempio una quantità fisica.
-                </Panel>
-                <Panel title={<span>Categorico<small> o qualitativo</small></span>}>
-                    Il dato indica una categoria a cui appartiene l'elemento, come ad esempio il suo colore.
-                </Panel>
-            </Split>
-	     */
         return (
+            <LatexDefaultInline.Provider value={false}>
             <div>
                 <h1>Statistica ed Elementi di Probabilità</h1>
                 <Split title={"Tipi di probabilità"}>
@@ -2095,6 +1995,7 @@ export default class Statistica extends Component {
                     </Panel>
                 </Split>
             </div>
+            </LatexDefaultInline.Provider>
         )
 	}
 }

src/styles/constants.less

@@ -1,9 +1,18 @@
 @bg: #0d193b;
-@bg-light: #1c2b4f;
+@bg-light: #142245;
-@bg-lighter: #2a3d62;
+@bg-lighter: #1c2b4f;
+@bg-lightest: #233358;
 @fg: #a0ccff;
 @accent: #ffffff;
+
 @link: #00caca;
+@linkhover: #00ffff;
+@linkactive: #a0ffff;
+
+@plus: fade(@fg, 5%);
+@plusplus: fade(@fg, 10%);
+@plusplusplus: fade(@fg, 15%);
+@plusplusplusplus: fade(@fg, 20%);
 
 @red: #ff7d7d;
 @orange: #ffbb7d;
@@ -13,5 +22,12 @@
 @blue: #7d7dff;
 @magenta: #ff7dff;
 
-@sans: sans-serif;
+@disabledfg: #808080;
+@disabledbg: #1f1f1f;
+
+@sans: "Arial", sans-serif;
+@text: "Calibri", sans-serif;
+@title: "Arial", sans-serif;
 @mono: "Consolas", "SFMono-Regular", "Liberation Mono", "Menlo", monospace;
+
+@example: #d3a1ff;

src/styles/override-easymde.less

@@ -1,4 +1,4 @@
-@import "./constants.less";
+@import "constants.less";
 
 .CodeMirror {
     font-family: "Consolas", monospace !important;