minor net fixes

AquaNet/package.json

@@ -39,6 +39,7 @@
     "lxgw-wenkai-lite-webfont": "^1.7.0",
     "modern-normalize": "^3.0.1",
     "moment": "^2.30.1",
+    "svelte-easy-crop": "^4.0.0",
     "svelte5-router": "^3.0.1"
   },
   "packageManager": "[email protected]+sha512.dc09430156b427f5ecfc79888899e1c39d2d690f004be70e05230b72cb173d96839587545d09429b55ac3c429c801b4dc3c0e002f653830a420fa2dd4e3cf9cf"

AquaNet/src/App.svelte

@@ -75,7 +75,7 @@
     img
       width: 1.5rem
       height: 1.5rem
-      border-radius: 50%
+      border-radius: vars.$border-radius
       object-fit: cover
 
     .pfp

AquaNet/src/components/settings/ChuniSettings.svelte

@@ -6,7 +6,7 @@
     type UserBox,
     type UserItem,
   } from "../../libs/generalTypes";
-  import { DATA, USER, USERBOX } from "../../libs/sdk";
+  import { DATA, USER, USERBOX, GAME } from "../../libs/sdk";
   import { t, ts } from "../../libs/i18n";
   import { DATA_HOST, FADE_IN, FADE_OUT, USERBOX_DEFAULT_URL } from "../../libs/config";
   import { fade, slide } from "svelte/transition";
@@ -97,6 +97,23 @@
     return fetchData()
   }).catch((e) => { loading = false; error = e.message });
 
+  function exportData() {
+    submitting = "export"
+    GAME.export('chu3')
+      .then(data => download(JSON.stringify(data), `AquaDX_chu3_export_${userbox.userName}.json`))
+      .catch(e => error = e.message)
+      .finally(() => submitting = "")
+  }
+
+  function download(data: string, filename: string) {
+    const blob = new Blob([data]);
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    link.click();
+  }
+
   let DDSreader: DDS | undefined;
 
   let USERBOX_PROGRESS = 0;
@@ -268,7 +285,11 @@
       <button on:click={() => USERBOX_SETUP_RUN = !USERBOX_SETUP_RUN}>{t(!USERBOX_INSTALLED ? `userbox.new.activate_first` : `userbox.new.activate_update`)}</button>
     </p>
   {/if}
-  <ChuniMatchingSettings/>
+  <ChuniMatchingSettings/><br>
+  <button class="exportButton" on:click={exportData}>
+    <Icon icon="bxs:file-export"/>
+    {t('settings.export')}
+  </button>
 </div>
 {/if}
 

AquaNet/src/components/settings/GeneralGameSettings.svelte

@@ -2,13 +2,16 @@
   import { fade } from "svelte/transition";
   import { FADE_IN, FADE_OUT } from "../../libs/config";
   import GameSettingFields from "./GameSettingFields.svelte";
-  import { ts } from "../../libs/i18n";
+  import { t, ts } from "../../libs/i18n";
   import useLocalStorage from "../../libs/hooks/useLocalStorage.svelte";
 
   const rounding = useLocalStorage("rounding", true);
 </script>
 
 <div out:fade={FADE_OUT} in:fade={FADE_IN} class="fields">
+  <p class="warning">
+    {ts("settings.gameNotice")}
+  </p>
   <GameSettingFields game="general"/>
   <div class="field">
     <div class="bool">
@@ -22,6 +25,8 @@
 </div>
 
 <style lang="sass">
+  @use "../../vars"
+
   .fields
     display: flex
     flex-direction: column
@@ -54,4 +59,14 @@
 
       > input
         flex: 1
+
+  .warning
+    background: #aa555510
+    padding: 10px
+    border-left: solid 2px vars.$c-error
+
+    &::before
+      color: vars.$c-error
+      font-weight: bold
+      content: "！"
 </style>

AquaNet/src/libs/i18n/en_ref.ts

