zedcode/bs-manager
1
0
Fork 0
mirror of https://github.com/Zagrios/bs-manager.git synced 2026-07-03 14:08:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix add map and link buttons AND fix tag filters set undefined

Browse Source
This commit is contained in:
MathieuG-P
2022-12-09 23:29:09 +01:00
parent 702486020f
commit 02753999f1
2 changed files with 42 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/maps-mangement-components/filter-panel.component.tsx
+17 -19
View File
@@ -81,28 +81,26 @@ export function FilterPanel({className, ref, playlist = false, filter, onChange}
}
const handleTagClick = (tag: MapTag) => {
if(filter.enabledTags.has(tag)){
filter.enabledTags.delete(tag);
filter.excludedTags.add(tag);
return onChange({
...filter,
enabledTags: filter.enabledTags,
excludedTags: filter.excludedTags
})
const enabledTags = filter.enabledTags ?? new Set<MapTag>();
const excludedTags = filter.excludedTags ?? new Set<MapTag>();
if(isTagExcluded(tag)){
excludedTags.delete(tag);
}
if(filter.excludedTags.has(tag)){
filter.excludedTags.delete(tag);
return onChange({
...filter,
excludedTags: filter.excludedTags
})
else if(isTagActivated(tag)){
excludedTags.add(tag);
enabledTags.delete(tag);
}
else{
enabledTags.add(tag);
}
filter.enabledTags.add(tag);
onChange({
...filter,
enabledTags: filter.enabledTags
})
enabledTags,
excludedTags
});
}
@@ -171,12 +169,12 @@ export function FilterPanel({className, ref, playlist = false, filter, onChange}
<h2 className="uppercase text-sm mb-1">TAGS</h2>
<div className="w-full flex flex-row flex-wrap items-start justify-start content-start gap-1 mb-2">
{MAP_TYPES.map(tag => (
<span key={tag} onClick={e => 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}</span>
<span key={tag} onClick={() => handleTagClick(tag)} className={`text-[12.5px] text-black rounded-md px-1 font-bold cursor-pointer ${(!isTagActivated(tag)) && "opacity-40 hover:opacity-90"}`} style={{backgroundColor: isTagExcluded(tag) ? diffColors.Expert : diffColors.Normal}}>{tag}</span>
))}
</div>
<div className="w-full flex flex-row flex-wrap items-start justify-start content-start gap-1">
{MAP_STYLES.map(tag => (
<span key={tag} onClick={e => 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}</span>
<span key={tag} onClick={() => handleTagClick(tag)} className={`text-[12.5px] text-black rounded-md px-1 font-bold cursor-pointer ${(!isTagActivated(tag)) && "opacity-40 hover:opacity-90"}`} style={{backgroundColor: isTagExcluded(tag) ? diffColors.Expert : diffColors.Easy}}>{tag}</span>
))}
</div>
src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx
+25 -22
View File
@@ -1,18 +1,16 @@
import { createRef, DetailedHTMLProps, useEffect, useRef, useState } from "react"
import { DetailedHTMLProps, useEffect, useRef, useState } from "react"
import { BSVersion } from "shared/bs-version.interface"
import { TabNavBar } from "../shared/tab-nav-bar.component"
import { LocalMapsListPanel } from "./local-maps-list-panel.component"
import { BsmDropdownButton, DropDownItem } from "../shared/bsm-dropdown-button.component"
import { FilterPanel } from "./filter-panel.component"
import { MapFilter, MapTag } from "shared/models/maps/beat-saver.model"
import { MapFilter } from "shared/models/maps/beat-saver.model"
import { BsmButton } from "../shared/bsm-button.component"
import { useThemeColor } from "renderer/hooks/use-theme-color.hook"
import { MapsManagerService } from "renderer/services/maps-manager.service"
import { motion, Variants } from "framer-motion";
import ReactTooltip from 'react-tooltip';
import { MapsDownloaderService } from "renderer/services/maps-downloader.service"
import { BehaviorSubject } from "rxjs"
import { BsmLocalMap } from "shared/models/maps/bsm-local-map.interface"
type Props = {
version?: BSVersion
@@ -22,13 +20,9 @@ export function MapsPlaylistsPanel({version}: Props) {
const mapsService = MapsManagerService.getInstance();
const mapsDownloader = MapsDownloaderService.getInstance();
const mapsManager = MapsManagerService.getInstance();
const [tabIndex, setTabIndex] = useState(0);
const [mapFilter, setMapFilter] = useState<MapFilter>({
enabledTags: new Set<MapTag>(),
excludedTags: new Set<MapTag>()
});
const [mapFilter, setMapFilter] = useState<MapFilter>({});
const [mapSearch, setMapSearch] = useState("");
const [playlistSearch, setPlaylistSearch] = useState("");
const [mapsLinked, setMapsLinked] = useState(false);
@@ -64,7 +58,8 @@ export function MapsPlaylistsPanel({version}: Props) {
const renderTab = (props: DetailedHTMLProps<React.HTMLAttributes<HTMLLIElement>, HTMLLIElement>, text: string, index: number): JSX.Element => {
const mainColor = mapsLinked ? color : "red";
const linkedColor = mapsLinked ? color : "red";
const addMapColor = color;
const onClickLink = (index: number) => {
if(index === 0){ handleMapsLinkClick(); }
@@ -77,19 +72,27 @@ export function MapsPlaylistsPanel({version}: Props) {
const variants: Variants = { hover: {rotate: 22.5}, tap: {rotate: 45} };
return (
<li className="relative text-center text-lg font-bold hover:backdrop-brightness-75 flex justify-center items-center content-center" onClick={props.onClick} title={mapsLinked ? "Délier les maps" : "Lier les maps"}>
<li className="relative text-center text-lg font-bold hover:backdrop-brightness-75 flex justify-center items-center content-center" onClick={props.onClick}>
<span>{text}</span>
<motion.div variants={variants} whileHover="hover" whileTap="tap" initial={{rotate: 0}} className="absolute block p-1 right-3 h-[calc(100%-5px)] aspect-square blur-0 hover:brightness-75">
<span className="absolute top-0 left-0 h-full w-full rounded-full opacity-20" style={{backgroundColor: mainColor}}/>
<BsmButton className="p-1 absolute top-0 left-0 h-full w-full !bg-transparent -rotate-45" iconClassName="" icon={mapsLinked ? "link" : "unlink"} withBar={false} style={{color: mainColor}} onClick={e => {e.stopPropagation(); onClickLink(index)}}/>
</motion.div>
<motion.div variants={variants} whileHover="hover" whileTap="tap" initial={{rotate: 0}} className="absolute block p-1 right-11 h-[calc(100%-5px)] aspect-square blur-0 hover:brightness-75" data-tip data-for="add-tooltip">
<span className="absolute top-0 left-0 h-full w-full rounded-full opacity-20" style={{backgroundColor: mainColor}}/>
<BsmButton className="p-0.5 absolute top-0 left-0 h-full w-full !bg-transparent" iconClassName="" icon="add" withBar={false} style={{color: mainColor}} onClick={e => {e.stopPropagation(); onClickAdd(index)}}/>
</motion.div>
<ReactTooltip id="add-tooltip" effect="solid" padding="5px" >
<span className="whitespace-nowrap">Ajouté des maps</span> {/* TODO TRANSLATE */}
</ReactTooltip>
<div className="h-full flex absolute right-0 top-0 gap-1.5 items-center pr-2">
<motion.div variants={variants} whileHover="hover" whileTap="tap" initial={{rotate: 0}} className="block p-0.5 h-[calc(100%-5px)] aspect-square blur-0 hover:brightness-75" data-tip data-for="add-tooltip">
<span className="absolute top-0 left-0 h-full w-full rounded-full opacity-20" style={{backgroundColor: addMapColor}}/>
<BsmButton className="p-0.5 absolute top-0 left-0 h-full w-full !bg-transparent" iconClassName="" icon="add" withBar={false} style={{color: addMapColor}} onClick={e => {e.stopPropagation(); onClickAdd(index)}}/>
</motion.div>
<ReactTooltip id="add-tooltip" effect="solid" padding="5px">
<span className="whitespace-nowrap">Ajouté des maps</span> {/* TODO TRANSLATE */}
</ReactTooltip>
{!!version && (
<motion.div variants={variants} whileHover="hover" whileTap="tap" initial={{rotate: 0}} className="block p-0.5 h-[calc(100%-5px)] aspect-square blur-0 hover:brightness-75" title={mapsLinked ? "Délier les maps" : "Lier les maps"}>
<span className="absolute top-0 left-0 h-full w-full rounded-full opacity-20" style={{backgroundColor: linkedColor}}/>
<BsmButton className="p-1 absolute top-0 left-0 h-full w-full !bg-transparent -rotate-45" iconClassName="" icon={mapsLinked ? "link" : "unlink"} withBar={false} style={{color: linkedColor}} onClick={e => {e.stopPropagation(); onClickLink(index)}}/>
</motion.div>
)}
</div>
</li>
)
}