Fully implemented sharing

Author: Wolfyxon

src/lib/comp/CopyField.svelte

@@ -12,6 +12,7 @@
     .copy-field {
         display: flex;
         padding: 5px;
+        width: 100%;
         max-width: 95vw;
         border: 1px solid var(--panel-outline);
         background-color: var(--panel-dark);

src/lib/layout/StatsView.svelte

@@ -9,20 +9,30 @@
     import type { ProcessedStats } from "$lib/stats";
     import { STATS_INTROS, STATS_OUTROS } from "$lib/strings";
     import { randChoice } from "$lib/util/array";
-    import { removeUrlParams } from "$lib/util/string";
+    import { capitalize, removeUrlParams } from "$lib/util/string";
 
     export let stats: ProcessedStats;
     export let api: SongAPI;
+    export let receivedShareName: string | null = null;
 
     export let onClose: () => any = () => console.warn("onClose not set")
 
     const introText = randChoice(STATS_INTROS);
     const outroText = randChoice(STATS_OUTROS);
-    const shareURL = removeUrlParams(window.location.href) + "?s=" + stats.toBase64();
+    const defaultName = "someone";
 
+    let shareName: string | undefined;
+    let pronoun1 = "you";
+    let pronoun2 = "your";
+    
     let currentPage = 0;
     const pageCount = 5;
 
+    if(receivedShareName) {
+        pronoun1 = "they";
+        pronoun2 = "their";
+    }
+
     function prev() {
         if(currentPage > 0) {
             currentPage -= 1;
@@ -67,11 +77,17 @@
 <div id="stats-view-main">
     <div id="stats-view-content">
         {#snippet pageIntro()}
-            <h1>{introText}</h1>
+            <h1>
+                {#if receivedShareName}
+                    {receivedShareName} wants to show you their music taste!
+                {:else}
+                    {introText}
+                {/if}
+            </h1>
         {/snippet}
 
         {#snippet numStats()}
-            <h1>You listened to</h1>
+            <h1>{capitalize(pronoun1)} listened to</h1>
 
             <div class="flex">
                 <Counter
@@ -87,21 +103,45 @@
         {/snippet}
 
         {#snippet pageFavSongsAllTime()}
-            <h1>These are your favorite songs</h1>
+            <h1>These are {pronoun2} favorite songs</h1>
             <SongList songs={stats.getTopSongs()} api={api} />
         {/snippet}
 
         {#snippet pageFavArtistsAllTime()}
-            <h1>And these are your favorite artists</h1>
+            <h1>And these are {pronoun2} favorite artists</h1>
             <ArtistList artists={stats.getTopArtists()} />
         {/snippet}
 
         {#snippet pageEnd()}
             <h1>{outroText}</h1>
-            
+
             <div style="text-align: center; margin: 0 auto; max-width: 500px">
-                <p>Share your stats!</p>
-                <CopyField value={shareURL} />
+                {#if !receivedShareName}
+                    <h2>Share your stats!</h2>
+                    <label for="name-inp">Your name: (optional)</label>
+                    
+                    <input
+                        type="text" 
+                        maxlength="28" 
+                        bind:value={shareName} 
+                        placeholder={defaultName}
+                        id="name-inp" 
+                    />
+                    
+                    <CopyField value={
+                        (() => {
+                            let nameParam = "";
+                            const statsParam = `s=${stats.toBase64()}`;
+
+                            if(shareName && shareName.length != 0 && shareName != defaultName) {
+                                nameParam = `name=${shareName}&`;
+                            }
+
+                            return `${removeUrlParams(window.location.href)}?${nameParam}${statsParam}`
+                        })()
+                    } />
+                {/if}
+
                 <LinkButton text="Home page" onClick={onClose} highlight />
             </div>
         {/snippet}

src/lib/styles/global.svelte

@@ -32,6 +32,25 @@
             height: 95%;
         }
 
+        input[type="text"] {
+            display: block;
+            color: white;
+            padding: 5px;
+            margin: 10px auto;
+            width: 100%;
+            max-width: 95vw;
+            border: 2px solid var(--panel-outline);
+            background-color: var(--panel-dark);
+            border-radius: 5px;
+            transition: 0.2s;
+        }
+
+        input[type="text"]:focus {
+            outline: none;
+            
+            background-color: var(--panel);
+        }
+
         button {
             background: var(--panel);
             min-width: 100px;

src/lib/util/string.ts

@@ -1,3 +1,13 @@
+export function capitalize(text: string): string {
+    if(text.length == 0) {
+        return text;
+    }
+    
+    const split = text.split("");
+    split[0] = split[0].toUpperCase();
+
+    return split.join("");
+}
 
 export function removeUrlParams(url: string): string {
     const split = url.split("?");

src/routes/+page.svelte

@@ -17,6 +17,7 @@
     let statsProcessed = false;
     let progress = 0;
     let progressMax = 0;
+    let shareName: string | null = null;
 
     async function setStats(stats: ProcessedStats | null) {
         statsProcessed = false;
@@ -86,12 +87,19 @@
         const params = new URLSearchParams(window.location.search);
         const base64 = params.get("s");
         const offline = params.get("offline");
-        
+        const paramShareName = params.get("name");
+
         if(offline) {
             offlineFlag = true;
         }
 
         if(base64) {
+            if(paramShareName) {
+                shareName = paramShareName;
+            } else {
+                shareName = "Someone";
+            }
+
             setTimeout(() => {
                 setStats(ProcessedStats.fromBase64(base64));
             });
@@ -133,7 +141,8 @@
         <StatsView 
             stats={currentStats}
             api={api}
-            onClose={reset} 
+            onClose={reset}
+            receivedShareName={shareName}
         />
     {:else if currentStats && !statsProcessed}
         <div id="loading">