Added Best Plays panel, improved flex layout for small devices

frontend/public/index.html

@@ -17,9 +17,9 @@
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 	<link href="https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@300;400&display=swap" rel="stylesheet">
 	<link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@700&family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
-	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
+	<link rel="stylesheet" href="%PUBLIC_URL%/bootstrap.min.css">
-	<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
 	<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
+	<script src="%PUBLIC_URL%/bootstrap.min.js"></script>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

frontend/public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
+  "short_name": "Project DivaR",
-  "name": "Create React App Sample",
+  "name": "Project DivaR Web App",
   "icons": [
     {
       "src": "favicon.ico",
@@ -19,7 +19,7 @@
     }
   ],
   "start_url": ".",
-  "display": "standalone",
+  "display": "minimal-ui",
-  "theme_color": "#000000",
+  "theme_color": "#00eeff",
   "background_color": "#ffffff"
 }

frontend/src/App.css

@@ -5,11 +5,11 @@ body {
     height: 100%;
     margin: 0;
     background-repeat: no-repeat;
-    background-attachment: fixed;
+	background: rgb(251,251,251);
-background: rgb(251,251,251);
+	background: linear-gradient(180deg, rgba(251,251,251,1) 0%, rgba(240,255,255,1) 82%, rgba(185,255,255,1) 89%, rgba(64,185,183,1) 100%);
-background: linear-gradient(180deg, rgba(251,251,251,1) 0%, rgba(240,255,255,1) 82%, rgba(185,255,255,1) 89%, rgba(64,185,183,1) 100%);
 	background-repeat: no-repeat;
 	background-size: 100% 100%;
+    background-attachment: fixed;
 	font-family: 'M PLUS 1p', sans-serif;
 	  color: #333;
 	  text-shadow:
@@ -19,6 +19,15 @@ background: linear-gradient(180deg, rgba(251,251,251,1) 0%, rgba(240,255,255,1)
 		0 0 8px #999
 }
 
+.numbers{
+	font-size:18px;
+}
+
+.scaled-text{
+	font-size: 16px;
+    font-size: 1vw;
+}
+
 .homelink:hover{
 	background-color:#aaa;
 	cursor:pointer;
@@ -39,7 +48,23 @@ background: linear-gradient(180deg, rgba(251,251,251,1) 0%, rgba(240,255,255,1)
 }
 
 .content{
-	background:#f0f0ff;
+	/*background:#f0f0ff;*/
+}
+
+span.fc{
+	border: 0px;
+	background: #9cbf00;
+}
+
+span.pfc{
+	border: 0px;
+	color: #FFF;
+	background: #bf3900;
+}
+
+.fc{
+	/*border: 1px solid #0000ff;
+	background: #defabb;*/
 }
 
 .title{

frontend/src/setupProxy.js

@@ -1,6 +1,20 @@
 const { createProxyMiddleware } = require('http-proxy-middleware');
 
 module.exports = function(app) {
+	app.use(
+	"/songs",
+	createProxyMiddleware({
+	  target: 'http://server:4501',
+	  changeOrigin: true,
+	})
+  );
+	app.use(
+	"/bestplays/:username",
+	createProxyMiddleware({
+	  target: 'http://server:4501',
+	  changeOrigin: true,
+	})
+  );
   app.use(
 	"/image",
 	createProxyMiddleware({

server/app.js

@@ -52,6 +52,30 @@ app.get('/song/:songname', (req, res) => {
     })
 })
 
+app.get('/songs', (req, res) => {
+    db.query('select songs.*,songdata.rating as rating,songdata.difficulty from songs left join songdata on songs.id=songdata.songid' , (error, results) => {
+      if (error) {
+		res.status(500).json(error.message)
+      } else {
+		  //console.log(req.params.songname+":"+JSON.stringify(results.rows));
+		//res.status(200).json(results.rows)
+		var data = {}
+		results.rows.forEach((song)=>{
+			if (data[song.id]) {
+				if (typeof(data[song.id].rating)==="string"){
+					var oldRating = data[song.id].rating;
+					data[song.id].rating={}
+					data[song.id].rating[data[song.id].difficulty]=oldRating;
+				}
+				data[song.id].rating[song.difficulty]=song.rating;
+			} else {
+				data[song.id]=song
+			}})
+		res.status(200).json(data)
+	  }
+    })
+})
+
 app.post('/register', (req, res) => {
 	if (req.body && req.body.username &&
 req.body.username.length>2 && req.body.email) {
@@ -217,7 +241,7 @@ app.post('/submit', (req, res) => {
 		})
 		.then((data)=>{if(data && data.rows.length>0){songId=data.rows[0].id; return db.query('select rating from songdata where songid=$1 and difficulty=$2 limit 1',[songId,req.body.difficulty])}else{throw new Error("Could not find song.")}})
 		.then((data)=>{songRating=data.rows[0].rating;return db.query("select id from plays where userid=$1 and score>0 and difficulty=$2 and songid=$3 limit 1",[userId,req.body.difficulty,songId])})
-		.then((data)=>{if(data && data.rows.length>0){alreadyPassed=true;/*console.log(data);*/};var score=CalculateSongScore({rating:songRating,cool:req.body.cool,fine:req.body.fine,safe:req.body.safe,sad:req.body.sad,worst:req.body.worst,percent:req.body.percent,difficulty:req.body.difficulty,fail:fail});return db.query("insert into plays(songId,userId,difficulty,cool,fine,safe,sad,worst,percent,date,score,fail,mod,combo,gamescore) values($1,$2,$3,$4,$5,$6,$7,$8,$9,$10,$11,$12,$13,$14,$15) returning *",[songId,userId,req.body.difficulty,req.body.cool,req.body.fine,req.body.safe,req.body.sad,req.body.worst,req.body.percent,submitDate,score,fail,mod,combo,gameScore])})
+		.then((data)=>{if(data && data.rows.length>0){alreadyPassed=true;/*console.log(data);*/};var score=CalculateSongScore({rating:songRating,cool:req.body.cool,fine:req.body.fine,safe:req.body.safe,sad:req.body.sad,worst:req.body.worst,percent:req.body.percent,difficulty:req.body.difficulty,fail:fail});return db.query("insert into plays(songId,userId,difficulty,cool,fine,safe,sad,worst,percent,date,score,fail,mod,combo,gamescore,src) values($1,$2,$3,$4,$5,$6,$7,$8,$9,$10,$11,$12,$13,$14,$15,$16) returning *",[songId,userId,req.body.difficulty,req.body.cool,req.body.fine,req.body.safe,req.body.sad,req.body.worst,req.body.percent,submitDate,score,fail,mod,combo,gameScore,(req.body.src)?req.body.src:""])})
 		.then((data)=>{if(data && data.rows.length>0){
 			songsubmitdata = data.rows[0];
 			//console.log(alreadyPassed+" / "+typeof(alreadyPassed))
@@ -326,6 +350,16 @@ app.get('/recalculatescore/:playid',(req,res)=>{
 	.catch((err)=>res.status(500).json(err.message))
 })*/
 
+app.get('/bestplays/:username',(req,res)=>{
+	var songId=-1,userId=-1,songPromises=[],plays=[];
+	db.query('select id from users where username=$1 limit 1',[req.params.username])
+	.then((data)=>{if (data.rows.length>0){userId=data.rows[0].id;return db.query("select * from (select distinct on (songid) * from plays where userid=$1 "+((req.query.fails==="false")?"and score!=0":"")+" order by songid,score desc)t order by score desc;",[userId])}else{throw new Error("Cannot find user!")}})
+	.then((data)=>{
+		res.status(200).json(data.rows)
+	})
+	.catch((err)=>{res.status(500).json(err.message+JSON.stringify(req.body))})
+})
+
 app.get('/bestplay/:username/:songname/:difficulty',(req,res)=>{
 	var songId=-1,userId=-1;
 	db.query('select id from users where username=$1 limit 1',[req.params.username])