changed tab bar to be mobile friendly and added next plays

app/(authenticated)/chunithm/page.tsx

@@ -18,12 +18,17 @@ import { ChunithmHotPlays } from "@/components/userRatingBaseHotList/page";
 import { getUserRatingBaseHotList } from "@/components/userRatingBaseHotList/action";
 import { ChunithmTopPlays } from "@/components/userRatingBaseList/page";
 import Patcher from "../../../components/patcher/page";
+import { ChunithmNextPlays } from "@/components/userRatingBaseNextList/page";
+import { getUserRatingBaseNextList } from "@/components/userRatingBaseNextList/action";
 
 const getChuniTopPlays = async () => {
   const topPlays = await getUserRatingBaseList();
   return { topPlays };
 };
-
+const getChuniNextPlays = async () => {
+  const nextPlays = await getUserRatingBaseNextList();
+  return { nextPlays };
+};
 const getChuniHotPlays = async () => {
   const hotRating = await getUserRatingBaseHotList();
   return { hotRating };
@@ -84,6 +89,7 @@ const Page = async () => {
   const AllStaticNameplates = await getAllNameplates();
   const AllSystemVoices = await getAllSystemVoices();
   const AllMapIcons = await getAllMapIcons();
+  const NextChuniPlays = await getChuniNextPlays();
 
   const TopChuniPlays = await getChuniTopPlays();
   const HotChuniPlays = await getChuniHotPlays();
@@ -91,16 +97,14 @@ const Page = async () => {
   return (
     <div className="p-3">
       <Tabs defaultValue="scores">
-        <TabsList className="">
+        <TabsList className="md:flex-0 flex overflow-x-auto">
           <TabsTrigger value="scores">Scores</TabsTrigger>
           <TabsTrigger value="customize">Customize</TabsTrigger>
           <TabsTrigger value="TopPlays">Top Plays</TabsTrigger>
           <TabsTrigger value="HotPlays">Hot Plays</TabsTrigger>
-          {/* <TabsTrigger value="Settings">Settings</TabsTrigger> */}
-          <TabsTrigger value="Patcher" className="hidden md:block">
-            Patcher
-          </TabsTrigger>
+          <TabsTrigger value="NextPlays">Next Plays</TabsTrigger>
         </TabsList>
+
         <TabsContent className="pt-1" value="scores">
           <ChunithmScorePlaylog />
         </TabsContent>
@@ -140,10 +144,13 @@ const Page = async () => {
         <TabsContent value="HotPlays">
           <ChunithmHotPlays chuniProfileHotPlays={HotChuniPlays} />
         </TabsContent>
-        <TabsContent className="" value="Patcher">
+        <TabsContent value="NextPlays">
+          <ChunithmNextPlays chuniProfileNextPlays={NextChuniPlays} />
+        </TabsContent>
+        <TabsContent value="Patcher">
           <Patcher />
         </TabsContent>
-        {/* <TabsContent className="" value="Settings">
+        {/* <TabsContent value="Settings">
           <Patcher />
         </TabsContent> */}
       </Tabs>

app/(authenticated)/patcher/page.tsx

@@ -0,0 +1,12 @@
+import Patcher from "@/components/patcher/page";
+import React from "react";
+
+const PatcherPage = () => {
+  return (
+    <div>
+      <Patcher />
+    </div>
+  );
+};
+
+export default PatcherPage;

components/scoreplaylog/DebouncedInput.tsx

@@ -28,7 +28,7 @@ export default function DebouncedInput({
 
   return (
     <Input
-      className="m-4 w-[400px]"
+      className="m-4 w-[300px]"
       {...props}
       value={value}
       onChange={(e) => setValue(e.target.value)}

components/scoreplaylog/colums.tsx

@@ -66,7 +66,7 @@ export const columns: ColumnDef<chunithm>[] = [
 
       switch (isSuccess) {
         case 0:
-          isSuccessText = "Not Clear";
+          isSuccessText = " Clear";
           break;
         case 1:
           isSuccessText = "Clear";

components/scoreplaylog/data-table.tsx

@@ -52,7 +52,7 @@ export function DataTable<TData, TValue>({
 
   return (
     <div className="rounded-md border">
-      <div className="mb-2">
+      <div className="">
         <DebouncedInput
           value={globalFilter ?? ""}
           onChange={(value) => setGlobalFilter(String(value))}

components/userRatingBaseNextList/action.ts

@@ -0,0 +1,122 @@
+"use server";
+import { getAuth } from "@/auth/queries/getauth";
+import { getSupportedVersionNumber } from "@/lib/api";
+import { artemis } from "@/lib/prisma";
+
+export async function getUserRatingBaseNextList() {
+  const { user } = await getAuth();
+  const supportedVersionNumber = await getSupportedVersionNumber();
+
+  if (!user || !user.accessCode) {
+    throw new Error("User is not authenticated or accessCode is missing");
+  }
+
+  try {
+    const userRatingBaseList = await artemis.chuni_profile_rating.findMany({
+      where: {
+        user: user.UserId,
+        type: "userRatingBaseNextList",
+        version: supportedVersionNumber,
+      },
+      select: {
+        musicId: true,
+        score: true,
+        difficultId: true,
+        version: true,
+        index: true,
+      },
+      orderBy: {
+        index: "asc",
+      },
+    });
+
+    const staticMusicInfo = await artemis.chuni_static_music.findMany({
+      where: {
+        songId: {
+          in: userRatingBaseList.map((entry) => entry.musicId!),
+        },
+        version: supportedVersionNumber,
+      },
+      select: {
+        songId: true,
+        title: true,
+        artist: true,
+        chartId: true,
+        level: true,
+        genre: true,
+        jacketPath: true,
+      },
+    });
+
+    // chartId is the difficutly i.e
+    // easy, hard, expert, master, ultima, worlds end
+
+    // msuicId is the id of the specific song in the rating table
+    // we are mapping that to songId in chuni static music
+    //  so we can get name and jacket path etc
+    // then we are mapping the difficultId to the chartId to get the proper difficutly from above
+    // this is very confusing and my brain hurts
+    // if someone could make this cleaner id highly appreciate it
+
+    // Create a map
+    const songIdtoChartId = new Map<string, (typeof staticMusicInfo)[0]>(
+      staticMusicInfo.map((music) => [
+        `${music.songId}-${music.chartId}`,
+        music,
+      ]),
+    );
+
+    const musicIdToDifficltId = userRatingBaseList.map((rating) => {
+      const staticMusic = songIdtoChartId.get(
+        `${rating.musicId}-${rating.difficultId}`,
+      );
+
+      const level = staticMusic?.level ?? 0;
+      const score = rating.score ?? 0;
+
+      const perSongRating = calculateRating(level, score);
+
+      return {
+        ...rating,
+        chartId: staticMusic?.chartId || "Unknown chartId",
+        title: staticMusic?.title || "Unknown Title",
+        artist: staticMusic?.artist || "Unknown Artist",
+        genre: staticMusic?.genre || "Unknown Genre",
+        level: staticMusic?.level || "Unknown Level",
+        jacketPath: staticMusic?.jacketPath || "",
+        rating: perSongRating,
+      };
+    });
+
+    return musicIdToDifficltId;
+  } catch (error) {
+    console.error("Error fetching songs with titles:", error);
+    throw error;
+  }
+}
+
+// calculate the rating
+function calculateRating(level: number, score: number): number {
+  if (score >= 1009000) {
+    return level * 100 + 215;
+  } else if (score >= 1007500) {
+    return level * 100 + 200 + (score - 1007500) / 100;
+  } else if (score >= 1005000) {
+    return level * 100 + 150 + (score - 1005000) / 50;
+  } else if (score >= 1000000) {
+    return level * 100 + 100 + (score - 1000000) / 100;
+  } else if (score >= 975000) {
+    return level * 100 + (score - 975000) / 250;
+  } else if (score >= 925000) {
+    return level * 100 - 300 + ((score - 925000) * 3) / 500;
+  } else if (score >= 900000) {
+    return level * 100 - 500 + ((score - 900000) * 4) / 500;
+  } else if (score >= 800000) {
+    return (
+      (level * 100 - 500) / 2 +
+      ((score - 800000) * ((level - 500) / 2)) / 100000
+    );
+  } else {
+    return 0;
+  }
+}

components/userRatingBaseNextList/page.tsx

@@ -0,0 +1,72 @@
+import React, { FC } from "react";
+import { getDifficultyText } from "@/lib/helpers";
+
+type userRatingBaseList = {
+  title: string;
+  artist: string;
+  genre: string;
+  chartId: string | number;
+  level: string | number;
+  jacketPath: string;
+  rating: number;
+  version: number;
+  index: number;
+  musicId: number | null;
+  difficultId: number | null;
+  score: number | null;
+};
+
+type ChunithmProfileHotPlays = {
+  chuniProfileNextPlays: {
+    nextPlays: userRatingBaseList[];
+  };
+};
+export const ChunithmNextPlays: FC<ChunithmProfileHotPlays> = ({
+  chuniProfileNextPlays,
+}) => {
+  return (
+    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
+      {" "}
+      {chuniProfileNextPlays.nextPlays.map((playerNextRatingList, index) => {
+        const jacketPath = playerNextRatingList.jacketPath?.replace(
+          ".dds",
+          ".png",
+        );
+        return (
+          <div key={index} className="flex flex-col items-center p-2">
+            <div className="font-bold"></div>
+            {jacketPath && (
+              <img
+                src={`/jacketArts/${jacketPath}`}
+                alt="Jacket"
+                className="h-28 w-28"
+              />
+            )}
+            <div>
+              <ul className="mt-2 text-center">
+                <li>
+                  <strong>Title: </strong> {playerNextRatingList.title}
+                </li>
+                <li>
+                  <strong>Level: </strong> {playerNextRatingList.level}
+                </li>
+                <li>
+                  <strong>Difficulty: </strong>
+                  {getDifficultyText(Number(playerNextRatingList.chartId))}
+                </li>
+                <li>
+                  <strong>Score: </strong>{" "}
+                  {playerNextRatingList.score?.toLocaleString()}
+                </li>
+                <li>
+                  <strong>Rating: </strong>{" "}
+                  {(playerNextRatingList.rating / 100).toFixed(2)}
+                </li>
+              </ul>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};