Updated a couple pages, Finished new basic style, Removed tools from menu, Updated formula wizard, Other minor changes

Update .gitignore, .htaccess, and 32 more files...
2023-11-07 23:23:42 +01:00
parent 3891f5ce98
commit f14b8d33a6
34 changed files with 545 additions and 268 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -35,7 +35,7 @@ tools/items/formula-wizard/src/*.js
 # Temporary
 tmp/
 commons/trash/
-scrollbar.scss
 commons/strings/_*/
 _unsorted/
 tools/items/*/*.min.js
+wasm-test/
--- a/.htaccess
+++ b/.htaccess
@@ -21,6 +21,7 @@ AddCharset utf-8 .css .txt .js .md .ts .mjs
 AddType text/typescript .ts
 AddType text/javascript .js
 AddType text/javascript .mjs
+AddType application/wasm .wasm

 # Correcting some default options for security and language/content redirection.
 # FollowSymlinks is also on since it's required for "mod_rewrite" and the server is jailed.
--- a/about/index.php
+++ b/about/index.php
@@ -31,25 +31,51 @@ include_once 'commons/langs.php';
 	</header>
 	<main id="main" class="rl-m border border-r-0 p-l">
 		
-		<?php printMainHeader(localize("about.topmost.title"), "fab fa-twitter", "@NibblePoker"); ?>
-		<p class="m-s">
-			<a href="https://twitter.com/messages/compose?recipient_id=937370791334895616" class="bland-link button-link">
-				<button class="p-xs r-s border b-light primary"><?php print(localize("contact.twitter.compose")); ?></button>
-			</a>
+		<?php printMainHeader(localize("about.intro.title")); ?>
+		
+		<?php printSubHeader(localize("about.history.title")); ?>
+		<p class="mt-xs ml-s">
+			<?php print(localize("about.history.text.90")); ?><br>
+			<?php print(localize("about.history.text.91")); ?>
 		</p>
 		
-		<div class="px-xxs">
-			<?php printSubHeader(localize("about.education.title"), null, null); ?>
+		<?php printSubHeader(localize("about.future.title")); ?>
+		<p class="mt-xs ml-s">
+			<?php print(localize("about.future.text.01")); ?>
+		</p>
+		<p class="mt-xs ml-s">
+			<?php print(localize("about.future.text.10")); ?>
+		</p>
+		<p class="mt-xs ml-s">
+			<?php print(localize("about.future.text.20")); ?><br>
+			<?php print(localize("about.future.text.21")); ?>
+		</p>
+		<p class="mt-xs ml-s">
+			<?php print(localize("about.future.text.30")); ?>
+		</p>
 		
-			<details>
-				<summary>ABC</summary>
-				DEF
-			</details>
+		<?php printSubHeader(localize("about.nibblepoker.title")); ?>
+		<p class="mt-xxs ml-s">
+			<?php print(localize("about.nibblepoker.text.01")); ?>
+		</p>
+		<p class="mt-xs ml-s">
+			<?php print(localize("about.nibblepoker.text.10")); ?><br>
+			<?php print(localize("about.nibblepoker.text.11")); ?>
+		</p>
+		<p class="mt-xs ml-s">
+			<?php print(localize("about.nibblepoker.text.20")); ?>
+		</p>
 		
-			<?php printSubHeader(localize("about.skills.title"), null, null); ?>
+		<?php printSubHeader(localize("about.aziascreations.title")); ?>
+		<p class="mt-xxs ml-s">
+			<?php print(localize("about.aziascreations.text.01")); ?>
+		</p>
+		<p class="mt-xxs ml-s">
+			<?php print(localize("about.aziascreations.text.10")); ?>
+		</p>
+		
+		<!--<img src="/resources/NibblePoker/images/about/profile-pic.jpg" alt="" class="r-r">-->
 		
-			<?php printSubHeader(localize("about.work.title"), null, null); ?>
-		</div>
 	</main>
 	<?php
 	include 'commons/DOM/footer.php';
--- a/commons/DOM/footer.php
+++ b/commons/DOM/footer.php
@@ -12,7 +12,7 @@ include_once 'commons/langs.php';
 		<i class="fa fa-bars px-xxs" aria-hidden="true"></i>
 	</button>
 	<p class="flex-fill t-center t-size-10 t-w-500 t-muted">
-		<a class="bland-link t-muted" href="<?php print(l10n_url_abs('/privacy/')); ?>">
+		<a class="bland-link" href="<?php print(l10n_url_abs('/privacy/')); ?>">
 			<?php print(localize('footer.text.privacy')); ?>
 		</a>
 	</p>
--- a/commons/DOM/head.php
+++ b/commons/DOM/head.php
@@ -9,13 +9,16 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
 <meta name="viewport" content="width=device-width"/>
-<!--<meta content="cache, store" http-equiv="Cache-Control">
-<meta content="cache, store" http-equiv="Pragma">
-<meta content="3600" http-equiv="Expires">-->
+<?php
+// Caching should be handled in '.htaccess' !
+//<!--<meta content="cache, store" http-equiv="Cache-Control">
+//<meta content="cache, store" http-equiv="Pragma">
+//<meta content="3600" http-equiv="Expires">-->
+?>
 <link rel="icon" type="image/svg+xml" href="/favicon.svg">
 <link rel="alternate icon" href="/favicon.ico">
 <link rel="stylesheet" href="/resources/FontAwesomePro/5.15.3/css/all.min.css">
-<link rel="stylesheet" href="/resources/NibblePoker/css/nibblepoker.min.css">
+<link rel="stylesheet" href="/resources/NibblePoker/css/nibblepoker.min.css?v=1">
 <?php
 if($enable_waffle_iron) {
 	// Turns out you can't change an SVG's path fill if it's inside an IMG tag...
--- a/commons/DOM/sidebar.php
+++ b/commons/DOM/sidebar.php
@@ -30,6 +30,8 @@ function printSidebarEntry($url, $title, $icon, $activeId) {
 	<hr class="subtle">
 	<?php
 	printSidebarEntry(l10n_url_abs('/'), localize("sidebar.text.home"), "fad fa-home", "home");
+	//printSidebarEntry(l10n_url_abs('/shop'), localize("sidebar.text.shop"), "fad fa-shopping-cart", "shop");
+	//printSidebarEntry(l10n_url_abs('/school'), localize("sidebar.text.school"), "fad fa-chalkboard-teacher", "school");
 	?>
 	<hr class="subtle">
 	<?php
@@ -42,9 +44,9 @@ function printSidebarEntry($url, $title, $icon, $activeId) {
 		printSidebarEntry(l10n_url_abs('/content/?tags=electronic'), localize("sidebar.text.electronics"), "fad fa-microchip", "electronic");
 		?>
 	</div>
-	<hr class="subtle">
 	<?php
-	printSidebarEntry(l10n_url_abs('/tools/'), localize("sidebar.text.tools"), "fad fa-tools", "tools");
+	//<hr class="subtle">
+	//printSidebarEntry(l10n_url_abs('/tools/'), localize("sidebar.text.tools"), "fad fa-tools", "tools");
 	?>
 	<hr class="subtle">
 	<?php
--- a/commons/content.php
+++ b/commons/content.php
@@ -197,3 +197,5 @@ function getContentManager(string $contentRootPath): ContentManager {
 		isset($_GET['tags']) ? htmlspecialchars($_GET['tags']) : NULL
 	);
 }
+
+?>
--- a/commons/content/opengraph.php
+++ b/commons/content/opengraph.php
@@ -49,3 +49,4 @@ class OpenGraphData {
 		);
 	}
 }
+?>
--- a/commons/strings.json
+++ b/commons/strings.json
--- a/commons/strings/en/about.json
+++ b/commons/strings/en/about.json
@@ -5,37 +5,12 @@
 	"about.og.description": "TODO: description",
 	"about.header.title": "About",
 	
-	"about.part.year.single": "year",
-	"about.part.year.multiple": "years",
-	"about.part.since": "since",
+	"about.intro.title": "Introduction",
 	
-	"about.education.title": "Education",
+	"about.future.title": "Future plans",
 	
-	"about.skills.title": "Skills",
 	
-	"about.work.title": "Work Experience",
-	"about.work.ctie.title": "Government IT Centre (CTIE)",
-	"about.work.ctie.role.1": "<abbr title=\"Internet-of-Things\">IoT</abbr> Developer Internship",
-	"about.work.ctie.location": "Luxembourg",
+	"about.nibblepoker.title": "The 'NibblePoker' name",
 	
-	"about.work.computrade.title": "CompuTrade Luxembourg Ltd",
-	"about.work.computrade.role.1": "Full & Half-time student job",
-	"about.work.computrade.location": "Steinfort, Luxembourg",
-	
-	"about.work.lih.title": "Luxembourg Institute of Health (LIH)",
-	"about.work.lih.role.1": "IT Support Internship",
-	"about.work.lih.location": "Luxembourg",
-	
-	"about.work.crlux.title": "Luxembourg Red Cross",
-	"about.work.crlux.role.1": "Volunteer Excel VBA programmer.",
-	"about.work.crlux.location": "Luxembourg",
-	
-	"about.work.buttek.title": "Luxembourg Red Cross - Buttek",
-	"about.work.buttek.role.1": "Volunteer ???",
-	"about.work.buttek.role.2": "Student cashier ???",
-	"about.work.buttek.location": "Luxembourg",
-	
-	"about.work.current.title": "Current employer kept private",
-	"about.work.current.role.1": "???",
-	"about.work.current.location": "Belgium"
+	"about.aziascreations.title": "The 'AziasCreations' name"
 }
--- a/commons/strings/en/links.json
+++ b/commons/strings/en/links.json
@@ -3,5 +3,29 @@
 	"links.head.description": "TODO: description",
 	"links.og.title": "NibblePoker - Links",
 	"links.og.description": "TODO: description",
-	"links.header.title": "Links"
+	"links.header.title": "Links",
+	
+	"links.social.title": "Social Networks",
+	"links.misc.title": "Miscellaneous",
+	
+	"links.twitter.title": "Twitter <i>(@NibblePoker)</i>",
+	"links.twitter.text.1": "???",
+	
+	"links.github.title": "GitHub <i>(@aziascreations)</i>",
+	"links.github.text.1": "Private account containing all my personal projects.",
+	
+	"links.github_pro.title": "GitHub <i>(@NibblePoker)</i>",
+	"links.github_pro.text.1": "Organization containing all the repositories related to this website.",
+	
+	"links.linkedin.title": "LinkedIn",
+	"links.linkedin.text.1": "???",
+	
+	"links.gitea.title": "Self-hosted Gitea",
+	"links.gitea.text.1": "Contains all my projects and some mirrors from various sites.",
+	
+	"links.files.title": "Public files <i>(files.nibblepoker.lu)</i>",
+	"links.files.text.1": "Contains all files that can be downloaded on this website and other documentation.",
+	
+	"links.archives.title": "Public archives <i>(archives.nibblepoker.lu)</i>",
+	"links.archives.text.1": "Contains various public archives."
 }
--- a/commons/strings/en/sidebar.json
+++ b/commons/strings/en/sidebar.json
@@ -1,6 +1,8 @@
 {
  "sidebar.alt.logo": "Website's logo",
  "sidebar.text.home": "Home",
+  "sidebar.text.shop": "Shop",
+  "sidebar.text.school": "Training",
  "sidebar.text.projects": "Projects",
  "sidebar.text.applications": "Applications",
  "sidebar.text.libraries": "Libraries",
--- a/commons/strings/fr/about.json
+++ b/commons/strings/fr/about.json
@@ -3,7 +3,29 @@
 	"about.head.description": "TODO: description",
 	"about.og.title": "NibblePoker - À-propos",
 	"about.og.description": "TODO: description",
-	"about.header.title": "À-propos"
+	"about.header.title": "À-propos",
 	
+	"about.intro.title": "Introduction",
+	
+	"_about.history.title": "",
+	"about.history.text.90": "Nowadays, for the low sum of ~46€ per year, or ~70€ including the electricity bill, I can provide a decently reliable service to people around the world, and to myself when using this infrastructure for side-projects.",
+	"about.history.text.91": "The ability to [tech souver] for the price is something I've always strived to achieve and actively encourage other people to, at the very least, play around with in order to learn about and take back control of [???]",
+	
+	"about.future.title": "Projet d'avenir",
+	"about.future.text.01": "Dans le futur, il est prévu de décliner <i>NibblePoker</i> en une <abbr title=\"Société privée à responsabilité limitée\">SPRL</abbr>",
+	"about.future.text.10": "Cela aura pour bût de me permettre d'investir dans des domaines ???.",
+	"about.future.text.20": "La finalité serait de pouvoir créer un projet d'entreprise durable et proposer un large gamme de produits et solutions couvrant les domaines de [?? & ???, en full-stack].",
+	"about.future.text.21": "Sette dernière serait soutenu, de manière ouverte en interne, par des services de conception de produits, de création de librairies et autres parties soutenable de la chaine de production.",
+	"about.future.text.30": "[Open-source & instructif].",
+	
+	"about.nibblepoker.title": "Le nom 'NibblePoker'",
+	"about.nibblepoker.text.01": "Le sobriquet 'NibblePoker' est un mot inventé qui est composé de plusieurs termes [techniques] plus anciens.",
+	"about.nibblepoker.text.10": "●&nbsp;&nbsp;'<i>Nibble</i>' est un terme technique anglais historiquement utilisé pour décrire décrit un demi-octet, ou 4 bits d'information.",
+	"about.nibblepoker.text.11": "●&nbsp;&nbsp;'<i>Poker</i>' viens du verbe anglais '<i>to poke</i>' qui, dans le domaine rétro-informatique, décrit le fait d'écrire des données dans la mémoire d'un ordinateur.",
+	"about.nibblepoker.text.20": "Finalement, lors de la création de ce surnom, je travaillais depuis quelques temps sur d'anciennes machines telle la Commodore64, Acorn Electron et [???]",
+	
+	"about.aziascreations.title": "Le nom 'AziasCreations'",
+	"about.aziascreations.text.01": "L'ancien sobriquet 'AziasCreations' était un surnom relativement basique utilisé entre 2013 et 2020.",
+	"about.aziascreations.text.10": "Il reste légèrement utilisé aujourd'hui à cause de certaines limitations concernant les changements de pseudonyme sur GitHub qui m'ont empèché de faire un changement complet."
 	
 }
--- a/commons/strings/fr/links.json
+++ b/commons/strings/fr/links.json
@@ -3,5 +3,29 @@
 	"links.head.description": "TODO: description",
 	"links.og.title": "NibblePoker - Liens",
 	"links.og.description": "TODO: description",
-	"links.header.title": "Liens"
+	"links.header.title": "Liens",
+	
+	"links.social.title": "Réseaux Sociaux",
+	"links.misc.title": "Autres liens",
+	
+	"links.twitter.title": "Twitter <i>(@NibblePoker)</i>",
+	"links.twitter.text.1": "???",
+	
+	"links.github.title": "GitHub <i>(@aziascreations)</i>",
+	"links.github.text.1": "Compte privé contenant tous mes projets personnels.",
+	
+	"links.github_pro.title": "GitHub <i>(@NibblePoker)</i>",
+	"links.github_pro.text.1": "Organisation contenant tout les dépôts en relation avec ce site web.",
+	
+	"links.linkedin.title": "LinkedIn",
+	"links.linkedin.text.1": "???",
+	
+	"links.gitea.title": "Gitea auto-hébergé",
+	"links.gitea.text.1": "Contient tous mes projets et des miroirs provenant de divers sites.",
+	
+	"links.files.title": "Fichiers publiques <i>(files.nibblepoker.lu)</i>",
+	"links.files.text.1": "Contient tout les fichiers pouvant être téléchargé sur ce site web et dans ma documentation.",
+	
+	"links.archives.title": "Archives publiques <i>(archives.nibblepoker.lu)</i>",
+	"links.archives.text.1": "Contient une variété d'archives publiques."
 }
--- a/commons/strings/fr/sidebar.json
+++ b/commons/strings/fr/sidebar.json
@@ -1,6 +1,8 @@
 {
  "sidebar.alt.logo": "Logo du site web",
  "sidebar.text.home": "Accueil",
+  "sidebar.text.shop": "Magasin",
+  "sidebar.text.school": "Formations",
  "sidebar.text.projects": "Projets",
  "sidebar.text.applications": "Applications",
  "sidebar.text.libraries": "Librairies",
--- a/compile.bat
+++ b/compile.bat
@@ -40,8 +40,20 @@ popd

 :libs
 echo.
-echo Handling the external libraries
-echo -------------------------------
+echo Handling the libraries
+echo ----------------------
+
+:libs-nibblepoker-minify
+echo Minifying nibblepoker.js
+pushd %CD%
+cd %~dp0\resources\NibblePoker\js\
+echo ^> resources\NibblePoker\js\nibblepoker.js
+call "%~dp0node_modules\.bin\terser" nibblepoker.js -c -m -o nibblepoker.min.js
+echo ^> resources\NibblePoker\js\nibblepoker-code.js
+call "%~dp0node_modules\.bin\terser" nibblepoker-code.js -c -m -o nibblepoker-code.min.js
+echo ^> resources\NibblePoker\js\nibblepoker-glider.js
+call "%~dp0node_modules\.bin\terser" nibblepoker-glider.js -c -m -o nibblepoker-glider.min.js
+popd

 :libs-decimaljs-minify
 echo Minifying Decimal.JS
@@ -56,6 +68,7 @@ popd

 :libs-end

+goto end

 :: THE Formula-wizard minified files don't point to the proper minified JS file !!!!

@@ -84,15 +97,16 @@ popd
 echo Fixing imports...
 pushd %CD%
 cd %~dp0\tools\items\formula-wizard\src\
-call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js;utils_templates.js" "decimal" "decimal.min.mjs"
-call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js;utils_templates.js" "lang" "lang.js"
-call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js;utils_templates.js" "formulas" "formulas.js"
-call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js;utils_templates.js" "units" "units.js"
-call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js;utils_templates.js" "ui_catalog" "ui_catalog.js"
-call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js;utils_templates.js" "mvc_context" "mvc_context.js"
-call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js;utils_templates.js" "sets" "sets.js"
-call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js;utils_templates.js" "mvc_formula" "mvc_formula.js"
-call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js;utils_templates.js" "utils_templates" "utils_templates.js"
+call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js;utils_templates.js;formula_weaver.js" "decimal" "decimal.min.mjs"
+call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js;utils_templates.js;formula_weaver.js" "lang" "lang.js"
+call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js;utils_templates.js;formula_weaver.js" "formulas" "formulas.js"
+call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js;utils_templates.js;formula_weaver.js" "units" "units.js"
+call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js;utils_templates.js;formula_weaver.js" "ui_catalog" "ui_catalog.js"
+call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js;utils_templates.js;formula_weaver.js" "mvc_context" "mvc_context.js"
+call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js;utils_templates.js;formula_weaver.js" "sets" "sets.js"
+call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js;utils_templates.js;formula_weaver.js" "mvc_formula" "mvc_formula.js"
+call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js;utils_templates.js;formula_weaver.js" "formula_weaver" "formula_weaver.js"
+call node "%~dp0fix-import-path.js" "formulas.js;lang.js;main.js;units.js;ui_catalog.js;mvc_context.js;sets.js;mvc_formula.js;utils_templates.js;formula_weaver.js" "utils_templates" "utils_templates.js"
 popd

 :formula-wizard-bundle
@@ -115,6 +129,7 @@ call "%~dp0node_modules\.bin\terser" mvc_context.js -c -m --toplevel -o mvc_cont
 call "%~dp0node_modules\.bin\terser" sets.js -c -m --toplevel -o sets.min.js
 call "%~dp0node_modules\.bin\terser" mvc_formula.js -c -m --toplevel -o mvc_formula.min.js
 call "%~dp0node_modules\.bin\terser" utils_templates.js -c -m --toplevel -o utils_templates.min.js
+call "%~dp0node_modules\.bin\terser" formula_weaver.js -c -m --toplevel -o formula_weaver.min.js
 call "%~dp0node_modules\.bin\terser" formula-wizard.js -c -m --toplevel -o formula-wizard.min.js
 popd

@@ -154,8 +169,6 @@ popd
 :php-end


-goto end
-
 :compile-typescript
 echo Compiling TypeScript for ".js" files...
 call .\node_modules\.bin\tsc
--- a/contact/index.php
+++ b/contact/index.php
@@ -34,14 +34,14 @@ include 'commons/DOM/sidebar.php';
 	<?php printMainHeader(localize("contact.email.title"), "fad fa-mail-bulk", "herwin.bozet@gmail.com"); ?>
 	<p class="m-s">
 		<a href="mailto:Herwin Bozet<herwin.bozet@gmail.com>?subject=Contact%20via%20NibblePoker.lu" class="bland-link button-link">
-			<button class="p-xs r-s border b-light success"><?php print(localize("contact.email.compose")); ?></button>
+			<button class="p-xs r-s border b-light success"><i class="fad fa-external-link-alt mr-xs"></i><?php print(localize("contact.email.compose")); ?></button>
 		</a>
 	</p>
 	
 	<?php printMainHeader(localize("contact.twitter.title"), "fab fa-twitter", "@NibblePoker"); ?>
 	<p class="m-s">
 		<a href="https://twitter.com/messages/compose?recipient_id=937370791334895616" class="bland-link button-link">
-			<button class="p-xs r-s border b-light primary"><?php print(localize("contact.twitter.compose")); ?></button>
+			<button class="p-xs r-s border b-light primary"><i class="fad fa-external-link-alt mr-xs"></i><?php print(localize("contact.twitter.compose")); ?></button>
 		</a>
 	</p>
 	
--- a/content/.htaccess
+++ b/content/.htaccess
@@ -1,3 +1,6 @@
+# Serving minified pages and/or pre-rendered ones first if available.
+DirectoryIndex index.min.html index.min.php index.php index.html
+
 # Redirecting any URL that starts with "/content" to the root of this folder.
 RewriteEngine On
 RewriteRule ^(.*) index.php [NC]
--- a/links/index.bak.php
+++ b/links/index.bak.php
@@ -1,120 +0,0 @@
-<?php
-set_include_path('../commons/');
-include_once 'config.php';
-include_once 'langs.php';
-?>
-<!DOCTYPE html>
-<html lang="<?php echo($user_language); ?>">
-<head>
-	<?php include 'headers.php'; ?>
-	<title>Links - Nibble Poker</title>
-	<meta name="description" content="A collection of links to all the other locations we are active on.">
-	<meta property="og:title" content="Nibble Poker - Links" />
-	<meta property="og:type" content="website" />
-	<meta property="og:url" content="<?php echo($host_uri); ?>/" />
-    <meta property="og:image" content="<?php echo($host_uri); ?>/resources/Azias/logos/v2_opengraph.png"/>
-	<meta property="og:image:type" content="image/png"/>
-	<meta property="og:description" content="A collection of links to all the other locations we are active on."/>
-</head>
-<body class="with-custom-webkit-scrollbars with-custom-css-scrollbars dark-mode" data-dm-shortcut-enabled="true" data-sidebar-shortcut-enabled="true">
-	<?php include 'body-root.php'; ?>
-	<div class="page-wrapper with-sidebar with-navbar-fixed-bottom">
-		<?php $SIDEBAR_ID = 'links'; include 'sidebar.php'; ?>
-		<div class="content-wrapper">
-			<div class="container-fluid">
-				<div id="page-title-bar" class="card p-0 pl-20 m-0 square-corners bg-very-dark title-bkgd navbar">
-					<h2 class="content-title font-size-24 mt-20 text-truncate">
-						<i class="fad fa-link"></i>&nbsp;<?php print(localize("links.title")); ?>
-					</h2>
-					<?php include 'header-lang.php'; ?>
-				</div>
-				<div class="content mx-auto w-lg-p90">
-					<div class="card p-0 mx-0">
-						<div class="px-card py-10 border-bottom px-20">
-							<div class="container-fluid">
-								<div class="row">
-									<div class="col-5 col-lg-12">
-										<h2 class="card-title font-size-18 m-0">
-											<i class="fab fa-github"></i>&nbsp;&nbsp;GitHub
-										</h2>
-									</div>
-									<div class="col-7 hidden-lg-and-up text-right font-italic">
-										<h2 class="card-title font-size-18 m-0 text-super-muted">aziascreations</h2>
-									</div>
-								</div>
-							</div>
-						</div>
-						<!--<div class="content mx-15 my-15"><p>[Contains the most recent repositories and blablabla...]</p>
-						</div>-->
-						<div class="px-card py-10 bg-light-lm bg-very-dark-dm rounded-bottom px-20">
-							<p class="font-size-12 m-0">
-								<i class="fad fa-globe"></i> https://github.com/aziascreations
-								<a class="ml-20" href="https://github.com/aziascreations">
-									<span class="badge badge-primary">
-										<?php print(localize('links.visit.button')); ?>
-									</span>
-								</a>
-							</p>
-						</div>
-					</div>
-					<div class="card p-0 mx-0">
-						<div class="px-card py-10 border-bottom px-20">
-							<div class="container-fluid">
-								<div class="row">
-									<div class="col-5 col-lg-12">
-										<h2 class="card-title font-size-18 m-0">
-											<i class="fab fa-twitter"></i>&nbsp;&nbsp;Twitter
-										</h2>
-									</div>
-									<div class="col-7 hidden-lg-and-up text-right font-italic">
-										<h2 class="card-title font-size-18 m-0 text-super-muted">@nibblepoker</h2>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="px-card py-10 bg-light-lm bg-very-dark-dm rounded-bottom px-20">
-							<p class="font-size-12 m-0">
-								<i class="fad fa-globe"></i> https://twitter.com/NibblePoker
-								<a class="ml-20" href="https://twitter.com/NibblePoker">
-									<span class="badge badge-primary">
-										<?php print(localize('links.visit.button')); ?>
-									</span>
-								</a>
-							</p>
-						</div>
-					</div>
-					<div class="card p-0 mx-0">
-						<div class="px-card py-10 border-bottom px-20">
-							<div class="container-fluid">
-								<div class="row">
-									<div class="col-5 col-lg-12">
-										<h2 class="card-title font-size-18 m-0">
-                                            <i class="fab fa-linkedin"></i>&nbsp;&nbsp;LinkedIn
-										</h2>
-									</div>
-									<div class="col-7 hidden-lg-and-up text-right font-italic">
-										<h2 class="card-title font-size-18 m-0 text-super-muted">NibblePoker</h2>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="px-card py-10 bg-light-lm bg-very-dark-dm rounded-bottom px-20">
-							<p class="font-size-12 m-0">
-								<i class="fad fa-globe"></i> https://www.linkedin.com/in/herwin-bozet-60aa6310b/
-								<a class="ml-20" href="https://www.linkedin.com/in/herwin-bozet-60aa6310b/">
-									<span class="badge badge-primary">
-										<?php print(localize('links.visit.button')); ?>
-									</span>
-								</a>
-							</p>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<?php include 'footer.php'; ?>
-	</div>
-	<script src="/resources/HalfMoon/1.1.1/js/halfmoon.min.js"></script>
-	<script src="/resources/Azias/js/nibblepoker.lu.js"></script>
-</body>
-</html>
--- a/links/index.php
+++ b/links/index.php
@@ -30,9 +30,58 @@ include 'commons/DOM/sidebar.php';
 	<?php include 'commons/DOM/header-lang.php'; ?>
 </header>
 <main id="main" class="rl-m border border-r-0 p-l">
+	<?php printMainHeader(localize("links.social.title")); ?>
 	
-	<!-- TODO -->
+	<p class="mt-s ml-s t-w-600 t-size-12">
+		<i class="fab fa-twitter mr-xs"></i><a href="https://twitter.com/NibblePoker"><?php print(localize("links.twitter.title")); ?></a>
+	</p>
+	<p class="mt-xxs  ml-l">
+		<?php print(localize("links.twitter.text.1")); ?>
+	</p>
 	
+	<p class="mt-s ml-s t-w-600 t-size-12">
+		<i class="fab fa-github mr-xs"></i><a href="https://github.com/aziascreations"><?php print(localize("links.github.title")); ?></a>
+	</p>
+	<p class="mt-xxs ml-l">
+		<?php print(localize("links.github.text.1")); ?>
+	</p>
+	
+	<p class="mt-s ml-s t-w-600 t-size-12">
+		<i class="fab fa-github mr-xs"></i><a href="https://github.com/NibblePoker"><?php print(localize("links.github_pro.title")); ?></a>
+	</p>
+	<p class="mt-xxs ml-l">
+		<?php print(localize("links.github_pro.text.1")); ?>
+	</p>
+	
+	<p class="mt-s ml-s t-w-600 t-size-12">
+		<i class="fab fa-linkedin mr-xs"></i><a href="https://twitter.com/NibblePoker"><?php print(localize("links.linkedin.title")); ?></a>
+	</p>
+	<p class="mt-xxs ml-l">
+		<?php print(localize("links.linkedin.text.1")); ?>
+	</p>
+	
+	<?php printMainHeader(localize("links.misc.title")); ?>
+	
+	<p class="mt-s ml-s t-w-600 t-size-12">
+		<i class="fad fa-code-branch ml-xxs mr-xs"></i><a href="https://git.nibblepoker.lu/"><?php print(localize("links.gitea.title")); ?></a>
+	</p>
+	<p class="mt-xxs ml-l">
+		<?php print(localize("links.gitea.text.1")); ?>
+	</p>
+	
+	<p class="mt-s ml-s t-w-600 t-size-12">
+		<i class="fad fa-download mr-xs"></i><a href="https://files.nibblepoker.lu/"><?php print(localize("links.files.title")); ?></a>
+	</p>
+	<p class="mt-xxs ml-l">
+		<?php print(localize("links.files.text.1")); ?>
+	</p>
+	
+	<p class="mt-s ml-s t-w-600 t-size-12">
+		<i class="fad fa-archive mr-xs"></i><a href="https://archives.nibblepoker.lu/"><?php print(localize("links.archives.title")); ?></a>
+	</p>
+	<p class="mt-xxs ml-l">
+		<?php print(localize("links.archives.text.1")); ?>
+	</p>
 </main>
 <?php
 include 'commons/DOM/footer.php';
--- a/resources/NibblePoker/images/backgrounds/3px-tile-0.1.png
+++ b/resources/NibblePoker/images/backgrounds/3px-tile-0.1.png
--- a/resources/NibblePoker/js/nibblepoker.js
+++ b/resources/NibblePoker/js/nibblepoker.js
@@ -1,9 +1,33 @@
 const animationStepCount = 10;

+const CpuArchitecture = {
+	Unknown: 0,
+	x86: 1,
+	x64: 2,
+	ArmGeneric: 3,
+	Arm64: 4,
+	RiscV: 5,
+}
+
 function getBezierBlend(progress) {
 	return (3 * progress ** 2) - (2 * progress ** 3);
 }

+function getCpuArchitecture(userAgent = navigator.userAgent) {
+	if(userAgent.includes("x64")) {
+		return CpuArchitecture.x64;
+	} else if(userAgent.includes("x86")) {
+		return CpuArchitecture.x86;
+	} else if(userAgent.includes("ARM")) {
+		return CpuArchitecture.ArmGeneric;
+	} else if(userAgent.includes("ARM64")) {
+		return CpuArchitecture.Arm64;
+	} else if(userAgent.includes("RISC-V")) {
+		return CpuArchitecture.RiscV;
+	}
+	return CpuArchitecture.Unknown;
+}
+
 function fadeOut(element, time = 200) {
 	element.style.opacity = "1.0";
 	element.hidden = false;
--- a/resources/NibblePoker/scss/site/backgrounds.scss
+++ b/resources/NibblePoker/scss/site/backgrounds.scss
@@ -6,8 +6,10 @@
 	background: #{$color-background-main-headings};
 }

-.bkgd-surround {
-	background: #{$color-background-surround};
+// The element rules override rules in `base.scss ~94`
+.bkgd-surround, header, nav, footer {
+	//background: #{$color-background-surround};
+	background: #{$color-background-surround} url("#{$nibblepoker-background-root}/3px-tile-0.1.png") repeat scroll center center;
 }

 .bkgd-blank-dark {
@@ -23,5 +25,7 @@
 }

 .bkgd-math {
-	background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/old-mathematics-v2-0.25.png") repeat scroll center center;
+	//background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/old-mathematics-v2-0.25.png") repeat scroll center center;
+	// FIXME: Fix the code using this class !!!
+	background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/3px-tile-0.2.png") repeat scroll center center;
 }
--- a/resources/NibblePoker/scss/site/base.scss
+++ b/resources/NibblePoker/scss/site/base.scss
@@ -67,7 +67,8 @@ body {
@media only screen and (max-width: 768px) {
 	body {
 		& > nav {
-			border-right: 1px solid #{$color-border-all};
+			//border-right: 1px solid #{$color-border-all};
+			border-right: 1px solid #{$color-border-main};
 		}
 		
 		& > header {
@@ -90,18 +91,19 @@ body {
 	"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }

+// Overridden by a rule in background.scss !
 header, nav, footer {
 	background-color: #{$color-background-surround};
 }

 main {
 	background-color: #{$color-background-main};
+	// FIXME: Adapt when sidebar is closed !
+	box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.375) inset;
 }

 /* Site > Base > Sidebar */

