[feature-550] When its possible display the NPS ou NJS of the map instead of just the difficulty

assets/jsons/translations/de.json

@@ -730,6 +730,7 @@
         "map-filter-panel": {
             "duration": "Länge",
             "nps" : "Noten Pro Sekunde",
+            "njs": "Notensprunggeschwindigkeit",
             "tags": "Stichworte",
             "specificities": "Allgemein",
             "requirements": "Anforderungen",

assets/jsons/translations/en.json

@@ -737,6 +737,7 @@
         "map-filter-panel": {
             "duration": "Duration",
             "nps" : "Notes Per Second",
+            "njs": "Note Jump Speed",
             "tags": "tags",
             "specificities": "general",
             "requirements": "requirements",

assets/jsons/translations/es.json

@@ -730,6 +730,7 @@
         "map-filter-panel": {
             "duration": "Duración",
             "nps" : "Notas Por Segundo",
+            "njs": "Velocidad de salto de nota",
             "tags": "tags",
             "specificities": "general",
             "requirements": "requisitos",

assets/jsons/translations/fr.json

@@ -730,6 +730,7 @@
         "map-filter-panel": {
             "duration": "Durée",
             "nps" : "Notes Par Seconde",
+            "njs": "Vitesse de saut des notes",
             "tags": "tags",
             "specificities": "général",
             "requirements": "requis",

assets/jsons/translations/ja.json

@@ -730,6 +730,7 @@
         "map-filter-panel": {
             "duration": "尺",
             "nps" : "秒間ノート数",
+            "njs": "ノートジャンプ速度",
             "tags": "タグ",
             "specificities": "一般",
             "requirements": "要Mod",

assets/jsons/translations/ru.json

@@ -729,6 +729,7 @@
         "map-filter-panel": {
             "duration": "Длительность",
             "nps" : "Нот в Секунду",
+            "njs": "Скорость прыжка нот",
             "tags": "тэги",
             "specificities": "основное",
             "requirements": "требуемые моды",

assets/jsons/translations/zh-tw.json

@@ -730,6 +730,7 @@
         "map-filter-panel": {
             "duration": "時長",
             "nps" : "每秒音符數",
+            "njs": "音符跳躍速度",
             "tags": "標籤",
             "specificities": "general",
             "requirements": "要求",

assets/jsons/translations/zh.json

@@ -730,6 +730,7 @@
         "map-filter-panel": {
             "duration": "时长",
             "nps" : "每秒音符数",
+            "njs": "音符跳跃速度",
             "tags": "标签",
             "specificities": "general",
             "requirements": "要求",

src/renderer/components/maps-playlists-panel/maps/map-item.component.tsx

@@ -32,6 +32,8 @@ import { useOnUpdate } from "renderer/hooks/use-on-update.hook";
 import { cn } from "renderer/helpers/css-class.helpers";
 import { sToMs } from "shared/helpers/time.helpers";
 import formatDuration from "format-duration";
+import { NpsIcon } from "renderer/components/svgs/icons/nps-icon.component";
+import { SpeedIcon } from "renderer/components/svgs/icons/speed-icon.component";
 
 export type MapItemComponentProps<T = unknown> = {
     hash: string;
@@ -208,8 +210,8 @@ export function MapItemComponent <T = unknown>({ hash, title, autor, songAutor,
                         <motion.ul key={hash} className="absolute top-[calc(100%-10px)] w-full h-fit max-h-[200%] pt-4 pb-2 px-2 overflow-y-scroll bg-light-main-color-3 dark:bg-main-color-3 text-main-color-1 dark:text-current brightness-125 rounded-md flex flex-col gap-3 scrollbar-default shadow-sm shadow-black" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.15 }} onHoverStart={diffsPanelHoverStart} onHoverEnd={diffsPanelHoverEnd}>
                             {Array.from(diffs.entries()).map(([charac, diffSet]) => (
                                 <ol key={charac} className="flex flex-col w-full gap-1">
-                                    {diffSet.map(({ name, libelle, stars }) => (
-                                        <li key={`${name}${libelle}${stars}`} className="w-full h-4 flex items-center gap-1">
+                                    {diffSet.map(({ name, libelle, stars, nps, njs }) => (
+                                        <li key={`${name}${libelle}${stars}`} className="w-full h-[1.15rem] flex items-center gap-1">
                                             {onHighlightedDiffsChange && (
                                                 <Tippy content={t("maps.map-item.hightlight-difficulty")} placement="top" theme="default">
                                                     <div className="h-full aspect-square">
@@ -218,9 +220,38 @@ export function MapItemComponent <T = unknown>({ hash, title, autor, songAutor,
                                                 </Tippy>
                                             )}
                                             <BsmIcon className="h-full w-fit p-px shrink-0" icon={charac} />
-                                            <span className="h-full px-2 flex items-center text-xs font-bold bg-current rounded-full" style={{ color: MAP_DIFFICULTIES_COLORS[name] }}>
-                                                {stars ? <span className="h-full block brightness-[.25]">★ {stars.toFixed(2)}</span> : <span className="h-full brightness-[.25] leading-4 pb-[2px] capitalize">{parseDiffLabel(name)}</span>}
-                                            </span>
+                                            <div className="h-full px-2 shrink-0 flex items-center text-sm font-bold bg-current rounded-full" style={{ color: MAP_DIFFICULTIES_COLORS[name] }}>
+                                                {(() => {
+                                                    if(stars){
+                                                        return (
+                                                            <div className="h-full brightness-[.15] flex justify-center items-center">
+                                                                <span className="pb-0.5">★ {stars.toFixed(2)}</span>
+                                                            </div>
+                                                        );
+                                                    }
+                                                    if(nps){
+                                                        return (
+                                                            <div className="h-full brightness-[.15] flex justify-center items-center gap-1" title={t("maps.map-filter-panel.nps")}>
+                                                                <NpsIcon className="h-full py-px"/>
+                                                                <span className="pb-0.5">{nps.toFixed(2)}</span>
+                                                            </div>
+                                                        );
+                                                    }
+                                                    if(njs){
+                                                        return (
+                                                            <p className="h-full brightness-[.15] flex justify-center items-center gap-1" title={t("maps.map-filter-panel.njs")}>
+                                                                <SpeedIcon className="h-full py-px"/>
+                                                                <span className="pb-0.5">{njs.toFixed(2)}</span>
+                                                            </p>
+                                                        );
+                                                    }
+                                                    return (
+                                                        <div className="h-full brightness-[.15] flex justify-center items-center">
+                                                            <span className="pb-0.5 capitalize">{parseDiffLabel(name)}</span>
+                                                        </div>
+                                                    );
+                                                })()}
+                                            </div>
                                             <span className={cn("text-sm leading-4 pb-[2px] line-clamp-1", isDiffHightlighted({name, characteristic: charac}) && "text-yellow-400")}>{parseDiffLabel(libelle)}</span>
                                         </li>
                                     ))}

src/renderer/components/svgs/icons/speed-icon.component.tsx

@@ -0,0 +1,9 @@
+import { createSvgIcon } from "../svg-icon.type";
+
+export const SpeedIcon = createSvgIcon((props, ref) => {
+    return (
+        <svg ref={ref} {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
+            <path d="M416.24-338.24q23.88 24 62.7 24.38 38.82.38 58.82-28.38l160.65-235.78q12.96-19.44-3.24-36.01-16.19-16.58-35.39-3.38L422.24-456q-28.76 20-29.38 56.94-.62 36.94 23.38 60.82ZM480-828.54q35.66 0 70.66 6.02 34.99 6.02 69.27 18.06 21.44 8 26.7 29.32 5.26 21.31-6.22 41.63-12.48 21.31-34.33 28.27-21.86 6.96-45.54-.04-19.38-5.05-39.13-7.57-19.76-2.52-41.41-2.52-129.57 0-223.35 92.54t-93.78 224.59q0 43.76 10.88 80.92 10.88 37.17 30.38 72.69h551.72q20.12-36.23 30.7-74.54 10.58-38.31 10.58-83.07 0-18.66-2.52-39.44-2.52-20.78-8.57-41.1-6.76-23.68.22-46.85 6.98-23.17 28.1-35.43 20.03-12.14 41.47-5.14 21.43 7 29.67 28.44 11.55 32.93 18.18 67.72 6.62 34.8 6.62 69.8 0 60.24-14.74 116.03-14.74 55.8-43.97 106.12-13.2 24.44-38.11 37.54-24.91 13.09-52.44 13.09H198.96q-27.49 0-52.78-13.33-25.29-13.34-37.77-37.3-27.24-47.24-42.98-101.98Q49.7-338.81 49.7-398.5q0-88.46 33.85-166.57 33.86-78.12 92.26-136.9 58.39-58.79 136.81-92.68 78.42-33.89 167.38-33.89Zm20.11 328.43Z"/>
+        </svg>
+    );
+})

src/shared/mappers/map/map-item-component-props.mapper.ts

@@ -3,7 +3,7 @@ import { MapItemComponentProps } from "renderer/components/maps-playlists-panel/
 import { BsvMapDetail, RawMapInfoData, SongDetailDiffCharactertistic, SongDetails, SongDiffName } from "shared/models/maps";
 import { BsmLocalMap } from "shared/models/maps/bsm-local-map.interface";
 
-export type ParsedMapDiff = { name: SongDiffName; libelle: string; stars: number };
+export type ParsedMapDiff = { name: SongDiffName; libelle: string; stars: number, nps: number, njs: number };
 
 export abstract class MapItemComponentPropsMapper {
 
@@ -13,7 +13,7 @@ export abstract class MapItemComponentPropsMapper {
         if (bsvMap?.versions?.at(0)?.diffs) {
             bsvMap.versions.at(0).diffs.forEach(diff => {
                 const arr = res.get(diff.characteristic) || [];
-                arr.push({ libelle: diff.difficulty, name: diff.difficulty, stars: diff.stars });
+                arr.push({ libelle: diff.difficulty, name: diff.difficulty, stars: diff.stars, nps: diff.nps, njs: diff.njs });
                 res.set(diff.characteristic, arr);
             });
             return res;
@@ -23,7 +23,7 @@ export abstract class MapItemComponentPropsMapper {
             songDetails?.difficulties.forEach(diff => {
                 const arr = res.get(diff.characteristic) || [];
                 const diffName = rawMapInfo?._difficultyBeatmapSets?.find(set => set._beatmapCharacteristicName === diff.characteristic)._difficultyBeatmaps.find(rawDiff => rawDiff._difficulty === diff.difficulty)?._customData?._difficultyLabel || diff.difficulty;
-                arr.push({ libelle: diffName, name: diff.difficulty, stars: diff.stars });
+                arr.push({ libelle: diffName, name: diff.difficulty, stars: diff.stars, nps: diff.nps, njs: diff.njs });
                 res.set(diff.characteristic, arr);
             });
             return res;
@@ -33,7 +33,7 @@ export abstract class MapItemComponentPropsMapper {
             rawMapInfo._difficultyBeatmapSets.forEach(set => {
                 set._difficultyBeatmaps.forEach(diff => {
                     const arr = res.get(set._beatmapCharacteristicName) || [];
-                    arr.push({ libelle: diff._customData?._difficultyLabel || diff._difficulty, name: diff._difficulty, stars: null });
+                    arr.push({ libelle: diff._customData?._difficultyLabel || diff._difficulty, name: diff._difficulty, stars: null, nps: null, njs: diff._noteJumpMovementSpeed });
                     res.set(set._beatmapCharacteristicName, arr);
                 });
             });