frontend: Add a cloud word for tags

frontend/fic/package-lock.json

@@ -14,7 +14,8 @@
         "bootswatch": "^5.1.3",
         "hash-wasm": "^4.9.0",
         "seedrandom": "^3.0.5",
-        "vite": "^5.0.0"
+        "vite": "^5.0.0",
+        "wordcloud": "^1.2.2"
       },
       "devDependencies": {
         "@sveltejs/adapter-static": "^3.0.0",
@@ -2857,6 +2858,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/wordcloud": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/wordcloud/-/wordcloud-1.2.2.tgz",
+      "integrity": "sha512-fUnDsGrHXou+49j1OeKaC7nOeZPx+sWjIet0L/j6eAcm0nXy+a+AuUs/iDAX4PLBg1Zc6wgXWXhoXdQsXRWAEw=="
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",

frontend/fic/package.json

@@ -12,6 +12,7 @@
     "@sveltejs/adapter-static": "^3.0.0",
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@sveltestrap/sveltestrap": "^6.2.1",
     "eslint": "^8.4.2",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-svelte": "^2.35.1",
@@ -20,7 +21,6 @@
     "sass": "^1.51.0",
     "sass-loader": "^14.0.0",
     "svelte": "^4.0.0",
-    "@sveltestrap/sveltestrap": "^6.2.1",
     "vite": "^5.0.0"
   },
   "type": "module",
@@ -31,6 +31,7 @@
     "bootswatch": "^5.1.3",
     "hash-wasm": "^4.9.0",
     "seedrandom": "^3.0.5",
-    "vite": "^5.0.0"
+    "vite": "^5.0.0",
+    "wordcloud": "^1.2.2"
   }
 }

frontend/fic/src/routes/tags/+page.svelte

@@ -0,0 +1,57 @@
+<script>
+ import { tick } from 'svelte';
+ import { goto } from '$app/navigation';
+
+ import {
+     Container,
+     Icon,
+ } from '@sveltestrap/sveltestrap';
+
+ import WordCloud from 'wordcloud';
+
+ import { themesStore } from '$lib/stores/themes.js';
+
+ tick().then(() => {
+     WordCloud(
+         document.getElementById('wordcloud'),
+         {
+             list: computeTags(),
+             gridSize: Math.round(20 * document.getElementById('wordcloud').clientWidth / 1024),
+             weightFactor: function (size) {
+                 return Math.pow(size, 2.8) * document.getElementById('wordcloud').clientWidth / 1024;
+             },
+             rotateRatio: 0.5,
+             ellipticity: 14,
+             click: (item) => {
+                 goto('tags/' + item[0]);
+             },
+         }
+     );
+ });
+
+ function computeTags() {
+     const ttags = { };
+
+     for (const key in $themesStore) {
+         const theme = $themesStore[key];
+         for (const k in theme.exercices) {
+             const exercice = theme.exercices[k];
+             for (const tag of exercice.tags) {
+                 if (!ttags[tag]) ttags[tag] = 1;
+                 else ttags[tag] += 1;
+             }
+         }
+     }
+
+     const tags = [];
+     for (const tag in ttags) {
+         tags.push([tag, ttags[tag]]);
+     }
+
+     return tags;
+ }
+</script>
+
+<Container class="mt-2 d-flex">
+    <canvas id="wordcloud" class="w-100" width="1600" height="730"></canvas>
+</Container>