-// FIXME: For mobile, just use 2 media queries to define normal behaviour and inverted mobile behaviour.
-
 // FIXME: Might be easier to have it as absolute, shift it left when closing and using a blank spacing div tbh...
 // Or nest content in div, and when retracted move it out at the same speed, idk...
 .sidebar {
@@ -123,6 +125,34 @@ main {
 	}
 }

+// Inverting the sidebar's states for mobile devices
+@media only screen and (max-width: 768px) {
+	.sidebar {
+		width: 0;
+		padding-left: 0;
+		padding-right: 0;
+		overflow: hidden;
+		
+		&.retracted {
+			width: #{$size-sidebar};
+			max-width: #{$size-sidebar};
+			min-height: 100%;
+			overflow: auto;
+			overflow-x: hidden;
+			// Inherited from .p-m
+			padding-left: 1rem;
+			padding-right: 1rem;
+		}
+		
+		.sidebar-entry {
+			display: flex;
+			align-items: center;
+			justify-content: left;
+		}
+	}
+}
+
+
 /* Site > Base > Main */

 main {
--- a/resources/NibblePoker/scss/site/image.scss
+++ b/resources/NibblePoker/scss/site/image.scss
@@ -17,16 +17,17 @@
 //.align-v-t

 #logo-sidebar {
-	filter: grayscale(100%);
-	mix-blend-mode: multiply;
-	opacity: 40%;
+	filter: brightness(110%) grayscale(100%);
+	//mix-blend-mode: multiply;
+	//opacity: 40%;
 	// Fixes the width to the size of the sidebar minus its padding. (15rem - 1rem * 2)
 	width: 13rem;
 	height: auto;
 }

 #logo-footer {
