Merge remote-tracking branch 'origin/master' into changes

ProjectDivaR New Songs Instructions.txt

@@ -1,24 +0,0 @@
-Step 1: Obtain song title data from https://vocaloid.fandom.com/wiki/Hatsune_Miku:_Project_DIVA_Mega_Mix
-Step 2: Copy paste table into transformtable.js
-	2a: Remove the numbers.
-	2b: Replace tabs w/ ','
-	2c: Replace newlines w/ '],['
-	2d: Make any other minor corrections, need 4 args per array value
-Step 3: Run node transformtable.js
-Step 4: Apply SQL output to database table.
-Step 5: Create new entries for songData.sql
-Step 6: select name from songs order by id desc; <-- Run this query and grab the song names. Replace \n with ","
-Step 7: Set these songs under NEWSONGS array in DivaBot.
-Step 8: Play Hard Diff of songs.
-	8a: Press F1 in DivaBot on each song in song select to grab image barcode.
-	8b: Image capture results screen of the song. (Send later through twitter bot in order to process results screen barcodes)
-	8c: Label all the diff ratings in the songData.sql file once you unlock EX.
-	8d: Load those into the database.
-Step 9: Name images after songs and store captured images in imgParser/demo/resources.
-Step 10: Turn on REDO_COLOR_DATA for imgparser
-Step 11: Run the program, verify colordata is updated.
-Step 12: Turn off REDO_COLOR_DATA.
-Step 13: Upload new color data to the server imgParser. Restart server imgParser.
-Step 14: Add notecounts to songs as they are collected.
-Step 15: Collect BPM and album art data from https://108memo.jp/.
-	15a: Locally download album art to the server and store in files/album_art/XXX.jpg

frontend/src/App.css

@@ -4,21 +4,12 @@ badge-success {hard}
 badge-warning {ex}
 badge-danger {exex}*/
 
