From 8217a577a031e0c3d70ca5f9dab837789ddf56ce Mon Sep 17 00:00:00 2001 From: MathieuG-P Date: Sun, 13 Nov 2022 02:14:53 +0100 Subject: [PATCH] missing icons and add difficulties --- .../local-maps-list-panel.component.tsx | 8 +- .../map-item.component.tsx | 85 ++++++++++++++----- .../components/svgs/bsm-icon.component.tsx | 29 ++++++- .../icons/check-circle-icon.component.tsx | 9 ++ .../svgs/icons/lawless-icon.component.tsx | 10 +++ .../svgs/icons/lightshow-icon.component.tsx | 10 +++ .../icons/ninety-dregree-icon.component.tsx | 12 +++ .../svgs/icons/no-arrow-icon.component.tsx | 9 ++ .../svgs/icons/one-saber-icon.component.tsx | 9 ++ .../svgs/icons/pause-icon.component.tsx | 9 ++ .../three-sixty-degree-icon.component.tsx | 13 +++ .../icons/thumb-up-fill-icon.component.tsx | 9 ++ .../svgs/icons/timer-fill.component.tsx | 9 ++ src/shared/models/maps/raw-map.model.ts | 7 +- 14 files changed, 197 insertions(+), 31 deletions(-) create mode 100644 src/renderer/components/svgs/icons/check-circle-icon.component.tsx create mode 100644 src/renderer/components/svgs/icons/lawless-icon.component.tsx create mode 100644 src/renderer/components/svgs/icons/lightshow-icon.component.tsx create mode 100644 src/renderer/components/svgs/icons/ninety-dregree-icon.component.tsx create mode 100644 src/renderer/components/svgs/icons/no-arrow-icon.component.tsx create mode 100644 src/renderer/components/svgs/icons/one-saber-icon.component.tsx create mode 100644 src/renderer/components/svgs/icons/pause-icon.component.tsx create mode 100644 src/renderer/components/svgs/icons/three-sixty-degree-icon.component.tsx create mode 100644 src/renderer/components/svgs/icons/thumb-up-fill-icon.component.tsx create mode 100644 src/renderer/components/svgs/icons/timer-fill.component.tsx diff --git a/src/renderer/components/maps-mangement-components/local-maps-list-panel.component.tsx b/src/renderer/components/maps-mangement-components/local-maps-list-panel.component.tsx index 85d639bc..af5673f5 100644 --- a/src/renderer/components/maps-mangement-components/local-maps-list-panel.component.tsx +++ b/src/renderer/components/maps-mangement-components/local-maps-list-panel.component.tsx @@ -4,7 +4,7 @@ import VisibilitySensor from "react-visibility-sensor" import { useEffect, useState } from "react" import { BsmLocalMap } from "shared/models/maps/bsm-local-map.interface" import { Subscription } from "rxjs" -import { MapItem, MapItemProps } from "./map-item.component" +import { MapItem, MapItemProps, ParsedMapDiff } from "./map-item.component" import { BsvMapCharacteristic, BsvMapDifficultyType } from "shared/models/maps/beat-saver.model" type Props = { @@ -30,12 +30,12 @@ export function LocalMapsListPanel({version, className} : Props) { return () => { subs.forEach(s => s.unsubscribe()); } }, [isVisible]) - const extractMapDiffs = (map: BsmLocalMap): Map => { - const res = new Map(); + const extractMapDiffs = (map: BsmLocalMap): Map => { + const res = new Map(); map.rawInfo._difficultyBeatmapSets.forEach(set => { set._difficultyBeatmaps.forEach(diff => { const arr = res.get(set._beatmapCharacteristicName) || []; - arr.push(diff._difficulty); + arr.push({name: diff._customData?._difficultyLabel || diff._difficulty, type: diff._difficulty, stars: null}); res.set(set._beatmapCharacteristicName, arr); }) }) diff --git a/src/renderer/components/maps-mangement-components/map-item.component.tsx b/src/renderer/components/maps-mangement-components/map-item.component.tsx index b68515b5..824e27a4 100644 --- a/src/renderer/components/maps-mangement-components/map-item.component.tsx +++ b/src/renderer/components/maps-mangement-components/map-item.component.tsx @@ -4,7 +4,7 @@ import { useThemeColor } from "renderer/hooks/use-theme-color.hook"; import { BsmLink } from "../shared/bsm-link.component"; import { BsmIcon } from "../svgs/bsm-icon.component"; import { BsmButton } from "../shared/bsm-button.component"; -import { motion } from "framer-motion"; +import { AnimatePresence, motion } from "framer-motion"; import { useState } from "react"; import { LinkOpenerService } from "renderer/services/link-opener.service"; import dateFormat from "dateformat"; @@ -12,6 +12,8 @@ import { AudioPlayerService } from "renderer/services/audio-player.service"; import { useObservable } from "renderer/hooks/use-observable.hook"; import { map } from "rxjs/operators"; +export type ParsedMapDiff = {type: BsvMapDifficultyType, name: string, stars: number} + export type MapItemProps = { hash: string, title: string, @@ -21,7 +23,7 @@ export type MapItemProps = { songUrl: string, autorId: number, mapId: string, - diffs: Map, + diffs: Map, qualified: boolean, ranked: boolean, bpm: number, @@ -40,8 +42,10 @@ export function MapItem({hash, title, autor, songAutor, coverUrl, songUrl, autor const color = useThemeColor("first-color"); const [hovered, setHovered] = useState(false); + const [bottomBarHovered, setBottomBarHovered] = useState(false); + const [diffsPanelHovered, setDiffsPanelHoverd] = useState(false); - const songPlaying = useObservable(audioPlayer.playing$.pipe(map(playing => playing && audioPlayer.src === songUrl ? true : false))); + const songPlaying = useObservable(audioPlayer.playing$.pipe(map(playing => playing && audioPlayer.src === songUrl))); const zipUrl = `https://r2cdn.beatsaver.com/${hash}.zip`; const previewUrl = `https://skystudioapps.com/bs-viewer/?url=${zipUrl}`; @@ -57,13 +61,7 @@ export function MapItem({hash, title, autor, songAutor, coverUrl, songUrl, autor return duration > 3600 ? dateFormat(date, "h:MM:ss") : dateFormat(date, "MM:ss"); })() - console.log(hash); - - const openMapPage = () => { - if(mapUrl){ - linkOpener.open(mapUrl) - } - } + console.log(bottomBarHovered, diffsPanelHovered); const openPreview = () => linkOpener.open(previewUrl, true); const copyBsr = () => navigator.clipboard.writeText(`!bsr ${mapId}`); @@ -76,42 +74,86 @@ export function MapItem({hash, title, autor, songAutor, coverUrl, songUrl, autor } audioPlayer.play(songUrl, bpm); } + + const renderDiffPreview = () => { + + const diffSets = Array.from(diffs.entries()); + + if(diffSets.length === 1){ + const [diffType, diffSet] = diffSets[0]; + + return ( + <> + +
+ {diffSet.map(diff => ( + + ))} +
+ + ) + } + if(diffSets.length > 1){ + return diffSets.map(([diffType, diffSet]) => ( + <> + + {diffSet.length} + + )); + } + } + + console.log(coverUrl); return ( - setHovered(true)} onHoverEnd={() => setHovered(false)} onClick={openMapPage}> + setHovered(true)} onHoverEnd={() => setHovered(false)} style={{zIndex: (bottomBarHovered || diffsPanelHovered) && 5}}> + + {(diffsPanelHovered || bottomBarHovered) && ( + setDiffsPanelHoverd(true)} onHoverEnd={() => setDiffsPanelHoverd(false)}> + aaeaze
azeaze + + )} +
{e.stopPropagation(); toogleMusic()}}> - +
-
- -
-

{title}

+
+
+

{title}

par {songAutor}

-

mappée par {autor}

-
+

{autor && (<> mappée par {autor})}

+
{likesText && (
- + {likesText}
)} {durationText && (
- + {durationText}
)} {createdAt && (
- +
)}
+ setBottomBarHovered(true)} onHoverEnd={() => setBottomBarHovered(false)}> +
+ classée +
+
+ {renderDiffPreview()} +
+
@@ -125,7 +167,6 @@ export function MapItem({hash, title, autor, songAutor, coverUrl, songUrl, autor
- ) } diff --git a/src/renderer/components/svgs/bsm-icon.component.tsx b/src/renderer/components/svgs/bsm-icon.component.tsx index 1a20e048..9ea5767d 100644 --- a/src/renderer/components/svgs/bsm-icon.component.tsx +++ b/src/renderer/components/svgs/bsm-icon.component.tsx @@ -28,10 +28,21 @@ import { BsMapDifficultyIcon } from "./icons/bs-map-difficulty-icon.component"; import { TwitchIcon } from "./icons/twitch-icon.component"; import EyeIcon from "./icons/eye-icon.component"; import { PlayIcon } from "./icons/play-icon.component"; +import { ThumbUpFillIcon } from "./icons/thumb-up-fill-icon.component"; +import { TimerFillIcon } from "./icons/timer-fill.component"; +import { CheckCircleIcon } from "./icons/check-circle-icon.component"; +import { PauseIcon } from "./icons/pause-icon.component"; +import { BsvMapCharacteristic } from "shared/models/maps/beat-saver.model"; +import { LightshowIcon } from "./icons/lightshow-icon.component"; +import { LawlessIcon } from "./icons/lawless-icon.component"; +import { NoArrowIcon } from "./icons/no-arrow-icon.component"; +import { OneSaberIcon } from "./icons/one-saber-icon.component"; +import { NinetyDregreeIcon } from "./icons/ninety-dregree-icon.component"; +import { ThreeSixtyDegreeIcon } from "./icons/three-sixty-degree-icon.component"; -export type BsmIconType = ( - "settings"|"trash"|"favorite"|"folder"|"bsNote"|"check"|"three-dots"|"twitch"|"eye"|"play"| - "terminal"|"desktop"|"oculus"|"add"|"cross"|"task"|"github"|"close"| +export type BsmIconType = BsvMapCharacteristic | ( + "settings"|"trash"|"favorite"|"folder"|"bsNote"|"check"|"three-dots"|"twitch"|"eye"|"play"|"checkCircleIcon"| + "terminal"|"desktop"|"oculus"|"add"|"cross"|"task"|"github"|"close"|"thumbUpFill"|"timerFill"|"pause"| "copy"|"steam"|"edit"|"export"|"patreon"|"search"|"bsMapDifficulty"| "fr-FR-flag"|"es-ES-flag"|"en-US-flag"|"en-EN-flag" ); @@ -64,10 +75,20 @@ export const BsmIcon = memo(({className, icon, style}: {className?: string, icon if(icon === "three-dots"){ return } if(icon === "github"){ return } if(icon === "close"){ return } - if(icon === "bsMapDifficulty"){ return } + if(icon === "bsMapDifficulty" || icon === "Standard"){ return } if(icon === "twitch"){ return } if(icon === "eye"){ return } if(icon === "play"){ return } + if(icon === "thumbUpFill"){ return } + if(icon === "timerFill"){ return } + if(icon === "checkCircleIcon"){ return } + if(icon === "pause"){ return } + if(icon === "Lawless"){ return } + if(icon === "NoArrows"){ return } + if(icon === "OneSaber"){ return } + if(icon === "Lightshow"){ return } + if(icon === "90Degree"){ return } + if(icon === "360Degree"){ return } return } diff --git a/src/renderer/components/svgs/icons/check-circle-icon.component.tsx b/src/renderer/components/svgs/icons/check-circle-icon.component.tsx new file mode 100644 index 00000000..fda87c3a --- /dev/null +++ b/src/renderer/components/svgs/icons/check-circle-icon.component.tsx @@ -0,0 +1,9 @@ +import { CSSProperties } from "react"; + +export function CheckCircleIcon(props: {className?: string, style?: CSSProperties}) { + return ( + + + + ) +} diff --git a/src/renderer/components/svgs/icons/lawless-icon.component.tsx b/src/renderer/components/svgs/icons/lawless-icon.component.tsx new file mode 100644 index 00000000..9780f384 --- /dev/null +++ b/src/renderer/components/svgs/icons/lawless-icon.component.tsx @@ -0,0 +1,10 @@ +import { CSSProperties } from 'react' + +export function LawlessIcon(props: {className?: string, style?: CSSProperties}) { + return ( + + + + + ) +} diff --git a/src/renderer/components/svgs/icons/lightshow-icon.component.tsx b/src/renderer/components/svgs/icons/lightshow-icon.component.tsx new file mode 100644 index 00000000..0c956efa --- /dev/null +++ b/src/renderer/components/svgs/icons/lightshow-icon.component.tsx @@ -0,0 +1,10 @@ +import { CSSProperties } from 'react' + +export function LightshowIcon(props: {className?: string, style?: CSSProperties}) { + return ( + + + + + ) +} diff --git a/src/renderer/components/svgs/icons/ninety-dregree-icon.component.tsx b/src/renderer/components/svgs/icons/ninety-dregree-icon.component.tsx new file mode 100644 index 00000000..02d3018c --- /dev/null +++ b/src/renderer/components/svgs/icons/ninety-dregree-icon.component.tsx @@ -0,0 +1,12 @@ +import { CSSProperties } from 'react' + +export function NinetyDregreeIcon(props: {className?: string, style?: CSSProperties}) { + return ( + + + + + + + ) +} diff --git a/src/renderer/components/svgs/icons/no-arrow-icon.component.tsx b/src/renderer/components/svgs/icons/no-arrow-icon.component.tsx new file mode 100644 index 00000000..14122984 --- /dev/null +++ b/src/renderer/components/svgs/icons/no-arrow-icon.component.tsx @@ -0,0 +1,9 @@ +import { CSSProperties } from 'react' + +export function NoArrowIcon(props: {className?: string, style?: CSSProperties}) { + return ( + + + + ) +} diff --git a/src/renderer/components/svgs/icons/one-saber-icon.component.tsx b/src/renderer/components/svgs/icons/one-saber-icon.component.tsx new file mode 100644 index 00000000..400ac17e --- /dev/null +++ b/src/renderer/components/svgs/icons/one-saber-icon.component.tsx @@ -0,0 +1,9 @@ +import { CSSProperties } from "react"; + +export function OneSaberIcon(props: {className?: string, style?: CSSProperties}) { + return ( + + + + ) +} diff --git a/src/renderer/components/svgs/icons/pause-icon.component.tsx b/src/renderer/components/svgs/icons/pause-icon.component.tsx new file mode 100644 index 00000000..d2d30e08 --- /dev/null +++ b/src/renderer/components/svgs/icons/pause-icon.component.tsx @@ -0,0 +1,9 @@ +import { CSSProperties } from "react"; + +export function PauseIcon(props: {className?: string, style?: CSSProperties}) { + return ( + + + + ) +} diff --git a/src/renderer/components/svgs/icons/three-sixty-degree-icon.component.tsx b/src/renderer/components/svgs/icons/three-sixty-degree-icon.component.tsx new file mode 100644 index 00000000..6cc4b438 --- /dev/null +++ b/src/renderer/components/svgs/icons/three-sixty-degree-icon.component.tsx @@ -0,0 +1,13 @@ +import { CSSProperties } from "react"; + +export function ThreeSixtyDegreeIcon(props: {className?: string, style?: CSSProperties}) { + return ( + + + + + + + + ) +} diff --git a/src/renderer/components/svgs/icons/thumb-up-fill-icon.component.tsx b/src/renderer/components/svgs/icons/thumb-up-fill-icon.component.tsx new file mode 100644 index 00000000..468fb897 --- /dev/null +++ b/src/renderer/components/svgs/icons/thumb-up-fill-icon.component.tsx @@ -0,0 +1,9 @@ +import { CSSProperties } from "react"; + +export function ThumbUpFillIcon(props: {className?: string, style?: CSSProperties}) { + return ( + + + + ) +} diff --git a/src/renderer/components/svgs/icons/timer-fill.component.tsx b/src/renderer/components/svgs/icons/timer-fill.component.tsx new file mode 100644 index 00000000..b22014ad --- /dev/null +++ b/src/renderer/components/svgs/icons/timer-fill.component.tsx @@ -0,0 +1,9 @@ +import { CSSProperties } from "react"; + +export function TimerFillIcon(props: {className?: string, style?: CSSProperties}) { + return ( + + + + ) +} diff --git a/src/shared/models/maps/raw-map.model.ts b/src/shared/models/maps/raw-map.model.ts index 2d48b7eb..16172e92 100644 --- a/src/shared/models/maps/raw-map.model.ts +++ b/src/shared/models/maps/raw-map.model.ts @@ -30,5 +30,10 @@ export interface RawMapDifficulty { _difficultyRank: string, _beatmapFilename: string, _noteJumpMovementSpeed: number, - _noteJumpStartBeatOffset: number + _noteJumpStartBeatOffset: number, + _customData?: RawMapDifficultyCustomData +} + +export interface RawMapDifficultyCustomData { + _difficultyLabel?: string } \ No newline at end of file