From 0ea41da41cb165db3bb2fb5d06aec63dde1d049f Mon Sep 17 00:00:00 2001 From: MathieuG-P <40181755+Zagrios@users.noreply.github.com> Date: Mon, 5 Dec 2022 03:19:05 +0100 Subject: [PATCH] we can now see maps from bsaver --- package.json | 1 + .../filter-panel.component.tsx | 4 +- .../download-maps-modal.component.tsx | 114 +++++++++++++++--- .../beat-saver/beat-saver-api.service.ts | 44 +++---- 4 files changed, 120 insertions(+), 43 deletions(-) diff --git a/package.json b/package.json index 7bfebac2..8e0a429d 100644 --- a/package.json +++ b/package.json @@ -231,6 +231,7 @@ "electron-log": "^4.4.8", "electron-store": "^8.1.0", "electron-updater": "^5.2.4", + "fast-deep-equal": "^3.1.3", "framer-motion": "^7.2.1", "fs-extra": "^10.1.0", "history": "^5.3.0", diff --git a/src/renderer/components/maps-mangement-components/filter-panel.component.tsx b/src/renderer/components/maps-mangement-components/filter-panel.component.tsx index e681f658..faa7dac9 100644 --- a/src/renderer/components/maps-mangement-components/filter-panel.component.tsx +++ b/src/renderer/components/maps-mangement-components/filter-panel.component.tsx @@ -171,12 +171,12 @@ export function FilterPanel({className, ref, playlist = false, filter, onChange}

TAGS

{MAP_TYPES.map(tag => ( - handleTagClick(tag)} className={`text-sm text-black rounded-md px-1 font-bold cursor-pointer ${(!isTagActivated(tag)) && "opacity-40 hover:opacity-100"}`} style={{backgroundColor: isTagExcluded(tag) ? diffColors.Expert : diffColors.Normal}}>{tag} + handleTagClick(tag)} className={`text-[12.5px] text-black rounded-md px-1 font-bold cursor-pointer ${(!isTagActivated(tag)) && "opacity-40 hover:opacity-100"}`} style={{backgroundColor: isTagExcluded(tag) ? diffColors.Expert : diffColors.Normal}}>{tag} ))}
{MAP_STYLES.map(tag => ( - handleTagClick(tag)} className={`text-sm text-black rounded-md px-1 font-bold cursor-pointer ${(!isTagActivated(tag)) && "opacity-40 hover:opacity-100"}`} style={{backgroundColor: isTagExcluded(tag) ? diffColors.Expert : diffColors.Easy}}>{tag} + handleTagClick(tag)} className={`text-[12.5px] text-black rounded-md px-1 font-bold cursor-pointer ${(!isTagActivated(tag)) && "opacity-40 hover:opacity-100"}`} style={{backgroundColor: isTagExcluded(tag) ? diffColors.Expert : diffColors.Easy}}>{tag} ))}
diff --git a/src/renderer/components/modal/modal-types/download-maps-modal.component.tsx b/src/renderer/components/modal/modal-types/download-maps-modal.component.tsx index d01280b9..4215d433 100644 --- a/src/renderer/components/modal/modal-types/download-maps-modal.component.tsx +++ b/src/renderer/components/modal/modal-types/download-maps-modal.component.tsx @@ -1,5 +1,7 @@ -import { useEffect, useState } from "react"; +import { motion, useInView } from "framer-motion"; +import { useCallback, useEffect, useRef, useState } from "react"; import { FilterPanel } from "renderer/components/maps-mangement-components/filter-panel.component"; +import { MapItem, ParsedMapDiff } from "renderer/components/maps-mangement-components/map-item.component"; import { BsmButton } from "renderer/components/shared/bsm-button.component"; import { BsmDropdownButton } from "renderer/components/shared/bsm-dropdown-button.component"; import { BsmSelect, BsmSelectOption } from "renderer/components/shared/bsm-select.component"; @@ -7,42 +9,116 @@ import { BSV_SORT_ORDER } from "renderer/partials/beat-saver/sort-order"; import { BeatSaverService } from "renderer/services/beat-saver/beat-saver.service"; import { ModalComponent } from "renderer/services/modale.service"; import { BSVersion } from "shared/bs-version.interface"; -import { BsvMapDetail, MapFilter } from "shared/models/maps/beat-saver.model"; +import { BsvMapCharacteristic, BsvMapDetail, MapFilter, SearchParams } from "shared/models/maps/beat-saver.model"; +import BeatWaitingImg from "../../../../../assets/images/apngs/beat-waiting.png" export const DownloadMapsModal: ModalComponent = ({data}) => { const beatSaver = BeatSaverService.getInstance(); - const [filter, setFilter] = useState(null); - const [maps, setMaps] = useState(null); - const [page, setPage] = useState(0); + const [filter, setFilter] = useState({}); + const [query, setQuery] = useState(""); + const [maps, setMaps] = useState([]); const [sortOrder, setSortOrder] = useState(BSV_SORT_ORDER.at(0)); + const [searchParams, setSearchParams] = useState({ + sortOrder: sortOrder, + filter: filter, + page: 0, + q: query + }); + + const loaderRef = useRef(null); + const sortOptions: BsmSelectOption[] = (() => { return BSV_SORT_ORDER.map(sort => ({text: sort, value: sort})); })(); - console.log(maps); - + const loadMaps = (params: SearchParams) => { + beatSaver.searchMaps(params).then((maps => setMaps(prev => [...prev, ...maps]))); + } + useEffect(() => { - beatSaver.searchMaps({ - page, sortOrder - }).then(setMaps); - }, []) + loadMaps(searchParams); + }, [searchParams]); + const extractMapDiffs = (map: BsvMapDetail): Map => { + const res = new Map(); + if(map.versions.at(0).diffs){ + map.versions.at(0).diffs.forEach(diff => { + const arr = res.get(diff.characteristic) || []; + arr.push({name: diff.difficulty, type: diff.difficulty, stars: diff.stars}); + res.set(diff.characteristic, arr); + }); + + } + return res; + } + + const renderMap = (map: BsvMapDetail) => { + return ( + + ) + } + + const handleSearch = () => { + const searchParams: SearchParams = { + sortOrder: sortOrder, + filter: filter, + q: query, + page: 0, + }; + + setMaps(() => []); + setSearchParams(() => searchParams); + } + + const handleLoadMore = () => { + setSearchParams((prev) => { + return {...prev, page: prev.page + 1} + }); + } + return ( -
-
- - + {e.preventDefault(); handleSearch()}}> +
+ + - - + setQuery(e.target.value.trim())}/> + {e.preventDefault(); handleSearch()}}/>
-
    - +
      + {maps.length === 0 ? ( +
      + + Chargement des maps... {/* TODO TRANSLATE */} +
      + ) : ( + <> + {maps.map(renderMap)} + + + )}
    ) diff --git a/src/renderer/services/beat-saver/beat-saver-api.service.ts b/src/renderer/services/beat-saver/beat-saver-api.service.ts index 862df710..f2455e0c 100644 --- a/src/renderer/services/beat-saver/beat-saver-api.service.ts +++ b/src/renderer/services/beat-saver/beat-saver-api.service.ts @@ -19,28 +19,28 @@ export class BeatSaverApiService { if(!filter){ return new URLSearchParams(); } - const enbledTagsString = Array.from(filter.enabledTags); - const excludedTagsString = Array.from(filter.excludedTags).map(tag => `!${tag}`); + const enbledTagsString = filter.enabledTags ? Array.from(filter.enabledTags) : null; + const excludedTagsString = filter.excludedTags ? Array.from(filter.excludedTags).map(tag => `!${tag}`) : null; - const tags = [...enbledTagsString, excludedTagsString].join("|"); + const tags = (enbledTagsString || excludedTagsString) ? [...enbledTagsString, excludedTagsString].join("|") : null; const params = { - automapper: String(filter.automapper ?? ""), - chroma: String(filter.chroma ?? ""), - cinema: String(filter.cinema ?? ""), - me: String(filter.me ?? ""), - noodle: String(filter.noodle ?? ""), - ranked: String(filter.ranked ?? ""), - verified: String(filter.ranked ?? ""), - curated: String(filter.curated ?? ""), - fullSpread : String(filter.fullSpread ?? ""), - from: String(filter.from ?? ""), - to: String(filter.to ?? ""), - tags: tags, - minDuration: String(filter.minDuration ?? ""), - maxDuration: String(filter.maxDuration ?? ""), - minNps: String(filter.minNps ?? ""), - maxNps: String(filter.maxNps ?? ""), + ...(filter.automapper && {automapper: String(filter.automapper)}), + ...(filter.chroma && {chroma: String(filter.chroma)}), + ...(filter.cinema && {cinema: String(filter.cinema)}), + ...(filter.me && {me: String(filter.me)}), + ...(filter.noodle && {noodle: String(filter.noodle)}), + ...(filter.ranked && {ranked: String(filter.ranked)}), + ...(filter.verified && {verified: String(filter.verified)}), + ...(filter.curated && {curated: String(filter.curated)}), + ...(filter.fullSpread && {fullSpread: String(filter.fullSpread)}), + ...(filter.from && {from: String(filter.from)}), + ...(filter.to && {to: String(filter.to)}), + ...(tags && {tags: String(tags)}), + ...(filter.minDuration && {minDuration: String(filter.minDuration)}), + ...(filter.maxDuration && {maxDuration: String(filter.maxDuration)}), + ...(filter.minNps && {minNps: String(filter.minNps)}), + ...(filter.maxNps && {maxNps: String(filter.maxNps)}) }; return new URLSearchParams(params); @@ -52,9 +52,9 @@ export class BeatSaverApiService { if(!search){ return new URLSearchParams(); } const searchParams = { - includeEmpty: String(search.includeEmpty ?? ""), - sortOrder: String(search.sortOrder ?? ""), - q: String(search.q ?? "") + ...(search.includeEmpty && {includeEmpty: String(search.includeEmpty)}), + ...(search.sortOrder && {sortOrder: search.sortOrder}), + ...(search.q && {q: search.q}) }; const filterUrlParms = this.mapFilterToUrlParams(search.filter);