-.centered{
-}
-
 .link{
 	color:#66e;
 }
 
 .highest{
-	position:relative;
 	z-index:1000001;
-	background: #eef;
-}
-
-.below{
-	z-index:-1;
 }
 
 .display-tooltip{
@@ -94,16 +85,18 @@ body {
 	background: #eef;
 }
 
-.scrollingHeader{
+table th {
     position: -webkit-sticky; /* this is for all Safari (Desktop & iOS), not for Chrome*/
     position: sticky;
     top: 0;
+    z-index: 100000;
     background: #fff;
 }
-.scrollingFooter{
+#footer{
     position: -webkit-sticky; /* this is for all Safari (Desktop & iOS), not for Chrome*/
     position: sticky;
     bottom: 0;
+    z-index: 100000;
 }
 
 .background-songs{

frontend/src/App.js

@@ -336,7 +336,7 @@ function Play(p) {
 	if (p.mini) {
 		return (
 		<>
-			<div className="d-none d-md-block below">
+			<div className="d-none d-md-block">
 				<div className={((p.play.fine==0&&p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?"pfchighlight":(p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?"fchighlight":"")}>
 					<div className={"row align-middle"}>
 						<div className="col-md-2 order-1 order-md-1 text-center border-right align-middle text-nowrap overflow-hidden">{Math.floor(p.play.score)} pts<br/>{((p.play.fine==0&&p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?<span className="badge pfc">✪PFC</span>:(p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?<span className="badge fc">★FC</span>:<></>)}<Difficulty play={p.play} song={p.song}/></div>
@@ -656,7 +656,7 @@ function PlayData(p) {
 	
 	return (
 	<>
-		<div className="text-center background-songs below">
+		<div className="text-center background-songs">
 			<h5>Individual Plays for {p.song.name} from {p.username}</h5>
 			<div className="border rounded">
 				{data.map((play,i)=><Play key={i} play={play} mini={true} song={p.song}/>)}
@@ -674,21 +674,19 @@ function HoverSongName(p) {
 	return (
 		<>
 			<tr key={p.song.id} className="lighthover cursor" onClick={()=>{
-				if ((p.song.report.ecount+p.song.report.ncount+p.song.report.hcount+p.song.report.excount+p.song.report.exexcount>0)) {
+				if (!toggle) {
-					if (!toggle) {
+					setExpand(<tr className="fadein">
-						setExpand(<tr className="fadein">
+								<td colSpan="6"><PlayData song={p.song} username={p.username}/></td>
-									<td colSpan="6"><PlayData song={p.song} username={p.username}/></td>
+							</tr>)
-								</tr>)
+					setToggle(true)
-						setToggle(true)
+				} else {
-					} else {
+					setExpand(<></>)
-						setExpand(<></>)
+					setToggle(false)
-						setToggle(false)
-					}
 				}
 			}
 			}>
-				<td className="overflow-hidden">
+				<td>
-					{(p.song.report.ecount+p.song.report.ncount+p.song.report.hcount+p.song.report.excount+p.song.report.exexcount>0)?((toggle)?<>⯆</>:<>⯈</>):<></>} {name} <span className="tinytext">{(p.song.romanized_name.length>0)?<>{(p.song.romanized_name!==p.song.name)?<>{p.song.romanized_name}</>:<></>}</>:<>{(p.song.english_name!==p.song.name)?<>{p.song.english_name}</>:<></>}</>}</span>
+					{(toggle)?<>⯆</>:<>⯈</>} {name} <span className="tinytext">{(p.song.romanized_name.length>0)?<>{(p.song.romanized_name!==p.song.name)?<>{p.song.romanized_name}</>:<></>}</>:<>{(p.song.english_name!==p.song.name)?<>{p.song.english_name}</>:<></>}</>}</span>
 				</td>
 				<PlayDetail song={p.song}/>
 			</tr>
@@ -699,9 +697,6 @@ function HoverSongName(p) {
 
 function CompletionPanel(p) {
 	const [report,setReport] = useState([])
-	const [song,setSong] = useState("")
-	const [filter,setFilter] = useState({})
-	const [style,setStyle] = useState(true)
 	const [update,setUpdate] = useState(false)
 	useEffect(()=>{
 		axios.get("http://projectdivar.com/completionreport/"+p.username)
@@ -711,36 +706,35 @@ function CompletionPanel(p) {
 	
 	return (
 	<>
-		<SongSearch songs={p.songs} song={song} setSong={setSong} setStyle={setStyle} filteredSongs={filter} setFilteredSongs={setFilter}/>
 		<table className="table table-sm">
 			<thead>
 				<tr id="headerbar">
-					<th scope="col" className={(style)?"scrollingHeader":""}>
+					<th scope="col">
 						Song Name
 					</th>
-					<th className={(style)?"scrollingHeader":""}>
+					<th>
 						Ranking
 					</th>
-					<th className={(style)?"scrollingHeader":""}>
+					<th>
 						Score
 					</th>
-					<th className={(style)?"scrollingHeader":""}>
+					<th>
 						%
 					</th>
-					<th className={(style)?"scrollingHeader":""}>
+					<th>
 						Play Count
 					</th>
-					<th className={(style)?"scrollingHeader":""}>
+					<th>
 						Mods
 					</th>
 				</tr>
 			</thead>
 			<tbody>
-				{report.filter((report)=>Object.keys(filter).length==0||report.id in filter).map((song,i)=>{return <HoverSongName song={song} key={song.id} username={p.username}/>
+				{report.map((song,i)=>{return <HoverSongName song={song} key={song.id} username={p.username}/>
 				})}
 			</tbody>
 			<tfoot>
-			<tr><td colSpan="8" id="footer" className={(style)?"scrollingFooter":""}>
+			<tr><td colSpan="8" id="footer">
 				<span className="badge badge-primary">Easy</span> <span className="badge badge-info">Normal</span> <span className="badge badge-success">Hard</span> <span className="badge badge-warning">Extreme</span> <span className="badge badge-danger">Extra Extreme</span> <span className="badge badge-light">★ = FC</span>  <span className="badge badge-light">✪ = Perfect FCs</span>
 			</td></tr>
 			</tfoot>
@@ -953,53 +947,22 @@ function ImageUpload(p) {
 }
 
 function SongSearch(p) {
-	//Requires: p.songs / p.song / p.setSong / p.filteredSongs / p.setFilteredSongs
+	//Requires: p.song / p.setSong
 	const [song,setSong] = useState("")
 	const [focused,setFocused] = useState(false)
 	
-	useEffect(()=>{
-		if (p.setStyle) {
-			if (focused) {
-				p.setStyle(false)
-			} else {
-				p.setStyle(true)
-			}
-		}
-	},[focused])
-	
 	return (
 		<>
-			<input className="form-control form-control-lg" value={song} placeholder={"🔍 Search by Song,Artist,Vocaloid"} onKeyDown={(e)=>{if (e.key==="Enter") {setFocused(false);e.target.blur()}}}				onFocus={()=>{setFocused(true)}} onChange={(e)=>{
+			<input className="form-control form-control-lg" value={song} placeholder={p.song} onFocus={()=>{setFocused(true)}} onChange={(e)=>{
-				if (p.setFilteredSongs){p.setFilteredSongs({})}
 				setSong(e.target.value)
 			}
-			} onBlur={()=>{
-				setTimeout(()=>{setFocused(false)},250)
-			}
 			}/>
 			{(focused)?
-			<div className="overflow-auto rounded-lg" style={{background:"#eef",position:"absolute",width:"95%",height:"240px"}}>{
+			<div className="overflow-auto rounded-lg" style={{background:"#eef",position:"absolute",width:"95%",height:"240px"}}>{Object.keys(p.songs).filter((key)=>
-				Object.keys(p.songs).filter((key)=>
 				{
 					var s = p.songs[key]
 					return s.name.toLowerCase().includes(song.toLowerCase())||s.romanized_name.toLowerCase().includes(song.toLowerCase())||s.english_name.toLowerCase().includes(song.toLowerCase())||s.artist.toLowerCase().includes(song.toLowerCase())||s.vocaloid.toLowerCase().includes(song.toLowerCase())
-			}).map((key)=>{
+			}).map((key)=><div className="pb-1 homelink" onClick={()=>{setSong(p.songs[key].name);setFocused(false)}}><h4>{p.songs[key].name}</h4>{(p.songs[key].romanized_name)?p.songs[key].romanized_name:p.songs[key].english_name}</div>)}</div>:<></>}
-				if (p.setFilteredSongs&&p.filteredSongs) {
-					var obj = p.filteredSongs;
-					obj[key]=true
-					//console.log(obj)
-					p.setFilteredSongs(obj)
-				}
-				return <div key={key} className="pb-1 homelink highest" onClick={()=>{setSong(p.songs[key].name);p.setSong(p.songs[key].name);setFocused(false);if(p.setFilteredSongs&&p.filteredSongs){var obj={};obj[key]=true;p.setFilteredSongs(obj)}}}>
-			<div className="d-flex flex-row">
-			<div className="p-2">
-			<img className="centered" src={p.songs[key].album_art.replace("album_art","album_art/small")}/>
-			</div>
-			<div className="p-8">
-			<h4>{p.songs[key].name}</h4>{(p.songs[key].romanized_name)?p.songs[key].romanized_name:p.songs[key].english_name}
-			</div>
-			</div>
-			</div>})}</div>:<></>}
 			
 			More stuff goes here.
 		</>
@@ -1038,9 +1001,19 @@ function Submit(p) {
 						<div className="card">
 							<Link to="/submitplay/simple" className="nostyle">
 								<div className="card-body">
-									<h5 className="card-title">Manual Submit</h5>
+									<h5 className="card-title">Simple Submit</h5>
 									<p className="card-text">Submit your plays by entering the clear % of a song</p>
-									<p className="card-text"><small className="text-muted">The simplest way to submit plays, type in a %, tweak the other values quickly, then submit your play! Optionally include a screenshot.</small></p>
+									<p className="card-text"><small className="text-muted">The simplest way to submit plays, it won't be entirely accurate, but it lets you submit plays very quickly.</small></p>
+								</div>
+							</Link>
+						</div>
+						<br/>
+						<div className="card">
+							<Link to="/submitplay/detail" className="nostyle">
+								<div className="card-body">
+									<h5 className="card-title">Detailed Submit</h5>
+									<p className="card-text">Submit your plays by entering all the information about a play</p>
+									<p className="card-text"><small className="text-muted">You can submit as many songs as you like, but you will have to provide details for each play.</small></p>
 								</div>
 							</Link>
 						</div>

server/.env.twitter2

@@ -1 +0,0 @@
-AAAAAAAAAAAAAAAAAAAAACZYGAEAAAAAu6oiOCWgo9U5T2gsk4CMpZ0%2F3Zo%3DMFXWZJEERN4kE46B5BCx8XMwHAVhoB1KAx9lQnu4ehHbOGDssJ

server/.gitignore

@@ -1,2 +1,3 @@
 .env.twitter
-files
+.env.twitter2
+files/plays

server/app.js

@@ -370,7 +370,7 @@ app.get('/completionreport/:username',(req,res)=>{
 	.then ((data)=>{
 		if (data.rows.length>0) {
 			userId=data.rows[0].id;
-			return db.query('select * from songs order by id asc')
+			return db.query('select * from songs')
 		} else {
 			throw new Error("Cannot find user!")
 		}
@@ -709,9 +709,8 @@ var process_images = []
 var processPromises = []
 var largestId = 0
 var filterId = 0
-var MAX_INDEX = 12 //To prevent being rate-limited.
 
-function Process(data,ind){
+function Process(data){
 	for (var i in data.data.statuses) {
 		var tweet = data.data.statuses[i]
 		if (tweet.source && tweet.source.includes("Nintendo Switch Share")) {
@@ -725,21 +724,17 @@ function Process(data,ind){
 		}
 	}
 	//console.log(process_images)
-	if (data.data.search_metadata.next_results && ind<MAX_INDEX) {
+	if (data.data.search_metadata.next_results) {
 		return axios.get('https://api.twitter.com/1.1/search/tweets.json'+data.data.search_metadata.next_results, {
 			headers: {
 			/*BEARER*/	Authorization: 'Bearer '+process.env.TWITTER_BEARER  //the token is a variable which holds the token
 		}})
-		.then((data)=>{
+		.then((data)=>{return Process(data)})
-			//console.log("Going to next: "+(ind+1))
-			return Process(data,ind+1)})
 	}
 	return "Done!";
 }
 
-app.use('/files',express.static('files',{
+app.use('/files',express.static('files'))
- maxAge: 86400000 * 30
-}))
 
 /*
 axios.get('https://api.twitter.com/1.1/search/tweets.json?q=@divarbot', {
@@ -783,12 +778,11 @@ setInterval(
 }
 ,5000)
 
-
 setInterval(()=>{db.query("select * from twitter_bot limit 1")
 .then((data)=>{
 	largestId=filterId=data.rows[0].lastpost;
 	//console.log("Filter Id: "+filterId);
-	return axios.get('https://api.twitter.com/1.1/search/tweets.json?q=%23mega39s', {
+	return axios.get('https://api.twitter.com/1.1/search/tweets.json?q=@divarbot', {
 		headers: {
 			Authorization: 'Bearer '+process.env.TWITTER_BEARER  //the token is a variable which holds the token
 		}
@@ -798,8 +792,7 @@ setInterval(()=>{db.query("select * from twitter_bot limit 1")
 	//console.log(data.data.statuses)
 	//console.log(data.data)
 	//data.data.s
-	//console.log("Reading Twitter Data...")
+	return Process(data);
-	return Process(data,0);
 })
 .then((data)=>{
 	//console.log(process_images)
@@ -812,7 +805,6 @@ setInterval(()=>{db.query("select * from twitter_bot limit 1")
 		return db.query("select id from users where twitter=$1",[obj.user])
 		.then((data)=>{
 			if (data.rows.length>0) {
-				console.log("Process new play for User id "+data.rows[0].id+"...")
 				return db.query("insert into uploadedplays values($1,$2,$3)",[obj.image,data.rows[0].id,new Date()])
 				.then(()=>{resolve("Done!")})
 			} else {