[PR] #17 from chiba233/v1-dev

improve LinkCard.svelte more intuitive

AquaNet/.editorconfig

@@ -0,0 +1,20 @@
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+# Matches multiple files: .ts, .json, .svelte .sass
+[*.{json,svelte,ts,sass}]
+indent_style = space
+indent_size = 2
+
+
+# Markdown files (e.g., README.md) often use a line length of 80 characters
+[*.md]
+max_line_length = 80
+trim_trailing_whitespace = false

AquaNet/src/pages/Home/LinkCard.svelte

@@ -125,12 +125,12 @@
     // If there are no longer conflicts, we can link the card
     if (!isConflict) {
       await doLink(conflictCardID, conflictToMigrate.join(","))
-      
+
       // Reset the conflict state
       linkConflictCancel()
     }
   }
-  
+
   function linkConflictCancel() {
     state = "ready"
     conflictSummary = null
@@ -233,7 +233,9 @@
 
   <h2>Link Card</h2>
   <p>Please enter the following information:</p>
-  <p>1. The 20-digit access code on the back of your card.
+  {#if !inputSN}
+    <div out:slide={{ duration: 250 }}>
+  <p>The 20-digit access code on the back of your card.
     (If it doesn't work, please try scanning your card in game and enter the access code shown on screen)</p>
   <label>
     <!-- DO NOT change the order of bind:value and on:input. Their order determines the order of reactivity -->
@@ -247,14 +249,18 @@
            on:input={inputACChange}
            class:error={inputAC && (!inputACRegex.test(inputAC) || errorAC)}>
     {#if inputAC.length > 0}
-      <button transition:slide={{axis: 'x'}} on:click={() => link('AC')}>Link</button>
+      <button transition:slide={{axis: 'x'}} on:click={() => {link('AC');inputAC=''}}>Link</button>
     {/if}
   </label>
   {#if errorAC}
     <p class="error" transition:slide>{errorAC}</p>
   {/if}
+    </div>
+    {/if}
 
-  <p>2. Download the NFC Tools app on your phone
+  {#if !inputAC}
+    <div out:slide={{ duration: 250 }}>
+  <p>Download the NFC Tools app on your phone
     (<a href="https://play.google.com/store/apps/details?id=com.wakdev.wdnfc">Android</a> /
     <a href="https://apps.apple.com/us/app/nfc-tools/id1252962749">Apple</a>) and scan your card.
     Then, enter the Serial Number.
@@ -270,12 +276,14 @@
            on:input={inputSNChange}
            class:error={inputSN && (!inputSNRegex.test(inputSN) || errorSN)}>
     {#if inputSN.length > 0}
-      <button transition:slide={{axis: 'x'}} on:click={() => link('SN')}>Link</button>
+      <button transition:slide={{axis: 'x'}} on:click={() => {link('SN'); inputSN = ''}}>Link</button>
     {/if}
   </label>
   {#if errorSN}
     <p class="error" transition:slide>{errorSN}</p>
   {/if}
+    </div>
+    {/if}
 
   {#if conflictOld && conflictNew && me}
     <div class="overlay" transition:fade>
@@ -365,4 +373,4 @@
       .id
         opacity: 0.7
 
-</style>
+</style>