From 5ba670505b5d82f2d7bcb3c0c8fab76235920185 Mon Sep 17 00:00:00 2001 From: MathieuG-P <40181755+Zagrios@users.noreply.github.com> Date: Mon, 14 Nov 2022 00:24:43 +0100 Subject: [PATCH] add info and optimize rendering --- package-lock.json | 33 ++++--- package.json | 1 + .../map-item.component.tsx | 96 +++++++++++++------ 3 files changed, 87 insertions(+), 43 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7603da69..233a2bc8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1713,7 +1713,7 @@ }, "@types/plist": { "version": "3.0.2", - "resolved": "https://registry.npmjs.org/@types%2fplist/-/plist-3.0.2.tgz", + "resolved": "https://registry.npmjs.org/@types/plist/-/plist-3.0.2.tgz", "integrity": "sha512-ULqvZNGMv0zRFvqn8/4LSPtnmN4MfhlPNtJCTpKuIIxGVGZ2rYWzFXrvEBoh9CVyqSE7D6YFRJ1hydLHI6kbWw==", "dev": true, "optional": true, @@ -1878,7 +1878,7 @@ }, "@types/verror": { "version": "1.10.6", - "resolved": "https://registry.npmjs.org/@types%2fverror/-/verror-1.10.6.tgz", + "resolved": "https://registry.npmjs.org/@types/verror/-/verror-1.10.6.tgz", "integrity": "sha512-NNm+gdePAX1VGvPcGZCDKQZKYSiAWigKhKaz5KF94hG6f2s8de9Ow5+7AbXoeKxL8gavZfk4UquSAygOF2duEQ==", "dev": true, "optional": true @@ -2721,7 +2721,7 @@ "assert-plus": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz", - "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=", + "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==", "dev": true, "optional": true }, @@ -3146,13 +3146,13 @@ "buffer-equal": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/buffer-equal/-/buffer-equal-1.0.0.tgz", - "integrity": "sha1-WWFrSYME1Var1GaWayLu2j7KX74=", + "integrity": "sha512-tcBWO2Dl4e7Asr9hTGcpVrCe+F7DubpmqWCTbj4FHLmjqO2hIaC383acQubWtRJhdceqs5uBHs6Es+Sk//RKiQ==", "dev": true }, "buffer-fill": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/buffer-fill/-/buffer-fill-1.0.0.tgz", - "integrity": "sha1-+PeLdniYiO858gXNY39o5wISKyw=", + "integrity": "sha512-T7zexNBwiiaCOGDg9xNX9PBmjrubblRkENuptryuI64URkXDFum9il/JGL8Lm8wYfAXpredVXXZz7eMHilimiQ==", "dev": true }, "buffer-from": { @@ -3449,7 +3449,7 @@ "chromium-pickle-js": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/chromium-pickle-js/-/chromium-pickle-js-0.2.0.tgz", - "integrity": "sha1-BKEGZywYsIWrd02YPfo+oTjyIgU=", + "integrity": "sha512-1R5Fho+jBq0DDydt+/vHWj5KJNJCKdARKOCwZUen84I5BreWoLqRLANH1U87eJy1tiASPtMnGqJJq0ZsLoRPOw==", "dev": true }, "ci-info": { @@ -3615,7 +3615,7 @@ "colors": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/colors/-/colors-1.0.3.tgz", - "integrity": "sha1-BDP0TYCWgP3rYO0mDxsMJi6CpAs=", + "integrity": "sha512-pFGrxThWcWQ2MsAz6RtgeWe4NK2kUE1WfsrvvlctdII745EW9I0yflqhe7++M5LEc7bV2c/9/5zc8sFcpL0Drw==", "dev": true }, "combined-stream": { @@ -3642,7 +3642,7 @@ "compare-version": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/compare-version/-/compare-version-0.1.2.tgz", - "integrity": "sha1-AWLsLZNR9d3VmpICy6k1NmpyUIA=", + "integrity": "sha512-pJDh5/4wrEnXX/VWRZvruAGHkzKdr46z11OlTPN+VrATlWWhSKewNCJ1futCO5C7eJB3nPMFZA1LeYtcFboZ2A==", "dev": true }, "compress-brotli": { @@ -4440,7 +4440,7 @@ "commander": { "version": "2.9.0", "resolved": "https://registry.npmjs.org/commander/-/commander-2.9.0.tgz", - "integrity": "sha1-nJkJQXbhIkDLItbFFGCYQA/g99Q=", + "integrity": "sha512-bmkUukX8wAOjHdN26xj5c4ctEV22TQ7dQYhSmuckKhToXrkUn0iIaolHdIxYYqD55nhpSPA9zPQ1yP57GdXP2A==", "dev": true, "requires": { "graceful-readlink": ">= 1.0.0" @@ -4893,7 +4893,7 @@ "ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==", "dev": true } } @@ -6865,7 +6865,7 @@ "graceful-readlink": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz", - "integrity": "sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=", + "integrity": "sha512-8tLu60LgxF6XpdbK8OW3FA+IfTNBn1ZHGHKF4KQbEeSkajYw5PlYJcKluntgegDPTg8UkHjpet1T82vk6TQ68w==", "dev": true }, "grapheme-splitter": { @@ -12257,7 +12257,7 @@ "truncate-utf8-bytes": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/truncate-utf8-bytes/-/truncate-utf8-bytes-1.0.2.tgz", - "integrity": "sha1-QFkjkJWS1W94pYGENLC3hInKXys=", + "integrity": "sha512-95Pu1QXQvruGEhv62XCMO3Mm90GscOCClvrIUwCM0PYOXK3kaF3l3sIHxx71ThJfcbM2O5Au6SO3AWCSEfW4mQ==", "dev": true, "requires": { "utf8-byte-length": "^1.0.1" @@ -12558,6 +12558,11 @@ "prepend-http": "^2.0.0" } }, + "use-delayed-state": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-delayed-state/-/use-delayed-state-1.2.0.tgz", + "integrity": "sha512-i/7nyyHZsJ+2qGwbb9XGTViBDs43j/57pxdbhbyhTD6XNTzqCvaZQSfIa/SLAGR7eFPK9+UV62Dfzia/aYdwPw==" + }, "use-double-click": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/use-double-click/-/use-double-click-1.0.5.tgz", @@ -12566,7 +12571,7 @@ "utf8-byte-length": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/utf8-byte-length/-/utf8-byte-length-1.0.4.tgz", - "integrity": "sha1-9F8VDExm7uloGGUFq5P8u4rWv2E=", + "integrity": "sha512-4+wkEYLBbWxqTahEsWrhxepcoVOJ+1z5PGIjPZxRkytcdSUaNjIjBM7Xn8E+pdSuV7SzvWovBFA54FO0JSoqhA==", "dev": true }, "util-deprecate": { @@ -12635,7 +12640,7 @@ "core-util-is": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", - "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", + "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==", "dev": true, "optional": true } diff --git a/package.json b/package.json index 8f463d8b..64c14a28 100644 --- a/package.json +++ b/package.json @@ -248,6 +248,7 @@ "semver": "^7.3.8", "tailwind-scrollbar-hide": "^1.1.7", "tailwindcss-scoped-groups": "^2.0.0", + "use-delayed-state": "^1.2.0", "use-double-click": "^1.0.5", "uuid": "^9.0.0" }, 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 824e27a4..1e359c56 100644 --- a/src/renderer/components/maps-mangement-components/map-item.component.tsx +++ b/src/renderer/components/maps-mangement-components/map-item.component.tsx @@ -5,12 +5,14 @@ import { BsmLink } from "../shared/bsm-link.component"; import { BsmIcon } from "../svgs/bsm-icon.component"; import { BsmButton } from "../shared/bsm-button.component"; import { AnimatePresence, motion } from "framer-motion"; -import { useState } from "react"; +import { useState, Fragment } from "react"; import { LinkOpenerService } from "renderer/services/link-opener.service"; import dateFormat from "dateformat"; import { AudioPlayerService } from "renderer/services/audio-player.service"; import { useObservable } from "renderer/hooks/use-observable.hook"; import { map } from "rxjs/operators"; +import useDelayedState from "use-delayed-state"; +import { v4 as uuidv4 } from 'uuid'; export type ParsedMapDiff = {type: BsvMapDifficultyType, name: string, stars: number} @@ -42,8 +44,8 @@ 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 [bottomBarHovered, setBottomBarHovered, cancelBottomBarHovered] = useDelayedState(false); + const [diffsPanelHovered, setDiffsPanelHovered] = useState(false); const songPlaying = useObservable(audioPlayer.playing$.pipe(map(playing => playing && audioPlayer.src === songUrl))); @@ -59,9 +61,12 @@ export function MapItem({hash, title, autor, songAutor, coverUrl, songUrl, autor const date = new Date(0); date.setSeconds(duration); return duration > 3600 ? dateFormat(date, "h:MM:ss") : dateFormat(date, "MM:ss"); - })() + })(); - console.log(bottomBarHovered, diffsPanelHovered); + const parseDiffLabel = (diffLabel: string) => { + if(diffLabel === "ExpertPlus"){ return "Expert+" } + return diffLabel; + } const openPreview = () => linkOpener.open(previewUrl, true); const copyBsr = () => navigator.clipboard.writeText(`!bsr ${mapId}`); @@ -75,6 +80,20 @@ export function MapItem({hash, title, autor, songAutor, coverUrl, songUrl, autor audioPlayer.play(songUrl, bpm); } + const bottomBarHoverStart = () => { + cancelBottomBarHovered(); + setBottomBarHovered(true, (diffsPanelHovered || bottomBarHovered) ? 0 : 300); + } + + const bottomBarHoverEnd = () => { + cancelBottomBarHovered(); + setBottomBarHovered(false, 100); + } + + const diffsPanelHoverStart = () => setDiffsPanelHovered(true); + const diffsPanelHoverEnd = () => setDiffsPanelHovered(false); + + const renderDiffPreview = () => { const diffSets = Array.from(diffs.entries()); @@ -87,7 +106,7 @@ export function MapItem({hash, title, autor, songAutor, coverUrl, songUrl, autor
{diffSet.map(diff => ( - + ))}
@@ -95,35 +114,52 @@ export function MapItem({hash, title, autor, songAutor, coverUrl, songUrl, autor } if(diffSets.length > 1){ return diffSets.map(([diffType, diffSet]) => ( - <> + {diffSet.length} - + )); } } - - console.log(coverUrl); return ( - setHovered(true)} onHoverEnd={() => setHovered(false)} style={{zIndex: (bottomBarHovered || diffsPanelHovered) && 5}}> + setHovered(true)} onHoverEnd={() => setHovered(false)} style={{zIndex: hovered && 5}}> {(diffsPanelHovered || bottomBarHovered) && ( - setDiffsPanelHoverd(true)} onHoverEnd={() => setDiffsPanelHoverd(false)}> - aaeaze
azeaze - + + {Array.from(diffs.entries()).map(([charac, diffSet]) => ( +
    + {diffSet.map(({type, name, stars}) => ( +
  1. + + + { + stars ? ( + ★ {stars} + ) : ( + {parseDiffLabel(type)} + ) + } + + {parseDiffLabel(name)} +
    2. + ))} +
+ ))} + )}
-
+
{e.stopPropagation(); toogleMusic()}}>
-
+
+
-

{title}

+

{title}

par {songAutor}

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

@@ -146,35 +182,37 @@ export function MapItem({hash, title, autor, songAutor, coverUrl, songUrl, autor
)}
- setBottomBarHovered(true)} onHoverEnd={() => setBottomBarHovered(false)}> -
- classée -
+ + {ranked && ( +
+ classée +
+ )}
{renderDiffPreview()}
- +
-
+
{onDelete && {e.stopPropagation(); openPreview()}}/>} {e.stopPropagation(); openPreview()}}/> {mapId && {e.stopPropagation(); copyBsr()}}/>}
- +
) } const diffColors: Record = { - Easy: "#008055", - Normal: "#1268a1", - Hard: "#bd5500", - Expert: "#b52a1c", - ExpertPlus: "#7646af" + Easy: "#00FF9E", + Normal: "#00FFFF", + Hard: "#FFA700", + Expert: "#FF4319", + ExpertPlus: "#FF7EFF" }