sigonasr2/projectdivar
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update colors displayed around song frames for FC/PFCs

Browse Source
This commit is contained in:
sigonasr2 2020-08-12 20:28:50 -05:00
parent f2fa1aad51
commit e578f352cf
2 changed files with 60 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/App.css
View File

@ -23,6 +23,10 @@ badge-danger {exex}*/
top:-16px; top:-16px;
} }
.cursor:hover{
cursor:pointer;
}
.fadein{ .fadein{
animation-name: fadein; animation-name: fadein;
animation-duration: 1s; animation-duration: 1s;
@ -116,6 +120,27 @@ table th {
background-color:rgba(160,160,255,0.5); background-color:rgba(160,160,255,0.5);
} }
.fchighlight{
background: rgb(238,238,255);
background: linear-gradient(0deg, rgba(241,255,115,0) 0%, rgba(169,238,255,0.5) 25%, rgba(241,255,115,0) 100%);
}
.pfchighlight{
background: linear-gradient(0deg, rgba(241,255,115,0) 0%, rgba(255,230,180,0.5) 25%, rgba(241,255,115,0) 100%);
}
.pfc{
animation-name:colorchange;
animation-iteration-count: infinite;
animation-duration: 4s;
animation-direction: alternate;
}
@keyframes colorchange {
0% {background: rgba(160,18,18,1);}
100% {background: rgba(250,100,100,1);}
}
.tinytext{ .tinytext{
font-size:10px; font-size:10px;
/*z-index:-10000;*/ /*z-index:-10000;*/

66
frontend/src/App.js
View File

@ -337,41 +337,45 @@ function Play(p) {
return ( return (
<> <>
<div className="d-none d-md-block"> <div className="d-none d-md-block">
<div className={"row align-middle "+((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":"")}> <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="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> <div className={"row align-middle"}>
<div className="col-md-3 order-3 order-md-2 text-center border-right align-middle text-nowrap overflow-hidden">{GetDateDisplay()}</div> <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>
<div className="col-md-5 order-2 order-md-3"> <div className="col-md-3 order-3 order-md-2 text-center border-right align-middle text-nowrap overflow-hidden">{GetDateDisplay()}</div>
<div className="row"> <div className="col-md-5 order-2 order-md-3">
<div className="col-12 order-1 order-md-1 col-md-6 text-center"> <div className="row">
{p.play.cool+"/"+p.play.fine+"/"+p.play.safe+"/"+p.play.sad+"/"+p.play.worst} <div className="col-12 order-1 order-md-1 col-md-6 text-center">
</div> {p.play.cool+"/"+p.play.fine+"/"+p.play.safe+"/"+p.play.sad+"/"+p.play.worst}
<div className="col-6 order-3 order-md-2 col-md-3 text-left text-md-left"> </div>
{(p.play.mod!==null&&p.play.mod.length>0)? <div className="col-6 order-3 order-md-2 col-md-3 text-left text-md-left">
<ModDisplay side={true} badge={CalculateBadge(p.play.difficulty)} diff={GetModifiedDiff(p.play.difficulty)} {(p.play.mod!==null&&p.play.mod.length>0)?
hs={p.play.mod=="HS"?1:0} hd={p.play.mod=="HD"?1:0} sd={p.play.mod=="SD"?1:0}/> <ModDisplay side={true} badge={CalculateBadge(p.play.difficulty)} diff={GetModifiedDiff(p.play.difficulty)}
:<></> hs={p.play.mod=="HS"?1:0} hd={p.play.mod=="HD"?1:0} sd={p.play.mod=="SD"?1:0}/>
} :<></>
</div> }
<div className="col-6 order-2 order-md-3 col-md-3 text-right text-md-left"> </div>
<b>{p.play.percent}%</b> <div className="col-6 order-2 order-md-3 col-md-3 text-right text-md-left">
<b>{p.play.percent}%</b>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="d-block d-small d-md-none"> <div className="d-block d-small d-md-none">
{<div className="row"><div className="offset-4 col-4 text-center">{((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></div>} <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"> {<div className="row"><div className="offset-4 col-4 text-center">{((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></div>}
<div className="offset-2 col-4 text-center"> <div className="row">
{Math.floor(p.play.score)} pts <div className="offset-2 col-4 text-center">
<br/> {Math.floor(p.play.score)} pts
{p.play.cool+"/"+p.play.fine+"/"+p.play.safe+"/"+p.play.sad+"/"+p.play.worst} <br/>
</div> {p.play.cool+"/"+p.play.fine+"/"+p.play.safe+"/"+p.play.sad+"/"+p.play.worst}
<div className="col-4 text-center"> </div>
<b>{p.play.percent}%</b> <ModDisplay side={true} badge={CalculateBadge(p.play.difficulty)} diff={GetModifiedDiff(p.play.difficulty)} <div className="col-4 text-center">
hs={p.play.mod=="HS"?1:0} hd={p.play.mod=="HD"?1:0} sd={p.play.mod=="SD"?1:0}/> <b>{p.play.percent}%</b> <ModDisplay side={true} badge={CalculateBadge(p.play.difficulty)} diff={GetModifiedDiff(p.play.difficulty)}
<br/> hs={p.play.mod=="HS"?1:0} hd={p.play.mod=="HD"?1:0} sd={p.play.mod=="SD"?1:0}/>
{GetDateDisplay(true)} <br/>
{GetDateDisplay(true)}
</div>
</div> </div>
</div> </div>
</div> </div>
@ -381,7 +385,7 @@ function Play(p) {
} else { } else {
return ( return (
<> <>
<div className={"row align-middle "+((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":"")}> <div className={"row align-middle "+((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":"")}>
{(p.index!==undefined)?<div className=" col-md-1 text-center border-right align-middle text-nowrap overflow-hidden"><span className="d-none d-md-block">{p.index+1}</span>{((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>:<></>)}</div>:<></>} {(p.index!==undefined)?<div className=" col-md-1 text-center border-right align-middle text-nowrap overflow-hidden"><span className="d-none d-md-block">{p.index+1}</span>{((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>:<></>)}</div>:<></>}
<div className="col-md-3 text-center border-right align-middle text-nowrap overflow-hidden"><SongName song={p.song}/><span className="tinytime">{GetDateDiff()}</span></div> <div className="col-md-3 text-center border-right align-middle text-nowrap overflow-hidden"><SongName song={p.song}/><span className="tinytime">{GetDateDiff()}</span></div>
<div className="col-md-2 text-center border-right align-middle text-nowrap overflow-hidden">{Math.floor(p.play.score)} pts<br/><Difficulty play={p.play} song={p.song}/></div> <div className="col-md-2 text-center border-right align-middle text-nowrap overflow-hidden">{Math.floor(p.play.score)} pts<br/><Difficulty play={p.play} song={p.song}/></div>
@ -669,7 +673,7 @@ function HoverSongName(p) {
var [toggle,setToggle] = useState(false) var [toggle,setToggle] = useState(false)
return ( return (
<> <>
<tr key={p.song.id} className="lighthover" onClick={()=>{ <tr key={p.song.id} className="lighthover cursor" onClick={()=>{
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>