ui: Randomize themes list

frontend/ui/package-lock.json

@@ -998,6 +998,11 @@
         "mri": "^1.1.0"
       }
     },
+    "seedrandom": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/seedrandom/-/seedrandom-3.0.5.tgz",
+      "integrity": "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg=="
+    },
     "semver": {
       "version": "7.3.5",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",

frontend/ui/package.json

@@ -23,6 +23,7 @@
     "@popperjs/core": "^2.9.3",
     "@sveltejs/adapter-static": "^1.0.0-next.17",
     "bootstrap": "^5.1.0",
-    "bootstrap-icons": "^1.5.0"
+    "bootstrap-icons": "^1.5.0",
+    "seedrandom": "^3.0.5"
   }
 }

frontend/ui/src/components/NavThemes.svelte

@@ -9,8 +9,8 @@
  } from 'sveltestrap';
 
  import { my } from '../stores/my.js';
- import { max_solved, themes } from '../stores/themes.js';
- import { myThemes } from '../stores/mythemes.js';
+ import { max_solved } from '../stores/themes.js';
+ import { myThemes, themes } from '../stores/mythemes.js';
 </script>
 
 <Dropdown nav inNavbar>
@@ -33,7 +33,7 @@
                     </Badge>
                 {/if}
                 <Badge>
-                    {#if $my && $my.team_id}{$myThemes[th].exercice_solved}/{/if}{$themes[th].exercice_count}
+                    {#if $my && $my.team_id}{$myThemes[$themes[th].id].exercice_solved}/{/if}{$themes[th].exercice_count}
                 </Badge>
             </DropdownItem>
         {/each}

frontend/ui/src/routes/index.svelte

@@ -16,8 +16,7 @@
 
  import { my } from '../stores/my.js';
  import { teams } from '../stores/teams.js';
- import { themes } from '../stores/themes.js';
- import { myThemes } from '../stores/mythemes.js';
+ import { myThemes, themes } from '../stores/mythemes.js';
  import { settings } from '../stores/settings.js';
 </script>
 
@@ -52,7 +51,7 @@
         {#each Object.keys($themes) as th, index}
             <Col class="mb-3">
             <CardTheme
-                class="{$my && $my.team_id && $myThemes[th].exercice_solved > 0?'border-success ':''}{$themes[th].exercice_coeff_max > 1?'border-warning ':''}"
+                class="{$my && $my.team_id && $myThemes[$themes[th].id].exercice_solved > 0?'border-success ':''}{$themes[th].exercice_coeff_max > 1?'border-warning ':''}"
                 theme={$themes[th]}
                        on:click={goto(`/${$themes[th].urlid}`)}
             />

frontend/ui/src/stores/mythemes.js

@@ -1,5 +1,7 @@
 import { derived } from 'svelte/store';
 
+import seedrandom from 'seedrandom';
+
 import { my } from './my.js';
 import { themesStore } from './themes.js';
 
@@ -21,6 +23,31 @@ export const myThemes = derived([my, themesStore], ([$my, $themesStore]) => {
   return themes;
 });
 
+export const themes = derived(
+  [my, themesStore],
+  ([$my, $themesStore]) => {
+    const arr = [];
+    for (let th in $themesStore.themes) {
+      $themesStore.themes[th].id = th
+      arr.push($themesStore.themes[th]);
+    }
+    const size = arr.length;
+    const rng = new seedrandom($my && $my.team_id ? $my.team_id : 0);
+    const resp = [];
+    const keys = [];
+
+    for(let i=0;i<size;i++) keys.push(i);
+    for(let i=0;i<size;i++) {
+      const r = Math.floor(rng() * keys.length);
+      const g = keys[r];
+      keys.splice(r,1);
+      resp.push(arr[g]);
+    }
+
+    return resp;
+  },
+);
+
 export const tags = derived([my, themesStore], ([$my, $themesStore]) => {
   const tags = {};