add everything

js/util.js

@@ -0,0 +1,66 @@
+// https://stackoverflow.com/questions/3452546/how-do-i-get-the-youtube-video-id-from-a-url
+export function getYoutubeIdFromUrl(url) {
+    return url.match(
+        /.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/,
+    )?.[1] ?? '';
+}
+
+export function embed(video) {
+    return `https://www.youtube.com/embed/${getYoutubeIdFromUrl(video)}`;
+}
+
+export function localize(num) {
+    return num.toLocaleString(undefined, { minimumFractionDigits: 0 });
+}
+
+export function getThumbnailFromId(id) {
+    return `https://img.youtube.com/vi/${id}/mqdefault.jpg`;
+}
+
+// https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
+export function shuffle(array) {
+    let currentIndex = array.length, randomIndex;
+
+    // While there remain elements to shuffle.
+    while (currentIndex != 0) {
+        // Pick a remaining element.
+        randomIndex = Math.floor(Math.random() * currentIndex);
+        currentIndex--;
+
+        // And swap it with the current element.
+        [array[currentIndex], array[randomIndex]] = [
+            array[randomIndex],
+            array[currentIndex],
+        ];
+    }
+
+    return array;
+}
+
+// https://stackoverflow.com/a/44615197
+export function getFontColour(hexColor){
+    function getsRGB(c) {
+        return parseInt(c, 16) || c;
+    }
+
+    const brightness = Math.round(((getsRGB(hexColor.substr(1, 2)))*299 +
+                      (getsRGB(hexColor.substr(3, 2))*587) +
+                      (getsRGB(hexColor.substr(-2))*114))/1000);
+    
+    return (brightness > 125) ? 'black' : 'white';
+}
+
+export function getLevelThumbnail(name){
+    return `background: url('/assets/levels/${name}.png') #00000094; background-blend-mode: multiply; background-position: center; background-size: cover; color: var(--color-on-background); border: none; border-radius: 1rem; padding: 2rem; text-align: start; word-break: normal; overflow-wrap: anywhere; cursor: pointer; margin-left: 0.5rem; width: 100%; margin-bottom: 0.5rem;`;
+}
+
+export function getLeaderboardLevelThumbnail(name){
+    return `background: url('/assets/levels/${name}.png') #00000094;
+    background-blend-mode: multiply;
+    background-size: cover;
+    background-position: center;
+    border-radius: 1rem;
+    padding-top: 1.5rem;
+    padding-left: 1.5rem;
+    padding-bottom: 0.5rem;`;
+}