- These settings affect Mai and Wacca.
+ {ts("settings.gameNotice")}
diff --git a/AquaNet/src/libs/i18n/en_ref.ts b/AquaNet/src/libs/i18n/en_ref.ts
index 80dc168a..658d0b7c 100644
--- a/AquaNet/src/libs/i18n/en_ref.ts
+++ b/AquaNet/src/libs/i18n/en_ref.ts
@@ -158,6 +158,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',
@@ -167,7 +168,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 = {
diff --git a/AquaNet/src/pages/User/Settings.svelte b/AquaNet/src/pages/User/Settings.svelte
index ca4f8e1b..02c8a7ec 100644
--- a/AquaNet/src/pages/User/Settings.svelte
+++ b/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,53 @@
}).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/jpg":
+ 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 +152,9 @@
{/if}
+
pfpField.files && uploadPfp(pfpField.files[0])} />
+ on:change={handlePfpUpload} />
{#each profileFields as [field, name], i (field)}
@@ -155,6 +201,22 @@