From 34afee1623b8793b3c71f5047aacec71d8202475 Mon Sep 17 00:00:00 2001 From: sigonasr2 Date: Wed, 19 Aug 2020 06:54:34 -0500 Subject: [PATCH] Implement screenshot display functionality --- frontend/package-lock.json | 152 +++++++++++++++++++++++++++++++++++++ frontend/package.json | 1 + frontend/src/App.css | 13 ++++ frontend/src/App.js | 116 +++++++++++++++++++++------- 4 files changed, 256 insertions(+), 26 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index c3cf229..dc6cd5b 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -1356,6 +1356,25 @@ "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz", "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==" }, + "@popperjs/core": { + "version": "2.4.4", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.4.4.tgz", + "integrity": "sha512-1oO6+dN5kdIA3sKPZhRGJTfGVP4SWV6KqlMOwry4J3HfyD68sl/3KmG7DeYUzvN+RbhXDnv/D8vNNB8168tAMg==" + }, + "@restart/context": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz", + "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q==" + }, + "@restart/hooks": { + "version": "0.3.25", + "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.25.tgz", + "integrity": "sha512-m2v3N5pxTsIiSH74/sb1yW8D9RxkJidGW+5Mfwn/lHb2QzhZNlaU1su7abSyT9EGf0xS/0waLjrf7/XxQHUk7w==", + "requires": { + "lodash": "^4.17.15", + "lodash-es": "^4.17.15" + } + }, "@sheerun/mutationobserver-shim": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz", @@ -1637,6 +1656,11 @@ "@babel/types": "^7.3.0" } }, + "@types/classnames": { + "version": "2.2.10", + "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.10.tgz", + "integrity": "sha512-1UzDldn9GfYYEsWWnn/P4wkTlkZDH7lDb0wBMGbtIQc9zXEQq7FlKBdZUn6OBqD8sKZZ2RQO2mAjGpXiDGoRmQ==" + }, "@types/color-name": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz", @@ -1664,6 +1688,11 @@ "@types/node": "*" } }, + "@types/invariant": { + "version": "2.2.33", + "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.33.tgz", + "integrity": "sha512-/jUNmS8d4bCKdqslfxW6dg/9Gksfzxz67IYfqApHn+HvHlMVXwYv2zpTDnS/yaK9BB0i0GlBTaYci0EFE62Hmw==" + }, "@types/istanbul-lib-coverage": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz", @@ -1733,6 +1762,14 @@ "@types/react": "*" } }, + "@types/react-transition-group": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz", + "integrity": "sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==", + "requires": { + "@types/react": "*" + } + }, "@types/stack-utils": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz", @@ -1832,6 +1869,11 @@ } } }, + "@types/warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz", + "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI=" + }, "@types/yargs": { "version": "13.0.9", "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz", @@ -3490,6 +3532,11 @@ } } }, + "classnames": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", + "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + }, "clean-css": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz", @@ -4530,6 +4577,22 @@ "utila": "~0.4" } }, + "dom-helpers": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz", + "integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==", + "requires": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + }, + "dependencies": { + "csstype": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.2.tgz", + "integrity": "sha512-ofovWglpqoqbfLNOTBNZLSbMuGrblAf1efvvArGKOZMBrIoJeu5UsAipQolkijtyQx5MtAzT/J9IHj/CEY1mJw==" + } + } + }, "dom-serializer": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz", @@ -7971,6 +8034,11 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz", "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==" }, + "lodash-es": { + "version": "4.17.15", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz", + "integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==" + }, "lodash._reinterpolate": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz", @@ -10275,6 +10343,15 @@ "react-is": "^16.8.1" } }, + "prop-types-extra": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz", + "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==", + "requires": { + "react-is": "^16.3.2", + "warning": "^4.0.0" + } + }, "proxy-addr": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz", @@ -10454,6 +10531,31 @@ "whatwg-fetch": "^3.0.0" } }, + "react-bootstrap": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.3.0.tgz", + "integrity": "sha512-GYj0c6FO9mx7DaO8Xyz2zs0IcQ6CGCtM3O6/feIoCaG4N8B0+l4eqL7stlMcLpqO4d8NG2PoMO/AbUOD+MO7mg==", + "requires": { + "@babel/runtime": "^7.4.2", + "@restart/context": "^2.1.4", + "@restart/hooks": "^0.3.21", + "@types/classnames": "^2.2.10", + "@types/invariant": "^2.2.33", + "@types/prop-types": "^15.7.3", + "@types/react": "^16.9.35", + "@types/react-transition-group": "^4.4.0", + "@types/warning": "^3.0.0", + "classnames": "^2.2.6", + "dom-helpers": "^5.1.2", + "invariant": "^2.2.4", + "prop-types": "^15.7.2", + "prop-types-extra": "^1.1.0", + "react-overlays": "^4.1.0", + "react-transition-group": "^4.4.1", + "uncontrollable": "^7.0.0", + "warning": "^4.0.3" + } + }, "react-dev-utils": { "version": "10.2.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.1.tgz", @@ -10676,6 +10778,26 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, + "react-overlays": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-4.1.0.tgz", + "integrity": "sha512-vdRpnKe0ckWOOD9uWdqykLUPHLPndIiUV7XfEKsi5008xiyHCfL8bxsx4LbMrfnxW1LzRthLyfy50XYRFNQqqw==", + "requires": { + "@babel/runtime": "^7.4.5", + "@popperjs/core": "^2.0.0", + "@restart/hooks": "^0.3.12", + "@types/warning": "^3.0.0", + "dom-helpers": "^5.1.0", + "prop-types": "^15.7.2", + "uncontrollable": "^7.0.0", + "warning": "^4.0.3" + } + }, "react-router": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz", @@ -10782,6 +10904,17 @@ "workbox-webpack-plugin": "4.3.1" } }, + "react-transition-group": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz", + "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==", + "requires": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + } + }, "read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", @@ -12674,6 +12807,17 @@ "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" }, + "uncontrollable": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.1.1.tgz", + "integrity": "sha512-EcPYhot3uWTS3w00R32R2+vS8Vr53tttrvMj/yA1uYRhf8hbTG2GyugGqWDY0qIskxn0uTTojVd6wPYW9ZEf8Q==", + "requires": { + "@babel/runtime": "^7.6.3", + "@types/react": "^16.9.11", + "invariant": "^2.2.4", + "react-lifecycles-compat": "^3.0.4" + } + }, "unicode-canonical-property-names-ecmascript": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz", @@ -12965,6 +13109,14 @@ "makeerror": "1.0.x" } }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "watchpack": { "version": "1.7.2", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.2.tgz", diff --git a/frontend/package.json b/frontend/package.json index 45c21f8..f8d5b59 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -10,6 +10,7 @@ "axios": "^0.19.2", "http-proxy-middleware": "^1.0.5", "react": "^16.13.1", + "react-bootstrap": "^1.3.0", "react-dom": "^16.13.1", "react-router-dom": "^5.2.0", "react-scripts": "3.4.1" diff --git a/frontend/src/App.css b/frontend/src/App.css index 6ec4dc6..9cc3ac2 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -4,6 +4,14 @@ badge-success {hard} badge-warning {ex} badge-danger {exex}*/ +.zoomin:hover{ + cursor:zoom-in; +} + +.zoomout:hover{ + cursor:zoom-out; +} + .centered{ } @@ -107,6 +115,11 @@ body { bottom: 0; } +.background-songs-click:hover{ + background-color:#aaf; + cursor:pointer; +} + .background-songs{ background-color:#eef; } diff --git a/frontend/src/App.js b/frontend/src/App.js index ddfd98b..9252b3a 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -11,10 +11,24 @@ import { useHistory } from "react-router-dom"; +import { + Modal, + Button +} from "react-bootstrap"; + const REMOTE_ADDR = "http://45.33.13.215:4502"; const axios = require('axios'); +var IMAGE_CAMERA=(p)=>{ + return( + + + + + ) +} + var RATING_cool=new Image(); RATING_cool.src="data:image/png;base64,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" var RATING_fine=new Image(); @@ -301,6 +315,31 @@ function Difficulty(p) { ); } +function ImageDisplayer(p) { + var [zoom,setZoom] = useState(false) + + //p.play + return( + {p.setModalVisible(false)}} + > + {(p.play!==undefined&&p.songs[p.play.songid])?<> + + {`${p.username}'s ${p.songs[p.play.songid].name} Play - [${p.play.difficulty}] ${p.play.percent}%`} + + + + {setZoom(!zoom)}}/> + :<>} + + ) +} + function Play(p) { function GetModifiedDiff(name) { @@ -337,17 +376,18 @@ function Play(p) { if (p.mini) { return ( <> -
+
{p.setModalSrc(p.play) + p.setModalVisible(true)}:null}>
{Math.floor(p.play.score)} pts
{((p.play.fine==0&&p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?✪PFC:(p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?★FC:<>)}
{GetDateDisplay()}
-
+
-
+
{p.play.cool+"/"+p.play.fine+"/"+p.play.safe+"/"+p.play.sad+"/"+p.play.worst}
-
+
{(p.play.mod!==null&&p.play.mod.length>0)? @@ -357,12 +397,16 @@ function Play(p) {
{p.play.percent}%
+
+ {(p.play.src)?:<>} +
-
+
{p.setModalSrc(p.play) + p.setModalVisible(true)}:null}>
{
{((p.play.fine==0&&p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?✪PFC:(p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?★FC:<>)}
}
@@ -372,8 +416,10 @@ function Play(p) { {p.play.cool+"/"+p.play.fine+"/"+p.play.safe+"/"+p.play.sad+"/"+p.play.worst}
- {p.play.percent}% + {p.play.percent}% {(p.play.mod!==null&&p.play.mod.length>0)?:<>} + + {(p.play.src)?:<>}
{GetDateDisplay(true)}
@@ -386,7 +432,8 @@ function Play(p) { } else { return ( <> -
+
{p.setModalSrc(p.play) + p.setModalVisible(true)}:null}> {(p.index!==undefined)?
{p.index+1}{((p.play.fine==0&&p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?✪PFC:(p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?★FC:<>)}
:<>}
{GetDateDiff()}
{Math.floor(p.play.score)} pts
@@ -438,7 +485,8 @@ function Play(p) { {p.play.sad}
-
{p.play.percent}%
+
{p.play.percent}% {(p.play.src)?{p.setModalSrc(p.play) + p.setModalVisible(true)}}/>:<>}
@@ -562,7 +610,7 @@ function BestPlaysPanel(p) { var content=
    {bestPlays.map((play,i)=>{return
  • - +
    • })}
@@ -660,7 +708,7 @@ function PlayData(p) {
Individual Plays for {p.song.name} from {p.username}
- {data.map((play,i)=>)} + {data.map((play,i)=>)}
@@ -697,7 +745,7 @@ function HoverSongName(p) { if ((p.song.report.ecount+p.song.report.ncount+p.song.report.hcount+p.song.report.excount+p.song.report.exexcount>0)) { if (toggle) { setExpand( - + ) window.scroll(0,cumulativeOffset(document.getElementById("songRow_"+p.song.name)).top-document.getElementById("songRow_"+p.song.name).getBoundingClientRect().height); } else { @@ -736,20 +784,11 @@ function CompletionPanel(p) { const [filter,setFilter] = useState({}) const [style,setStyle] = useState(true) const [update,setUpdate] = useState(false) - const [loadedCount,setLoadedCount] = useState(0) - const [scrollWindow,setScrollWindow] = useState(false) useEffect(()=>{ axios.get("http://projectdivar.com/completionreport/"+p.username) .then((data)=>{setReport(data.data)}) .catch((err)=>{console.log(err.message)}) },[update]) - - useEffect(()=>{ - console.log(loadedCount) - if (p.songs.length===loadedCount) { - setScrollWindow(true) - } - },[loadedCount]) return ( <> @@ -778,7 +817,7 @@ function CompletionPanel(p) { - {report.filter((report)=>Object.keys(filter).length==0||report.id in filter).map((song,i)=>{return + {report.filter((report)=>Object.keys(filter).length==0||report.id in filter).map((song,i)=>{return })} @@ -837,6 +876,8 @@ function Profile(p){ var [diffs,setDiffs] = useState({}); var [user,setUserData] = useState({}); var [render,setRender] = useState(false); + var [modalsrc,setModalSrc] = useState({}) + var [modalVisible,setModalVisible] = useState(false); function CalculateClear(easy,normal,hard,ex,exex,fcdata,pfcdata) { return <> @@ -867,12 +908,13 @@ function Profile(p){ return ( <> +

{username+"'s Profile"}

{(render)?<> - - + + :<> @@ -908,7 +950,7 @@ function Rankings(){ {users.map((user)=> - + {user.username} {user.last_played} @@ -1049,11 +1091,33 @@ function SongSearch(p) { } function SimpleUpload(p){ - const [song,setSong] = useState("Catch the Wave") + const [song,setSong] = useState("") + const [percentage,setPercentage] = useState("") return ( <> + {(song.length>0?<> + +
+
+ + { + if (!e.target.value.includes("%")) { + e.target.value+="%" + e.target.selectionStart=e.target.selectionEnd=e.target.value.length-1 + } + setPercentage(e.target.value)}} + required/> + + Input the % you got on the results screen. + +
+
+ :<>)} ) }