-	filter: grayscale(100%);
+	filter: brightness(110%) grayscale(100%);
+	opacity: 40%;
 	height: 1.8em;
 	object-fit: contain;
 }
--- a/resources/NibblePoker/scss/site/scrollbar.scss
+++ b/resources/NibblePoker/scss/site/scrollbar.scss
@@ -0,0 +1,78 @@
+// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+
+//@mixin overflow-maker($size-key, $value) {
+//	.overflow-#{$size-key}-#{$value} {
+//		overflow: auto;
+//	}
+//	.overflow-x-#{$size-key}-#{$value} {
+//		border-top-left-radius: #{$value};
+//	}
+//	.overflow-y-#{$size-key}-#{$value} {
+//		border-top-left-radius: #{$value};
+//	}
+//}
+//
+//@include overflow-maker("0", auto);
+
+/* Site > Elements > Scrollbars */
+
+.overflow-x-auto {
+	overflow-x: auto;
+}
+.overflow-x-scroll {
+	overflow-x: scroll;
+}
+
+@media (min-width: 769px) {
+	*::-webkit-scrollbar {
+		width: #{$scrollbar-size};
+		height: #{$scrollbar-size};
+		background-color: transparent;
+	}
+	*::-webkit-scrollbar-track:vertical {
+		border-left: 1px solid #{$color-scrollbar-border};
+	}
+	*::-webkit-scrollbar-track:horizontal {
+		border-top: 1px solid #{$color-scrollbar-border};
+	}
+	*::-webkit-scrollbar-thumb {
+		background-color: rgba(255, 255, 255, 0.25);
+		border: 0.4rem solid transparent;
+		background-clip: content-box;
+		border-radius: 1em;
+	}
+	*::-webkit-scrollbar-thumb:hover {
+		background-color: rgba(255, 255, 255, 0.4);
+		border-color: transparent;
+	}
+	*::-webkit-scrollbar-corner {
+		background-color: transparent;
+		border-left: 1px solid rgba(0, 0, 0, 0.1);
+		border-top: 1px solid rgba(0, 0, 0, 0.1);
+	}
+	
+	//* {
+	//	scrollbar-width: thin;
+	//	scrollbar-color: rgba(0, 0, 0, 0.25) #ffffff;
+	//}
+	//*::-webkit-scrollbar-track {
+	//	border-color: rgba(255, 255, 255, 0.05);
+	//}
+	//*::-webkit-scrollbar-corner {
+	//	background-color: transparent;
+	//	border-color: rgba(255, 255, 255, 0.05);
+	//}
+	//* {
+	//	scrollbar-color: rgba(255, 255, 255, 0.25) #25282c;
+	//}
+}
+/*
+.hide-scrollbar {
+	scrollbar-width: none !important;
+	-ms-overflow-style: none;
+	
+	&::-webkit-scrollbar {
+		background: transparent;
+		width: 0px;
+	}
+}*/
--- a/resources/NibblePoker/scss/variables.scss
+++ b/resources/NibblePoker/scss/variables.scss
@@ -1,4 +1,5 @@
 // NibblePoker.lu CSS - (C) 2023 Bozet Herwin
