feat: levelScore

Author: clansty

apps/web/package.json

@@ -22,6 +22,7 @@
     "@cloudflare/workers-types": "^4.20241112.0",
     "@iconify-json/twemoji": "^1.2.0",
     "@types/node": "^22.9.1",
+    "sass": "^1.83.4",
     "typescript": "^5.6.3",
     "unocss": "^0.64.1",
     "vite": "^5.2.10",

apps/web/src/routes/levelScores/[tguid]/[profile]/[level]/index.tsx

@@ -0,0 +1,27 @@
+import { LEVELS, Song } from '@clansty/maibot-types';
+import { component$ } from '@builder.io/qwik';
+import { routeLoader$ } from '@builder.io/qwik-city';
+import getUserProfile from '~/utils/getUserProfile';
+import LevelScores from '../../../components/LevelScores';
+
+export const useData = routeLoader$(async ({ platform, params, error }) => {
+	const level = decodeURIComponent(params.level) as typeof LEVELS[number];
+	if (!LEVELS.includes(level)) {
+		error(404, 'nya?');
+	}
+
+	const profile = await getUserProfile(params.tguid, params.profile, platform.env);
+	const requiredSongList = Song.getByCondition(it => it.sheets.some(chart => chart.level === level)) as Song[];
+	const userMusic = await profile.getUserMusic(requiredSongList);
+	const versionLogo = await profile.getVersionLogo();
+	const version = await profile.getVersion();
+	const userData = await profile.getNameplate();
+
+	return { requiredSongList: requiredSongList.map(it => it.dxId), userMusic, region: profile.region, level, versionLogo, version, userData };
+});
+
+export default component$(() => {
+	const data = useData();
+
+	return <LevelScores userMusic={data.value.userMusic} level={data.value.level} logo={data.value.versionLogo} version={data.value.version} user={data.value.userData} />;
+});

apps/web/src/routes/levelScores/aquadx/[username]/[level]/index.tsx

@@ -0,0 +1,27 @@
+import { LEVELS, Song } from '@clansty/maibot-types';
+import { routeLoader$ } from '@builder.io/qwik-city';
+import getAquaDxUser from '~/utils/getAquaDxUser';
+import { component$ } from '@builder.io/qwik';
+import LevelScores from '../../../components/LevelScores';
+
+export const useData = routeLoader$(async ({ platform, params, error }) => {
+	const level = decodeURIComponent(params.level) as typeof LEVELS[number];
+	if (!LEVELS.includes(level)) {
+		error(404, 'nya?');
+	}
+
+	const profile = await getAquaDxUser(params.username);
+	const requiredSongList = Song.getByCondition(it => it.sheets.some(chart => chart.level === level)) as Song[];
+	const userMusic = await profile.getUserMusic(requiredSongList);
+	const versionLogo = await profile.getVersionLogo();
+	const version = await profile.getVersion();
+	const userData = await profile.getNameplate();
+
+	return { requiredSongList: requiredSongList.map(it => it.dxId), userMusic, region: profile.region, level, versionLogo, version, userData };
+});
+
+export default component$(() => {
+	const data = useData();
+
+	return <LevelScores userMusic={data.value.userMusic} level={data.value.level} logo={data.value.versionLogo} version={data.value.version} user={data.value.userData} />;
+});

apps/web/src/routes/levelScores/components/LevelScores.module.css

@@ -0,0 +1,24 @@
+.hideOnSmallScreen {
+  @media (max-width: 1320px) {
+    display: none;
+  }
+}
+
+.hideOnSmallScreen2 {
+  @media (max-width: 1000px) {
+    display: none;
+  }
+}
+
+.header {
+  @media (max-width: 1000px) {
+    flex-direction: column;
+    gap: 40px;
+  }
+}
+
+.title {
+  @media (max-width: 1060px) {
+    font-size: 50px;
+  }
+}

apps/web/src/routes/levelScores/components/LevelScores.tsx

@@ -0,0 +1,43 @@
+import { LEVELS, Song, UserMusic, MaiVersion, Nameplate as NameplateData } from '@clansty/maibot-types';
+import _ from 'lodash';
+import styles from './LevelScores.module.css';
+import { component$ } from '@builder.io/qwik';
+import B50Song from '~/routes/b50/components/B50Song';
+import Nameplate from '~/components/Nameplate';
+
+export default component$(({ userMusic, level, logo, version, user }: { userMusic: UserMusic[], level: typeof LEVELS[number], logo: string, version: MaiVersion, user: NameplateData }) => {
+	let rows = userMusic.map(it => {
+		const song = Song.fromId(it.musicId, version);
+		return {
+			music: it,
+			song,
+			chart: song?.getChart(it.level)
+		};
+	});
+	rows = rows.filter(it => it.chart?.level === level);
+	rows = _.sortBy(rows, it => -it.music.achievement);
+	rows = _.take(rows, 100);
+	const disp = _.chunk(rows, 20);
+
+	return <div>
+		<div class={`${styles.header} flex items-center p-20px gap-50px`}>
+			<div class="text-18px">
+				<Nameplate user={user} />
+			</div>
+			<div class={`${styles.title} text-60px m-t--.1em text-shadow-[1px_1px_2px_#fff]`}>
+				LV {level} 分数表
+			</div>
+			<div style={{ flexGrow: 1 }} class={styles.hideOnSmallScreen2} />
+			<img src={logo} alt="" height={120} class={styles.hideOnSmallScreen} />
+		</div>
+		<div class="flex flex-col gap-50px p-x-20px">
+			{disp.map(group => <div class="grid grid-cols-5 gap-x-5px">
+				{group.map(it => <B50Song song={it.song!} score={it.music} entry={{
+					level: it.music.level,
+					achievement: it.music.achievement,
+					musicId: it.music.musicId
+				}} />)}
+			</div>)}
+		</div>
+	</div>;
+});

