chuni: add ability to change username

src/actions/chuni/profile.ts

@@ -193,7 +193,14 @@ Object.entries(AvatarCategory).forEach(([category, number]) => {
 	});
 });
 
-export type ProfileUpdate = Partial<{ [K in keyof UserboxItems]: number }>;
+validators.set('userName', (u, p, val) => {
+	if (!val) throw new Error('Username is required.');
+	if ([...val].length > 25) throw new Error('Username is too long.')
+	
+	return val;
+});
+
+export type ProfileUpdate = Partial<{ [K in keyof UserboxItems]: number } & { userName: string }>;
 
 export const updateProfile = async (data: ProfileUpdate) => {
 	const user = await requireUser();

src/app/(with-header)/chuni/userbox/userbox.tsx

@@ -19,6 +19,7 @@ import { useAudio } from '@/helpers/use-audio';
 import { Entries } from 'type-fest';
 import { useErrorModal } from '@/components/error-modal';
 import Image from 'next/image';
+import { ChuniNameModal } from '@/components/chuni/name-modal';
 
 export type ChuniUserboxProps = {
 	profile: ChuniUserData,
@@ -43,18 +44,20 @@ const AVATAR_KEYS = ['avatarWear', 'avatarHead', 'avatarFace', 'avatarSkin', 'av
 
 type RequiredUserbox = NonNullable<UserboxItems>;
 type EquippedItem = { [K in keyof RequiredUserbox]: RequiredUserbox[K][number] };
-type SavedItem = { [K in keyof RequiredUserbox]: boolean };
+type SavedItem = { [K in keyof RequiredUserbox]: boolean } & { username: boolean };
 
 export const ChuniUserbox = ({ profile, userboxItems }: ChuniUserboxProps) => {
 	const initialEquipped = useRef(Object.fromEntries(Object.entries(ITEM_KEYS)
 		.map(([key, profileKey]) => [key, userboxItems[key as keyof RequiredUserbox]
 			.find(i => i.id === profile?.[profileKey])])) as EquippedItem);
 	const [equipped, setEquipped] = useState<EquippedItem>(initialEquipped.current);
-	const [saved, setSaved] = useState<SavedItem>(Object.fromEntries(Object.keys(ITEM_KEYS).map(k => [k, true])) as any);
+	const [saved, setSaved] = useState<SavedItem>({ ...Object.fromEntries(Object.keys(ITEM_KEYS).map(k => [k, true])), username: true } as any);
 	const [playingVoice, setPlayingVoice] = useState(false);
 	const [selectedLine, setSelectedLine] = useState(new Set(['0035']));
 	const [playPreviews, _setPlayPreviews] = useState(true);
 	const [selectingVoice, setSelectingVoice] = useState<EquippedItem['systemVoice'] | null>(null);
+	const [editingUsername, setEditingUsername] = useState(false);
+	const [username, setUsername] = useState(profile?.userName!);
 	const setError = useErrorModal();
 
 	const setPlayPreviews = (play: boolean) => {
@@ -73,13 +76,17 @@ export const ChuniUserbox = ({ profile, userboxItems }: ChuniUserboxProps) => {
 		setSaved(s => ({ ...s, [k]: false }));
 	};
 
-	const reset = <K extends keyof RequiredUserbox>(...items: K[]) => {
+	const reset = <K extends keyof SavedItem>(...items: K[]) => {
 		setSaved(s => ({ ...s, ...Object.fromEntries(items.map(i => [i, true])) }));
-		setEquipped(e => ({ ...e, ...Object.fromEntries(Object
+		setEquipped(e => ({
-				.entries(initialEquipped.current).filter(([k]) => items.includes(k as any))) }))
+			...e, ...Object.fromEntries(Object
+				.entries(initialEquipped.current).filter(([k]) => items.includes(k as any)))
+		}));
+		if ((items as string[]).includes('username'))
+			setUsername(profile?.userName!);
 	};
 
-	const save = <K extends keyof RequiredUserbox>(...items: K[]) => {
+	const save = <K extends keyof SavedItem>(...items: K[]) => {
 		if (!items.length)
 			items = Object.keys(ITEM_KEYS) as any;
 
@@ -87,6 +94,9 @@ export const ChuniUserbox = ({ profile, userboxItems }: ChuniUserboxProps) => {
 			.filter(([k]) => items.includes(k as any))
 			.map(([k, v]) => [ITEM_KEYS[k], v.id]));
 		
+		if ((items as string[]).includes('username'))
+			update.userName = username;
+
 		setSaved(s => ({ ...s, ...Object.fromEntries(items.map(i => [i, true])) }));
 
 		updateProfile(update)
@@ -144,11 +154,11 @@ export const ChuniUserbox = ({ profile, userboxItems }: ChuniUserboxProps) => {
 			<div className="flex flex-col items-center justify-center w-full sm:bg-content1 col-span-full rounded-lg overflow-hidden xl:col-span-7 sm:shadow-inner">
 				<div className="text-2xl font-semibold mr-auto p-3 flex w-full h-16 min-h-16 items-center">
 					<span className="sm:ml-2">Profile</span>
-					{(!saved.namePlate || !saved.trophy) && <>
+					{(!saved.namePlate || !saved.trophy || !saved.username) && <>
-              <Button className="ml-auto" color="danger" variant="light" onPress={() => reset('namePlate', 'trophy')}>
+              <Button className="ml-auto" color="danger" variant="light" onPress={() => reset('namePlate', 'trophy', 'username')}>
                   Reset
               </Button>
-              <Button className="ml-2" color="primary" onPress={() => save('namePlate', 'trophy')}>
+              <Button className="ml-2" color="primary" onPress={() => save('namePlate', 'trophy', 'username')}>
 		              Save
 							</Button>
           </>}
@@ -160,25 +170,37 @@ export const ChuniUserbox = ({ profile, userboxItems }: ChuniUserboxProps) => {
 					<div className="w-full max-w-full">
 						<ChuniNameplate profile={profile ? {
 							...profile,
+							userName: username,
 							nameplateName: equipped.namePlate.name,
 							nameplateImage: equipped.namePlate.imagePath,
 							trophyName: equipped.trophy.name,
 							trophyRareType: equipped.trophy.rareType
 						} : null} className="w-full" />
 					</div>
-					<div className="flex gap-2 w-full px-2 sm:px-1">
+
-						<SelectModalButton className="flex-grow flex-1" displayMode="grid" modalSize="full" rowSize={230} colSize={500} gap={6} items={userboxItems.namePlate}
+					<ChuniNameModal username={profile?.userName!} isOpen={editingUsername}
+						onClose={() => setEditingUsername(false)}
+						setUsername={u => {
+							setSaved(s => ({ ...s, username: false }));
+							setUsername(u);
+						}} />
+
+					<div className="grid grid-cols-2 sm:grid-cols-3 gap-2 w-full px-2 sm:px-1">
+						<SelectModalButton className="col-span-2 sm:col-span-1" displayMode="grid" modalSize="full" rowSize={230} colSize={500} gap={6} items={userboxItems.namePlate}
 							modalId="nameplate" itemId="id"
 							renderItem={n => renderItem(n, getImageUrl(`chuni/name-plate/${n.imagePath}`), 'w-full sm:text-lg', 'px-2 pb-1')}
 							selectedItem={equipped.namePlate} onSelected={i => equipItem('namePlate', i)}>
 							Change Nameplate
 						</SelectModalButton>
-						<SelectModalButton className="flex-grow flex-1" displayMode="list" modalSize="2xl" rowSize={66} items={userboxItems.trophy}
+						<SelectModalButton displayMode="list" modalSize="2xl" rowSize={66} items={userboxItems.trophy}
 							modalId="trophy" itemId="id"
 							renderItem={n => <ChuniTrophy rarity={n.rareType} name={n.name} />}
 							selectedItem={equipped.trophy} onSelected={i => equipItem('trophy', i)}>
 							Change Trophy
 						</SelectModalButton>
+						<Button onPress={() => setEditingUsername(true)}>
+							Change Username
+						</Button>
 					</div>
 				</div>
 			</div>

src/components/chuni/name-modal.tsx

@@ -0,0 +1,101 @@
+import { Modal, ModalBody, ModalContent, ModalHeader, ModalFooter } from '@nextui-org/modal';
+import { Input } from '@nextui-org/input';
+import { Button } from '@nextui-org/button';
+import { useEffect, useRef, useState } from 'react';
+import { ExclamationCircleIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
+import { useHashNavigation } from '@/helpers/use-hash-navigation';
+
+const SYMBOLS = `・×÷♂♀∀☆○◎◇□△▽♪†‡ΣαβγθφψωДё`;
+const ALLCHARS = new Set([...`　＃＆＊．＠＋－＝：；？！～／ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚ０１２３４５６７８９${SYMBOLS}`]);
+
+const FULLWIDTHS = new Map([...ALLCHARS]
+	.map(c => [c.normalize('NFKC'), c]));
+
+const normalizeUsername = (s: string) => [...s.normalize('NFKC')]
+	.map(c => {
+		if (c === 'ë') return 'ё'; // u+003b (latin small letter with diaeresis) -> u+0451 (cyrillic small letter io)
+		return FULLWIDTHS.get(c) ?? c;
+	}).join('');
+
+type ChuniNameModalProps = {
+	username: string,
+	setUsername: (u: string) => void,
+	isOpen: boolean,
+	onClose: () => void
+};
+
+export const ChuniNameModal = ({ onClose, isOpen, username, setUsername }: ChuniNameModalProps) => {
+	const [editingUsername, setEditingUsername] = useState(username);
+	const inputRef = useRef<HTMLInputElement | null>(null);
+	const previousOpen = useRef(false);
+	const onModalClose = useHashNavigation({
+		onClose,
+		isOpen,
+		hash: '#edit-username'
+	});
+
+	let warnings: string[] = [];
+
+	if ([...editingUsername].length > 8)
+		warnings.push('Your username is longer than 8 characters. It may be squished in-game.');
+	if ([...editingUsername].some(c => !ALLCHARS.has(c)))
+		warnings.push('Your username contains characters not typically used in-game. It may not show correctly.');
+
+	useEffect(() => { 
+		if (isOpen && !previousOpen.current)
+			setEditingUsername(username);
+		previousOpen.current = isOpen;
+	}, [isOpen, username, previousOpen]);
+
+	return (<Modal size="3xl" isOpen={isOpen} onClose={onModalClose}>
+		<ModalContent>
+			{onModalClose => <>
+				<ModalBody className="max-sm:px-2">
+					<ModalHeader>Change Username</ModalHeader>
+					{!editingUsername.length && <div className="flex text-danger mb-2 items-center max-sm:text-sm">
+						<ExclamationCircleIcon className="h-6 sm:h-7 mr-1.5" />
+						You cannot have an empty username
+					</div>}
+					{warnings.map(warning => <div key={warning} className="flex text-warning mb-2 items-center max-sm:text-sm">
+						<ExclamationTriangleIcon className="h-6 sm:h-7 mr-1.5" />
+						{warning}
+					</div>)}	
+					<Input placeholder="Username" label="Username"
+						maxLength={25}
+						value={editingUsername}
+						isRequired
+						onValueChange={v => setEditingUsername(normalizeUsername(v))}
+						ref={inputRef}
+						className="max-sm:px-2"
+						classNames={{ input: `[font-feature-settings:"fwid"] font-semibold` }} />
+					<div className="flex flex-wrap gap-0.5 sm:gap-1 w-full justify-center">
+						{[...SYMBOLS].map(s => <div key={s}
+							className={`[font-feature-settings:"fwid"] font-bold sm:text-2xl sm:h-12 sm:w-12 h-10 w-10 border-2 border-divider flex items-center justify-center rounded-xl cursor-pointer transition hover:bg-content2 select-none`}
+							onClick={(e) => {
+								e.preventDefault();
+								setEditingUsername(val => {
+									if (!inputRef.current || [...val].length >= 25) return val;
+									const chars = [...val];
+									const { selectionStart, selectionEnd } = inputRef.current;
+									inputRef.current.focus();
+									setTimeout(() => {
+										inputRef.current!.focus();
+										inputRef.current!.selectionStart = selectionStart! + 1;
+										inputRef.current!.selectionEnd = selectionStart! + 1;
+									});
+									return chars.slice(0, selectionStart!).join('') + s + chars.slice(selectionEnd!).join('');
+								})
+							}}>
+							{s}
+						</div>)}
+					</div>
+				</ModalBody>
+				<ModalFooter>
+					<Button variant="light" color="danger" onPress={onModalClose}>Cancel</Button>
+					<Button color="primary" isDisabled={!editingUsername}
+						onPress={() => { onModalClose(); setUsername(editingUsername); }}>Set</Button>
+				</ModalFooter>
+			</>}
+		</ModalContent>
+	</Modal>)
+};

src/components/chuni/nameplate.tsx

@@ -43,7 +43,7 @@ export const ChuniNameplate = ({ className, profile }: ChuniNameplateProps) => {
 							<div className="flex items-baseline border-b border-gray-700">
 								<span className="font-normal text-[14cqh]">Lv.</span>
 								<span className="text-[18cqh]">{profile.level}</span>
-								<span lang="ja" className="text-[21cqh] flex-grow text-center font-bold">
+								<span lang="ja" className={`text-[21cqh] flex-grow text-center font-bold [font-feature-settings:"fwid"]`}>
 								{profile.userName?.padEnd(7, '\u3000')}
 							</span>
 							</div>