+@use 'sass:color';

 /* Variables > Palettes */

@@ -51,6 +52,16 @@ $color-apollo-43: #a8b5b2;
 $color-apollo-44: #c7cfcc;
 $color-apollo-45: #ebede9;

+$color-apollo-37_50: mix($color-apollo-37, $color-apollo-38, 50%);
+
+$color-apollo-38_25: mix($color-apollo-39, $color-apollo-38, 25%);
+$color-apollo-38_50: mix($color-apollo-39, $color-apollo-38, 50%);
+$color-apollo-38_70: mix($color-apollo-39, $color-apollo-38, 70%);
+$color-apollo-38_75: mix($color-apollo-39, $color-apollo-38, 75%);
+
+$color-apollo-munted-37-1: color.grayscale(color.adjust($color-apollo-37, $lightness: +3.25%));
+$color-apollo-munted-37-2: color.grayscale(color.adjust($color-apollo-37, $lightness: +1.75%));
+
 $color-apollo-custom-00: mix($color-apollo-40, $color-apollo-39, 33%);
 $color-apollo-custom-01: mix($color-apollo-40, $color-apollo-39, 50%);
 $color-apollo-custom-02: mix($color-apollo-40, $color-apollo-39, 2.5%);
@@ -109,26 +120,34 @@ $color-unset: $color-apollo-34;
 //  * Teal Supreme (teal)
 //  * WinUI 3 (winui)
 //  * La Moiti Leune (moon)