packages/botcore/src/botBuilder.ts

@@ -12,6 +12,7 @@ import musicSearch from './modules/musicSearch';
 import admin from './modules/admin';
 import exportUserMusic from './modules/exportUserMusic';
 import musicSearchChu from './modules/musicSearchChu';
+import levelScores from './modules/levelScores';
 
 interface BuilderEnvBase<T extends BotTypes> {
 	bot: Bot<T>,
@@ -36,7 +37,7 @@ export const buildBot = <T extends BotTypes>(env: BuilderEnvBase<T>) => {
 		)
 	} satisfies BuilderEnv<T>;
 
-	for (const attachHandlers of [callbackQuery, help, bind, scoreQuery, plateProgress, levelProgress, /* levelConstTable, */ b50, exportUserMusic, musicSearchChu, musicSearch, admin]) {
+	for (const attachHandlers of [callbackQuery, help, bind, scoreQuery, plateProgress, levelProgress, levelScores, /* levelConstTable, */ b50, exportUserMusic, musicSearchChu, musicSearch, admin]) {
 		attachHandlers(passEnv);
 	}
 };

packages/botcore/src/modules/levelProgress.ts

@@ -16,7 +16,7 @@ export default <T extends BotTypes>({ bot, env, getContext, musicToFile }: Build
 	};
 
 	for (const level of LEVELS) {
-		bot.registerInlineQuery(RegExp(`^ ?\\/?${level} ?(进度)?(完成表)?$`), async (event) => {
+		bot.registerInlineQuery(RegExp(`^ ?\\/?${level.replace('+', '\\+')} ?(进度)?(完成表)?$`), async (event) => {
 			const ctx = getContext(event);
 			const profile = await ctx.getCurrentProfile();
 			if (!profile) {

packages/botcore/src/modules/levelScores.ts

@@ -0,0 +1,58 @@
+import { LEVELS, Song } from '@clansty/maibot-types';
+import { BotTypes, MessageButtonUrl } from '@clansty/maibot-firm';
+import { BuilderEnv } from '../botBuilder';
+import UserContext from '../UserContext';
+
+export default <T extends BotTypes>({ bot, env, getContext, musicToFile }: BuilderEnv<T>) => {
+	const sendProgressImage = async (ctx: UserContext<T>, fromId: T['ChatId'], isPrivate: boolean, level: typeof LEVELS[number], isFromStart = false) => {
+		const profile = await ctx.getCurrentProfile();
+		const requiredSongList = Song.getByCondition(it => it.sheets.some(chart => chart.level === level));
+		const userMusic = await profile.getUserMusic(requiredSongList);
+
+		return await ctx.genCacheSendImage([level, userMusic], await ctx.getWebUrl('levelScores', encodeURIComponent(level)),
+			2000, `LV ${level} 分数表.png`, isPrivate ? level : undefined, isFromStart, [
+				[]
+			]);
+	};
+
+	for (const level of LEVELS) {
+		bot.registerInlineQuery(RegExp(`^ ?\\/?${level.replace('+', '\\+')} ?(分数|成绩)[图列]?表$`), async (event) => {
+			const ctx = getContext(event);
+			const profile = await ctx.getCurrentProfile();
+			if (!profile) {
+				await event.answer()
+					.withStartButton('请绑定用户', 'bind')
+					.isPersonal()
+					.withCacheTime(10)
+					.dispatch();
+				return;
+			}
+
+			const requiredSongList = Song.getByCondition(it => it.sheets.some(chart => chart.level === level));
+			const userMusic = await profile.getUserMusic(requiredSongList);
+			const cachedImage = await ctx.getCacheImage([level, userMusic]);
+			const answer = event.answer()
+				.isPersonal()
+				.withCacheTime(10);
+			if (cachedImage?.type === 'image')
+				answer.addPhotoResult('pic', cachedImage.fileId);
+			else
+				answer.withStartButton(`生成 LV ${level} 分数表`, level);
+			await answer.dispatch();
+			return true;
+		});
+
+		bot.registerCommand('start', async (event) => {
+			if (event.params[0] !== level) return false;
+			const ctx = getContext(event);
+			await sendProgressImage(ctx, event.fromId, event.isPrivate, level, true);
+			return true;
+		});
+
+		bot.registerKeyword(RegExp(`^\/?${level.replace('+', '\\+')} ?(分数|成绩)[图列]?表$`), async (event) => {
+			const ctx = getContext(event);
+			await sendProgressImage(ctx, event.fromId, event.isPrivate, level);
+			return true;
+		});
+	}
+}