From d39482aadcb011bde71961ae781461c31e413f81 Mon Sep 17 00:00:00 2001 From: sigonasr2 Date: Mon, 28 Sep 2020 13:22:21 -0500 Subject: [PATCH] Add in navigation / back to top of page button --- frontend/package-lock.json | 8 + frontend/package.json | 1 + frontend/src/App.css | 22 +++ frontend/src/App.js | 371 ++++++++++++++++++++++++++++++++----- frontend/src/setupProxy.js | 35 ++++ 5 files changed, 392 insertions(+), 45 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 022c054..3e659ea 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10849,6 +10849,14 @@ "tiny-warning": "^1.0.0" } }, + "react-router-hash-link": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/react-router-hash-link/-/react-router-hash-link-2.1.0.tgz", + "integrity": "sha512-U/WizkZwV2IoxLScRJX5CHJWreXjv/kCmjT/LpfYiFdXGnrKgPd0KqcA4KfmQbkwO411OwDmUKKz+bOKoMkzKg==", + "requires": { + "prop-types": "^15.6.0" + } + }, "react-scripts": { "version": "3.4.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index 068fd99..9ba8b61 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -14,6 +14,7 @@ "react-bootstrap": "^1.3.0", "react-dom": "^16.13.1", "react-router-dom": "^5.2.0", + "react-router-hash-link": "^2.1.0", "react-scripts": "3.4.1" }, "scripts": { diff --git a/frontend/src/App.css b/frontend/src/App.css index 9cc3ac2..f9cb968 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -93,6 +93,28 @@ body { 0 0 8px #999 } +.superglow{ + color: #eee; + text-shadow: + 0 0 1px #999, + 0 0 2px #999, + 0 0 4px #999, + 0 0 8px #fff +} + + +h1.superglow{ + font-size:6vw; + font-weight: bold; + background-color:rgba(1,1,1,0.6); +} + +p.superglow{ + font-size:1.5vw; + font-weight: bold; + background-color:rgba(1,1,1,0.6); +} + .nostyle{ color: #333; } diff --git a/frontend/src/App.js b/frontend/src/App.js index bb7c5b3..594ccd5 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -5,17 +5,23 @@ import { BrowserRouter as Router, Switch, Route, - Link, + Redirect, useRouteMatch, useParams, - useHistory + useHistory, + useLocation } from "react-router-dom"; +import { HashLink as Link } from 'react-router-hash-link'; + import { Modal, Button, Form, - Badge + Badge, + Card, + Spinner, + Carousel } from "react-bootstrap"; const REMOTE_ADDR = "http://45.33.13.215:4502"; @@ -64,6 +70,26 @@ var IMAGE_TABLET=(p)=>{ ) } +var IMAGE_CHECKMARK=(p)=>{ + return ( + + + ) +} +var IMAGE_X=(p)=>{ + return ( + + + + ) +} +var IMAGE_ARROWUP=(p)=>{ + return ( + + + + ) +} var IMAGE_MIXMODE=(p)=>{ return( @@ -688,6 +714,7 @@ function LoadMore(p) { var [loading,setLoading] = useState(false) var [visible,setVisible] = useState(false) var [update,setUpdate] = useState(false) + var [reloadLoadMore,setReloadLoadMore] = useState(false) const firstUpdate = useRef(true); @@ -698,7 +725,7 @@ function LoadMore(p) { setVisible(true) } }) - },[update,p.profileUpdate]) + },[update,p.profileUpdate,reloadLoadMore]) useEffect(()=>{ if (firstUpdate.current) { @@ -708,6 +735,7 @@ function LoadMore(p) { var obj = params obj.offset=p.params.offset setParams(obj) + setReloadLoadMore(!reloadLoadMore) },[p.profileUpdate,p.username]) function constructParams(params) { @@ -1140,6 +1168,7 @@ function Profile(p){ const firstUpdate = useRef(true); let history = useHistory(); + const location = useLocation(); function CalculateClear(easy,normal,hard,ex,exex,fcdata,pfcdata) { return <> @@ -1213,6 +1242,7 @@ function Profile(p){ + :<> } @@ -1469,7 +1499,7 @@ function Submit(p) {

Select a submission method

{false&&<>
- +
Manual Submit

Submit your plays by entering the clear % of a song

@@ -1479,7 +1509,7 @@ function Submit(p) {

}
- +
Image Upload

Upload images from your Playstation/Nintendo Switch for automatic processing/scoring!

@@ -1489,7 +1519,7 @@ function Submit(p) {

- +
Playstation/Nintendo Switch/Twitter Upload

Setup your account for uploading through Twitter using your Playstation or Nintendo Switch!

@@ -1497,6 +1527,26 @@ function Submit(p) {
+
+
+ +
+
Stream Monitoring
+

Stream Project Diva Future Tone through your Playstation 4 to submit records!

+

Specify your Twitch account and then start up a stream monitor that will watch your game as you play, recording your results.

+
+ +
+
+
+ +
+
DivaBot
+

Use your capture card / stream setup to monitor your game screen as you play.

+

This uses software developed by sigonasr2 that automatically records your results as you play.

+
+ +
@@ -1507,11 +1557,13 @@ function Submit(p) { function RecentPlays(p) { const [update,setUpdate] = useState(false) const [recentPlayData,setRecentPlayData] = useState([]) + var [modalsrc,setModalSrc] = useState({}) + var [modalVisible,setModalVisible] = useState(false); useEffect(()=>{ const interval = setInterval(()=>{ - axios.get("http://projectdivar.com/recentplays/sigonasr2") + axios.get("http://projectdivar.com/recentplays/"+p.username) .then((data)=>{ setRecentPlayData(data.data); }) @@ -1523,7 +1575,8 @@ function RecentPlays(p) { return ( <> - {recentPlayData.map((play,i)=>)} + + {recentPlayData.map((play,i)=>)} ) } @@ -1561,14 +1614,12 @@ function LoginInfo(p) { <> {loggedIn?<> Welcome, {username}!
- My Profile
- Edit Profile Settings
- My Stream Panel
- App Auth Code
- + My Profile
+ Edit Profile Settings
+ My Stream Panel
:<> - Login
- Register + Login
+ Register } ) @@ -1584,7 +1635,7 @@ function Login(p) { let history = useHistory(); if (p.isLoggedIn) { - history.push("/") + return () } return ( @@ -1678,7 +1729,7 @@ function Register(p) { } Username - {setUsername(e.currentTarget.value)}} placeholder="MikuMiku" value={username} /> + {setUsername(e.currentTarget.value)}} placeholder="MikuMiku" value={username} /> Email Address @@ -1701,7 +1752,8 @@ function Register(p) {
} {message&&

{message}

} {error&&

{error}

} +
+ ) } @@ -1811,11 +1878,6 @@ function UserSettings(p) { function UserAuth(p) { const[showAuthCode,setShowAuthCode] = useState(false) const[authToken,setAuthToken] = useState("") - let history = useHistory(); - - if (!p.isLoggedIn) { - history.push("/") - } return(<> Your App Authentication Code is used for verifying your identity when using apps such as DivaBot. By clicking the {""} button, you understand that you should not share this code or show it to anyone! @@ -1908,12 +1970,113 @@ function DivaBot() { function StreamPanel(p) { const [update,setUpdate] = useState(false); + const [monitor,setMonitor] = useState("LOADING"); + const [image,setImage] = useState(<>); - return ( - <> - - - ) + let history = useHistory(); + + useEffect(()=>{ + //process.env.REACT_APP_FRONTEND_AUTH + const interval = setInterval(()=>{ + if (monitor==="LOADING"||monitor==="RUNNING") { + axios.post("/streaminfo/"+p.userSettings.id,{username:p.userSettings.username,authentication_token:localStorage.getItem("authToken")}) + .then((data)=>{ + if (data.data>=2) { + setMonitor("RUNNING") + setImage() + } else { + setMonitor("WAITING") + } + }) + } + },5000) + + return ()=>clearInterval(interval) + },[update,monitor]) + + if (!p.isLoggedIn) { + return () + } + + + if (p.userSettings.twitch_name!==undefined&&p.userSettings.twitch_name!==null&&p.userSettings.twitch_name.length>0) { + return ( + <> + This panel is used to monitor score submissions as you play and to monitor a Playstation 4 stream of Project Diva Future Tone. Read the instructions below before using this tool for the first time to properly set it up. + +

Stream Monitor: + {monitor==="RUNNING"?Online: + monitor==="LOADING"?Pending: + Offline}

+ {monitor==="WAITING"? + :monitor==="LOADING"? + : +
+
+ +
+
+ {image} +
+
+ +
+
+ } + +

Prerequisite

+ If you haven't done so already, setup your PS4 for Twitch Streaming. +

Step 1

+
+
+ While on the game's Main Menu, select the SHARE button on your PS4. +
+
+

Step 2

+
+
+ Setup your broadcasting settings and make sure you select 720p - High (60fps) for best results. (Selecting a lower resolution will likely not work) +
+
+ +
+
+

Step 3

+
+
+ Once you are broadcasting on PS4, click the Start Stream Monitor button and let it calibrate your screen. +
+
+

Step 4

+
+
+ If the calibration looks good, then start playing! Otherwise stop the stream monitor, make sure you are on the main menu, then try starting it again. + After each song, if you want the score to submit, make sure you are on the Result screen for a second. (You don't have to wait for it to pop up on the scores list unless you really want to make sure) +
+
+
+

Video

+
+
+ Alternatively, I explain how to use this feature in the below video: + {} +
+
+ + ) + } else { + return ( + <> + You will need to go to your Profile Settings and update your Twitch username before using this feature. + + ) + } } function StreamData() { @@ -1961,13 +2124,14 @@ function Website() {

Menu



- Rankings
- Submit Scores
- DivaBot
+ Rankings
+ Submit Scores
+ DivaBot
+
@@ -1989,14 +2153,6 @@ function Website() {

DivaBot

 - -

App Authentication Token

- - - -

Project DivaR

- -

Login to Project DivaR

@@ -2007,7 +2163,7 @@ function Website() {

Stream Panel

- +

Stream

@@ -2015,7 +2171,132 @@ function Website() {

Project DivaR

- Under construction! + Welcome! This website is here to store and track all your Project Diva records for yours and others' enjoyment! +
+ + + First slide + +

Project Diva Records

+

A home for all your best plays.

+ + + + Third slide + + +

Statistics

+

Keep track of your all-time stats.

+ + + + Third slide + + +

Progression Tracking

+

Watch as you improve and become greater over time.

+ + + + Third slide + + +

Many Ways to Submit

+

Submit your scores by screenshots, Twitter, DivaBot, or streaming.

+ + + +
+
+

Support

+ +
+
+
+ +
Project Diva Megamix
+
+
+ Image Submission: +
+
+ Twitter: +
+
+ DivaBot: +
+
+ Manual: +
+
+
+
+
+
+
+
+ +
Project Diva Megamix Mix Mode
+
+
+ Image Submission: +
+
+ Twitter: +
+
+ DivaBot: +
+
+ Manual: +
+
+
+
+
+
+
+
+ +
Project Diva Future Tone
+
+
+ Image Submission: +
+
+ Twitter: +
+
+ DivaBot: +
+
+ Stream Monitor: +
+
+ Manual: +
+
+
+
+
+
diff --git a/frontend/src/setupProxy.js b/frontend/src/setupProxy.js index 37a72f5..596773d 100644 --- a/frontend/src/setupProxy.js +++ b/frontend/src/setupProxy.js @@ -1,6 +1,41 @@ const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { + app.use( + "/recalculatePlayerData/:id", + createProxyMiddleware({ + target: 'http://server:4501', + changeOrigin: true, + }) + ); + app.use( + "/streamtop/:id", + createProxyMiddleware({ + target: 'http://server:4501', + changeOrigin: true, + }) + ); + app.use( + "/streamkill/:id", + createProxyMiddleware({ + target: 'http://server:4501', + changeOrigin: true, + }) + ); + app.use( + "/streamstart/:id", + createProxyMiddleware({ + target: 'http://server:4501', + changeOrigin: true, + }) + ); + app.use( + "/streaminfo/:id", + createProxyMiddleware({ + target: 'http://server:4501', + changeOrigin: true, + }) + ); app.use( "/updates/:userid", createProxyMiddleware({