[+] Skeleton ui for transfer

AquaNet/src/App.svelte

@@ -11,6 +11,7 @@
   import { pfp, tooltip } from "./libs/ui"
   import { ANNOUNCEMENT } from "./libs/config";
   import { t } from "./libs/i18n";
+  import Transfer from "./pages/Transfer/Transfer.svelte";
 
   console.log(`%c
 ┏━┓         ┳━┓━┓┏━
@@ -76,6 +77,7 @@
   <Route path="/u/:username/:game" component={UserHome} />
   <Route path="/settings" component={Settings} />
   <Route path="/pictures" component={MaiPhoto} />
+  <Route path="/transfer" component={Transfer} />
 </Router>
 
 <style lang="sass">

AquaNet/src/libs/sdk.ts

@@ -317,3 +317,7 @@ export const SETTING = {
   detailSet: (game: string, field: string, value: any) =>
     post(`/api/v2/game/${game}/user-detail-set`, { field, value }),
 }
+
+export const TRANSFER = {
+  
+}

AquaNet/src/pages/Transfer/InputTextShort.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  export let desc: string
+  export let value: string
+  export let placeholder: string
+  export let flex: number = 60
+</script>
+
+<div class="field" style="flex: {flex}">
+  <label for={desc}>{desc}</label>
+  <input type="text" placeholder={placeholder} bind:value={value} id="{desc}" on:change />
+</div>
+
+<style lang="sass">
+  .field
+    display: inline-flex
+    flex-direction: column
+    gap: 0.5rem
+
+    label
+      font-weight: bold
+</style>

AquaNet/src/pages/Transfer/Transfer.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import { slide } from "svelte/transition";
+  import { ts } from "../../libs/i18n";
+  import TransferServer from "./TransferServer.svelte";
+  import { DATA_HOST } from "../../libs/config";
+
+
+  let tabs = ['chu3', 'mai2', 'ongeki']
+  let game: Record<string, { game: string, version: string }> = {
+    'chu3': { game: "SDHD", version: "2.30" },
+    'mai2': { game: "SDGA", version: "1.50" },
+    'ongeki': { game: "SDDT", version: "1.45" }
+  }
+  let tab = 0
+
+  let src = JSON.parse(localStorage.getItem('src') ?? JSON.stringify({
+    card: "",
+    server: "",
+    keychip: ""
+  }))
+  let dst = JSON.parse(localStorage.getItem('dst') ?? `{ card: "", server: "", keychip: "" }`)
+  let gameInfo = JSON.parse(localStorage.getItem('gameInfo') ?? JSON.stringify({
+    game: "",
+    version: "",
+  }))
+
+  function defaultGame() {
+    gameInfo.game = game[tabs[tab]].game
+    gameInfo.version = game[tabs[tab]].version
+  }
+
+  function onChange() {
+    localStorage.setItem('src', JSON.stringify(src))
+    localStorage.setItem('dst', JSON.stringify(dst))
+    localStorage.setItem('gameInfo', JSON.stringify(gameInfo))
+  }
+
+  defaultGame()
+</script>
+
+<main class="content">
+  <div class="outer-title-options">
+    <h2>🏳️‍⚧️ AquaTrans™ Data Transfer?</h2>
+    <nav>
+      {#each tabs as tabName, i}
+        <div transition:slide={{axis: 'x'}} class:active={tab === i}
+             on:click={() => tab = i} on:keydown={e => e.key === 'Enter' && (tab = i)}
+             role="button" tabindex="0">
+          {ts(`settings.tabs.${tabName}`)}
+        </div>
+      {/each}
+    </nav>
+  </div>
+
+  <div class="prompt">
+    <p>👋 Welcome to the AquaTrans™ server data transfer tool!</p>
+    <p>You can use this to export data from any server, and input data into any server using the connection credentials (card number, server address, and keychip id).</p>
+    <p>This tool will simulate a game client and pull your data from the source server, and push your data to the destination server.</p>
+    <p>Please fill out the form below to get started!</p>
+  </div>
+
+  <TransferServer bind:src={src} bind:gameInfo={gameInfo} on:change={onChange} />
+  <div class="arrow"><img src="{DATA_HOST}/d/DownArrow.png" alt="arrow"></div>
+  <TransferServer bind:src={dst} bind:gameInfo={gameInfo} on:change={onChange}
+    isSrc={false} />
+</main>
+
+<style lang="sass">
+  .arrow
+    width: 100%
+    display: flex
+    justify-content: center
+    margin-top: -40px
+    margin-bottom: -40px
+    z-index: 0
+
+  // CSS animation to let the image opacity breathe
+  .arrow img
+    animation: breathe 1s infinite alternate
+
+  @keyframes breathe
+    0%
+      opacity: 0.5
+    100%
+      opacity: 1
+</style>
+
+

AquaNet/src/pages/Transfer/TransferServer.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import InputTextShort from "./InputTextShort.svelte";
+
+  export let src: {
+    card: string,
+    server: string,
+    keychip: string
+  }
+  export let gameInfo: {
+    game: string,
+    version: string,
+  }
+  export let isSrc: boolean = true
+
+  let tested: boolean = false
+</script>
+
+<div class="server source" class:src={isSrc}>
+  <h3>{isSrc ? "Source" : "Target"} Server</h3>
+
+  <!-- First input line -->
+  <div class="inputs">
+    <InputTextShort desc="Server Address" placeholder="e.g. http://aquadx.hydev.org"
+      bind:value={src.server} on:change />
+    <InputTextShort desc="Keychip ID" placeholder="e.g. A0299792458"
+      bind:value={src.keychip} on:change />
+  </div>
+
+  <!-- Second input line -->
+  <div class="inputs">
+    <div class="game-version">
+      <InputTextShort desc="Game" placeholder="e.g. SDHD"
+        bind:value={gameInfo.game} on:change />
+      <InputTextShort desc="Version" placeholder="e.g. 2.30"
+        bind:value={gameInfo.version} on:change />
+    </div>
+    <InputTextShort desc="Card Number" placeholder="e.g. 27182818284590452353"
+      bind:value={src.card} on:change />
+  </div>
+
+  <!-- Buttons -->
+  <div class="inputs buttons">
+    {#if !tested}
+      <button class="flex-1" on:click={() => {}}>Test Connection</button>
+    {:else}
+      <button class="flex-1" on:click={() => {}}>Export Data</button>
+    {/if}
+  </div>
+</div>
+
+<style lang="sass">
+  @use "../../vars"
+  @use "sass:color"
+
+  .server
+    display: flex
+    flex-direction: column
+    gap: 1rem
+
+    --c-src: 255, 174, 174
+    &.src
+      --c-src: 173, 192, 247
+
+    padding: 1rem
+    border-radius: vars.$border-radius
+    // background-color: vars.$ov-light
+    background: #252525
+
+    // Pink outline
+    border: 1px solid rgba(var(--c-src), 0.5)
+    box-shadow: 0 0 1rem 0 rgba(var(--c-src), 0.25)
+
+    h3
+      margin: 0
+      font-size: 1.5rem
+      text-align: center
+
+
+  .inputs
+    display: flex
+    flex-wrap: wrap
+    gap: 1rem
+
+    .game-version
+      flex: 60
+      display: flex
+      gap: 1rem
+
+      :global(> *)
+        width: 100px
+
+    &.buttons
+      margin-top: 1rem
+</style>