From 0957080e22096deee869eda6ad05b60bb93c6536 Mon Sep 17 00:00:00 2001 From: MathieuG-P <40181755+Zagrios@users.noreply.github.com> Date: Mon, 24 Jun 2024 19:51:17 +0200 Subject: [PATCH] [feature-107] Change the color of highlighted difficulties + other minor fixes --- .../maps/map-item.component.tsx | 63 +++++++++++-------- .../edit-playlist-modal.component.tsx | 24 ++++--- 2 files changed, 52 insertions(+), 35 deletions(-) diff --git a/src/renderer/components/maps-playlists-panel/maps/map-item.component.tsx b/src/renderer/components/maps-playlists-panel/maps/map-item.component.tsx index 91512122..fad9190d 100644 --- a/src/renderer/components/maps-playlists-panel/maps/map-item.component.tsx +++ b/src/renderer/components/maps-playlists-panel/maps/map-item.component.tsx @@ -29,6 +29,7 @@ import { ParsedMapDiff } from "shared/mappers/map/map-item-component-props.mappe import { BsmCheckbox } from "renderer/components/shared/bsm-checkbox.component"; import { BPListDifficulty } from "shared/models/playlists/playlist.interface"; import { useOnUpdate } from "renderer/hooks/use-on-update.hook"; +import { cn } from "renderer/helpers/css-class.helpers"; export type MapItemComponentProps = { hash: string; @@ -40,7 +41,7 @@ export type MapItemComponentProps = { autorId: number; mapId: string; diffs: Map; - diffsSelected?: BPListDifficulty[]; + highlightedDiffs?: BPListDifficulty[]; ranked?: boolean; blRanked?: boolean; bpm?: number; @@ -52,16 +53,18 @@ export type MapItemComponentProps = { downloading?: boolean; showOwned?: boolean; isOwned$?: Observable; + canOpenMapDetails?: boolean; + canOpenAuthorDetails?: boolean; callBackParam: T; onDelete?: (param: T) => void; onDownload?: (param: T) => void; onSelected?: (param: T) => void; onCancelDownload?: (param: T) => void; onDoubleClick?: (param: T) => void; - onSelectedDiffsChange?: (diffs: BPListDifficulty[]) => void; + onHighlightedDiffsChange?: (diffs: BPListDifficulty[]) => void; }; -export function MapItemComponent ({ hash, title, autor, songAutor, coverUrl, songUrl, autorId, mapId, diffs, diffsSelected, ranked, blRanked, bpm, duration, likes, createdAt, selected, selected$, downloading, showOwned, isOwned$, callBackParam, onDelete, onDownload, onSelected, onCancelDownload, onDoubleClick, onSelectedDiffsChange }: MapItemComponentProps) { +export function MapItemComponent ({ hash, title, autor, songAutor, coverUrl, songUrl, autorId, mapId, diffs, highlightedDiffs, ranked, blRanked, bpm, duration, likes, createdAt, selected, selected$, downloading, showOwned, isOwned$, canOpenMapDetails, canOpenAuthorDetails, callBackParam, onDelete, onDownload, onSelected, onCancelDownload, onDoubleClick, onHighlightedDiffsChange }: MapItemComponentProps) { const linkOpener = useService(LinkOpenerService); const audioPlayer = useService(AudioPlayerService); @@ -74,7 +77,7 @@ export function MapItemComponent ({ hash, title, autor, songAutor, const [hovered, setHovered] = useState(false); const [bottomBarHovered, setBottomBarHovered, cancelBottomBarHovered] = useDelayedState(false); const [diffsPanelHovered, setDiffsPanelHovered] = useState(false); - const [_diffsSelected, setDiffsSelected] = useState(diffsSelected ?? []); + const [_highlightedDiffs, setDiffsSelected] = useState(highlightedDiffs ?? []); useDoubleClick({ ref, @@ -84,9 +87,9 @@ export function MapItemComponent ({ hash, title, autor, songAutor, }); useOnUpdate(() => { - if(!_diffsSelected?.length){ return; } - onSelectedDiffsChange?.(_diffsSelected); - }, [_diffsSelected]) + if(!_highlightedDiffs?.length){ return; } + onHighlightedDiffsChange?.(_highlightedDiffs); + }, [_highlightedDiffs]) const songPlaying = useObservable(() => audioPlayer.playing$.pipe(map(playing => playing && audioPlayer.src === songUrl))); @@ -146,9 +149,9 @@ export function MapItemComponent ({ hash, title, autor, songAutor, setBottomBarHovered(false, 100); }; - const isDiffChecked = (diff: {name: string, characteristic: string}) => { - if(!_diffsSelected?.length){ return false; } - return _diffsSelected.some(d => d?.name?.toLowerCase() === diff?.name?.toLowerCase() && d?.characteristic?.toLowerCase() === diff?.characteristic?.toLowerCase()); + const isDiffHightlighted = (diff: {name: string, characteristic: string}) => { + if(!_highlightedDiffs?.length){ return false; } + return _highlightedDiffs.some(d => d?.name?.toLowerCase() === diff?.name?.toLowerCase() && d?.characteristic?.toLowerCase() === diff?.characteristic?.toLowerCase()); } const diffsPanelHoverStart = () => setDiffsPanelHovered(true); @@ -184,15 +187,15 @@ export function MapItemComponent ({ hash, title, autor, songAutor, }; const handleDiffCheckChange = (diff: BPListDifficulty) => { - if(!_diffsSelected?.length){ + if(!_highlightedDiffs?.length){ setDiffsSelected([diff]); } - const index = _diffsSelected?.findIndex(d => d?.name?.toLowerCase() === diff?.name?.toLowerCase() && d?.characteristic?.toLowerCase() === diff?.characteristic?.toLowerCase()); + const index = _highlightedDiffs?.findIndex(d => d?.name?.toLowerCase() === diff?.name?.toLowerCase() && d?.characteristic?.toLowerCase() === diff?.characteristic?.toLowerCase()); if(index === -1){ - setDiffsSelected([..._diffsSelected, diff]); + setDiffsSelected([..._highlightedDiffs, diff]); } else { - setDiffsSelected(_diffsSelected.filter((_, i) => i !== index)); + setDiffsSelected(_highlightedDiffs.filter((_, i) => i !== index)); } } @@ -206,14 +209,18 @@ export function MapItemComponent ({ hash, title, autor, songAutor,
    {diffSet.map(({ name, libelle, stars }, index) => (
  1. - {onSelectedDiffsChange && ( - handleDiffCheckChange({name, characteristic: charac})} /> + {onHighlightedDiffsChange && ( + +
    + handleDiffCheckChange({name, characteristic: charac})} /> +
    +     )} {stars ? ★ {stars.toFixed(2)} : {parseDiffLabel(name)}} - {parseDiffLabel(libelle)} + {parseDiffLabel(libelle)}
    2. ))}