@@ -156,6 +156,7 @@ export const EN_REF_SETTINGS = {
   'settings.mai2.name': 'Player Name',
   'settings.profile.picture': 'Profile Picture',
   'settings.profile.upload-new': 'Upload New',
+  'settings.profile.bad-format': 'Invalid image format. Supported types are PNG, JPG, JPEG, WEBP & GIF.',
   'settings.profile.save': 'Save',
   'settings.profile.name': 'Display Name',
   'settings.profile.username': 'Username',
@@ -165,7 +166,8 @@ export const EN_REF_SETTINGS = {
   'settings.profile.unset': 'Unset',
   'settings.profile.unchanged': 'Unchanged',
   'settings.export': 'Export Player Data',
-  'settings.cabNotice': "Note: These settings will only affect your own cab/setup. If you're playing on someone else's setup, please contact them to change these settings."
+  'settings.cabNotice': "Note: These settings will only affect your own cab/setup. If you're playing on someone else's setup, please contact them to change these settings.",
+  'settings.gameNotice': "These only apply to Mai and Wacca."
 }
 
 export const EN_REF_USERBOX = {

AquaNet/src/pages/User/Settings.svelte

@@ -9,6 +9,7 @@
   import { pfp } from "../../libs/ui";
   import { t, ts } from "../../libs/i18n";
   import { FADE_IN, FADE_OUT } from "../../libs/config";
+  import Cropper from "svelte-easy-crop";
   import UserBox from "../../components/settings/ChuniSettings.svelte";
   import Mai2Settings from "../../components/settings/Mai2Settings.svelte";
   import WaccaSettings from "../../components/settings/WaccaSettings.svelte";
@@ -32,6 +33,11 @@
 
   // Fetch user data
   const getMe = () => USER.me().then((m) => {
+    if (pfpCropURL != null) {
+      URL.revokeObjectURL(pfpCropURL);
+      pfpField.value = "";
+      pfpCropURL = null;
+    }
     me = m
 
     CARD.userGames(m.username).then(games => {
@@ -50,6 +56,8 @@
 
   let changed: string[] = []
   let pfpField: HTMLInputElement
+  let pfpCropURL: string | null = null;
+  let pfpCrop = { width: 0, height: 0, x: 0, y: 0 };
 
   function submit(field: string, value: string) {
     if (submitting) return
@@ -60,16 +68,52 @@
     }).catch(e => error = e.message).finally(() => submitting = "")
   }
 
-  function uploadPfp(file: File) {
+  function uploadPfp() {
     if (submitting) return
-    submitting = 'profilePicture'
-
-    USER.uploadPfp(file).then(() => {
-      me.profilePicture = file.name
-      // reload
-      getMe()
-    }).catch(e => error = e.message).finally(() => submitting = "")
+    // Don't know why this isn't just a part of the cropper module. Have to do this myself.. What a shame
+    let canvas = document.createElement("canvas");
+    let ctx = canvas.getContext("2d");
+    canvas.width = 256;
+    canvas.height = 256;
+    let img = document.createElement("img");
+    img.onload = () => {
+      ctx?.drawImage(img, pfpCrop.x, pfpCrop.y, pfpCrop.width, pfpCrop.height, 0, 0, 256, 256);
+      canvas.toBlob(blob => {
+        if (!blob) return;
+        submitting = 'profilePicture'
+        USER.uploadPfp(blob as File).then(() => {
+          me.profilePicture = me.username
+          // reload
+          // this doesn't work btw
+          setTimeout(getMe, 200);
+        }).catch(e => error = e.message).finally(() => submitting = "")
+      });
+    }
+    img.src = pfpCropURL ?? "";
   }
+  function handlePfpUpload(e: Event & { target: HTMLInputElement }) {
+    if (!e.target) return;
+    let files = e?.target?.files;
+    if (!files || files.length <= 0) return;
+    let file = files[0];
+    console.log(me.username, me);
+    switch (file.type) {
+      case "image/gif":
+        USER.uploadPfp(file).then(() => {
+          me.profilePicture = me.username
+          // reload
+          setTimeout(getMe, 200);
+        }).catch(e => error = e.message).finally(() => submitting = "")
+        break;
+      case "image/png":
+      case "image/jpeg":
+      case "image/webp":
+        pfpCropURL = URL.createObjectURL(file);
+        break;
+      default:
+        error = t("settings.profile.bad-format");
+    }
+  };
 
   const passwordAction = (node: HTMLInputElement, whether: boolean) => {
     if (whether) node.type = 'password'
@@ -107,8 +151,9 @@
             </button>
           {/if}
         </div>
-        <input id="profile-upload" type="file" accept="image/*" style="display: none" bind:this={pfpField}
-               on:change={() => pfpField.files && uploadPfp(pfpField.files[0])} />
+        <!-- Genuinely don't know why this is giving me an intellisense error. Works fine. -->
+        <input id="profile-upload" type="file" accept="image/gif,image/png,image/jpeg,image/webp" style="display: none" bind:this={pfpField}
+               on:change={handlePfpUpload} />
       </div>
 
       {#each profileFields as [field, name], i (field)}
@@ -155,6 +200,22 @@
   <StatusOverlays {error} loading={!me || !!submitting} />
 </main>
 
+{#if pfpCropURL != null}
+  <div class="overlay" transition:fade>
+    <div>
+      <div class="cropper-container">
+        <Cropper maxZoom={1e9} oncropcomplete={(e) => pfpCrop = e.pixels} image={pfpCropURL ?? "assets/imgs/no_profile.png"} aspect={1} cropShape="round"></Cropper>
+      </div>
+      <button on:click={uploadPfp}>
+        {t("settings.profile.save")}
+      </button>
+      <button on:click={getMe}>
+        {t("back")}
+      </button>
+    </div>
+  </div>
+{/if}
+
 <style lang="sass">
   @use "../../vars"
 
@@ -196,5 +257,10 @@
       max-height: 100px
       border-radius: vars.$border-radius
       object-fit: cover
+      aspect-ratio: 1
 
+  .cropper-container
+    position: relative
+    width: 400px
+    aspect-ratio: 1
 </style>