-$theme: teal;
+//  * NibblePoker (nibblepoker)
+$theme: nibblepoker;

 /* Variables > Colors Mappings > Backgrounds & Borders */

-$color-background-body: map-get((
-		teal: $color-apollo-custom-00,
-		winui: $color-winui-02,
-		moon: $color-unset,
-), $theme);
-
 $color-background-main: map-get((
 		teal: $color-apollo-custom-02,
 		winui: $color-winui-04,
 		moon: $color-unset,
+		nibblepoker: #24252B,
 ), $theme);

 $color-background-surround: map-get((
 		teal: $color-apollo-custom-00,
 		winui: $color-winui-02,
 		moon: $color-unset,
+		nibblepoker: #1D1E22,
+), $theme);
+
+// Used as the background-color in the main's rounded corners
+$color-background-body: $color-background-surround;
+
+// Used in stylized headings
+$color-background-main-headings: map-get((
+		teal: $color-background-surround,
+		winui: $color-unset,
+		moon: $color-unset,
+		nibblepoker: $color-background-surround,
 ), $theme);


@@ -137,23 +156,21 @@ $color-background-surround: map-get((
 $color-border-all: $color-unset;  // Default border
 $color-border-light: $color-unset;  // For .b-light class (No longer exists !)

+// Used to separate the 'main' from the 'surround'.
 $color-border-surround: map-get((
 		teal: $color-apollo-38,
 		winui: $color-winui-01,
 		moon: $color-unset,
+		nibblepoker: #141417,
 ), $theme);

+// Used as the border for all element inside the "main".
+// It probably influences more stuff, but I can't be bothered to fix this...
 $color-border-main: map-get((
 		teal: $color-apollo-38,  // $color-apollo-custom-20;
 		winui: $color-winui-03,
 		moon: $color-unset,
-), $theme);
-
-
-$color-background-main-headings: map-get((
-		teal: $color-apollo-custom-03,
-		winui: $color-unset,
-		moon: $color-unset,
+		nibblepoker: $color-border-surround,
 ), $theme);


@@ -161,12 +178,14 @@ $color-background-code: map-get((
 		teal: $color-apollo-custom-20,
 		winui: $color-unset,
 		moon: $color-unset,
+		nibblepoker: mix($color-background-main, $color-background-surround, 25%),
 ), $theme);

 $color-border-code: map-get((
 		teal: #{$color-border-surround}CF,
 		winui: $color-unset,
 		moon: $color-unset,
+		nibblepoker: #{$color-border-surround}CF,
 ), $theme);


@@ -174,34 +193,53 @@ $color-background-table-main: map-get((
 		teal: $color-apollo-custom-01,
 		winui: $color-unset,
 		moon: $color-unset,
+		nibblepoker: mix($color-background-main, $color-background-surround, 50%),
 ), $theme);

 $color-background-table-dual: map-get((
 		teal: $color-apollo-custom-00,
 		winui: $color-unset,
 		moon: $color-unset,
+		nibblepoker: mix($color-background-main, $color-background-surround, 12.5%),
 ), $theme);

 $color-table-border: map-get((
 		teal: $color-apollo-39,
 		winui: $color-unset,
 		moon: $color-unset,
+		nibblepoker: #{$color-border-surround}CF,
 ), $theme);

+$color-background-inputs: map-get((
+		teal: $color-apollo-40,
+		winui: $color-unset,
+		moon: $color-unset,
+		nibblepoker: #2d2f36,
+), $theme);

-$color-background-inputs: $color-apollo-40;
-
+// TODO: Implement better ones !
 $color-background-checkbox-checked: $color-apollo-08;
 $color-background-checkbox-unchecked: $color-apollo-27;

-$color-background-button: $color-apollo-40;
-$color-background-button-hover: $color-apollo-custom-10;
+$color-background-button: map-get((
+		teal: $color-apollo-40,
+		winui: $color-unset,
+		moon: $color-unset,
+		nibblepoker: #2d2f36,
+), $theme);
+
+$color-background-button-hover: map-get((
+		teal: $color-apollo-custom-10,
+		winui: $color-unset,
+		moon: $color-unset,
+		nibblepoker: #373841,
+), $theme);

 $color-background-button-primary: #{$color-apollo-custom-30};
-$color-background-button-primary-hover: #{$color-apollo-custom-31};
+$color-background-button-primary-hover: mix($color-apollo-custom-30, $color-apollo-custom-31, 37.5%);

 $color-background-button-success: #{$color-apollo-07};
-$color-background-button-success-hover: #{$color-apollo-08};
+$color-background-button-success-hover: mix($color-apollo-07, $color-apollo-08, 50%);

 $color-background-button-error: #{$color-apollo-26};
 $color-background-button-error-hover: #{$color-apollo-27};
@@ -245,7 +283,7 @@ $color-wedge-blue-border: $color-apollo-02;
 /* Variables > Scrollbar */

 //$color-scrollbar-border: rgba(0, 0, 0, 0.15);
-$color-scrollbar-border: $color-border-all;
+$color-scrollbar-border: $color-border-surround;

 $scrollbar-size: 1.25em;

--- a/sitemap.txt
+++ b/sitemap.txt
@@ -6,8 +6,6 @@ https://nibblepoker.lu/content/youtube-auto-archiver
 https://nibblepoker.lu/content/excel-worksheet-password-remover
 https://nibblepoker.lu/content/mc-expanded-iron-bundles
 https://nibblepoker.lu/content/dotnet-arguments
-https://nibblepoker.lu/tools/
-https://nibblepoker.lu/tools/svg-to-png/
 https://nibblepoker.lu/links/
 https://nibblepoker.lu/contact/
 https://nibblepoker.lu/privacy/
@@ -19,8 +17,6 @@ https://nibblepoker.lu/en/content/youtube-auto-archiver
 https://nibblepoker.lu/en/content/excel-worksheet-password-remover
 https://nibblepoker.lu/en/content/mc-expanded-iron-bundles
 https://nibblepoker.lu/en/content/dotnet-arguments
-https://nibblepoker.lu/en/tools/
-https://nibblepoker.lu/en/tools/svg-to-png/
 https://nibblepoker.lu/en/links/
 https://nibblepoker.lu/en/contact/
 https://nibblepoker.lu/en/privacy/
@@ -32,8 +28,6 @@ https://nibblepoker.lu/fr/content/youtube-auto-archiver
 https://nibblepoker.lu/fr/content/excel-worksheet-password-remover
 https://nibblepoker.lu/fr/content/mc-expanded-iron-bundles
 https://nibblepoker.lu/fr/content/dotnet-arguments
-https://nibblepoker.lu/fr/tools/
-https://nibblepoker.lu/fr/tools/svg-to-png/
 https://nibblepoker.lu/fr/links/
 https://nibblepoker.lu/fr/contact/
 https://nibblepoker.lu/fr/privacy/
--- a/tools/.htaccess
+++ b/tools/.htaccess
@@ -1,6 +1,5 @@
-# FIXME: The minified content scripts fail for some reason !
-# Could be the missing closing php tag !!!
-DirectoryIndex index.php index.html
+# Serving minified pages and/or pre-rendered ones first if available.
+DirectoryIndex index.min.html index.min.php index.php index.html

 # Redirecting any URL that starts with "/tools" to the root of this folder.
 RewriteEngine On
--- a/tools/items/formula-wizard/page.php
+++ b/tools/items/formula-wizard/page.php
@@ -126,7 +126,7 @@ echo(getMainHeader(localize("tool.formula-wizard.workbench"), null, null, null,

 <template id="template-workbench-formula-value">
 	<div class="my-xs ml-xs formula-value-input-form">
-		<table class="border stylish table-v-center">
+		<table class="border stylish table-v-center w-full">
 			<tr>
 				<td colspan="2">
 					<p id="fw-workbench-formula-value-name" class="p-xxs t-center t-w-500">${value.name}</p>
@@ -149,6 +149,14 @@ echo(getMainHeader(localize("tool.formula-wizard.workbench"), null, null, null,
 					</select>
 				</td>
 			</tr>
+			<tr>
+				<td colspan="2">
+					<p id="fw-workbench-formula-value-test-separator-title" class="p-xxs t-w-500">
+						Live-testing:
+						<i class="fad fa-vial t-half-muted f-right"></i>
+					</p>
+				</td>
+			</tr>
 			<tr>
 				<td>
 					<label for="fw-workbench-formula-value-test-value" class="mx-xs t-center">Value:</label>
@@ -159,7 +167,7 @@ echo(getMainHeader(localize("tool.formula-wizard.workbench"), null, null, null,
 			</tr>
 			<tr>
 				<td>
-					<label for="fw-workbench-formula-value-test-value-set" class="mx-xs t-center">Scale:</label>
+					<label for="fw-workbench-formula-value-test-value-set" class="mx-xs t-center">Set:</label>
 				</td>
 				<td>
 					<select id="fw-workbench-formula-value-test-value-set" class="p-mxs w-full">
--- a/tools/items/formula-wizard/src/formula_weaver.ts
+++ b/tools/items/formula-wizard/src/formula_weaver.ts
@@ -0,0 +1,16 @@
+/*
+ *  Formula Wizard v0.0.2
+ *  [Short desc here]
+ *  https://github.com/aziascreations/Web-NibblePoker
+ *  Copyright (c) 2023 Herwin Bozet <herwin.bozet@gmail.com>
+ */
+
+// Note:
+// The weaver's behavior could have implemented directly into the "WorkbenchFormula", "WorkbenchFormulaValue" and
+//   "WorkbenchContextComponent" controller classes.
+// However, I chose not to do that and add extra re-linking steps in order to keep the MVC models separate from
+//   the final formulas used for graphing and doing single-formula live tests.
+// Additionally, it separates the "Number Prolapsing Machine" from using the MVC's functions directly, which will
+//   allow for easier upgrades and modifications to each part.
+
+
--- a/tools/items/formula-wizard/src/mvc_formula.ts
+++ b/tools/items/formula-wizard/src/mvc_formula.ts
@@ -6,6 +6,7 @@
 */

 import {localize} from "./lang";
+import {populateScaleSelectForUnit} from "./units";
 import {isCatalogInitialized, catalogFormulas} from "./ui_catalog";
 import {FormulaValue, FormulaVariant} from "./formulas";
 import {retrieveTemplate, makeElementFromFragment, appendToAllIds} from "./utils_templates";
@@ -27,32 +28,11 @@ const ID_FORMULA_VALUE_PREFIX = ID_FORMULA_PREFIX + "value-";
 const ID_FORMULA_VALUE_ID = ID_FORMULA_VALUE_PREFIX + "id";
 const ID_FORMULA_VALUE_NAME = ID_FORMULA_VALUE_PREFIX + "name";
 const ID_FORMULA_VALUE_LINK = ID_FORMULA_VALUE_PREFIX + "link";
+const ID_FORMULA_VALUE_TEST_SEPARATOR_TITLE = ID_FORMULA_VALUE_PREFIX + "test-separator-title";
 const ID_FORMULA_VALUE_TEST_VALUE = ID_FORMULA_VALUE_PREFIX + "test-value";
 const ID_FORMULA_VALUE_TEST_SCALE = ID_FORMULA_VALUE_PREFIX + "test-scale";
 const ID_FORMULA_VALUE_TEST_VALUE_SET = ID_FORMULA_VALUE_PREFIX + "test-value-set";

-//const idWorkbenchFormulaPrefix = "fw-workbench-formula-";
-//const idWorkbenchFormulaSpawnPoint = idWorkbenchFormulaPrefix + "spawn";
-//
-//// Formula template
-//const idTemplateFormula = "template-workbench-formula";
-//const idFormulaName = idWorkbenchFormulaPrefix + "name";
-//const idFormulaInputs = idWorkbenchFormulaPrefix + "inputs";
-//const idFormulaOutputs = idWorkbenchFormulaPrefix + "outputs";
-//
-//// FormulaUnit template
-//const classTemplateFormulaValue = "formula-value-input-form";
-//const idTemplateFormulaValue = idTemplateFormula + "-value";
-//const idFormulaValuePrefix = idWorkbenchFormulaPrefix + "value-";
-//const idFormulaValueId = idFormulaValuePrefix + "id";
-//const idFormulaValueName = idFormulaValuePrefix + "name";
-//const idFormulaValueLink = idFormulaValuePrefix + "link";
-//const idFormulaValueTestValue = idFormulaValuePrefix + "test-value";
-//const idFormulaValueTestScale = idFormulaValuePrefix + "test-scale";
-//const idFormulaValueTestValueSet = idFormulaValuePrefix + "test-value-set";
-
-
-

 // ---------
 //  Globals
@@ -124,8 +104,9 @@ class WorkbenchFormulaValueInterface {
    private readonly eFormulaValueId: HTMLInputElement;
    private readonly eFormulaValueName: HTMLParagraphElement;
    private readonly eFormulaValueLink: HTMLSelectElement;
+    private readonly eFormulaValueTestTitleSeparator: HTMLParagraphElement;
    private readonly eFormulaValueTestValue: HTMLInputElement;
-    private readonly eFormulaValueTestScale: HTMLSelectElement;
+    public readonly eFormulaValueTestScale: HTMLSelectElement;
    private readonly eFormulaValueTestValueSet: HTMLInputElement;

    constructor(eRootFragment: DocumentFragment, setupValueType: EWorkbenchFormulaValueTypes) {
@@ -135,12 +116,14 @@ class WorkbenchFormulaValueInterface {
        this.eFormulaValueId = this.eRootElement.querySelector(`input#${ID_FORMULA_VALUE_ID}`)!;
        this.eFormulaValueName = this.eRootElement.querySelector(`p#${ID_FORMULA_VALUE_NAME}`)!;
        this.eFormulaValueLink = this.eRootElement.querySelector(`select#${ID_FORMULA_VALUE_LINK}`)!;
+        this.eFormulaValueTestTitleSeparator = this.eRootElement.querySelector(`p#${ID_FORMULA_VALUE_TEST_SEPARATOR_TITLE}`)!;
        this.eFormulaValueTestValue = this.eRootElement.querySelector(`input#${ID_FORMULA_VALUE_TEST_VALUE}`)!;
        this.eFormulaValueTestScale = this.eRootElement.querySelector(`select#${ID_FORMULA_VALUE_TEST_SCALE}`)!;
        this.eFormulaValueTestValueSet = this.eRootElement.querySelector(`select#${ID_FORMULA_VALUE_TEST_VALUE_SET}`)!;

        if([this.eFormulaValueId, this.eFormulaValueName, this.eFormulaValueLink, this.eFormulaValueTestValue,
-            this.eFormulaValueTestScale, this.eFormulaValueTestValueSet].some((item) => item === null)) {
+            this.eFormulaValueTestTitleSeparator, this.eFormulaValueTestScale, this.eFormulaValueTestValueSet].some(
+                (item) => item === null)) {
            alert("error.ui.formula.value.missingElement");
            throw Error("error.ui.formula.value.missingElement");
        }
@@ -160,14 +143,14 @@ class WorkbenchFormulaValueInterface {
        (eFormField.parentNode!.parentNode! as HTMLElement).hidden = hidden;
    }

-    private setupInput() {
+    setupInput() {
        this.toggleField(this.eFormulaValueId, true);
        this.eFormulaValueTestValue.value = "0";
        //this.eFormulaValueTestValue.onchange = this.onTestFieldChange.bind(this);
        //this.eFormulaValueTestScale.onchange = this.onTestFieldChange.bind(this);
    }

-    private setupOutput() {
+    setupOutput() {
        this.toggleField(this.eFormulaValueLink, true);
        //this.eFormulaValueTestValue.readOnly = true;
        //this.eFormulaValueTestScale.onchange = this.onTestFieldChange.bind(this);
@@ -176,6 +159,13 @@ class WorkbenchFormulaValueInterface {
    setName(newName: string) {
        this.eFormulaValueName.innerText = newName;
    }
+
+    changeTestMode(newStatus: boolean) {
+        this.toggleField(this.eFormulaValueTestTitleSeparator, !newStatus);
+        this.toggleField(this.eFormulaValueTestValue, !newStatus);
+        this.toggleField(this.eFormulaValueTestScale, !newStatus);
+        this.toggleField(this.eFormulaValueTestValueSet, !newStatus);
+    }
 }

 class WorkbenchFormulaValue {
@@ -187,14 +177,38 @@ class WorkbenchFormulaValue {
        this.data = new WorkbenchFormulaValueData(parentAssignedControllerId, valueType, formulaValue);
        this.uiElement = new WorkbenchFormulaValueInterface(eRootFragment, valueType);

+        // Preparing the UI.
        this.setName(`${this.data.formulaValue.unit.name} (${this.data.formulaValue.unit.symbol})`);
+
+        // Adding the relevant scale factors to "eFormulaValueTestScale" based on the formula variant's unit.
+        populateScaleSelectForUnit(
+            this.data.formulaValue.unit,
+            this.uiElement.eFormulaValueTestScale,
+            this.data.formulaValue.scaleFactor
+        );
+
+        // Making sided setups.
+        if (this.data.valueType === EWorkbenchFormulaValueTypes.INPUT) {
+            // Setting up as input.
+            this.uiElement.setupInput();
+        } else {
+            // Setting up as output.
+            this.uiElement.setupOutput();
+        }
+
+        // Finalizing the interface by making its IDs unique.
+        // This is purely a UX thing to ensure proper input selection via the labels.
+        appendToAllIds(this.uiElement.eRootElement, this.data.id);
    }

    setName(newName: string) {
        this.uiElement.setName(newName);
    }
-}

+    changeTestMode(newStatus: boolean) {
+        this.uiElement.changeTestMode(newStatus);
+    }
+}

 // --------------
 //  Formulas MVC
@@ -204,9 +218,13 @@ class WorkbenchFormulaData {
    id: string;
    formulaVariant: FormulaVariant;

+    isTestModeEnabled: boolean;
+
    constructor(controllerId: string, formulaVariant: FormulaVariant) {
        this.id = controllerId;
        this.formulaVariant = formulaVariant;
+
+        this.isTestModeEnabled = false;
    }
 }

@@ -271,20 +289,25 @@ class WorkbenchFormula {
        // Preparing the interface...
        this.setTitle(this.data.formulaVariant.parentFormula.name);

+        // Disabling the test mode by default.
+        this.changeTestMode(false);
+
        // Adding the value elements into their proper container.
        this.inputControllers.every(inputController =>
            this.uiElement.eInputsContainer.appendChild(inputController.uiElement.eRootElement));
        this.outputControllers.every(outputController =>
            this.uiElement.eOutputsContainer.appendChild(outputController.uiElement.eRootElement));
-
-        // Finalizing the interface by making its IDs unique.
-        // This is purely a UX thing to ensure proper input selection via the labels.
-        appendToAllIds(this.uiElement.eRootElement, this.data.id);
    }

    public setTitle(newTitle: string) {
        this.uiElement.setTitle(newTitle);
    }
+
+    public changeTestMode(newStatus: boolean) {
+        this.data.isTestModeEnabled = newStatus;
+        this.inputControllers.forEach(inputController => inputController.changeTestMode(newStatus));
+        this.outputControllers.forEach(outputController => outputController.changeTestMode(newStatus));
+    }
 }


--- a/tools/items/formula-wizard/src/units.ts
+++ b/tools/items/formula-wizard/src/units.ts
@@ -205,6 +205,23 @@ export const units: { [key: string]: Unit } = {
 };


+// --------------------
+//  Units > Populators
+// --------------------
+
+export function populateScaleSelectForUnit(unit: Unit, eSelect: HTMLSelectElement,
+                                           selectedScaleFactor: UnitScaleFactor | null) {
+    unit.scale.scaleFactors.forEach(scaleFactor => {
+        const eNewScaleOption = document.createElement("option");
+        eNewScaleOption.setAttribute("value", getScaleKeyFromValue(scaleFactor));
+        eNewScaleOption.innerText = scaleFactor.prefix + " - " + eNewScaleOption.getAttribute("value");
+        eNewScaleOption.selected = (scaleFactor === selectedScaleFactor);
+        eSelect.appendChild(eNewScaleOption);
+    });
+}
+
+
+
 // -----------------
 //  Units > Helpers
 // -----------------
@@ -216,6 +233,12 @@ export function scaleFromBase(value: Decimal, scaleFactor: UnitScaleFactor): Dec
    return value.dividedBy(scaleFactor.multiplier);
 }

+function getScaleKeyFromValue(scaleFactor: UnitScaleFactor): string {
+    return Object.keys(scaleFactors).find(
+        scaleFactorKey => (scaleFactors[scaleFactorKey]) === scaleFactor
+    )!;
+}
+
 // ---------------------------
 //  Units > On-Import Handler
 // ---------------------------
--- a/tools/items/formula-wizard/styles.css
+++ b/tools/items/formula-wizard/styles.css
@@ -20,6 +20,7 @@
    border-bottom: 1px solid;
 }

+/* Regular desktops */
 .fw-workbench-io-grid {
    display: grid;
    grid-template-columns: 33% 33% 33%;
@@ -35,6 +36,7 @@
        grid-template-areas: ". .";
    }
 }
+
 /* Mobile */
@media only screen and (max-width: 768px) {
    .fw-workbench-io-grid {
@@ -42,3 +44,11 @@
        grid-template-areas: ".";
    }
 }
+
+/* Manually forcing the formula values' forms to size their columns properly */
+.formula-value-input-form table td:first-child:not(:first-of-type) {
+    white-space: nowrap;
+}
+.formula-value-input-form table td:last-child:not(:first-of-type) {
+    width: 100%;
+}