@@ -240,19 +247,25 @@ export function MapItemComponent ({ hash, title, autor, songAutor,

- - {title} - + {canOpenMapDetails !== false ? ( + + {title} + ) : ( +

{title}

+ )}

{songAutor && t("maps.map-item.by", { songAutor })}

{autor && ( <> - {" "} - {t("maps.map-item.mapped-by")}{" "} - - {autor} - + {` ${t("maps.map-item.mapped-by")} `} + {canOpenAuthorDetails !== false ? ( + + {autor} + + ) : ( + {autor} + )} )}

diff --git a/src/renderer/components/modal/modal-types/playlist/edit-playlist-modal/edit-playlist-modal.component.tsx b/src/renderer/components/modal/modal-types/playlist/edit-playlist-modal/edit-playlist-modal.component.tsx index c745bd4c..705dc2f2 100644 --- a/src/renderer/components/modal/modal-types/playlist/edit-playlist-modal/edit-playlist-modal.component.tsx +++ b/src/renderer/components/modal/modal-types/playlist/edit-playlist-modal/edit-playlist-modal.component.tsx @@ -211,22 +211,22 @@ export const EditPlaylistModal: ModalComponent = ({ resolver, opt onClick?: (map: (BsmLocalMap|BsvMapDetail|SongDetails)) => void, isSelected$?: Observable, isOwned$?: Observable, - diffsSelected?: BPListDifficulty[], - onSelectedDiffsChange?: (diff: BPListDifficulty[]) => void + highlightedDiffs?: BPListDifficulty[], + onHighlightedDiffsChange?: (diff: BPListDifficulty[]) => void } ) => { - console.log(opt.diffsSelected); - return ( ); }, []); @@ -271,12 +271,12 @@ export const EditPlaylistModal: ModalComponent = ({ resolver, opt selectedHashs$: playlistHashsSelected$, noKeyPressedFallBack: () => playlistMaps$.next(Object.fromEntries(Object.entries(playlistMaps$.value).filter(([hash]) => hash !== mapHash))) }), - onSelectedDiffsChange: diffs => { + onHighlightedDiffsChange: diffs => { const newPlaylistMaps = {...playlistMaps$.value}; newPlaylistMaps[mapHash].difficulties = diffs; playlistMaps$.next(newPlaylistMaps); }, - diffsSelected: playlistMap.difficulties, + highlightedDiffs: playlistMap.difficulties, isSelected$ }); }, []); @@ -447,8 +447,12 @@ export const EditPlaylistModal: ModalComponent = ({ resolver, opt }; const handlePlaylistMapDragEnd = useCallback((fromIndex: number, toIndex: number) => { - const playlistMapsArray = swapElements(fromIndex, toIndex, Object.entries(playlistMaps$.value)); - return playlistMaps$.next(Object.fromEntries(playlistMapsArray)); + const playlistMapsArray = Object.entries(playlistMaps$.value ?? {}); + const newPlaylistMaps = [...playlistMapsArray]; + const [removed] = newPlaylistMaps.splice(fromIndex, 1); + newPlaylistMaps.splice(toIndex, 0, removed); + + playlistMaps$.next(Object.fromEntries(newPlaylistMaps)); }, []); return (